/* Projectdetail (project-*.html). Eén template, opgebouwd als SCHERMEN met blokscroll (js/project.js):
   kop · hero · verhaal + duo · citaat + horizontale strook (laatste kaart = credits + volgend project) · eindscherm (CTA + footer).
   Geen schermen met alleen tekst: tekst staat altijd boven de foto's van hetzelfde scherm.
   Blok ±70 % breed (zelfde randen als de projectfoto's op home), grijs vlak + stippenraster.
   FRAMING BLIJFT INTACT: foto's worden geschaald (max. schermhoogte en blokbreedte), nooit bijgesneden;
   de parallax verschuift het hele kader, nooit de foto erbinnen. */

.pj {
  --bg: #181818; --mute: #8A8A86; --ph: #222222;
  --s: clamp(16px, 1.6vw, 28px); --margin: calc(15vw + var(--s)); --g: var(--s);
  --top: 120px; --bot: 72px;                                   /* ruimte voor het menu en onderaan */
  --fh: calc(100svh - var(--top) - var(--bot));                /* maximale fotohoogte binnen een scherm */
  position: relative; overflow: clip; background: var(--bg); color: var(--white); font-size: 15px; line-height: 1.5;
  padding: 0 var(--margin);
}
.pj .mute { color: var(--mute); }
.pj > :not(.pj__dots) { position: relative; }
.grid6 { display: grid; grid-template-columns: repeat(6, 1fr); column-gap: var(--g); }

/* Eén scherm = precies de schermhoogte; inhoud verticaal gecentreerd */
.scr { min-height: 100vh; min-height: 100svh; padding: var(--top) 0 var(--bot); }

/* Parallax-achtergrond: stippenraster (site-raster), 40 % van de scroll */
.pj__dots {
  position: absolute; left: 0; right: 0; top: 0; height: 140%; pointer-events: none; will-change: translate;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .16) 0.8px, transparent 1.2px);
  background-size: 48px 48px; background-position: calc(clamp(24px, 5vw, 96px) - 24px + var(--dx, 0px)) -24px;
}

/* 1. Kop: label, titel, meta rechts, intro (onderaan het scherm) */
.pj__head { row-gap: 32px; align-content: end; align-items: end; }
.pj__label { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; margin: 0; }
/* Casenummer groot (Rawest), op de basislijn van het mono-label */
.pj__case .ag-num { font-size: 64px; line-height: .8; margin: 0 6px 0 10px; color: var(--white); }
@media (max-width: 900px) { .pj__case .ag-num { font-size: 48px; } }
.pj__label a { transition: color .2s; }
.pj__label a:hover { color: var(--yellow); }
.pj__title { grid-column: 1 / 5; margin: 0; font-size: clamp(64px, 9vw, 168px); line-height: .9; font-weight: 600; }
.pj__meta { grid-column: 5 / 7; margin: 0; display: grid; gap: 14px; padding-bottom: 12px; }
.pj__meta div { display: grid; gap: 2px; border-top: 1px solid #333; padding-top: 10px; }
.pj__meta dt { color: var(--mute); }
.pj__meta dd { margin: 0; }
.pj__intro { grid-column: 1 / 4; margin: 0; font-size: clamp(18px, 1.4vw, 24px); line-height: 1.4; }

/* Hero-foto achter de kop: over het hele scherm (volle breedte, buiten het blok), donker vlak erover voor de leesbaarheid.
   Enige plek op de detailpagina waar een foto het vlak vult (cover); alle andere foto's blijven onbijgesneden.
   js/project.js laat het beeld trager meeschuiven (parallax) en de colorpicker werkt ook hierop. */
.pj__head.has-bg > :not(.pj__bg, .pj__scrim) { position: relative; z-index: 1; }
.pj__bg, .pj__scrim { position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--margin)); right: calc(-1 * var(--margin)); }
.pj__bg { overflow: hidden; background: var(--ph); }
.pj__bg img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; translate: 0 var(--by, 0px); will-change: translate; }
.pj__scrim { pointer-events: none; background: linear-gradient(rgba(17, 17, 17, .55), rgba(17, 17, 17, 0) 28%), linear-gradient(rgba(17, 17, 17, 0) 40%, rgba(17, 17, 17, .7)), rgba(17, 17, 17, .35); }
.pj__head.has-bg .pj__meta div { border-top-color: rgba(255, 255, 255, .25); }
.pj__head.has-bg .mute, .pj__head.has-bg .pj__meta dt { color: rgba(255, 255, 255, .7); }
/* Binnenkomen: het beeld komt scherp uit een lichte zoom (zelfde gebaar als de andere foto's) */
.js .pj__bg img { scale: 1.06; filter: blur(16px); transition: filter .9s var(--ease-out) .1s, scale 1.4s var(--ease-out); }
.js .pj__bg.in img { scale: 1; filter: none; }

/* Foto-kader met hoekhaken van een zoeker + mono-label. Het kader krimpt rond de foto (geen vaste verhouding):
   de foto is maximaal --fh hoog en maximaal de beschikbare breedte, in haar eigen verhouding. */
.shot { position: relative; overflow: hidden; background: var(--ph); translate: 0 var(--py, 0px); flex: 0 1 auto; min-width: 0; max-width: 100%; }
.shot img { display: block; width: auto; height: auto; max-width: 100%; max-height: var(--fh); }
.shot .c { position: absolute; z-index: 1; width: 16px; height: 16px; border: 0 solid var(--white); transition: transform 400ms cubic-bezier(.65, 0, .35, 1); }
.shot .c:nth-of-type(1) { left: 12px; top: 12px; border-width: 1px 0 0 1px; }
.shot .c:nth-of-type(2) { right: 12px; top: 12px; border-width: 1px 1px 0 0; }
.shot .c:nth-of-type(3) { left: 12px; bottom: 12px; border-width: 0 0 1px 1px; }
.shot .c:nth-of-type(4) { right: 12px; bottom: 12px; border-width: 0 1px 1px 0; }
.shot:hover .c:nth-of-type(1) { transform: translate(8px, 8px); }
.shot:hover .c:nth-of-type(2) { transform: translate(-8px, 8px); }
.shot:hover .c:nth-of-type(3) { transform: translate(8px, -8px); }
.shot:hover .c:nth-of-type(4) { transform: translate(-8px, -8px); }
.shot__tag { position: absolute; z-index: 1; left: 40px; bottom: 14px; transition: transform 400ms cubic-bezier(.65, 0, .35, 1); }
.shot:hover .shot__tag { transform: translate(8px, -8px); }   /* schuift mee met de hoekhaak linksonder */

/* 2. Hero en duo: foto's gecentreerd; bij twee foto's krimpen ze samen, dus ze blijven even hoog */
.pj__hero, .pj__duo { display: flex; align-items: center; justify-content: flex-start; gap: calc(var(--g) * 2); margin: 0; }   /* links uitgelijnd met de tekst */

/* 3. Verhaal + duo, samen één scherm: korte tekst bovenaan (±2 regels over de volle kolombreedte), foto's eronder */
.pj__pair { --fh: calc(100svh - var(--top) - var(--bot) - 120px); display: flex; flex-direction: column; justify-content: center; gap: 36px; }
/* Het duo blijft links uitgelijnd met de tekst, maar mag rechts doorlopen tot de gewone sitemarge (grotere foto's) */
.pj__pair .pj__duo { margin-right: calc(clamp(24px, 5vw, 96px) - var(--margin)); }
.pj__story { row-gap: 24px; }
.pj__story > div { grid-column: span 2; }
.pj__story h2 { margin: 0 0 10px; font-weight: 400; }
.pj__story p { margin: 0; }

/* Citaat (boven de strook): kort, op één regel */
.quote { margin: 0; font-size: clamp(22px, 2vw, 36px); line-height: 1.15; font-weight: 600; }
.quote small { display: block; margin-top: 10px; font-weight: 400; }

/* 4. Horizontale strook: het scherm blijft staan (sticky) en de kaarten schuiven naar links, gekoppeld aan de scroll.
   De sectie is n schermen hoog (js zet --n); elke stap van de blokscroll = één kaart in het midden. Volle breedte (buiten het blok).
   --sh = hoogte van de foto's en van de creditskaart in de strook. */
.strip { --sh: calc(var(--fh) - 40px); position: relative; height: calc(var(--n, 4) * 100svh); margin: 0 calc(-1 * var(--margin)); }
.strip--q { --sh: calc(var(--fh) - 40px - 76px); }
.strip__in { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; padding: var(--top) 0 var(--bot); display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.strip__quote { margin: 0 var(--margin) 4px; }
.strip__bar { display: flex; align-items: center; gap: 24px; padding: 0 var(--margin); }
.strip__line { flex: 1; height: 1px; background: #444; position: relative; overflow: hidden; }
.strip__line::after { content: ""; position: absolute; inset: 0; background: var(--yellow); transform: scaleX(var(--f, 0)); transform-origin: left; }
.strip__count { font-variant-numeric: tabular-nums; }
.strip__track { display: flex; align-items: center; gap: calc(var(--g) * 2); width: max-content; padding: 0 var(--margin); translate: var(--x, 0px) 0; will-change: translate; }
.strip .shot { flex: none; }
/* In de strook is de parallax horizontaal (js/project.js zet --px): het hele kader schuift opzij, nooit de foto erbinnen */
.strip .shot, .strip .cred { translate: var(--px, 0px) 0; }
.strip .shot img { max-width: none; max-height: var(--sh); }
/* Liggende foto's in de strook: staand kader 2:3 (zoals de andere stroken), foto uitgesneden vanuit het midden.
   Bewuste uitzondering op "nooit bijsnijden" (vraag van de gebruiker, 18/10); de creditskaart krijgt dan ook 2:3. */
.strip .shot.l img { height: var(--sh); width: calc(var(--sh) * 2 / 3); max-height: none; object-fit: cover; }

/* Creditskaart: credits + knop "Volgend project" (zonder foto), even groot als de foto ervoor (zelfde verhouding,
   zelfde hoogte). Laatste kaart van de strook, of naast de foto in het duo. */
.cred { position: relative; flex: none; height: var(--sh, var(--fh)); display: flex; flex-direction: column; gap: 24px; padding: 40px; border: 1px solid #333; }
.cred .c { position: absolute; width: 16px; height: 16px; border: 0 solid var(--white); }
.cred .c:nth-of-type(1) { left: 12px; top: 12px; border-width: 1px 0 0 1px; }
.cred .c:nth-of-type(2) { right: 12px; top: 12px; border-width: 1px 1px 0 0; }
.cred .c:nth-of-type(3) { left: 12px; bottom: 12px; border-width: 0 0 1px 1px; }
.cred .c:nth-of-type(4) { right: 12px; bottom: 12px; border-width: 0 1px 1px 0; }
.cred p { margin: 0; }
.cred__list { margin: 0; display: grid; gap: 16px; }
.cred__list div { display: grid; gap: 2px; }
.cred__list dd { margin: 0; }
.pj__next {
  margin-top: auto; align-self: flex-start; position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px; border: 1px solid #444; color: var(--white);
  transition: color .3s cubic-bezier(.65, 0, .35, 1), border-color .3s;
}
.pj__next i { width: 8px; height: 8px; background: var(--yellow); flex: none; }
.pj__next .mute { transition: color .3s; }
/* Hover: de knop vult zich geel van links naar rechts, de tekst wordt zwart (zelfde gebaar als de CTA-knop) */
.pj__next::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--yellow); transform: scaleX(0); transform-origin: right; transition: transform .4s cubic-bezier(.65, 0, .35, 1); }
.pj__next:hover::before { transform: scaleX(1); transform-origin: left; }
.pj__next:hover, .pj__next:hover .mute { color: var(--black); border-color: var(--yellow); }
.pj__next:hover i { background: var(--black); }

/* Binnenkomen (js/project.js zet .in): beelden openen van boven (400 ms) en worden scherp, tekst 24 px omhoog */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); transition-delay: calc(var(--i, 0) * 100ms); }
.js .rv.in { opacity: 1; transform: none; }
.js .shot.rv { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path .4s var(--ease-out) calc(var(--i, 0) * 100ms); }
.js .shot.rv img { filter: blur(16px); scale: 1.06; transition: filter .9s var(--ease-out) .2s, scale 1.2s var(--ease-out); }
.js .shot.rv.in { clip-path: inset(0 0 0 0); }
.js .shot.rv.in img { filter: none; scale: 1; }

/* Mobiel: gewone scroll, schermen op natuurlijke hoogte, strook = zelf opzij vegen (met snap) */
@media (max-width: 900px) {
  .pj { --margin: clamp(24px, 5vw, 96px); --top: 48px; --bot: 48px; --fh: 70svh; }
  .scr { min-height: 0; }
  .pj__head { padding-top: 140px; min-height: 100vh; min-height: 100svh; }   /* kop met foto: ook op mobiel één volledig scherm */
  .pj__title, .pj__meta, .pj__intro, .pj__story > div { grid-column: 1 / -1; }
  .pj__duo { flex-direction: column; }
  /* Alle foto's onder elkaar even breed (volle kolombreedte), in hun eigen verhouding: staande foto's worden dus hoger */
  .pj__duo .shot { width: 100%; }
  .pj__duo .shot img { width: 100%; max-height: none; }
  .strip { height: auto !important; }
  .strip__in { position: static; height: auto; }
  /* Vegen doet js/project.js (rustiger dan de native snap): geen native horizontale scroll, wel verticaal de pagina */
  .strip__track { width: auto; overflow-x: hidden; touch-action: pan-y; translate: none; scrollbar-width: none; user-select: none; -webkit-user-select: none; }
  .strip, .strip--q { --sh: 60svh; }
  .pj__pair { --fh: 70svh; gap: 32px; }
  .pj__pair .pj__duo { margin-right: 0; }
  .cred { height: auto; aspect-ratio: auto !important; padding: 32px 24px; }
  /* Strook op mobiel: elke kaart ± 57 % van de kolom, links op de kolomlijn (js/project.js laat ze daar vastklikken). Zo piept de volgende foto
     rechts al in beeld (uitnodiging om te vegen). Alle kaarten even breed; de creditskaart krijgt de verhouding van de
     laatste foto, dus ook exact dezelfde hoogte. */
  .strip { --cw: calc((100vw - 2 * var(--margin)) * 0.82 * 0.7); }   /* 30 % kleiner dan eerst (82 % van de kolom) */
  .strip .shot img { width: var(--cw); height: auto; max-height: none; }
  .strip .shot.l img { width: var(--cw); height: auto; aspect-ratio: 2 / 3; }
  .strip .cred { width: var(--cw); height: auto; aspect-ratio: var(--ar) !important; min-height: 0; overflow: hidden; }
  /* Compacter, zodat de credits in de kleinere kaart passen (zelfde hoogte als de foto's) */
  .strip .cred { padding: 22px 16px 18px; gap: 12px; }
  .strip .cred .c { width: 10px; height: 10px; }
  .strip .cred .c:nth-of-type(1) { left: 6px; top: 6px; } .strip .cred .c:nth-of-type(2) { right: 6px; top: 6px; }
  .strip .cred .c:nth-of-type(3) { left: 6px; bottom: 6px; } .strip .cred .c:nth-of-type(4) { right: 6px; bottom: 6px; }
  .strip .cred__list { gap: 8px; }
  .strip .pj__next { padding: 10px 12px; gap: 4px 8px; flex-wrap: wrap; flex-shrink: 0; }
  .strip .cred > p.mono { display: none; }   /* kopje "Credits" weg in de kleine kaart: de lijst spreekt voor zich */
  /* Laatste foto liggend (.l): zo'n lage kaart kan de credits niet bevatten, dan wordt ze zo hoog als de tekst nodig heeft */
  .strip .cred.l { aspect-ratio: auto !important; height: auto; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .pj *, .pj *::before, .pj *::after { transition: none !important; }
}