/*
 * gallery.css
 * --------------------------------------------------------------------------
 * Redaktionelle Bilderstrecke (.strip-*) + Lightbox-Overlay (.lb-*) — EINE
 * Quelle für alle Flächen. Eingebunden per
 *   <link rel="stylesheet" href="/gallery.css">  (zusammen mit /gallery.js)
 *
 * Herkunft des Lightbox-Teils: das erprobte Inline-Muster aus stimmen.html
 * (Overlay, Bild, Schließen, Pfeile, Zähler). Klassenpräfix lb- bewusst
 * beibehalten, damit stimmen.html später auf dieses Modul gezogen werden kann,
 * ohne Markup umzubenennen (eigenes Ticket).
 *
 * Abgrenzung zu seq.css: seq blendet mehrere Bilder AN DERSELBEN Stelle über
 * (Karten-Sequenz). Die Strecke zeigt Bilder NEBENEINANDER und öffnet auf Klick
 * das Overlay. Andere Aufgabe, getrennte Dateien — seq.* bleibt unangetastet.
 *
 * Tokens mit Fallback, da die einbindenden Seiten zwei Token-Generationen
 * nutzen (--oro/--carta neu, --gold/--creme alt).
 */

/* ── Strecke ────────────────────────────────────────────────────────────── */
/* Die Sektion erbt Breite und Innenabstand von der Seitenregel `section`
   (max-width var(--content-width), padding 0 var(--mgutter)) — dadurch fluchtet
   die Strecke exakt mit Hero und Fließtext. Hier bewusst KEINE eigene Breite. */
.strip-section {
  /* Nur der vertikale Rhythmus; alles Übrige kommt von `section`. */
}

/* Breiten-Anker der Strecke. Das Modul besitzt seine Breite selbst — Markup aus
   dem imageStrip-Helper (main.ts), Regel hier. Vorher lag die Breite im
   <style>-Block der einbindenden Seite; das war eine zweite Quelle für dieselbe
   Größe und in der Kaskade nicht deterministisch.
   960px = die gemeinsame Fluchtbreite der Detailseite (--flush-width in
   erlebnis.hbs). Bewusst als Zahl, nicht als var(): gallery.css ist geteilt und
   darf keine Variable voraussetzen, die eine einbindende Seite vielleicht nicht
   definiert. Unter 960px Viewport greift die Grenze ohnehin nicht. */
.strip-flush {
  max-width: 960px;
  margin-inline: auto;
}

/* Redaktionelles Paar: EINE Reihe, links Hochformat, rechts Querformat, beide
   exakt gleich hoch und an OBER- wie UNTERKANTE bündig.
   Die Zahlen sind hergeleitet, nicht geschätzt. Mit Innenbreite W = 960 und
   gap g = 24 bleiben 936px für die Kacheln. Gesucht ist die Aufteilung, bei der
   die Hochformat-Kachel (3:4) und die Querformat-Kachel (4:3) DIESELBE Höhe h
   ergeben:
       p * 4/3 = h            (Hochformat: Höhe aus Breite)
       (936 - p) / h = 4/3    (Querformat soll 4:3 werden)
   →   16p = 9(936 - p) → p = 337 → h = 449 → Querformat 599 × 449 = 4:3. ✓
   337 / 936 = 36 %, also die Spalten 36fr : 64fr — fr verteilt den Raum NACH
   Abzug des gap, die Rechnung geht damit auf jeder Breite auf.
   Die Zeilenhöhe kommt allein aus der Hochformat-Kachel; die Querformat-Kachel
   bekommt bewusst KEIN eigenes aspect-ratio und wird per align-self: stretch
   (Grid-Default) exakt darauf gezogen. Nur so sind beide Unterkanten bündig —
   zwei eigene Seitenverhältnisse ergäben zwei Höhen. */
.strip {
  display: grid;
  grid-template-columns: 36fr 64fr;
  gap: 24px;
  margin-top: 22px;
}
/* Nur ein Zusatzbild → eine einzelne bündige Fläche im Format 3/2. */
.strip--single {
  grid-template-columns: 1fr;
}
.strip-tile--portrait { aspect-ratio: 3 / 4; }
/* .strip-tile--landscape bekommt bewusst KEIN aspect-ratio (siehe oben). */

/* Die Höhe kommt aus dem Seitenverhältnis der Hochformat-Kachel, nicht aus einem
   festen Pixelwert (früher 340px / mobil 220px) — so skaliert das Paar auf jeder
   Breite mit und schneidet hochformatige Motive nicht zu Streifen.
   background-position liest --focal, falls eine Fläche einen Bildfokus setzt
   (gleiche Konvention wie .hero-photo in erlebnis.hbs); sonst center. */
.strip-item {
  position: relative;          /* Anker für den Hover-Schleier (::after) */
  /* PFLICHT, nicht kosmetisch: Grid-Items haben min-width:auto. Zusammen mit
     aspect-ratio überträgt der Browser die Zeilenhöhe zurück in eine Mindest-
     BREITE, und das Grid läuft über seinen Container hinaus — weder max-width
     am Grid noch am Wrapper hält es auf. min-width:0 gibt den Items das
     Schrumpfen zurück. */
  min-width: 0;
  background-size: cover;
  background-position: var(--focal, center);
  background-color: var(--creme-deep, #EFE7DA);
  cursor: pointer;
}
/* Einzelne Kachel läuft über die volle Breite — dort bleibt 3:2, ein 4:3 wäre
   auf 1200px über 900px hoch und würde die Seite sprengen. */
.strip--single .strip-item {
  aspect-ratio: 3 / 2;
}
/* Hover: KEIN Lupen-Cursor, KEIN Icon — nur ein sanftes Abdunkeln. Die Kachel
   bleibt still und zeigt Klickbarkeit über den Ton, nicht über ein Symbol. */
.strip-item::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(28, 28, 26, 1);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.strip-item:hover::after,
.strip-item:focus-visible::after {
  opacity: 0.15;
}
.strip-item:focus-visible {
  outline: 2px solid var(--oro, var(--gold, #B8975A));
  outline-offset: 3px;
}

/* Mobil: gestapelt, volle Breite. Untereinander gibt es keine gemeinsame Zeilen-
   höhe mehr, die die Querformat-Kachel tragen könnte — sie bekommt hier deshalb
   ihr eigenes 4:3, die Hochformat-Kachel behält 3:4. Beide wachsen mit der
   Spaltenbreite (@390px, --mgutter 18px: 354 breit → 472 bzw. 266 hoch).
   Breakpoint 767px: derselbe Wert, an dem die Detailseite ihr Overlay auflöst. */
@media (max-width: 767px) {
  .strip {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 18px;
  }
  .strip-tile--landscape { aspect-ratio: 4 / 3; }
}

/* Jede Flaeche, die die Lightbox oeffnet, zeigt das auch am Zeiger — seit dem
   Umbau ist das auch der Hero, nicht mehr nur die Kachel. */
[data-lb-index] { cursor: pointer; }

/* ── Lightbox ───────────────────────────────────────────────────────────── */
.lb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(28, 28, 26, 0.94);
  align-items: center;
  justify-content: center;
}
.lb-overlay.open { display: flex; }

/* max-height war 82vh: die Thumbleiste am unteren Rand braucht den Platz,
   sonst laege sie auf dem Bild. */
.lb-img {
  max-width: 88vw;
  max-height: 72vh;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.lb-close {
  position: absolute;
  z-index: 5;
  top: 20px;
  right: 28px;
  font-family: var(--mono, 'DM Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px;
}
.lb-close:hover { color: #FFFFFF; }

/* Tap-Zonen: die eigentliche Trefferflaeche zum Blaettern. Je 32 % der Breite,
   volle Hoehe, ueber dem Bild und unter dem Schliessen-Knopf. Sie sind bewusst
   unsichtbar: der Daumen trifft die halbe Bildhoehe, das Auge bleibt beim Motiv.
   Die mittleren 36 % gehoeren dem Bild und loesen nichts aus. */
.lb-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32%;
  z-index: 2;
  cursor: pointer;
  background: none;
}
.lb-zone--prev { left: 0; }
.lb-zone--next { right: 0; }

/* Pfeile: 48x48 als Mindest-Trefferflaeche (Fingerkuppe), kreisrund auf
   halbtransparentem Dunkel. Ohne diesen Grund verschwanden sie auf hellen
   Seebildern. Immer sichtbar, kein Hover-Gate — auf dem Telefon gibt es kein
   Hover. Position bleibt absolut, Bezug ist jetzt die Zone. */
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 28px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(19, 31, 28, 0.55);
  border: none;
  cursor: pointer;
  padding: 0;
}
.lb-nav:hover { color: var(--oro, var(--gold, #B8975A)); }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }

/* Zaehler als Pille oben mittig (war unten): unten steht jetzt die Thumbleiste. */
.lb-counter {
  position: absolute;
  z-index: 5;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono, 'DM Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(19, 31, 28, 0.55);
  padding: 5px 12px;
  border-radius: 999px;
}

/* Thumbleiste: der vollstaendige Satz auf einen Blick, waagerecht scrollbar.
   Liegt ueber den Tap-Zonen, sonst blaettert ein Griff nach der Kachel. */
.lb-thumbs {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;
  padding: 14px 16px 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.lb-thumbs::-webkit-scrollbar { display: none; }
.lb-thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.3s ease;
}
.lb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lb-thumb:hover { opacity: 0.85; }
.lb-thumb.is-active {
  opacity: 1;
  border-color: var(--oro, var(--gold, #B8975A));
}

.lb-close:focus-visible,
.lb-nav:focus-visible,
.lb-thumb:focus-visible {
  outline: 2px solid var(--oro, var(--gold, #B8975A));
  outline-offset: 2px;
}

/* Ein einzelnes Bild braucht weder Pfeile noch Zähler — und weder Tap-Zonen
   noch Leiste, die beide nur zwischen Bildern vermitteln. */
.lb-overlay.is-single .lb-nav,
.lb-overlay.is-single .lb-counter,
.lb-overlay.is-single .lb-zone,
.lb-overlay.is-single .lb-thumbs { display: none; }
/* Ohne Leiste darf das Bild wieder die alte Hoehe nehmen. */
.lb-overlay.is-single .lb-img { max-height: 82vh; }

@media (max-width: 767px) {
  .lb-thumb { width: 44px; height: 44px; }
  .lb-thumbs { gap: 6px; padding: 10px 12px 14px; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
}

/* ── Bildzähler-Marken (Hero und Strecke) ───────────────────────────────────
   Zwei Beschriftungen, EIN Ton: DM-Mono-Versalien auf halbtransparentem Notte,
   Text in Carta, keine Rundung (Designsystem). Beide sind KEINE Knoepfe — der
   Klick faellt auf die Flaeche darunter durch, die ihn ohnehin traegt. */
.hero-count,
.strip-more {
  position: absolute;
  z-index: 2;
  font-family: var(--mono, 'DM Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--carta, #F6F2E9);
  background: rgba(19, 31, 28, 0.62);
  padding: 6px 10px;
  border-radius: 0;
  pointer-events: none;
  white-space: nowrap;
}
.hero-count { right: 20px; bottom: 20px; }
.strip-more { right: 12px; bottom: 12px; }

@media (max-width: 767px) {
  .hero-count { right: 14px; bottom: 14px; }
  .strip-more { right: 10px; bottom: 10px; }
}

/* ── Reduzierte Bewegung ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .strip-item::after { transition: none; }
}