/* ============================================================================
 * gallery.css — tc-gallery + Lightbox (system-uebergreifend)
 * ----------------------------------------------------------------------------
 * SCHICHT 2 (letzter echter Neubau). Bild-Galerie mit Thumbnail-Grid und
 * Vollbild-Lightbox inkl. Prev/Next-Kette + Counter. Deckt zugleich den offenen
 * tc-modal--media-Edge-Case ab (die Lightbox IST die Media-Modal-Variante).
 *
 * EXTRAHIERT aus pathfinder.css:
 *   - tc-gallery (Grid)        <- .pf-gal-grid
 *   - tc-gallery__card         <- .pf-gal-card(.unrevealed) / .pf-gal-img-wrap
 *                                 / .pf-gal-hidden-badge / .pf-gal-book-badge
 *                                 / .pf-gal-card-info / -name / -notes
 *   - tc-gallery__lightbox     <- .pf-gal-lightbox / -img / .pf-gal-lb-close
 *                                 / .pf-gal-lb-caption + .pf-gal-lightbox-chain
 *                                 (.pf-gal-lb-nav/-prev/-next/-counter)
 *
 * NUR DIE VISUELLE HUELLE. Welche Bilder sichtbar/verborgen sind, Reihenfolge,
 * Prev/Next-Logik, Öffnen/Schliessen, Filter — alles bleibt in der PF-JS
 * (pathfinder-gallery.js). Diese Klassen rendern nur.
 *
 * THEME vs. DATEN:
 *   - Hover-Akzent, Karten-Name, Buch-Badge, Caption, Counter, Nav-Hover
 *     = --tc-highlight (Theme-Glanz; Quelle nutzte --tc-accent).
 *   - "Verborgen/unrevealed"-Badge = Info-Blau (Status-Daten), hart via Token.
 *   - Lightbox-Overlay nutzt --tc-z-modal (kein Magic-z-index).
 *
 * ============================================================================
 *   .tc-gallery                      Thumbnail-Grid (auto-fill)
 *     __card                         eine Karte (is-unrevealed = verborgen)
 *       __img-wrap (> img)           quadratischer Bildausschnitt, Hover-Zoom
 *       __hidden-badge               "verborgen"-Marker (Info, Datenfarbe)
 *       __book-badge                 Buch-/Kapitel-Marker (Glanz)
 *       __info (> __name, __notes)   Titel + 2-Zeilen-Notiz
 *
 *   .tc-gallery__lightbox            Vollbild-Overlay (= tc-modal--media)
 *       img                          das grosse Bild
 *       __close                      Schliessen-Knopf (oben rechts)
 *       __caption                    Bildunterschrift (Glanz)
 *     is-chain                       Ketten-Modus (mehrere Bilder)
 *       __nav (--prev/--next)        Vor/Zurueck-Knoepfe
 *       __counter                    "3 / 12"-Anzeige
 * ============================================================================ */

/* === GRID ================================================================= */
.tc-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

/* === CARD ================================================================= */
.tc-gallery__card {
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-md, 10px);
  overflow: hidden;
  background: var(--tc-bg-surface-1);
  cursor: pointer;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.tc-gallery__card:hover {
  border-color: var(--tc-highlight);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 12px rgba(var(--tc-highlight-rgb),0.08);
}
.tc-gallery__card.is-unrevealed {
  opacity: 0.55;
  border-style: dashed;
}
.tc-gallery__card.is-unrevealed:hover { opacity: 0.85; }

.tc-gallery__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: rgba(0,0,0,0.3);
}
.tc-gallery__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.tc-gallery__card:hover .tc-gallery__img-wrap img { transform: scale(1.06); }

/* "verborgen"-Badge — Info-Blau (Status-Daten) */
.tc-gallery__hidden-badge {
  position: absolute;
  top: 8px; right: 8px;
  padding: 3px 8px;
  font-size: 0.68rem; font-weight: 600;
  background: var(--tc-info-bg);
  border: 1px solid var(--tc-info-border);
  border-radius: 4px;
  color: var(--tc-info);
  backdrop-filter: blur(4px);
}
/* Buch-/Kapitel-Badge — Theme-Glanz */
.tc-gallery__book-badge {
  position: absolute;
  bottom: 8px; left: 8px;
  padding: 2px 7px;
  font-size: 0.65rem; font-weight: 700;
  font-family: var(--tc-font-display, serif);
  background: rgba(0,0,0,0.65);
  border-radius: 4px;
  color: var(--tc-highlight);
  backdrop-filter: blur(4px);
}

.tc-gallery__info { padding: 10px 12px; }
.tc-gallery__name {
  font-size: 0.82rem; font-weight: 600;
  color: var(--tc-highlight);
  line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tc-gallery__notes {
  font-size: 0.72rem;
  color: var(--tc-text-muted);
  margin-top: 4px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* === LIGHTBOX (= tc-modal--media) ========================================= */
.tc-gallery__lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: var(--tc-z-modal, 1400);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: tc-gallery-fade 0.2s ease;
}
.tc-gallery__lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 8px;
  cursor: default;
  box-shadow: 0 0 60px rgba(0,0,0,0.5);
}

/* ⚠️ DIE KLASSE STEHT AUCH AN EINEM <button> — und dafuer fehlte alles
   (13.09.2026, von Tim am iPhone gemeldet: „Mach mal den schliessen Button
   hier ordentlich"). Gebaut war sie fuer ein <span> (so steht sie bis heute
   in library-community.html); der Foto-Betrachter in js/ui/social.js setzt
   sie an einen echten Knopf. Ohne eigene Flaeche und eigenen Rahmen zeichnet
   der Browser seinen Standardknopf: live gemessen rgb(239,239,239) mit
   2px-Rahmen, darauf das × in 60 % Weiss — ein heller Kreis ohne sichtbares
   Zeichen. Jetzt dieselbe Machart wie `tc-gallery__nav` direkt darunter:
   dunkle Scheibe, feiner Rand, Akzent beim Darueberfahren. */
.tc-gallery__close {
  position: absolute;
  top: 16px; right: 20px;
  z-index: 2;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 2rem;
  line-height: 1;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.18);
  cursor: pointer;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.tc-gallery__close:hover {
  color: #fff;
  background: rgba(var(--tc-highlight-rgb),0.25);
  border-color: rgba(var(--tc-highlight-rgb),0.55);
}
.tc-gallery__close:focus-visible {
  outline: 2px solid var(--tc-accent);
  outline-offset: 2px;
  color: #fff;
}

.tc-gallery__caption {
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--tc-font-display, serif);
  font-size: 1.1rem;
  color: var(--tc-highlight);
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
  text-align: center;
  max-width: 80%;
}

/* Ketten-Modus: Prev/Next + Counter */
.tc-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem;
  color: rgba(255,255,255,0.75);
  background: rgba(0,0,0,0.35);
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  border: 1px solid rgba(255,255,255,0.1);
}
.tc-gallery__nav:hover {
  background: rgba(var(--tc-highlight-rgb),0.25);
  color: #fff;
  border-color: rgba(var(--tc-highlight-rgb),0.55);
  transform: translateY(-50%) scale(1.08);
}
.tc-gallery__nav--prev { left: 20px; }
.tc-gallery__nav--next { right: 20px; }

.tc-gallery__counter {
  position: absolute;
  bottom: 16px; left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.85);
  font-size: 0.82rem;
  font-family: var(--tc-font-display, serif);
  letter-spacing: 1px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  pointer-events: none;
}

@keyframes tc-gallery-fade { from { opacity: 0; } to { opacity: 1; } }

/* === MOBILE / MOTION ====================================================== */
@media (max-width: 480px) {
  .tc-gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .tc-gallery__nav { width: 44px; height: 44px; font-size: 2rem; }
  .tc-gallery__nav--prev { left: 8px; }
  .tc-gallery__nav--next { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-gallery__card,
  .tc-gallery__img-wrap img,
  .tc-gallery__close,
  .tc-gallery__nav { transition: none; }
  .tc-gallery__card:hover { transform: none; }
  .tc-gallery__card:hover .tc-gallery__img-wrap img { transform: none; }
  .tc-gallery__nav:hover { transform: translateY(-50%); }
  .tc-gallery__lightbox { animation-duration: 0.01ms;
 animation-iteration-count: 1;
 animation-delay: -1ms; }
}