/* =============== mozilo PhotoSwipe Plugin - Styles ===============
   Stand: 30.03.2026

   - Grid & Thumbnails
   - SingleMode Cover außerhalb der Grid-Galerie
   - Overlay-Text auf Single-Cover
   - 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;
}


/* =========================================================
   SingleMode - Grundregeln
   - sichtbares Cover liegt außerhalb .ps-gallery
   - .ps-gallery.single ist nur Datencontainer und wird ausgeblendet
   - Overlay-Variablen zentral an einer Stelle
========================================================= */

.ps-cover-wrap {
  --ps-overlay-color: #ffcc00;
  --ps-overlay-font-size: 0.7rem;
  --ps-overlay-font-weight: 300;
  --ps-overlay-bg: rgba(50, 50, 50, 0.5);

  position: relative;
  box-sizing: border-box;
}

.ps-cover-link {
  text-decoration: none;
}

.ps-cover-image {
  display: block;
  max-width: 100%;
  height: auto;
}


/* ===== Overlay-Text für Single-Cover ===== */
.ps-cover-wrap[data-overlay]::after {
  content: attr(data-overlay);
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 3;

  max-width: calc(100% - 20px);
  padding: 4px 8px;
  border-radius: 3px;

  background: var(--ps-overlay-bg);
  color: var(--ps-overlay-color);

  font-size: var(--ps-overlay-font-size);
  font-weight: var(--ps-overlay-font-weight);
  line-height: 1.1;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);

  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Optionales Desktop-Enhancement */
@media (hover: hover) and (pointer: fine) {
  .ps-cover-wrap[data-overlay]:hover::after {
    background: rgba(0, 0, 0, 0.45);
  }
}


/* =========================================================
   Single-Cover in Layout-Umgebungen
   - Teaser-Layout (16:9, leichter Crop)
   - gilt in GridBoxen (.content-grid) und FlexCards (.card .card-content)
========================================================= */

.content-grid .ps-cover-wrap,
.card .card-content .ps-cover-wrap {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.content-grid .ps-cover-image,
.card .card-content .ps-cover-image {
  height: 100%;
  object-fit: cover;
}

/* cards-media-top: Cover bündig oben in .content-box (full-bleed) */
.content-grid.cards-media-top .content-box .ps-cover-wrap {
  margin: 0 -1rem 1rem;
  width: calc(100% + 2rem);
  max-width: none;
  border-radius: 0;
}


/* Optionaler Hover-Hinweis */
.ps-cover-image {
  transition: transform .25s ease, filter .25s ease;
}

.ps-cover-link:hover .ps-cover-image {
  transform: scale(1.02);
  filter: brightness(1.03);
}


/* Der Single-Datencontainer wird komplett ausgeblendet */
.ps-gallery.single.ps-gallery--hidden {
  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 -------- */
.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;
  -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;
    justify-items: center;
  }
}


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

.pswp__button--autoplay.stop {
  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);
  }
}


/* =========================================================
   SingleMode Layout
   - macht einzelne Plugin-Instanzen inline-fähig
   - steuert die Breite zentral
   - vereinheitlicht die Vorschauhöhe mit leichtem Crop
========================================================= */

.picture.ps-picture--single {
  --ps-cover-width: 320px;
  --ps-cover-gap-right: 1rem;
  --ps-cover-gap-bottom: 1rem;
  --ps-cover-ratio: 4 / 3;

  display: inline-block;
  vertical-align: top;
  clear: none;
  float: none;
  box-sizing: border-box;

  width: min(var(--ps-cover-width), 100%);
  max-width: 100%;

  margin: 0 var(--ps-cover-gap-right) var(--ps-cover-gap-bottom) 0;
}

.picture.ps-picture--single .ps-cover-wrap {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  aspect-ratio: var(--ps-cover-ratio);
  overflow: hidden;

  border: 1px solid #c0c0c0;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
}

.picture.ps-picture--single .ps-cover-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.picture.ps-picture--single .ps-cover-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;

  object-fit: cover;
  object-position: center center;

  border: 0;
  border-radius: 0;
  box-shadow: none;
}