/* ===================================================================
   abaw.be, type-e.css: de projectpagina's, effect E, de onthulling (22/9/26)
   Uit het goedgekeurde prototype workspace/branding/ronde2/project-brede-zolder.html,
   enkel de regels die nog niet in style.css staan. Laadt na style.css.
   In elk onthullingsvlak schildert een brede streek het na-beeld over het
   voor-beeld. Tussen de stappen loopt ze verder als draad. Alles met het penseel
   van B: volle streek in lime, draad dun en donkergroen.
   Het script: assets/js/components/lijn-onthulling.js, de markup: includes/project.php.
   Twee namen wijken af van het prototype, omdat style.css ze al gebruikt voor de
   startpagina: .hero heet hier .project-kop, .hero-tekst heet .project-kop-tekst.
   De stappen zijn veralgemeend: het beeld links of rechts (.links, .rechts) en
   staand, liggend of een groep beelden (.staand, .liggend, .beelden), met de maten
   van .stap-af, .stap-tijdens en .stap-voor uit het prototype.
   =================================================================== */

/* De draad: één laag achter de inhoud */
.draad-laag { position: absolute; left: 0; top: 0; width: 100%; height: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.draad-laag svg { position: absolute; left: 0; top: 0; max-width: none; }
.draad-laag path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
main > section { position: relative; z-index: 2; }

/* Kruimelpad: Start / Projecten / Project */
.kruimel ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; font-family: var(--font-label); font-stretch: 125%; font-weight: 700; font-size: .72rem; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-subtle); }
.kruimel li + li::before { content: '/'; margin-right: .7rem; }
.kruimel a { transition: color var(--transition); }

/* Eerste scherm: kop en citaat links, de onthulling groot rechts */
.project-kop { padding: .5rem 0 var(--spacing-section); overflow-x: clip; }
.project-kop .container { display: grid; grid-template-columns: minmax(0, 1fr) 540px; column-gap: 6rem; align-items: center; container-type: inline-size; }
.project-kop .kruimel { margin-bottom: 2.6rem; }
.project-kop .label { margin-bottom: 1.2rem; }
.project-kop .label span { color: var(--color-text-subtle); white-space: nowrap; }
.project-kop h1 > span { display: block; }
.project-kop h1 .heel { white-space: nowrap; }
/* Een lang woord in de kop past altijd in de kolom: --h1-woord is de breedte van het langste woord, in letters */
.project-kop h1 { font-size: min(var(--fs-display), calc(100cqi / (var(--h1-woord, 6) * .52))); }
.project-kop .lead { margin-top: 1.8rem; max-width: 26em; }
.woorden { margin-top: 2.2rem; max-width: 24em; font-size: 1.1875rem; line-height: 1.55; }
.lead + .woorden { margin-top: 1.6rem; }
.project-kop .meter { margin-top: 2.2rem; }
.project-kop .gat { margin-top: 2.6rem; max-width: 30em; }
.project-kop .gat + .gat { margin-top: 1rem; }
.project-kop .onthulling::before { content: ''; position: absolute; inset: -16% -24%; z-index: -1; background: radial-gradient(closest-side, rgba(122, 234, 0, .13), rgba(122, 234, 0, .05) 55%, transparent); pointer-events: none; }
@media (min-width: 900px) { .project-kop-tekst { container-type: inline-size; } }
/* Een liggende onthulling bovenaan krijgt de maat van het liggende vlak uit het verhaal */
.project-kop.liggend .container { grid-template-columns: minmax(0, 1fr) 720px; }

/* Meter en balk: lopen mee met de streek */
.meter { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; max-width: 19rem; font-family: var(--font-label); font-stretch: 125%; font-weight: 700; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-subtle); }
.meter span:last-child { color: var(--color-accent); }
.meter i, .balk { position: relative; display: block; height: 2px; border-radius: 2px; background: var(--color-border); }
.meter b, .balk b { position: absolute; left: 0; top: -1px; height: 4px; width: 100%; border-radius: 3px; background: var(--color-accent); transform: scaleX(0); transform-origin: left center; }
.balk { max-width: 19rem; margin: 2rem 0; }

/* Het onthullingsvlak: voor-beeld, daarover het na-beeld dat de streek schildert */
.onthulling { position: relative; margin: 0; }
.onthulling-vlak { overflow: hidden; aspect-ratio: 3 / 4; }
.onthulling.liggend .onthulling-vlak { aspect-ratio: 4 / 3; }
.onthulling-vlak > img { position: absolute; inset: 0; }
.onthulling-vlak.getekend > img { display: none; }
.onthulling-svg { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 12px; }

/* Na het afwerken blijft het voor-beeld als klein fotootje in de hoek */
.voor-inzet { position: absolute; bottom: 14px; z-index: 1; width: 24%; border-radius: 6px; overflow: hidden; box-shadow: 0 14px 30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(242, 242, 238, .35); opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; pointer-events: none; }
.voor-inzet.links { left: 14px; }
.voor-inzet.rechts { right: 14px; }
.foto .voor-inzet img { height: auto; aspect-ratio: 3 / 4; border-radius: 0; filter: saturate(.32) brightness(.78); }
.onthulling.liggend .voor-inzet img { aspect-ratio: 4 / 3; }
.voor-inzet .tag { left: 6px; top: 6px; padding: .34rem .46rem .3rem; font-size: .54rem; }
.onthulling.klaar .voor-inzet { opacity: 1; transform: none; }
.verhaal .voor-inzet { width: 30%; }
.verhaal .onthulling.liggend .voor-inzet { width: 27%; }

/* Het verhaal in stappen: het beeld links of rechts, de tekst ernaast */
.verhaal { padding-bottom: calc(var(--spacing-section) * .25); }
.stap { --media: 540px; display: grid; align-items: center; column-gap: 6rem; margin-bottom: var(--spacing-section); }
.stap.liggend { --media: 720px; }
.stap.beelden { --media: auto; }
.stap.links { grid-template-columns: var(--media) minmax(0, 1fr); }
.stap.rechts { grid-template-columns: minmax(0, 1fr) var(--media); }
.stap-beelden { display: grid; grid-template-columns: 500px 243px; gap: 20px; }
.stap-beelden .groot { grid-row: span 2; }
/* beelden met een andere verhouding (liggend, video) mogen de kolom niet breder duwen */
.stap-beelden > .foto { min-width: 0; align-self: start; }
/* twee beelden: het kleine versprongen onderaan naast het grote */
.stap-beelden.twee > .foto { align-self: end; }
.stap-beelden.twee .groot { grid-row: auto; }
.r11 { aspect-ratio: 1 / 1; }
.stap-nr { margin-bottom: 1rem; font-family: var(--font-label); font-stretch: 125%; font-weight: 700; font-size: .8rem; letter-spacing: .08em; color: var(--color-accent); }
.stap-nr span { color: var(--color-text-subtle); }
.bijschrift { margin-top: 1.5rem; max-width: 23em; font-size: 1.125rem; line-height: 1.55; }
.balk + .stap-kop .stap-nr { margin-top: 0; }
.stap-tekst .citaat:not(.bijschrift) { margin-top: 1rem; max-width: 23em; font-size: 1.125rem; line-height: 1.55; }
.stap-tekst .gat { margin-top: 1.5rem; max-width: 26em; }
.stap-links { list-style: none; display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 2.2rem; }
/* Ook de koppen naast de beelden passen altijd in hun kolom: --h2-woord is de breedte van het langste woord */
@media (min-width: 900px) {
    .stap-tekst, .volgend-tekst { container-type: inline-size; }
    .stap-kop h2, .volgend-tekst h2 { font-size: min(var(--fs-h2), calc(100cqi / (var(--h2-woord, 6) * .52))); }
}

/* Volgend project: de streek eindigt als veeg onder de naam */
.volgend { padding: calc(var(--spacing-section) * .35) 0 calc(var(--spacing-section) * .5); }
.volgend-link { display: grid; grid-template-columns: minmax(0, 1fr) 640px; column-gap: 6rem; align-items: center; text-decoration: none; }
.volgend-tekst .label { margin-bottom: 1.3rem; }
.volgend-tekst .label span { color: var(--color-text-subtle); }
.volgend-titel { display: inline-flex; align-items: center; gap: .9rem; transition: color var(--transition); }
.volgend-titel svg { width: 36px; height: 22px; flex: none; transition: translate var(--transition); }
.volgend-link:hover .volgend-titel { color: var(--color-accent); }
.volgend-link:hover .volgend-titel svg { translate: 6px 0; }

/* Tussenmaten */
@media (max-width: 1279px) {
    .project-kop .container { grid-template-columns: minmax(0, 1fr) 460px; column-gap: 4.5rem; }
    .project-kop.liggend .container { grid-template-columns: minmax(0, 1fr) 600px; }
    .stap { --media: 460px; column-gap: 4.5rem; }
    .stap.liggend { --media: 600px; }
    .stap.beelden { --media: auto; }
    .stap-beelden { grid-template-columns: 420px 204px; gap: 16px; }
    .volgend-link { grid-template-columns: minmax(0, 1fr) 540px; column-gap: 4.5rem; }
}
@media (max-width: 1099px) {
    .project-kop .container { grid-template-columns: minmax(0, 1fr) 400px; }
    .project-kop.liggend .container { grid-template-columns: minmax(0, 1fr) 500px; }
    .stap { --media: 400px; }
    .stap.liggend { --media: 500px; }
    .stap.beelden { --media: auto; }
    .stap-beelden { grid-template-columns: 360px 175px; gap: 14px; }
    .volgend-link { grid-template-columns: minmax(0, 1fr) 460px; }
}

/* Gsm en kleine tablet: alles onder elkaar, de draad loopt langs de rand */
@media (max-width: 899px) {
    .project-kop { padding-top: .25rem; }
    .project-kop .container, .project-kop.liggend .container { grid-template-columns: minmax(0, 1fr); }
    .project-kop-tekst { display: contents; }
    .project-kop .kruimel { order: 1; margin-bottom: 1.5rem; }
    .project-kop .label { order: 2; margin-bottom: .9rem; }
    .project-kop h1 { order: 3; margin-bottom: 1.6rem; font-size: min(clamp(3.2rem, 14vw, 5.6rem), calc(100cqi / (var(--h1-woord, 6) * .52))); }
    .project-kop h1 > span { display: inline; }
    .project-kop .onthulling { order: 4; }
    .project-kop .lead { order: 5; margin-top: 1.8rem; }
    .woorden { order: 6; margin-top: 1.8rem; font-size: 1.0625rem; }
    .lead + .woorden { margin-top: 1.4rem; }
    .project-kop .meter { order: 7; margin-top: 1.6rem; }
    .project-kop .gat { order: 8; margin-top: 2rem; }
    .project-kop .gat + .gat { margin-top: 1rem; }
    .stap, .stap.links, .stap.rechts { grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; margin-bottom: 4.5rem; }
    .stap-tekst { display: contents; }
    .stap > figure, .stap > .stap-beelden { order: 2; }
    .stap-tekst > * { order: 3; }
    .stap-tekst > .stap-kop:first-child { order: 1; }
    .stap-beelden { grid-template-columns: 1fr 1fr; gap: 12px; }
    .stap-beelden .groot { grid-column: 1 / -1; grid-row: auto; }
    .bijschrift { margin-top: 0; font-size: 1.0625rem; }
    .stap-tekst .citaat:not(.bijschrift) { margin-top: 0; font-size: 1.0625rem; }
    .stap-tekst .gat, .stap-links { margin-top: 0; }
    .balk { margin: .3rem 0; }
    .balk + .stap-kop { margin-top: .5rem; }
    .volgend { padding-top: 0; }
    .volgend-link { grid-template-columns: minmax(0, 1fr); row-gap: 2.4rem; }
    .volgend-titel svg { width: 28px; height: 18px; }
}
@media (max-width: 767px) {
    .voor-inzet { bottom: 10px; width: 27%; }
    .voor-inzet.links { left: 10px; }
    .voor-inzet.rechts { right: 10px; }
    .verhaal .voor-inzet { width: 31%; }
}