/* ==========================================================================
   Foto-Stream: ein Foto pro Bildschirmhöhe, Navigation hoch/runter
   (gemeinsam für Tagebuch und Highlights). Rahmen/Glow: css/viewer.css
   ========================================================================== */

:root {
  --btn: 36px;                 /* Größe der Hoch/Runter-Buttons */
  --edge: calc(var(--back-offset) + 3px);    /* Hoch/Runter: Mitte auf Höhe des Zurück-Pfeils (--back-offset: css/nav.css) */
  --gap: 16px;                 /* Mindestabstand Button <-> Foto */
  --reserve: calc(var(--edge) + var(--btn) + var(--gap));
}

/* Touch-Geräte: Wisch hoch/runter springt immer genau ein Foto weiter
   (natives Scroll-Snapping, kein Überspringen mehr als eines Fotos) */
@media (pointer: coarse) {
  html {
    scroll-snap-type: y mandatory;
    overscroll-behavior-y: none;   /* kein Pull-to-Refresh beim Wischen nach unten */
  }
  .photo {
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
}

/* Jedes Foto bekommt einen Bereich in Viewport-Höhe, Foto mittig */
.photo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;      /* Fallback */
  min-height: 100dvh;     /* berücksichtigt mobile Browserleisten */
  box-sizing: border-box;
  margin: 0;
}

/* Alle Glow-Ebenen liegen HINTER allen Fotos (z-index -1 im Stacking-Context
   von <main>), so kann der Schatten eines Fotos nie über ein anderes Foto
   zeichnen. overflow-x: clip verhindert seitliches Scrollen durch den Glow. */
main {
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: clip;
}
@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}

.photo img {
  display: block;
  width: auto;            /* natürliche Pixelgröße, nie hochskaliert */
  height: auto;
  max-width: 90vw;        /* höchstens 90 % der Breite ... */
  max-height: 90vh;       /* ... und 90 % der Höhe, Fallback */
  max-height: min(
    90dvh,
    calc(100dvh - 2 * var(--reserve)
         - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))
  );
  /* Seitenverhältnis bleibt automatisch erhalten */
}

/* Hoch/Runter-Navigation (Basis .nav und Zurück-Pfeil: css/nav.css) */
.nav-up, .nav-down {
  left: 50%;
  transform: translateX(-50%);
  width: var(--btn);
  height: var(--btn);
}
/* Hoch/Runter: eigene native Icons (img/outlineIcons/chevron/up.svg und down.svg),
   bleiben auch beim Hover weiß. */
.nav-down { bottom: calc(env(safe-area-inset-bottom, 0px) + var(--edge)); }
.nav-up   { top: calc(env(safe-area-inset-top, 0px) + var(--edge)); }