/* Projectpagina — gedeelde template voor alle project-detailpagina's */
/* Mobiel: verticaal snap-scrollen (tekst > beeld > tekst > beeld...) */
/* Desktop (>=900px): normaal (native) verticaal scrollen wordt 1-op-1 vertaald naar horizontale beweging, geen snaps */
/* Footer is hier altijd zichtbaar (vast onderaan), --footer-h wordt door JS gezet zodat de content er nooit achter schuilt */

:root { --footer-h: 0px; }

#site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  background: var(--c-white);
}

/* ---- voortgang: dezelfde pill-labels als de rest van de site (zie .pill in tokens.css),
   actieve stap lime ingevuld, de rest in de outline-variant ---- */
.story-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
/* forceert een regeleinde in de pill-rij op een vaste plek (ipv af te hangen van hoeveel er
   toevallig per breedte passen) — bv. 2 stappen op de eerste regel, de rest op de tweede. */
.story-progress-break { flex-basis: 100%; width: 0; height: 0; }
.story-progress-item {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1.1rem;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  background: var(--c-white);
  border: 2px solid var(--c-black);
  color: var(--c-black);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.story-progress-item.is-active {
  background: var(--c-lime);
  border-color: var(--c-lime);
  color: var(--c-lime-ink);
}
.story-progress-item:not(.is-active):hover { border-color: var(--c-gray); }
.story-progress-dot { display: none; }

/* ---- story track ---- */
.story-wrapper { position: relative; }
.story-track { display: block; }
.story-panel { display: block; }

.story-text,
.story-image {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.story-text {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  gap: 1.1rem;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 3rem;
}
.story-text h2 { font-size: clamp(2rem, 5vw, 3rem); text-align: left; }
.story-text p { font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.6; max-width: 58ch; text-align: left; }

/* ---- beeldblok: geen kleurvlak meer, alleen een 3:4 placeholder-kaart ---- */
.story-image {
  justify-content: center;
}
/* Verhouding is per paneel instelbaar via --img-ratio (inline op het element), niet één vast
   formaat voor de hele site: een brede sfeerfoto/render mag breder staan dan een staand
   mockup- of portretbeeld. Geen --img-ratio meegegeven? Dan valt hij terug op 3:4 (staand).
   Zodra er een echt beeld voor in de plaats komt: vervang deze div door een <img> met
   object-fit: contain binnen dezelfde max-breedte/hoogte, zodat de eigen verhouding van de
   foto behouden blijft in plaats van uitgerekt of bijgesneden te worden. */
.story-image-placeholder {
  aspect-ratio: var(--img-ratio, 3 / 4);
  height: min(90%, 660px);
  width: auto;
  max-width: 92%;
  background: var(--c-gray-bg);
  border: 1px solid var(--c-gray-light);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-gray);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* een echt beeld op zijn plek: zelfde omkadering/afmetingen als de placeholder hierboven,
   maar dan een <img> die zijn eigen verhouding (--img-ratio) behoudt via object-fit: cover.
   --img-scale (standaard 1) schaalt een los beeld kleiner/groter zonder de verhouding of
   uitlijning aan te tasten — bv. --img-scale: 0.85 voor 15% kleiner. */
.story-image-photo {
  aspect-ratio: var(--img-ratio, 3 / 4);
  height: auto;
  max-height: calc(min(90%, 660px) * var(--img-scale, 1));
  width: auto;
  max-width: 92%;
  object-fit: cover;
  object-position: center center;
  border-radius: 14px;
}

/* twee beelden naast elkaar in één paneel (bv. een mockup + een close-up). --img-flex is een
   kaal getal: de eigen breedte/hoogte-verhouding van die foto. De hoogte is bewust NIET vast
   (dat vervormde de foto's zodra de toegewezen breedte niet toevallig samenviel met hun eigen
   verhouding) — hij volgt hier via aspect-ratio automatisch uit de breedte die flexbox toekent.
   Daardoor krijgen beide foto's altijd exact hun eigen, onvervormde verhouding én automatisch
   dezelfde hoogte als elkaar, welke twee foto's het ook zijn — en vullen ze samen de rij zonder
   gaten, tot max. de normale beeldhoogte (90%/660px, dus dezelfde ruimte boven/onder als een
   los beeld). */
.story-image-duo {
  width: 92%;
  max-width: 92%;
  display: flex;
  gap: 10px;
}
.story-image-duo .story-image-photo {
  height: auto;
  width: 0;
  max-width: none;
  aspect-ratio: var(--img-flex, 1);
  flex: var(--img-flex, 1) 1 0%;
  min-width: 0;
  object-fit: cover;
}

/* ---- scroll-hint bol: rechtsonder in het beeldblok, alleen bij PROBLEEM, puur decoratief ---- */
.story-bol {
  position: absolute;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  width: clamp(90px, 10vw, 120px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-lime);
  color: var(--c-lime-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 1rem;
  pointer-events: none;
}
.story-bol-arrow { font-size: 1.15rem; line-height: 1; }

@media (max-width: 899px) {
  .story-bol { display: none; }
}

/* ---- volgend project: onderaan de broodtekst van de laatste sectie ---- */
.story-next-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- scroll-cue: zelfde element als de homepage, alleen op mobiel ---- */
.scroll-cue {
  display: none;
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--c-gray);
  align-items: center;
  gap: 0.5rem;
}
.scroll-cue span { width: 1px; height: 28px; background: var(--c-gray-light); position: relative; overflow: hidden; }
.scroll-cue span::after {
  content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 100%;
  background: var(--c-black); animation: story-cue 1.8s ease-in-out infinite;
}
@keyframes story-cue { 0% { top: -100%; } 60%, 100% { top: 100%; } }

/* ---- mobiel: gewoon normaal onder elkaar scrollen, geen scroll-snap ---- */
/* eerder stond dit op scroll-snap (1 sectie = 1 scherm), maar dat gaf op een echt
   toestel onbetrouwbare ankerpunten en her en der rare, geforceerde witruimte zodra
   een tekst- of beeldblok niet toevallig exact een schermhoogte vulde. Simpeler en
   voorspelbaarder: tekst en beeld krijgen hier gewoon hun natuurlijke hoogte en
   volgen elkaar gewoon op, zoals de rest van een normale pagina. */
@media (max-width: 899px) {
  html { scroll-snap-type: none; }

  .scroll-cue { display: flex; }

  /* de vaste footer (position:fixed) telt niet mee in de documenthoogte, dus zonder deze
     marge kwam het allerlaatste stukje tekst (met de "Volgend project"-link erna) er
     net achter te hangen, onbereikbaar hoe ver je ook scrolde. */
  .story-wrapper { padding-bottom: var(--footer-h); }

  /* de sticky header telt al mee als losse regel in de document-flow — een paneel
     hoeft daar geen extra headerhoogte bovenop te krijgen, alleen een compacte marge. */
  .story-text {
    justify-content: flex-start;
    min-height: 0;
    padding-top: 40px;
    scroll-snap-align: none;
  }

  /* horizontale streep tussen een beeld en de tekst die erna komt — het liggende
     equivalent van de verticale streep die op desktop tussen tekst- en beeldkolom
     staat (.story-image { border-right }). */
  .story-image {
    min-height: 0;
    height: auto;
    padding: 0.5rem 0 2.5rem;
    border-bottom: 1px solid var(--c-black);
    scroll-snap-align: none;
  }
  /* geen vh/svh-gebaseerde max-height meer: het beeld krijgt zijn natuurlijke,
     onvervormde afmeting op basis van de breedte (max-width) en --img-ratio, niet
     gedwongen om een schermhoogte te vullen. */
  .story-image-photo {
    max-height: none;
    /* contain i.p.v. cover: de hele foto moet zichtbaar blijven, niet bijgesneden om
       het vak precies te vullen (verschil kan oplopen als --img-ratio niet exact de
       echte verhouding is). */
    object-fit: contain;
  }

  .story-image-duo { flex-direction: column; width: 100%; max-width: none; }
  .story-image-duo .story-image-photo {
    width: calc(100% - 40px);
    margin: 0 auto;
    max-width: none;
    aspect-ratio: var(--img-flex, 1);
    flex: none;
    object-fit: contain;
  }
}

/* ---- desktop: normaal (native) verticaal scrollen drijft een horizontaal scrollverhaal aan.
   .story-viewport is het sticky "kijkgat" (klemt vast, knipt af) — .story-track daarbinnen
   krijgt alleen de transform. Dat moet twee losse elementen zijn: overflow:hidden en transform
   op hetzelfde element knipt af in de ONgetransformeerde ruimte, waardoor alles na het eerste
   paneel onzichtbaar blijft. JS zet de transform gelijk aan de scrollpositie (geen eigen
   animatie/transition), dus het voelt exact als gewoon scrollen — geen snaps, geen stops. ---- */
@media (min-width: 900px) {
  html { scroll-snap-type: none; }

  .story-text p { font-size: clamp(0.85rem, 1.3vw, 0.98rem); }

  .story-wrapper { position: relative; } /* hoogte wordt door JS gezet */
  .story-viewport {
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h) - var(--footer-h));
    overflow: hidden;
  }
  .story-track {
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
    width: 100%;
    will-change: transform;
  }
  .story-panel {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: flex;
  }
  .story-text,
  .story-image {
    min-height: auto;
    height: 100%;
    scroll-snap-align: none;
  }
  /* breder dan voorheen (was 32%/68%) — bij panelen met meer tekst liep de tekst anders onder de
     vaste header/footer weg, doordat .story-viewport een vaste hoogte heeft met overflow:hidden.
     justify-content + overflow-y:auto hieronder zijn de vangnet: past de tekst nog steeds niet
     in de hoogte, dan scrolt dat paneel apart in plaats van dat de tekst onzichtbaar wordt. */
  .story-text {
    width: 44%;
    padding: 2.5rem clamp(2rem, 4vw, 3.5rem);
    justify-content: flex-start;
    overflow-y: auto;
  }
  .story-image { width: 56%; border-right: 1px solid var(--c-black); }

  /* losse uitzondering voor een paneel waar het beeld iets groter mag: smallere tekstkolom,
     bredere beeldkolom — een echte layout-breedte, geen transform/scale. Een transform-scale
     tekende buiten zijn eigen kader (over de tekst en aangrenzende panelen heen tijdens het
     scrollen); dit blijft altijd netjes binnen het kader. Alleen inzetten waar de tekst kort
     genoeg is om niet scrollbaar te worden bij de smallere kolom (zie .story-text hierboven). */
  .story-panel-wide-image .story-text { width: 40%; }
  .story-panel-wide-image .story-image { width: 60%; }

  .footer-back-top { display: none; }
}