/* =========================================================================
   HyperVision by Erik – Fotos (fotos.css)
   Nur seitenspezifische Regeln, Basis ist css/base.css.
   Bewegung: keine eigenen Animationen. Die Kacheln tragen data-scroll="reveal",
   Skalierung 0.94 → 1 und Deckkraft kommen aus base.css über --p (js/main.js).
   Die Seite wird aus pruefung/fotos/bau_fotos.py erzeugt.
   js/fotos.js rückt nur den Tastaturfokus in der Serien-Zeile (Handy) ins Bild.
   ========================================================================= */

/* ---------- Seitenkopf ---------- */
.fotos-kopf {
  /* Handy oben 40 px statt 56 px: mehr Platz für das erste Foto im ersten Bild */
  padding-block: clamp(2.5rem, 8vw, 6.5rem) clamp(2.5rem, 7vw, 5.5rem);
}
.fotos-kopf .t-exif { margin-bottom: 1rem; }
.fotos-kopf .t-lead { margin-top: 1.25rem; }
.fotos-kopf .t-small { margin-top: .75rem; }

/* Sprunglinks zu den Serien: Pillen, mindestens 44 px hoch */
.serien-nav { margin-top: 2rem; }
.serien-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
}
.serien-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.125rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--text);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.serien-nav a:hover {
  background: var(--surface-2);
  border-color: rgba(255, 255, 255, .36);
}
.serien-nav a:active { background: var(--surface-3); }

/* Handy: eine Zeile zum Wischen statt drei Zeilen Pillen, damit im ersten Bild schon
   ein Foto steht. Die Zeile läuft bis an den Bildschirmrand, die angeschnittene Pille
   zeigt, dass es weitergeht. Innenabstand oben/unten, damit der Fokusring
   (2 px + 3 px Abstand) nicht abgeschnitten wird. */
@media (max-width: 767.98px) {
  .serien-nav ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    margin: -6px calc(-1 * var(--gutter));
    padding: 6px var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: thin;
    scrollbar-color: var(--text-3) transparent;   /* Griff 5.5:1 auf --bg (line-strong wäre nur 2.0:1) */
  }
  .serien-nav li { flex: none; }
}
/* Nur auf Touch ohne Bildlaufleiste. Mit Maus (z. B. Desktop bei 200 % Zoom) bleibt eine
   dünne Leiste sichtbar, sonst wären die hinteren Serien nur per Tastatur erreichbar.
   Tastatur: js/fotos.js rückt den fokussierten Link ins Bild. */
@media (max-width: 767.98px) and (pointer: coarse) {
  .serien-nav ul { scrollbar-width: none; }
  .serien-nav ul::-webkit-scrollbar { display: none; }
}

/* ---------- Serien ---------- */
.serie { padding-block: clamp(4rem, 9vw, 7.5rem); }
/* Erste Serie näher an den Kopf, damit auf dem Desktop schon im ersten Bild Fotos stehen */
.fotos-kopf + .serie { padding-top: clamp(2.5rem, 5vw, 4rem); }

/* Raster: Handy 1 Spalte, ab 768 px 2, ab 1180 px 3 (Breakpoints aus base.css) */

/* Querformat im Raster über zwei Spalten: etwa so hoch wie ein Hochformat daneben */
@media (min-width: 768px) {
  .gallery-item.is-wide { grid-column: span 2; }
}

/* Serien mit gemischten Formaten (Am See, Unterwegs): feste Reihen je Breakpoint.
   Jede Kachel ist so breit wie ihr Anteil am Seitenverhältnis der Reihe, darum stehen
   alle Bilder einer Reihe gleich hoch, nichts wird beschnitten, es bleiben keine Löcher.
   Handy 1 Spalte, ab 768 px höchstens 2, ab 1180 px höchstens 3 Bilder pro Reihe.
   --w-md / --w-lg stehen an der Kachel (berechnet aus data/fotos.json, je −0.5 px
   Reserve gegen Rundung, flex-grow gleicht das wieder aus). */
.gallery-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(1.25rem, 3vw, 2rem) var(--gap);
}
.gallery-flow > .gallery-item { flex: 1 1 100%; }
@media (min-width: 768px) {
  .gallery-flow > .gallery-item { flex-basis: var(--w-md, 100%); }
}
@media (min-width: 1180px) {
  .gallery-flow > .gallery-item { flex-basis: var(--w-lg, var(--w-md, 100%)); }
}

/* Schmale Kacheln: Titel und EXIF dürfen umbrechen (Werte bleiben dank   ganz) */
.gallery-caption { min-width: 0; }
.gallery-title { overflow-wrap: break-word; }
/* EXIF-Umbruch (text-wrap: balance) und Druckzustand der Sucher-Ecken stehen in base.css */

/* Wortgruppe in Überschriften nicht trennen («RS4 B5 Avant», «RS6 Avant C7») */
.nobr { white-space: nowrap; }