/* VRCC Local Fixes - Galerie: erst die Uebersicht, dann das einzelne Bild.

   Gehoert zu assets/gallery-grid.js. Alle Regeln haengen an der Klasse
   .vrcc-gg, die ausschliesslich das Skript setzt - und zwar erst dann, wenn
   es den Slider von Priority Marketing und genuegend Bilder vorgefunden hat.
   Ohne diese Klasse ist die Datei wirkungslos, die Galerie sieht also
   unveraendert aus, wenn das Skript nicht greift.

   Zum pointer-events: Die Villenvorlage setzt pointer-events: none auf
   .e-off-canvas__content (siehe gallery.css). Der Slider schaltet das fuer
   sich selbst wieder an; unsere Ebene muss dasselbe tun, sonst waere das
   Raster nicht anklickbar. */

.swiper-thumbnail-container.vrcc-gg {
  position: relative;
}

/* --- Raster ------------------------------------------------------------- */

.vrcc-gg__panel {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 2;
}

/* Das Raster deckt das Panel vollflaechig ab. Fixiert, damit es unabhaengig
   von der Hoehe des Shortcode-Containers den ganzen Bildschirm fuellt und der
   Seiteninhalt nicht mehr durch den halbdurchsichtigen Overlay
   durchscheint - bei einem einzelnen grossen Bild ist das stimmig, hinter
   einem Raster aus 55 Kacheln ist es Unruhe.

   Bewusst an aria-hidden="false" gebunden: Elementor setzt das Attribut,
   solange das Panel geoeffnet ist. Damit kann diese Ebene den Bildschirm
   nicht einnehmen, wenn die Galerie zu ist - auch dann nicht, wenn eine
   kuenftige Elementor-Fassung das geschlossene Panel anders verstecken
   sollte als heute (visibility: hidden, opacity: 0). */
.e-off-canvas[aria-hidden="false"] .vrcc-gg--grid .vrcc-gg__panel {
  position: fixed;
  inset: 0;
  padding: 62px 24px 24px;
  background: rgba(23, 31, 42, 0.97);
}

.vrcc-gg--single .vrcc-gg__panel {
  display: none;
}

.vrcc-gg__bar {
  flex: 0 0 auto;
  /* Rechts bleibt Platz fuer den Close-Button der Vorlage, der absolut in der
     oberen rechten Ecke sitzt. */
  padding: 0 130px 14px 2px;
  color: #fff;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  opacity: 0.85;
}

.vrcc-gg__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  padding-bottom: 8px;
}

.vrcc-gg__tile {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  aspect-ratio: 3 / 2;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.vrcc-gg__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vrcc-gg__tile:hover,
.vrcc-gg__tile:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  outline: none;
}

.vrcc-gg__tile:focus-visible {
  box-shadow: 0 0 0 2px #b49a6a;
}

/* Fallback fuer Browser ohne aspect-ratio. */
@supports not (aspect-ratio: 3 / 2) {
  .vrcc-gg__tile {
    height: 0;
    padding-bottom: 66.6667%;
    position: relative;
  }

  .vrcc-gg__tile img {
    position: absolute;
    inset: 0;
  }
}

/* --- Einzelbild --------------------------------------------------------- */

/* Slider und Leiste werden im Raster NICHT ausgeblendet, sondern nur
   verdeckt. Das ist Absicht: ein Swiper, der auf display: none steht, misst
   seine Slides mit Breite 0, und ein slideTo() auf so einen Slider landet
   beim ersten Bild statt beim angeklickten. Das Raster liegt ohnehin
   deckend darueber, es gibt also nichts zu verbergen. */

.vrcc-gg__back {
  pointer-events: auto;
  position: absolute;
  top: 12px;
  left: 24px;
  z-index: 101;
  display: none;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  background: rgba(31, 42, 56, 0.55);
  color: #fff;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  backdrop-filter: blur(4px);
}

.vrcc-gg__back::before {
  content: "\2190";
  margin-right: 7px;
}

.vrcc-gg--single .vrcc-gg__back {
  display: block;
}

.vrcc-gg__back:hover,
.vrcc-gg__back:focus-visible {
  border-color: #b49a6a;
  color: #b49a6a;
  outline: none;
}

/* --- Kleine Bildschirme ------------------------------------------------- */

@media (max-width: 767px) {
  .vrcc-gg__grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
  }

  .vrcc-gg__bar {
    padding-right: 96px;
    font-size: 14px;
  }

  .vrcc-gg__back {
    left: 12px;
    padding: 6px 11px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vrcc-gg__tile {
    transition: none;
  }

  .vrcc-gg__tile:hover,
  .vrcc-gg__tile:focus-visible {
    transform: none;
  }
}