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

.image-gallery-grid figure {
  margin: 0;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg-alt);
}

.image-gallery-grid figure > a {
  display: block;
  aspect-ratio: 4 / 3;
}

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

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

@media (max-width: 79.499rem) {
  .image-gallery.masonry .image-gallery-grid { column-count: 3; }
}
@media (max-width: 44.999rem) {
  .image-gallery.masonry .image-gallery-grid { 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 > a {
  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;
}