/* =============== mozilo PhotoSwipe Plugin - Styles ===============
   - Grid & Thumbnails (ehem. photoswipe-flexgrid.css)
   - SingleMode Cover (neu: Cover außerhalb der Grid-Galerie)
   - 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 (neu)
   - sichtbares Cover liegt außerhalb .ps-gallery
   - .ps-gallery.single ist nur Datencontainer und wird ausgeblendet
   ------------------------------ */
/* =========================================================
   PhotoSwipe Overlay - Zentrale Design-Parameter
   Hier können Farbe, Größe, Gewicht und Hintergrund
   an EINER Stelle angepasst werden
========================================================= */

.ps-cover-wrap {
  --ps-overlay-color: #ffcc00;                 /* Schriftfarbe */
  --ps-overlay-font-size: 0.7rem;              /* Schriftgröße */
  --ps-overlay-font-weight: 300;               /* dünne Schrift */
  --ps-overlay-bg: rgba(50, 50, 50, 0.5);      /* transparenter Grau-Ton */
}

.ps-cover-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
}

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

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

  /* Optik analog zu Thumbs (kannst Du nach Geschmack ändern) */
  border: 1px solid #c0c0c0;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0,0,0,.2);
}

/* =========================================================
   Single-Cover: Optischer Hinweis (data-overlay)
   Anforderungen:
   - ganz aus, wenn data-overlay fehlt (Default-Verhalten unverändert)
   - dauerhaft sichtbar, wenn data-overlay existiert (Mobile + Desktop)
   - Text/Symbol aus data-overlay
========================================================= */

.ps-cover-wrap { position: relative; }

/* [NEU 2025-12-18] Overlay nur, wenn data-overlay gesetzt ist */
.ps-cover-wrap[data-overlay]::after {
  content: attr(data-overlay);
  position: absolute;
  left: 10px;
  bottom: 10px;

  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;

  opacity: 1;
  transform: none;
}

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



/* =========================================================
   PhotoSwipe Single-Cover - Teaser-Layout (16:9, leichter Crop)
   Gilt in GridBoxen (.content-grid) UND FlexCards (.card .card-content)
========================================================= */

/* 16:9 Teaser-Wrapper in beiden Umgebungen */
.content-grid .ps-cover-wrap,
.card .card-content .ps-cover-wrap{
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* Bild füllt Teaser-Fläche (leichter Crop) */
.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 (überall) */
.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 -------- */
/* 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);
  }
}