/* ===================================================================
   Type C, de spiraal als inhoudstafel: het projectenoverzicht /projecten/ (22/9/26).
   Letterlijk uit het goedgekeurde prototype workspace/branding/ronde2/projecten.html,
   enkel de regels die nog niet in style.css staan. Een verticale appelschil met tien
   draaien, één per project. Ze staat vast links naast de lijst, draait mee met het
   scrollen en vult zich lime naargelang hoe ver je in het overzicht bent. Klik op een
   nummer en de pagina scrolt naar dat project. Geschilderd met het penseel van B.
   Het script: assets/js/components/lijn-spiraal.js
   Afwijkingen van het prototype, allemaal onzichtbaar tenzij vermeld:
   - de projecttitels zijn h2 in plaats van h3 (geen sprong in de koppen), zelfde maat
   - .project + .project uit style.css (de collages van de startpagina) staat hier op 0
   - .project-links: de link naar het project en de dienstlinks uit de copy op één rij (zichtbaar)
   =================================================================== */
:root {
    --kolom: 168px;            /* breedte van de spiraalkolom op desktop */
    --kolom-gat: 3.5rem;       /* afstand tussen kolom en lijst */
    --goot: 2rem;              /* zijmarge van de container */
    --lijn-wacht: #3a3a36;     /* projectlijn die nog niet geverfd is */
}
@media (max-width: 767px) { :root { --goot: 1.25rem; } }

/* ---------- Overzicht: kolom met de spiraal naast de lijst ---------- */
.overzicht { position: relative; padding: 3.25rem 0 var(--spacing-section-tight); }
/* dezelfde lime gloed als achter het eerste scherm van de startpagina, hier achter de kop */
.overzicht::before { content: ''; position: absolute; left: 50%; top: 0; width: min(1240px, 94vw); height: 640px; translate: -50% -12%;
    background: radial-gradient(closest-side, rgba(122, 234, 0, .12), rgba(122, 234, 0, .04) 55%, transparent); pointer-events: none; }
.overzicht > .container { position: relative; }
.overzicht-grid { display: grid; grid-template-columns: var(--kolom) minmax(0, 1fr); column-gap: var(--kolom-gat); }
.pagina-kop { grid-column: 2; grid-row: 1; padding-bottom: 4rem; }
.projecten-lijst { grid-column: 2; grid-row: 2; }

.pagina-kop .label { margin-bottom: 1.2rem; }
.pagina-kop h1 { font-size: min(var(--fs-display), 8.6vw); }
.kop-rij { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.6rem 3rem; margin-top: 2rem; }
.kop-rij .lead { max-width: 25em; }

/* Filter: drie echte knoppen */
.filter { display: flex; flex-wrap: wrap; gap: .6rem; }
.filter button { min-height: 46px; padding: 0 1.15rem; border: 1.5px solid var(--lijn-wacht); border-radius: var(--radius-btn); background: transparent; cursor: pointer;
    font-family: var(--font-label); font-stretch: 125%; font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; line-height: 1; transition: border-color var(--transition), color var(--transition); }
.filter button:hover { border-color: var(--color-text); }
.filter button[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-accent); }
.filter button:focus-visible, .spiraal-nrs a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* De spiraal zelf */
/* De kolom telt niet mee voor de rijhoogte (contain: size), zo blijft er geen gat boven een korte lijst */
.inhoudstafel { grid-column: 1; grid-row: 1 / 3; contain: size; }
.spiraal { position: sticky; top: 1.5rem; z-index: 5; width: 100%; height: min(calc(100vh - 3rem), 860px); }
.spiraal-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.spiraal-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.p-draad { opacity: 0; transition: opacity .35s ease; }
.spiraal-nrs { position: absolute; inset: 0; list-style: none; }
.spiraal-nrs a { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: flex-start; padding-left: var(--nr-x, 118px); text-decoration: none;
    font-family: var(--font-label); font-stretch: 125%; font-weight: 700; font-size: .72rem; letter-spacing: .06em; line-height: 1; color: var(--color-text-subtle); transition: color .3s, opacity .3s; }
.spiraal-nrs a.is-geverfd { color: var(--color-text); }
.spiraal-nrs a.is-actief, .spiraal-nrs a:hover { color: var(--color-accent); }
.spiraal-nrs a.is-uit { opacity: .32; }

/* ---------- Een project: lijn, hol nummer, titel, citaat en een beeldband ---------- */
.project { position: relative; scroll-margin-top: 1.5rem; }
.project[hidden] { display: none; }
/* style.css zet .project + .project op 7,5 rem voor de collages van de startpagina; hier telt enkel de regel hieronder */
.projecten-lijst .project + .project { margin-top: 0; }
/* ruimte tussen zichtbare projecten, ook als de filter er een paar verbergt */
.project:not([hidden]) ~ .project:not([hidden]) { margin-top: 6.5rem; }
.project-kop { position: relative; display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: 2rem; align-items: start; padding-top: 1.9rem; }
.project-kop::before, .project-kop::after { content: ''; position: absolute; left: 0; right: 0; top: 0; }
.project-kop::before { height: 1px; background: var(--color-border); }
.project-kop::after { top: -.5px; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.3, .7, .2, 1); }
.project.is-geverfd .project-kop::after { transform: scaleX(1); }
.project-nr { font-family: var(--font-heading); font-weight: 700; font-size: clamp(4.25rem, 3vw + 2.6rem, 6.5rem); line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--color-text); transition: -webkit-text-stroke-color .6s ease; }
.project.is-geverfd .project-nr { -webkit-text-stroke-color: var(--color-accent); }
.project-titel .label { margin-bottom: .9rem; }
.project-titel h2 { font-size: clamp(2rem, 1.2vw + 1.4rem, 2.9rem); line-height: 1; margin-bottom: 1rem; }
.project-titel .citaat { font-size: 1.125rem; max-width: 34em; }
.project-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.2rem; margin-top: 1.5rem; }
/* de dienstlinks uit de copy: zelfde pijl, rustiger dan de link naar het project */
.pijl-link--dienst { color: var(--color-text-subtle); border-bottom-color: var(--lijn-wacht); transition: color var(--transition), border-color var(--transition); }
.pijl-link--dienst:hover { border-bottom-color: var(--color-accent); }
.project-band { display: grid; grid-template-columns: var(--cols); grid-template-rows: minmax(0, 1fr); gap: 1.25rem; height: var(--h, clamp(320px, 29vw, 430px)); margin-top: 2.4rem; }
.project-band .foto { height: 100%; min-height: 0; margin: 0; animation: none; }

/* ?statisch=1 en ?voortgang=: meteen de eindstand, zonder overgangen */
.vaste-stand *, .vaste-stand *::before, .vaste-stand *::after { transition: none !important; }

/* ---------- Kleiner dan desktop: de spiraal ligt als balk bovenaan ---------- */
@media (max-width: 1023px) {
    .overzicht { padding-top: 2.4rem; }
    .overzicht-grid { display: block; }
    .pagina-kop { padding-bottom: 0; }
    .kop-rij { margin-top: 1.5rem; }
    .inhoudstafel { contain: none; position: sticky; top: 0; z-index: 30; height: 74px; margin: 2.4rem calc(-1 * var(--goot)) 2.6rem; background: rgba(0, 0, 0, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border); }
    .spiraal { position: relative; top: auto; height: 100%; }
    .spiraal-nrs a { top: 0; bottom: 0; right: auto; align-items: flex-end; justify-content: center; padding: 0 0 9px; font-size: .625rem; letter-spacing: .04em; }
    .spiraal-nrs a { padding-left: 0; }
    .project { scroll-margin-top: 92px; }
    .project:not([hidden]) ~ .project:not([hidden]) { margin-top: 5rem; }
}
@media (max-width: 767px) {
    .pagina-kop h1 { font-size: 4rem; }
    .kop-rij { gap: 1.4rem; }
    .filter { gap: .45rem; flex-wrap: nowrap; }
    .filter button { min-height: 44px; padding: 0 .72rem; font-size: .64rem; letter-spacing: .05em; }
    .project-kop { grid-template-columns: auto minmax(0, 1fr); column-gap: 1.1rem; padding-top: 1.4rem; }
    .project-nr { font-size: 3.4rem; -webkit-text-stroke-width: 1.25px; }
    .project-titel .label { margin-bottom: .6rem; }
    .project-titel h2 { font-size: 1.9rem; }
    .project-titel .citaat { font-size: 1.0625rem; }
    .project-links { margin-top: 1.2rem; gap: .9rem 1.6rem; }
    /* een lange dienstlink breekt op gsm: de pijl volgt dan het laatste woord in plaats van de rand */
    .pijl-link--dienst { display: block; text-wrap: balance; }
    .pijl-link--dienst svg { display: inline-block; vertical-align: -1px; margin-left: .6rem; }
    .project-band { grid-template-columns: 1fr 1fr; grid-template-rows: none; height: auto; gap: .75rem; margin-top: 1.6rem; }
    .project-band .foto { height: auto; aspect-ratio: var(--ar-m, 3 / 4); }
    .project-band .m-vol { grid-column: 1 / -1; }
}