/* lightbox.css
   ------------------------------------------------------------
   - Schlanke Basis + Fokus-/A11y-Verbesserungen
   - Respektiert prefers-reduced-motion
   - Basis-Thumbnailbreite für EINZELBILDER (außerhalb Grid)
   - Einheitliche Kacheln per Cropping NUR in .gallery-grid
   - Passt zu den Selektoren der Vanilla-JS-Version
   ------------------------------------------------------------ */

* { box-sizing: border-box; }

/* ------------------------------------------------------------
   Globale Variablen
   ------------------------------------------------------------ */
:root {
  /* Standardbreite der Einzelbild-Vorschau (kann seiten-/themenspezifisch überschrieben werden) */
  --lb-thumb-width: 250px;
}

/* ------------------------------------------------------------
   THUMBNAIL / TRIGGER (Standard – außerhalb von .gallery-grid)
   ------------------------------------------------------------ */
.lightbox-item {
  display: inline-block;    /* nötig, damit :focus sichtbar ist */
  cursor: pointer;
}

/* Rahmen/Optik der Thumbnail-Hülle */
.lightbox-item > figure,
.lightbox-item > img {
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  max-width: 100%;
}

/* Basis-Thumbnailgröße für EINZELBILDER */
.lightbox-item img {
  width: var(--lb-thumb-width);
  height: auto;
  display: block;
}
.lightbox-item > figure {
  width: var(--lb-thumb-width);
}

/* Tastaturfokus sichtbar */
.lightbox-item:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Captions (unter Thumbnail & im Modal) */
.lightbox-item figcaption,
.lightbox-modal figcaption {
  text-align: center;
  font-size: 12px;
  margin-top: .5rem;
  color: #ddd;
}

/* ------------------------------------------------------------
   MODAL / OVERLAY
   ------------------------------------------------------------ */
.lightbox-modal {
  display: flex;
  flex-flow: column nowrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0,0,0,0.9);  /* Overlay-Farbe */
  /* Optionaler Blur:
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  */
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  color: #fff;
  outline: none; /* Fokus-Rahmen setzen wir gezielt auf interaktiven Elementen */
}

/* Inhalt im Modal kapseln – Klicks aufs Overlay schließen nur außerhalb */
.lightbox-content {
  position: relative;
  max-height: 90vh;
  max-width: 90vw;
  border-radius: 8px; /* weiche Ecken für das große Bild+Caption */
  overflow: hidden;   /* saubere Kanten */
}

/* Sichtbarer Zustand */
.lightbox-modal.show {
  opacity: 1;
  pointer-events: all;
}

/* Bildgrößen im Modal – immer vollständig zeigen */
.lightbox-modal img {
  max-height: 90vh;
  max-width: 90vw;
  height: auto;
  width: auto;
  display: block;
  object-fit: contain;
}

/* Close-Button */
.lightbox-modal .close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  border: 0;
  background: transparent;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  color: #fff;
  padding: .25rem;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.lightbox-modal .close:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Optional: Body-Zustand – zusätzlich zum JS-Fix mit position:fixed */
body.lightbox-open {
  overflow: hidden;
}

/* ------------------------------------------------------------
   OPTIONALES GALERIE-GRID (mehrere Thumbnails nebeneinander)
   - Einheitliche Kacheln mit Cropping
   - Scoping NUR auf .gallery-grid (Einzelbilder bleiben klein)
   ------------------------------------------------------------ */
.gallery-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

/* Rahmen im Grid reduzieren/entfernen und Maße vom Basis-Thumb aufheben */
.gallery-grid .lightbox-item > figure,
.gallery-grid .lightbox-item > img {
  width: auto;            /* überschreibt var(--lb-thumb-width) */
  border-radius: 8px;
  padding: 0;
  border: none;
}

/* Bild füllt die Kachel – Cropping für ruhiges Raster */
.gallery-grid .lightbox-item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;    /* Alternative: 1 / 1, 3 / 2, 16 / 9 */
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* Figure im Grid bekommt ebenfalls die Kachelbreite */
.gallery-grid .lightbox-item > figure {
  width: auto;
}

/* Gleichmäßige Caption-Höhe (optional) */
.gallery-grid .lightbox-item figcaption {
  min-height: 1.5em;
}

/* ------------------------------------------------------------
   BEWEGUNGSPRÄFERENZ
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .lightbox-modal { transition: none; }
}