/* =============== mozilo PhotoSwipe Plugin - Styles ===============
   - Grid & Thumbnails (ehem. photoswipe-flexgrid.css)
   - UI-Ergänzungen (Autoplay)
   - Safety-Patch
   Hinweis: PhotoSwipe-Core + Skin bleiben als Vendor-CSS separat.
================================================================== */


/* --- Galerie: responsiv + zentriert, feste Zielbreite pro Thumb --- */
.ps-gallery {
  /* Custom Properties (werden serverseitig per Inline-Style überschrieben) */
  --cell-size: 180px;
  --gap: 12px;

  display: grid;

  /* Behält die Zielbreite, darf bei Bedarf schrumpfen ? kein horizontaler Overflow */
  grid-template-columns: repeat(auto-fit, minmax(0, var(--cell-size)));
  gap: var(--gap);

  /* Container am Viewport ausrichten, letzte Reihe zentriert */
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;

  /* Feinschliff */
  justify-items: stretch;
  align-items: start;
  padding: 0;
  list-style: none;
}

/* Nur das erste Thumbnail zeigen, wenn die Galerie als "single" gerendert wird */
.ps-gallery.single .ps-item:not(:first-child) {
  display: none !important;
}


/* -------- Einzelelement/Kachel -------- */
.ps-item {
  display: block;
}

/* Klickbarer Bereich & Bild */
.ps-item a {
  display: block;
  text-decoration: none;
}

.ps-item img.thumbnail {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #c0c0c0;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0,0,0,.2);
}


/* -------- Untertitel (Captions) unter Thumbnails -------- */
/* Grundstil: immer sichtbar, wenn im HTML vorhanden */
.ps-item .caption {
  display: block;                /* überschreibt evtl. ältere display:none-Regeln */
  margin-top: .4rem;
  font-size: .9rem;
  line-height: 1.25;
  text-align: center;
  color: #444;
}

/* Optional: wenn .captions am Galerie-Container hängt ? 2-Zeilen-Clamp */
.ps-gallery.captions .ps-item .caption {
  display: -webkit-box;          /* Multiline Clamp (WebKit) */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-height: calc(1.25em * 2);
}


/* -------- Responsive Feinschliff -------- */
@media (max-width: 600px) {
  .ps-gallery {
    /* greift trotz Inline-Var wegen !important, falls gesetzt */
    --cell-size: 200px !important;  /* bei Bedarf anpassen */
    justify-items: center;
  }
}


/* -------- UI-Ergänzungen (Autoplay-Button) -------- */
.pswp__button--autoplay {
  /* http://www.iconsplace.com/white-icons/play-icon */
  background: transparent url(img/play.png) no-repeat 16px 14px !important;
}

.pswp__button--autoplay.stop {
  /* http://www.iconsplace.com/white-icons/stop-icon */
  background-image: url(img/stop.png) !important;
}


/* -------- Safety-Patch --------
   Verhindert, dass die (versteckte) Lightbox noch Pointer-Events abfängt */
.pswp[aria-hidden="true"] {
  pointer-events: none;
}


/* -------- Fallback für sehr alte Browser (ohne CSS Grid) -------- */
@supports not (display: grid) {
  .ps-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    justify-content: center;
  }
  .ps-gallery .ps-item {
    width: var(--cell-size);
  }
}