/*
 * Layout: het sectie-ritme en de composities.
 *
 * Wat hier hoort: hoe blokken zich tot elkaar verhouden. Wat hier niet hoort: hoe
 * een kaart of een knop eruitziet, dat is components.css.
 *
 * Alle composities traceren naar ux-onderzoek/steal-sheet-home.md. Het
 * storytelling-grid en de spacing-schaal komen uit het brandbook, het mozaïek van
 * ongelijke panelen uit Epidemic Sound, en de rij die rechts uit beeld bloedt uit
 * Klook en Care.com.
 */

/* =======================================================================
 * Sectie-ritme
 *
 * De spacing komt uit de tokens en die halveren onder 768px in één stap, dus
 * elke sectie halveert automatisch mee. Nooit een padding hardcoderen: precies
 * dat liet in het vorige thema drie secties op een telefoon 12rem lucht houden
 * waar de rest 4rem had.
 * ======================================================================= */

.section {
	padding-block: var(--section-lg);
	position: relative;
}

.section--xl { padding-block: var(--section-xl); }
.section--md { padding-block: var(--section-md); }
.section--sm { padding-block: var(--section-sm); }

/* Een sectie die tegen de volgende aan moet sluiten, bijvoorbeeld twee donkere lagen. */
.section--flush-bottom { padding-bottom: 0; }
.section--flush-top { padding-top: 0; }

/*
 * Een pagina zonder hero moet zelf onder de vaste header vandaan blijven.
 *
 * De hero doet dat met zijn eigen padding-top, maar Bedankt en 404 hebben er
 * geen. Daar viel het label "Verstuurd" op 390 onder de headerbalk: top 64 bij
 * een header die tot 104 doorloopt. Op 1440 speelde het niet, want daar is de
 * sectie-padding ruimer dan de header hoog is. Gemeten op 20 augustus 2026.
 *
 * :not(.hero) zodat een hero zijn eigen regeling houdt en de padding niet
 * dubbel krijgt.
 */
.site-main > .section:first-child:not(.hero),
.site-main > .error-404 {
	padding-top: calc(var(--header-hoogte) + var(--section-md));
}

/*
 * De 404 heeft verder geen eigen opmaak, alleen .section-dark en een container.
 * Daardoor had hij ook onderaan geen lucht. Het volwaardige ontwerp hoort bij de
 * restpagina's; dit is het minimum zodat hij niet stuk oogt.
 *
 * DE MINIMUMHOOGTE IS ER OM DE VOET WEG TE DUWEN. Zonder die regel is de 404 zo
 * hoog als zijn drie regels tekst, en dan begint de footer op een breed scherm
 * halverwege het venster. Gemeten op 8 september 2026 op staging, in een venster
 * van 1536 bij 738: de hele pagina was 1021px hoog en de voet begon op 473, dus
 * meer dan de helft van wat je ziet is footer. Dat leest als een pagina die stuk
 * is in plaats van als een nette doodlopende weg.
 *
 * `svh` en niet `vh`, want op een telefoon telt `vh` de adresbalk mee die er bij
 * het scrollen af gaat, en dan steekt de voet er alsnog net onderuit.
 *
 * Centreren mag hier omdat het een floor is en geen hoogte: is de inhoud hoger
 * dan het venster, bijvoorbeeld liggend op een telefoon of bij 200 procent
 * tekst, dan groeit het blok gewoon mee en verdwijnt er niets onder de rand.
 */
.site-main > .error-404 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: calc(100svh - var(--header-hoogte));
	padding-bottom: var(--section-md);
}

/*
 * Twee aangrenzende secties met dezelfde grond krijgen een hairline, zodat ze
 * niet als één blok lezen. Staat op de anti-default-lijst.
 */
.section-dark + .section-dark,
.section-shadow + .section-shadow,
.section-light + .section-light {
	border-top: 1px solid var(--border-light);
}

/* =======================================================================
 * Materiaal-gronden
 *
 * Drie gronden naast de vier kleurgronden uit base.css. Ze bestaan omdat een
 * vlakke kleur, ook met het weefpatroon op 3 procent, niet als materiaal leest.
 * Baksteen, staal en licht metselwerk doen dat wel.
 *
 * Elke grond bestaat uit twee lagen en dat is geen luxe:
 *   ::before draagt de foto
 *   ::after draagt de was
 *
 * Zonder die was moet elke sectie zijn eigen contrast opnieuw uitvinden, en dan
 * gaat het mis. Dat gebeurde bij het prototype: de lichte baksteen zonder was
 * maakte de kop van de afsluiter bijna onleesbaar, en die kop staat op vijf
 * pagina's. De was hoort dus bij de grond en niet bij de sectie.
 *
 * isolation: isolate houdt de negatieve z-index van de twee lagen binnen de
 * sectie, zodat ze niet achter de paginagrond verdwijnen.
 * ======================================================================= */

/*
 * AFSPRAAK: een materiaal-grond komt altijd samen met zijn kleur-grond.
 *
 *   donker  ->  class="section-dark section-brick-warm"
 *               class="section-dark section-steel"
 *   licht   ->  class="section-light section-brick-light"
 *
 * Vierendertig regels in dit thema haken op .section-dark of .section-light om
 * tekstkleur, randen, hints en de focusring om te klappen. Een materiaal-grond
 * vervangt alleen het uiterlijk van het vlak, niet die hele laag. Vergeet je de
 * kleur-grond, dan staat de tekst nog op de instellingen van de andere kant.
 */
.section-brick-warm,
.section-brick-light,
.section-steel {
	position: relative;
	isolation: isolate;
}

.section-brick-warm::before,
.section-brick-light::before,
.section-steel::before,
.section-brick-warm::after,
.section-brick-light::after,
.section-steel::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.section-brick-warm::before,
.section-brick-light::before,
.section-steel::before {
	z-index: -2;
	background-size: cover;
	background-position: center;
}

.section-brick-warm::after,
.section-brick-light::after,
.section-steel::after {
	z-index: -1;
}

/* Warme baksteen: de grond onder het citaat. Donker, met een warme gloed
   bovenin zodat het midden van de sectie oplicht. */
.section-brick-warm {
	background-color: #241c17;
	color: var(--text-on-dark);
}

.section-brick-warm::before {
	background-image: var(--texture-brick-warm);
	filter: brightness(0.42) contrast(1.2) saturate(0.9);
}

.section-brick-warm::after {
	background:
		radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--color-lamp) 10%, transparent), transparent 60%),
		linear-gradient(to bottom, color-mix(in srgb, var(--color-deep) 55%, transparent), color-mix(in srgb, var(--color-deep) 80%, transparent));
}

/* Lichte baksteen: de enige lichte materiaal-grond, met donkere tekst. Bedoeld
   voor de afsluiter, want vijf pagina's zwart op zwart eindigen is te veel. */
.section-brick-light {
	background-color: var(--color-cream);
	color: var(--text-on-light);
}

.section-brick-light::before {
	background-image: var(--texture-brick-light);
	filter: contrast(0.45) brightness(1.3) saturate(0.25);
	opacity: 0.5;
}

/* De crème-was. Zonder deze laag haalde de kop op de donkere voegen geen
   4,5:1 en las hij als een afdruk op een muur in plaats van als tekst. */
.section-brick-light::after {
	background: linear-gradient(to bottom, color-mix(in srgb, var(--color-cream) 80%, transparent), color-mix(in srgb, var(--color-cream) 70%, transparent));
}

/* Staal: de grond onder de bedrijven. Bewust ver naar achteren, want dit is de
   muur achter de naamplaten en niet het onderwerp. Op 0.28 met een donkere was
   erover; op 0.7 zonder was vocht de textuur met de kaarten. */
.section-steel {
	background-color: var(--color-black);
	color: var(--text-on-dark);
}

.section-steel::before {
	background-image: var(--texture-steel);
	filter: brightness(0.42) contrast(0.9) saturate(0.4);
	opacity: 0.42;
}

/*
 * De was is lichter gezet dan bij de eerste proef (0,82 naar 0,72 bovenaan).
 * Op 0,82 was het staal er wel, maar zag je het niet, en dan lost het het punt
 * "erg zwart, er springt niets uit" niet op. Naar beneden toe blijft hij zwaar,
 * zodat de kaarttekst onderaan zijn contrast houdt.
 */
.section-steel::after {
	background: linear-gradient(to bottom, color-mix(in srgb, var(--color-black) 72%, transparent), color-mix(in srgb, var(--color-black) 90%, transparent));
}

/* Twee gelijke materiaal-gronden achter elkaar krijgen dezelfde scheiding als de
   kleurgronden, anders lopen ze in elkaar over. */
.section-brick-warm + .section-brick-warm,
.section-steel + .section-steel {
	border-top: 1px solid var(--border-light);
}

.section-brick-light + .section-brick-light {
	border-top: 1px solid var(--border-dark);
}


.section-light + .section-light {
	border-top-color: var(--border-dark);
}

/* =======================================================================
 * Sectiekop
 * ======================================================================= */

.section-head {
	display: flex;
	flex-direction: column;
	gap: var(--gap-xs);
	margin-bottom: var(--gap-lg);
}

/* "Titel links, knop rechts": gestapeld op mobiel, een rij vanaf 768px. */
@media (min-width: 768px) {

	.section-head--split {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--gap-md);
	}
}

/* =======================================================================
 * Het storytelling-grid
 *
 * De enige echte compositorische vondst van het vorige thema: de rechterkolom
 * begint ruwweg één beeldhoogte lager, waardoor beeld en tekst nooit op één lijn
 * staan. Zonder die verspringing is het een gewone tweekolomslayout.
 * ======================================================================= */

.storytelling-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gap-lg);
}

@media (min-width: 768px) {

	.storytelling-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--gap-xl);
		align-items: start;
	}

	.storytelling-grid > *:nth-child(2) {
		margin-top: var(--storytelling-offset);
	}

	/* Omgekeerde variant: het beeld links en verspringend. */
	.storytelling-grid--flip > *:nth-child(1) {
		margin-top: var(--storytelling-offset);
	}

	.storytelling-grid--flip > *:nth-child(2) {
		margin-top: 0;
	}

	/*
	 * Gelijk beginnende kolommen, sinds 9 september 2026.
	 *
	 * De verspringing hierboven is een compositorisch middel voor een BAND, waar
	 * links tekst staat en rechts beeld en het verschil in beginhoogte de rust
	 * maakt. Op een detailpagina waar de rechterkolom een opzoekbaar gegevensblok
	 * draagt, doet hij het omgekeerde: hij duwt het feit dat de bezoeker kwam
	 * halen twaalf rem naar beneden en laat het kwadrant rechtsboven leeg.
	 *
	 * Zie single-evenement.php. Daar staat het beeld sinds die dag in de
	 * linkerkolom boven de tekst, precies zoals de steal sheet hem voorschrijft,
	 * en dan horen beeld en gegevensblok op dezelfde regel te beginnen.
	 */
	.storytelling-grid--gelijk > *:nth-child(2) {
		margin-top: 0;
	}
}

/* =======================================================================
 * De drie ongelijke deuren
 *
 * Bron: Epidemic Sound, een mozaïek van ongelijke fototegels waarbij het
 * formaatverschil de hiërarchie draagt. Hier drie in plaats van acht, en het
 * formaat codeert de doelprioriteit van de klant: bezoeken groot, historie
 * midden, huren klein.
 *
 * Mobiel: één kolom, alle drie even hoog, want op 375px is een formaatverschil
 * geen hiërarchie meer maar alleen een kleiner vlak.
 * ======================================================================= */

/*
 * DRIE GELIJKE DEUREN, zoals in het goedgekeurde prototype.
 *
 * Hier stond de asymmetrische opzet: 1.35fr naast 1fr, met de grootste deur over
 * twee rijen. Dat was structurele breuk nummer 2 uit het concept, en Sepp noemde
 * die sectie op 18 augustus 2026 "goed, deze sectie is mooi". Het prototype van
 * 20 augustus, dat hij daarna heeft goedgekeurd, heeft drie gelijke deuren, en de
 * opdracht is dat prototype 1 op 1 over te nemen. Het nieuwe besluit gaat voor
 * het oude, maar het is een besluit en geen detail: de doelprioriteit die in het
 * formaatverschil zat (bezoeken groot, huren klein) zit er nu niet meer in.
 *
 * De hairline tussen de deuren is een gap van 1px op een lichte grond, niet een
 * marge. Zo raken de vlakken elkaar en lees je het als één paneel dat in drieën
 * is gedeeld.
 */
.doors {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1px;
	border: 1px solid color-mix(in srgb, var(--color-white) 12%, transparent);
}

@media (min-width: 900px) {

	.doors {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* =======================================================================
 * De sorteerband
 *
 * De signature move. Eén component, twee dichtheden. De tafelrand is de hairline
 * die onder de rij doorloopt en aan beide kanten uit beeld valt: dat is de eigen
 * zet, geen referentie doet dat.
 *
 * De band bloedt rechts uit beeld zodat het zonder pijlen of stippen duidelijk is
 * dat er meer ligt. Bron voor dat mechanisme: Klook en Care.com.
 * ======================================================================= */

.band {
	position: relative;
}

/*
 * De tafelrand. Loopt buiten de container door, over de volle schermbreedte.
 *
 * WAAROM cqw EN NIET vw. `100vw` telt de verticale scrollbalk mee en de rand is
 * gecentreerd, dus met een klassieke scrollbalk van 15px stak hij er aan elke kant
 * 7,5px buiten en scrolde de HELE PAGINA zijwaarts. Gemeten op 8 september 2026 op
 * staging, in Chrome op een venster van 1536 met een zichtbare scrollbalk:
 * clientWidth 1521, scrollWidth 1529, en `window.scrollTo(500, y)` bracht de pagina
 * echt op scrollX 8.
 *
 * Op macOS zie je dat nooit, want daar zweeft de scrollbalk over de pagina en telt
 * hij niet mee. Op Windows staat hij er altijd, en dat is de meerderheid van de
 * bezoekers. De meetlat vond het ook niet: die meet op vaste breedtes in een
 * Playwright-venster zonder klassieke scrollbalk.
 *
 * `100cqw` vraagt het aan de sectie eronder, en die is per definitie precies zo
 * breed als het document zonder scrollbalk. Dezelfde afweging staat al bij de
 * etalage in components.css, daar om een rijhoogte te laten kloppen.
 */
.section:has(.band) {
	container-type: inline-size;
}

.band::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 100cqw;
	transform: translateX(-50%);
	border-bottom: 1px solid var(--border-light);
	pointer-events: none;
}

.section-light .band::after {
	border-bottom-color: var(--border-dark);
}

.band__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 78%;

	/*
	 * Eén pixel en geen marge. De kaarten raken elkaar dan met een haarlijn
	 * ertussen en lezen als één paneel dat in stukken is verdeeld, zoals in het
	 * goedgekeurde prototype. Losse kaarten met lucht ertussen lezen als losse
	 * kaartjes.
	 *
	 * De haarlijn zelf staat als schaduw op de kaarten (zie .band__track > *) en
	 * NIET als grondkleur hier. Een grond kleurt ook de padding van de track, en
	 * die is 24px opzij en 40px onderaan: dan steekt er een grijze L onder en naast
	 * de rij uit. Gezien op het scherm.
	 */
	gap: 1px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	padding-bottom: var(--gap-md);

	/*
	 * De band loopt tot buiten de container zodat hij rechts uit beeld bloedt, en
	 * de linkerkant lijnt uit met de tekst erboven.
	 */
	margin-inline: calc(var(--container-px) * -1);
	padding-inline: var(--container-px);

	/*
	 * Zonder deze regel snapt de eerste kaart naar scrollLeft 24 en niet naar 0,
	 * want scroll-snap-align: start lijnt uit op de rand van de snapport en de
	 * kaart begint achter de padding. Gevolg: de terug-pijl staat aan het begin
	 * niet op uitgeschakeld, omdat de band denkt dat hij al 24px verschoven is.
	 * Gemeten op 20 augustus, dit was geen theorie.
	 */
	scroll-padding-inline: var(--container-px);

	/*
	 * Geen scrollbalk. De bediening is de pijlen en het slepen, en een balk
	 * ernaast is een derde bediening die niets toevoegt. Stond hier eerst als
	 * dunne rode balk; op 21 augustus over de rondgang: "zo'n balk wil ik
	 * eigenlijk nooit zien". Alle drie de eigenschappen zijn nodig, want ze
	 * dekken elk een andere motor.
	 *
	 * Dit raakt elke band op de site. Verbergen mag de bereikbaarheid niet
	 * kosten: ux-onderzoek/meet.mjs klikt de rij helemaal door en telt of elk
	 * item ooit volledig in beeld staat.
	 */
	scrollbar-width: none;
	-ms-overflow-style: none;

	/*
	 * Zonder deze regel scrolt de HELE pagina 1902px zijwaarts.
	 *
	 * De track heeft overflow-x: auto en is zelf keurig begrensd op 1280px, maar
	 * zijn scrollbare gebied lekte toch naar boven: .band scrollWidth 3238,
	 * .container 3262, .section 3342, en daarmee het document. Een gewone
	 * horizontale veeg boven de hero verschoof de pagina naar een leeg zwart vlak
	 * met alleen de vaste header erin. Gemeten op 20 augustus 2026 op de homepage;
	 * de andere pagina's hadden het niet, want daar staat de band in rastermodus.
	 *
	 * contain: paint sluit dat af op de scroller zelf, en dat is precies de lijn
	 * uit base.css: clip waar het probleem zit, niet op het document. Getoetst
	 * tegen vijf alternatieven. overflow-x: clip op .band werkt ook, maar snijdt
	 * de tafelrand van .band::after af, want die is 100vw breed. min-width: 0,
	 * max-width: 100% en overflow: clip auto losten het geen van drieën op.
	 *
	 * Wat na de ingreep gelijk is gebleven: de track blijft 1280px en loopt dus
	 * nog steeds 24px per kant buiten .band door, hij blijft 2350px intern
	 * scrollbaar, en de tafelrand blijft 1440px.
	 */
	contain: paint;

	/*
	 * Ruimte binnen de containment voor wat de hover naar buiten duwt.
	 *
	 * contain: paint knipt alles af op de padding-box, en dat is precies de reden
	 * dat het de zijwaartse scroll oploste. Maar de kaart licht bij hover 10px op
	 * en krijgt een gloed van 60px, en die werden dus mee afgeknipt: de kaart
	 * dook weg in plaats van naar voren te komen. Gezien door er echt overheen te
	 * gaan met de muis.
	 *
	 * De padding maakt de contained box hoger, de negatieve marge zet hem weer op
	 * zijn oude plek. Netto verandert de layout niet en heeft de hover de ruimte.
	 */
	padding-top: 4.5rem;
	margin-top: -4.5rem;
}

/* De derde motor. scrollbar-width dekt Firefox en de moderne standaard,
   -ms-overflow-style het oude Edge, en dit Chrome en Safari. Alle drie nodig. */
.band__track::-webkit-scrollbar { display: none; }

/*
 * De bediening moet boven de opgeschoven band liggen.
 *
 * Door die negatieve marge komt de track 72px omhoog, tot over de pijlen in de
 * sectiekop. Zonder deze regel vangt de band de klik op en zijn de pijlen dood:
 * de enige manier om alle negen bedrijven te bereiken. Gevonden doordat de
 * meetlat vastliep op een klik die nooit aankwam, niet doordat het er raar
 * uitzag.
 */
[data-band-nav] {
	position: relative;
	z-index: var(--z-base);
}

.band__track > * {
	scroll-snap-align: start;

	/*
	 * De haarlijn tussen twee kaarten, als schaduw van 1px naast de kaart en niet
	 * als grond onder de hele track. Een grond kleurt ook de padding van de track
	 * en dan steekt er een grijze rand onder en naast de rij uit. Gezien op het
	 * scherm, niet bedacht.
	 */
	box-shadow: 1px 0 0 color-mix(in srgb, var(--color-white) 12%, transparent);
}

@media (min-width: 640px) {
	.band__track { grid-auto-columns: 46%; }
}

@media (min-width: 1024px) {
	.band__track { grid-auto-columns: 30%; }
}

/*
 * Rastermodus: dezelfde kaart, andere dichtheid. Voor plekken waar de items
 * lange tekst dragen, zoals de negen bedrijven op de bezoekerspagina. Vijftig
 * woorden per item leest niet in een horizontale scroll.
 */
.band--grid .band__track {
	grid-auto-flow: row;
	grid-auto-columns: auto;
	grid-template-columns: minmax(0, 1fr);
	overflow-x: visible;
	margin-inline: 0;
	padding-inline: 0;
	gap: var(--gap-lg);
}

@media (min-width: 640px) {
	.band--grid .band__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.band--grid .band__track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =======================================================================
 * Informatie-rij
 *
 * Drie gelijkwaardige informatieblokken op de tafelrand, voor de praktische
 * informatie: openingstijden, parkeren, toegankelijkheid. Bewust geen kaarten
 * met iconen, want dit is informatie en geen aanbod.
 * ======================================================================= */

.info-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

.info-row > * {
	padding-block: var(--gap-md);
	border-top: 1px solid var(--border-light);
}

.section-light .info-row > * {
	border-top-color: var(--border-dark);
}

.info-row > *:last-child {
	border-bottom: 1px solid var(--border-light);
}

.section-light .info-row > *:last-child {
	border-bottom-color: var(--border-dark);
}

@media (min-width: 768px) {

	.info-row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: var(--gap-lg);
	}

	.info-row > *:last-child {
		border-bottom: 0;
	}
}

/* =======================================================================
 * De faciliteitentabel
 *
 * Veertien regels achter elkaar leest niemand. Genummerde rijen op een hairline,
 * twee kolommen vanaf 768px: de sorteertafel, letterlijk.
 * ======================================================================= */

.facilities {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: var(--gap-xl);
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: facility;
}

/*
 * Twee kolommen die kolom-gewijs vullen, niet rij-gewijs.
 *
 * Met `grid-template-columns: repeat(2, 1fr)` vult een grid per rij, en dan leest
 * de linkerkolom 01, 03, 05, 07 en de rechter 02, 04, 06. Bij een genummerde lijst
 * is dat verwarrend: een lezer scant een kolom naar beneden en verwacht 01 tot 07.
 * `grid-auto-flow: column` met een vast aantal rijen zet 01 tot 07 links en 08 tot
 * 14 rechts.
 *
 * Het aantal rijen staat op 7 omdat de aanlever veertien faciliteiten geeft. Komt
 * er een bij, dan hoort dit getal mee te veranderen; daarom staat het als een
 * eigen property en niet verstopt in de shorthand.
 */
@media (min-width: 768px) {

	.facilities {
		--facility-rows: 7;
		grid-auto-flow: column;
		grid-template-rows: repeat(var(--facility-rows), auto);
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* =======================================================================
 * Formulier-layout
 *
 * Eén kolom voor de velden, want dat vult aantoonbaar sneller in dan meerdere
 * kolommen. De verwachting (reactietijd, privacy, NAP) staat ernaast en niet
 * erboven, zodat het formulier zelf de eerste kolom houdt.
 * ======================================================================= */

.form-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gap-lg);
}

@media (min-width: 900px) {

	.form-layout {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: var(--gap-xl);
		align-items: start;
	}

	/*
	 * De verwachting hangt aan een lijn en niet in de lucht.
	 *
	 * Sinds 1 september staat het formulier in een paneel, en daarnaast lag een
	 * kolom met drie losse tekstblokjes zonder enige binding. Op Contact liep die
	 * kolom ruim 400px eerder af dan het paneel, dus rechtsonder bleef een gat
	 * staan dat als een fout las.
	 *
	 * De scheidslijn is het mechanisme van de gemeten referentie
	 * (linear.app/contact/sales, zie ux-onderzoek/steal-sheet-formulierpaneel.md):
	 * daar komt de omsluiting van een verticale lijn tussen invulkolom en context.
	 * De stretch geeft die lijn zijn volle lengte; de inhoud blijft bovenaan staan,
	 * want .stack is een flexkolom die vanaf de bovenkant vult.
	 *
	 * Alleen vanaf 900px, want onder dat punt staan de twee kolommen onder elkaar
	 * en zou een lijn links van de tekst nergens op slaan.
	 */
	.form-layout__naast {
		/*
		 * Dezelfde sterkte als de verticale lijn tussen twee .channel-blokken op
		 * Contact, en om dezelfde reden: --border-light en --border-dark staan op
		 * 0.05 en dat is een haarlijn die bedoeld is voor de rand van een vlak dat
		 * zijn eigen vulling heeft. Een kolomscheiding moet je zien.
		 */
		--naast-lijn: color-mix(in srgb, var(--color-white) 25%, transparent);

		align-self: stretch;
		padding-left: var(--gap-md);
		border-left: 1px solid var(--naast-lijn);
	}

	.section-light .form-layout__naast { --naast-lijn: color-mix(in srgb, var(--color-black) 25%, transparent); }
}

/* =======================================================================
 * De tijdlijn stond hier, en is weg
 *
 * Hier stonden de regels voor `.timeline__track`, de horizontale sorteerband op
 * de historie-pagina. Die is op 26 augustus 2026 vervangen door een verticale
 * tijdlijn (`.tijdlijn` in components.css), en de klasse is daarbij nooit
 * opgeruimd.
 *
 * Geteld op 8 september 2026 voor hij eruit ging, want dode CSS herken je niet
 * aan hoe hij eruitziet: nul keer in de PHP van het thema, nul keer in de
 * mu-plugins, en nul keer in de gerenderde HTML van /historie/ op staging.
 * De enige verwijzing die er nog was stond in band.js als tweede selector naast
 * `.band__track`, en die is in dezelfde beweging weggehaald.
 * ======================================================================= */

/* =======================================================================
 * Kleine hulpjes die met layout te maken hebben
 * ======================================================================= */

.stack {
	display: flex;
	flex-direction: column;
	gap: var(--gap-sm);
}

.stack--tight { gap: var(--gap-xs); }
.stack--loose { gap: var(--gap-lg); }

.row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-sm);
	align-items: center;
}

/* De leesregel begrenzen binnen een bredere sectie. */
.measure { max-width: var(--container-text); }
.measure--wide { max-width: var(--container-narrow); }

/* =======================================================================
 * De wandelroute-CTA
 *
 * Tekst links, de lijn rechts. Onder het breekpunt onder elkaar, met de lijn
 * eronder: hij is versiering, dus hij gaat achteraan in de leesvolgorde.
 * ======================================================================= */

.route-cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gap-lg);
	align-items: center;
}

@media (min-width: 768px) {

	.route-cta {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: var(--gap-xl);
	}
}


/* =======================================================================
 * De luchtfoto naast zijn uitleg
 *
 * Twee kolommen zonder verspringing, en dat is een meeteis en geen smaak. Het
 * storytelling-grid hierboven zet 12rem margin-top op de tweede kolom; op deze
 * sectie is dat precies de 192px die hem door de schermhoogte-eis van meet.mjs
 * duwt. Het beeld staat in de bredere kolom, want een luchtfoto waarop je de
 * perceelgrens moet kunnen volgen heeft de ruimte nodig, en de tekst ernaast is
 * kort.
 *
 * De kop staat IN de tekstkolom en niet als .section-head erboven. Ook dat is de
 * hoogte: een kop erboven kost ongeveer 120px extra en dan past de sectie op
 * 1512x765 niet meer.
 * ======================================================================= */

.luchtfoto {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gap-lg);
	align-items: center;
}

@media (min-width: 768px) {

	.luchtfoto {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: var(--gap-xl);
	}
}