/* ===========================================================================
   KUVAT, the gallery page as photos floating on the lake at night
   One series, in the order a guest meets the place: the gate, the field,
   the cabins, the lake, the evening. Rows of three and two prints on a
   24-column grid (--x start, --w span), every landscape the same width and
   every portrait a narrower one, so the series reads even. Each is dropped
   by --y and tilted by --r, all written in the markup, and framed in paper
   like a print. Every photo keeps its own shape (--s); nothing is cropped. kellu.js lets each one drift at its own speed on
   scroll, and a slow bob keeps them afloat when the page is still.
   =========================================================================== */

.sarja-osio {
  position: relative;
  isolation: isolate;
  background: var(--jalka-pohja);
  padding: clamp(7rem, 16vw, 14rem) var(--sivu) clamp(6rem, 16vh, 12rem);
  overflow: clip;
}

/* The horizon along the top: the treeline traced from the campsite, with
   its reflection, a step darker than the water so it reads as the far shore
   at night. Stretched to the full width; a silhouette can take it. */
.sarja-metsa {
  position: absolute;
  top: 0; left: 0;
  z-index: -1;
  width: 100%;
  height: clamp(5rem, 13vw, 12rem);
  color: #121a22;
  pointer-events: none;
}

/* The mist sits in a layer as tall as the section, and its canvas is one
   screen high and sticky, so the drawing surface stays small while the
   haze stays with the reader all the way down. */
.sarja-tausta {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.sarja-usva {
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100lvh;
}

.sarja {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  grid-auto-flow: row dense;
  row-gap: clamp(2.5rem, 5vw, 5rem);
  max-width: 88rem;
  margin: 0 auto;
}
.sarja > li {
  grid-column: var(--x) / span var(--w);
  margin-top: var(--y);
  align-self: start;
}

.kellu { will-change: transform; }
.sarja .kuva-ruutu {
  height: auto;
  padding: clamp(0.4rem, 0.8vw, 0.75rem);
  background: var(--pohja);
  box-shadow: none;
  rotate: var(--r);
  transition: rotate 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.sarja .kuva-ruutu img { height: auto; aspect-ratio: var(--s); background: var(--syva); }
.sarja .kuva-ruutu:hover,
.sarja .kuva-ruutu:focus-visible { rotate: 0deg; }
.sarja .kuva-ruutu:focus-visible { outline-color: var(--jalka-korostus); }

/* Afloat: a slow bob, each photo on its own beat so they never move as one. */
@media (prefers-reduced-motion: no-preference) {
  .sarja .kuva-ruutu { animation: kellu 9s ease-in-out infinite alternate; }
  .sarja > li:nth-child(3n+2) .kuva-ruutu { animation-duration: 11s; animation-delay: -4s; }
  .sarja > li:nth-child(3n) .kuva-ruutu { animation-duration: 7.5s; animation-delay: -2s; }
  .sarja .kuva-ruutu:active img { transform: scale(0.985); }
}
@keyframes kellu {
  from { translate: 0 -6px; }
  to   { translate: 0 6px; }
}

/* On a phone the series zigzags down two offset lanes; tall photos stay
   narrow so a portrait never fills the whole screen. */
@media (max-width: 46rem) {
  .sarja {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 0;
    row-gap: 1.75rem;
  }
  .sarja > li { grid-column: 1 / span 5; margin-top: 0; }
  .sarja > li:nth-child(even) { grid-column: 2 / span 5; }
  .sarja > li.pysty { grid-column: 2 / span 3; }
  .sarja > li.pysty:nth-child(even) { grid-column: 3 / span 3; }
}