/* Bild-Galerie-Section (Section/Gallery.php).
   Zwei Varianten via .image-gallery / .image-gallery.masonry (config über app.php).
   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 {
  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 {
  display: block;
  aspect-ratio: var(--gal-ratio, 4 / 3);
}

.image-gallery-grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition);
}

.image-gallery-grid a.gal-cell:hover img {
  transform: scale(1.03);
}

.image-gallery-grid 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);
}

/* --- 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;
}