/* Bild-Galerie-Section (Section/Gallery.php).
   Vier Varianten: .image-gallery (Raster), .image-gallery.masonry, .image-gallery[data-variant="carousel"],
   .image-gallery[data-variant="coverflow"].
   Breite/Padding/Header kommen aus sections/00-base.css. */

/* --- Grid (Default): gleichmäßige Kacheln --- */
.image-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  gap: var(--gap-block);
}

/* Feste Spaltenzahl je Galerie (gcols-N, aus den Anzeige-Optionen); große Zahlen mobil begrenzt. */
.image-gallery-grid.gcols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.image-gallery-grid.gcols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.image-gallery-grid.gcols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.image-gallery-grid.gcols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.image-gallery-grid.gcols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 61.999rem) {
  .image-gallery-grid.gcols-4,
  .image-gallery-grid.gcols-5,
  .image-gallery-grid.gcols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 47.999rem) {
  .image-gallery-grid.gcols-3,
  .image-gallery-grid.gcols-4,
  .image-gallery-grid.gcols-5,
  .image-gallery-grid.gcols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 33.999rem) {
  .image-gallery-grid.gcols-2,
  .image-gallery-grid.gcols-3,
  .image-gallery-grid.gcols-4,
  .image-gallery-grid.gcols-5,
  .image-gallery-grid.gcols-6 { grid-template-columns: 1fr; }
}

.image-gallery-grid figure,
.image-gallery[data-variant="carousel"] .slide {
  margin: 0;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg-alt);
}

/* Bildzelle: verlinkt (Lightbox) ODER statisch (span). Seitenverhältnis via --gal-ratio (Default 4/3). */
.image-gallery-grid figure > .gal-cell,
.image-gallery[data-variant="carousel"] .slide > .gal-cell {
  display: block;
  aspect-ratio: var(--gal-ratio, 4 / 3);
}

.image-gallery-grid img,
.image-gallery[data-variant="carousel"] .slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition);
}

.image-gallery-grid a.gal-cell:hover img,
.image-gallery[data-variant="carousel"] .slide a.gal-cell:hover img {
  transform: scale(1.03);
}

.image-gallery-grid figcaption,
.image-gallery[data-variant="carousel"] .slide figcaption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  text-align: start;
  color: var(--color-text-inverse);
  background: var(--scrim-heavy);
}

/* --- Karussell-Variante: horizontaler Streifen, geteiltes Slider-System (components/carousel.css + global/carousel.js,
   kein Autoplay). Kachel-Aussehen wie im Raster (Selektorlisten oben); hier nur Breite + Ausrichtung.
   Sichtbar: mobil ~1,4 (Anschnitt = „es geht weiter"), ab 34rem ~2,2, ab 48rem 4, ab 62rem --gal-per-view (Default 5). --- */
.image-gallery[data-variant="carousel"] .slider-track {
  padding-block: var(--space-2);   /* Platz für den Hover-Hub der Slides (components/carousel.css) */
}

.image-gallery[data-variant="carousel"] .slide {
  flex: 0 0 70%;
  scroll-snap-align: start;   /* Streifen: Kacheln bündig links, nicht zentriert wie beim Einzel-Slider */
}

@media (min-width: 34rem) {
  .image-gallery[data-variant="carousel"] .slide { flex-basis: 45%; }
}
@media (min-width: 48rem) {
  .image-gallery[data-variant="carousel"] .slide { flex-basis: calc((100% - 3 * var(--gap-block)) / 4); }
}
@media (min-width: 62rem) {
  .image-gallery[data-variant="carousel"] .slide {
    flex-basis: calc((100% - (var(--gal-per-view, 5) - 1) * var(--gap-block)) / var(--gal-per-view, 5));
  }
}

/* --- Coverflow-Variante: Bühne mit großem Mittelbild, Nachbarn kleiner + blasser, Autoplay + Punkte. Geteiltes
   Slider-System mit data-center (global/carousel.js setzt .is-current / .is-near). Vorbild: Wenzel Immobilien Erfurt
   (Legacy, slick). Kachelbreite aus der Slider-Breite (Container-Einheiten), damit das Innenpolster links/rechts
   genau so breit ist, dass auch die erste und letzte Kachel in die Mitte rücken können.
   Sichtbar: Handy 1 mit Anschnitt, ab 37,5rem höchstens 3, ab 62rem --gal-per-view (Default 5). --- */
.image-gallery[data-variant="coverflow"] .slider {
  container-type: inline-size;
  --cf-w: 64cqi;        /* Kachelbreite */
  --cf-scale: 1.05;     /* Mittelbild */
  --cf-near: 0.85;      /* direkte Nachbarn */
}

@media (min-width: 37.5rem) {
  .image-gallery[data-variant="coverflow"] .slider {
    --cf-w: calc(100cqi / min(var(--gal-per-view, 5), 3));
    --cf-scale: 1.25;
    --cf-near: 1;
  }
}
@media (min-width: 62rem) {
  .image-gallery[data-variant="coverflow"] .slider {
    --cf-w: calc(100cqi / var(--gal-per-view, 5));
    --cf-scale: 1.4;
    --cf-near: 1.05;
  }
}

.image-gallery[data-variant="coverflow"] .slider-track {
  position: relative;   /* Bezug für offsetLeft (carousel.js misst die Mitte) */
  gap: 0;               /* die Verkleinerung schafft die Abstände, das Mittelbild überlappt die Nachbarn */
  padding-inline: calc((100cqi - var(--cf-w)) / 2);
  /* Platz für das vergrößerte Mittelbild (Kachel 3:2) samt Schatten — der Track schneidet senkrecht ab. */
  padding-block: calc(var(--cf-w) * 2 / 3 * (var(--cf-scale) - 1) / 2 + var(--space-5));
}

.image-gallery[data-variant="coverflow"] .slider-track .slide {
  position: relative;
  z-index: 1;
  flex: 0 0 var(--cf-w);
  margin: 0;
  scroll-snap-align: center;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg-alt);
  box-shadow: var(--shadow-lg);
  transform: scale(0.85);
  opacity: 0.55;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Jede verlinkte Kachel öffnet die Lightbox → überall zoom-in (vorher: Seitenkacheln pointer = „zentrieren", nur die
   Mitte zoom-in). ⚠ Am <a class="gal-cell"> setzen, nicht am .slide: Browser geben Links `cursor: pointer`, das
   schlägt jeden geerbten Wert (Kernel-Anfrage KiWi web2284, 01.10.2026). */
.image-gallery[data-variant="coverflow"] .slide > a.gal-cell {
  cursor: zoom-in;
}

.image-gallery[data-variant="coverflow"] .slider-track .slide.is-near {
  z-index: 2;
  transform: scale(var(--cf-near));
  opacity: 0.85;
}

.image-gallery[data-variant="coverflow"] .slider-track .slide.is-current {
  z-index: 3;
  transform: scale(var(--cf-scale));
  opacity: 1;
}

.image-gallery[data-variant="coverflow"] .slide > .gal-cell {
  display: block;
  aspect-ratio: 3 / 2;
}

.image-gallery[data-variant="coverflow"] .slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bildunterschrift nur am Mittelbild — an den Seitenkacheln wäre sie zu klein zum Lesen. */
.image-gallery[data-variant="coverflow"] .slide figcaption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  text-align: start;
  color: var(--color-text-inverse);
  background: var(--scrim-heavy);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.image-gallery[data-variant="coverflow"] .slide.is-current figcaption {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .image-gallery[data-variant="coverflow"] .slider-track .slide,
  .image-gallery[data-variant="coverflow"] .slide figcaption { transition: none; }
}

/* Weiter-Link unter einem Anreißer (config.more_url), wie .magazine-more. */
.image-gallery .gallery-more {
  margin-block-start: var(--gap-block);
  text-align: center;
}

/* --- Masonry-Variante: variable Höhen (CSS-columns) --- */
.image-gallery.masonry .image-gallery-grid {
  display: block;
  column-count: 4;
  column-gap: var(--gap-block);
}

/* Feste Spaltenzahl je Galerie (gcols-N) auch im Masonry. */
.image-gallery.masonry .image-gallery-grid.gcols-2 { column-count: 2; }
.image-gallery.masonry .image-gallery-grid.gcols-3 { column-count: 3; }
.image-gallery.masonry .image-gallery-grid.gcols-4 { column-count: 4; }
.image-gallery.masonry .image-gallery-grid.gcols-5 { column-count: 5; }
.image-gallery.masonry .image-gallery-grid.gcols-6 { column-count: 6; }

@media (max-width: 79.499rem) {
  .image-gallery.masonry .image-gallery-grid,
  .image-gallery.masonry .image-gallery-grid.gcols-4,
  .image-gallery.masonry .image-gallery-grid.gcols-5,
  .image-gallery.masonry .image-gallery-grid.gcols-6 { column-count: 3; }
}
@media (max-width: 44.999rem) {
  .image-gallery.masonry .image-gallery-grid,
  .image-gallery.masonry .image-gallery-grid.gcols-3,
  .image-gallery.masonry .image-gallery-grid.gcols-4,
  .image-gallery.masonry .image-gallery-grid.gcols-5,
  .image-gallery.masonry .image-gallery-grid.gcols-6 { column-count: 2; }
}

.image-gallery.masonry .image-gallery-grid figure {
  break-inside: avoid;
  margin-block-end: var(--gap-block);
}

.image-gallery.masonry .image-gallery-grid figure > .gal-cell {
  aspect-ratio: auto;   /* natürliche Höhe im Masonry */
}

.image-gallery.masonry .image-gallery-grid img {
  height: auto;
}

/* --- Lightbox (global, lightbox.js) — überschreibt das generische dialog-Styling --- */
.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: var(--color-bg-dark);
  overflow: hidden;
  place-items: center;
}

.lightbox[open] {
  display: grid;
}

.lightbox > #lightbox-img {
  max-width: 92vw;
  max-height: 86dvh;
  object-fit: contain;
}

.lightbox [data-closes] {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-4);
  z-index: 2;
}

.lightbox .lightbox-nav {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  padding: var(--space-3);
  border: none;
  border-radius: 50%;
  background: var(--scrim-light);
  color: var(--color-text-inverse);
  cursor: pointer;
  transition: background var(--transition);
}

.lightbox .lightbox-nav:hover {
  background: var(--scrim-heavy);
}

.lightbox .lightbox-nav.prev { inset-inline-start: var(--space-4); }
.lightbox .lightbox-nav.next { inset-inline-end: var(--space-4); }

.lightbox .lightbox-caption {
  position: absolute;
  inset-block-end: var(--space-5);
  inset-inline: 0;
  margin: 0;
  padding-inline: var(--space-4);
  text-align: center;
  color: var(--color-text-inverse);
}

.lightbox .lightbox-counter {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-inverse);
  opacity: 0.7;
}