/* =====================================================================
   Media-Lightbox - Styles
   =====================================================================
   Nach docs/media-pdf-lightbox/media-pdf-lightbox.md (Spec 2/3).
   Klassen aus der Vorlage, Fallback-Werte an Projekt angepasst:
   Fokus-Farbe = LAV-Orange (#e79a63), Fehlerflaeche = LAV-Braunrot.
   Struktur:
   - Dialog (Vollbild-Overlay, natives <dialog> + showModal())
   - Toolbar oben (Titel + Buttons), Stage Mitte, Leiste unten
   - Bilder: <img> in Scroll-Wrapper (Zoom scrollbar erreichbar)
   - PDF: Canvas + TextLayer (PDF-Adapter), eigene Toolbar-Buttons
   - Motion gekapselt, prefers-reduced-motion respektiert
   ===================================================================== */

/* ---------- Tokens ---------- */
.ml {
  /* Farben */
  --ml-bg: rgb(15 23 42 / 0.96);
  --ml-surface: rgb(15 23 42 / 0.6);
  --ml-border: rgb(255 255 255 / 0.35);
  --ml-text: #ffffff;
  --ml-text-muted: rgb(255 255 255 / 0.72);
  --ml-focus: #e79a63;
  --ml-error-bg: #7f1d1d;
  --ml-error-text: #fecaca;

  /* Geometrie */
  --ml-control: 44px;            /* Touch-Ziele, Spec 3 */
  --ml-radius: 4px;
  --ml-toolbar-y: calc(var(--ml-control) + 24px);
  --ml-bar-y: calc(var(--ml-control) + 24px);

  /* Motion */
  --ml-dur: 200ms;
  --ml-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Dialog ---------- */
.ml {
  border: 0;
  padding: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  background: var(--ml-bg);
  color: var(--ml-text);
  overflow: hidden;
}
.ml::backdrop {
  background: transparent; /* Dialog ist selbst das Overlay */
}
/* Geschlossener Dialog: garantiert aus Anzeige + Tab-Reihenfolge.
   Ein unbedingtes display:flex darf die geschlossene Darstellung
   nicht reaktivieren (Spec 3). */
.ml:not([open]) {
  display: none;
}

/* ---------- Toolbar (oben) ---------- */
.ml__toolbar {
  position: absolute;
  inset: 0 0 auto 0;
  min-height: var(--ml-toolbar-y);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(rgb(0 0 0 / 0.55), transparent);
}
.ml__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font: 600 0.9375rem/1.4 inherit;
  font-family: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ml__count {
  flex: none;
  font-size: 0.8125rem;
  color: var(--ml-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- Buttons (Toolbar + Navigation) ---------- */
.ml__btn {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--ml-control);
  height: var(--ml-control);
  padding: 0;
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius);
  background: var(--ml-surface);
  color: var(--ml-text);
  cursor: pointer;
  transition: background var(--ml-dur) var(--ml-ease-out);
}
.ml__btn:hover { background: rgb(255 255 255 / 0.16); }
.ml__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.ml__btn:focus-visible {
  outline: 3px solid var(--ml-focus);
  outline-offset: 2px;
}
.ml__btn .icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
/* Drucken = echter Link, optisch wie Buttons (Spec 3) */
a.ml__btn {
  display: grid;
  text-decoration: none;
}

/* ---------- Stage (Mitte) ---------- */
.ml__stage {
  position: absolute;
  inset: var(--ml-toolbar-y) 0 var(--ml-bar-y) 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* Scroll-Wrapper: gezoomte Inhalte bleiben scrollbar erreichbar
   (Spec 3: kein unerreichbarer negativer Ueberlauf). */
.ml__viewport {
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  display: grid;
  place-items: center;
  padding: 16px;
}
.ml__viewport img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: var(--ml-radius);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.35);
}
/* Zoom setzt width per JS (Layout, nicht transform) - max-Regeln hier
   aus, sonst klemmt der gezoomte Zustand an der Einpassung. */
.ml__viewport img[style*="width"] {
  max-width: none;
  max-height: none;
}
.ml__viewport img[hidden] { display: none; }

/* ---------- Leiste (unten) ---------- */
.ml__bar {
  position: absolute;
  inset: auto 0 0 0;
  min-height: var(--ml-bar-y);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 64px;
  text-align: center;
  background: linear-gradient(transparent, rgb(0 0 0 / 0.55));
}
.ml__caption {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ml-text);
  overflow-wrap: anywhere;
}
.ml__zoom {
  font-size: 0.8125rem;
  color: var(--ml-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- Navigation (Bildwechsel) ---------- */
.ml__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}
.ml__nav--prev { left: 16px; }
.ml__nav--next { right: 16px; }

/* Bei PDF-Anzeige sind die Navigationspfeile grundsaetzlich nicht sichtbar (Nutzer-Beschluss 2026-10-11). */
dialog.ml[data-type="pdf"] .ml__nav {
  display: none !important;
}

/* ---------- Status / Fehler / Laden ---------- */
/* Screenreader-Live-Zone: visuell versteckt, fuer SR erreichbar */
.ml__live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.ml__status {
  position: absolute;
  inset: auto 16px calc(var(--ml-bar-y) + 8px) 16px;
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--ml-radius);
  background: var(--ml-error-bg);
  color: var(--ml-error-text);
  font-size: 0.875rem;
  line-height: 1.5;
}
.ml__status[hidden] { display: none; }
.ml__status a {
  color: inherit;
  text-underline-offset: 3px;
}
.ml__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 48px;
  height: 48px;
  color: var(--ml-text);
}
.ml__spinner[hidden] { display: none; }
.ml__spinner .icon {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- PDF (PDF-Option = ja) ---------- */
.ml__pdf {
  position: absolute;
  inset: var(--ml-toolbar-y) 0 var(--ml-bar-y) 0;
  overflow: auto;
  display: none;
  padding: 16px;
  /* Horizontaler Scrollbalken muss sichtbar bleiben: scrollbar-gutter
     reserviert die Leiste IM Container. Zusaetzlich endet der Container
     ueber der .ml__bar - die absolute Leiste ueberdeckte den Balken
     (Nutzer-Meldung Runde 5). */
  scrollbar-gutter: stable;
  /* Platz fuer den horizontalen Balken UNTER dem Inhalt, damit die
     Leiste (.ml__bar) ihn nicht ueberdeckt: unterer Innenabstand. */
  padding-bottom: 24px;
  contain: strict;
  overscroll-behavior: contain;
}
/* PDF: untere Leiste schwebt zentriert ueber dem Inhalt mit z-index und
   kompakter Hoehe, damit sie bei horizontalem Scroll/Zoom nie abgeschnitten wird. */
.ml[data-type="pdf"] .ml__bar {
  background: rgb(0 0 0 / 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--ml-radius);
  pointer-events: none;
  z-index: 10;
  inset: auto auto 16px 50%;
  transform: translateX(-50%);
  min-height: auto;
  padding: 6px 16px;
  gap: 8px;
  flex-direction: row;
}
.ml[data-type="pdf"] .ml__bar .ml__caption {
  display: none;
}
.ml[data-type="pdf"] .ml__pdf { display: block; }
.ml[data-type="pdf"] .ml__viewport { display: none; }
/* Scroll-Modus: Seiten-Stapel. .ml__pdfPage = Host, den der Adapter
   mit .ml__pdfPageItem-Elementen fuellt (eine pro PDF-Seite). */
.ml__pdfPage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: max-content;
  min-width: 100%;
  margin: 0 auto;
  contain: layout;
}
.ml__pdfPageItem {
  position: relative;
  flex: none;
}
/* Platzhalter in Seitengroesse bis das Canvas gerendert ist (kein
   Layout-Sprung beim Scrollen). */
.ml__pdfPlaceholder {
  border-radius: var(--ml-radius);
  background: rgb(255 255 255 / 0.06);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.35);
}
.ml__pdfPlaceholder[hidden] { display: none; }
.ml__canvas {
  display: block;
  max-width: 100%;
  border-radius: var(--ml-radius);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.35);
}
/* Gezoomte Seiten: Canvas in voller Zielbreite - der Scroll-Container
   (.ml__pdf, overflow:auto) liefert den horizontalen Scrollbalken.
   max-width:100% hier wuerde die Seite zusammendruecken statt
   scrollbar zu machen (Nutzer-Meldung Runde 4). */
.ml__pdfPageItem[data-zoomed] .ml__canvas {
  max-width: none;
}
/* TextLayer: Auswahl ueber dem Canvas (PDF.js-Struktur) */
.ml__textLayer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  line-height: 1;
  opacity: 1;
  /* pdf.js TextLayer positioniert mit calc(var(--scale-factor)*Npx) -
     die Variable muss auf dem Container gesetzt sein (Wert = viewport
     scale, wird vom Adapter je Seite gesetzt). */
  --scale-factor: 1;
}
.ml__textLayer span {
  position: absolute;
  color: transparent;
  /* Site-CSS hat * { text-shadow: 0 0 1px #999 } (Joomla-Referenz).
     Der Schatten wuerde die transparenten TextLayer-Spans als grauen
     Hauch sichtbar machen - hier explizit aus. */
  text-shadow: none;
  cursor: text;
  transform-origin: 0 0;
  white-space: pre;
}
/* pdf.js markiert das Layer-Ende fuer Wort-fuer-Wort-Auswahl. */
.ml__textLayer ::selection {
  background: rgb(59 130 246 / 0.4);
}
.ml__textLayer span::selection {
  background: rgb(59 130 246 / 0.4);
}
.ml__pageInfo {
  font-size: 0.8125rem;
  color: var(--ml-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- Motion: nicht essenzielle Bewegung gekapselt ---------- */
@media (prefers-reduced-motion: no-preference) {
  .ml__viewport img {
    animation: ml-fade var(--ml-dur) var(--ml-ease-out);
  }
  @keyframes ml-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .ml__spinner .icon {
    animation: ml-spin 900ms linear infinite;
  }
  @keyframes ml-spin {
    to { transform: rotate(360deg); }
  }
}

/* ---------- Kleine Viewports (Spec 4: 320/375 px) ---------- */
@media (max-width: 480px) {
  .ml__toolbar {
    padding: 8px 8px;
    gap: 4px;
  }
  .ml__title {
    font-size: 0.8125rem;
  }
  .ml__btn {
    width: 40px;
    height: 40px;
  }
  .ml__bar {
    padding: 8px 48px;
  }
}