/* ==========================================================================
   Foto-Stream (gemeinsam für Tagebuch, Highlights, ...)
   ========================================================================== */

:root {
  --btn: 36px;                 /* Größe der Hoch/Runter-Buttons */
  --edge: 20px;                /* Abstand der Buttons zum Viewport-Rand */
  --gap: 16px;                 /* Mindestabstand Button <-> Foto */
  --reserve: calc(var(--edge) + var(--btn) + var(--gap));
}

html, body {
  margin: 0;
  padding: 0;
}
html { background-color: #1e1e1e; }

/* 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; }
}

.frame {
  position: relative;
  display: block;
  line-height: 0;
}

/* Fallback-Schatten (bis der geditherte Glow berechnet ist / ohne JS) –
   entspricht den Werten des Canvas-Glows unten */
.frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  box-shadow: 0 0 200px 0 rgba(255, 255, 255, 0.10);
}
.frame.has-glow::before { display: none; }

/* Gedithertes Glow-Canvas (weicher Verlauf ohne Stufen) */
.frame canvas.glow {
  position: absolute;
  z-index: -1;
  max-width: none;
  pointer-events: none;
  mix-blend-mode: lighten;     /* überlappende Glows addieren sich nicht */
  image-rendering: pixelated;
}

.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 */
}

/* Chevron-Navigation */
.nav {
  position: fixed;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  color: #fff;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.nav:hover,
.nav:focus-visible {
  opacity: 1;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.5);
}
.nav[hidden] { display: none; }
.nav img {
  display: block;
  width: 24px;
  height: 24px;
}
.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)); }
.nav-back {
  width: 42px;
  height: 42px;
  opacity: 1;
  border: 0;
  background: rgba(255, 255, 255, 0.5);
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  left: calc(env(safe-area-inset-left, 0px) + 16px);
}
/* Das Icon ist weiß exportiert; hier auf #1e1e1e umgefärbt */
.nav-back img { filter: brightness(0) invert(0.118); }
.nav-back:hover,
.nav-back:focus-visible { background: #fff; }

.empty {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  font: 300 18px/1.5 system-ui, sans-serif;
}