/**
 * Layout-primitieven — aiagentcycle
 *
 * Vier patronen dekken vrijwel elke sectie uit de 46 Figma-frames. Ze zijn
 * intrinsiek responsief: geen enkele media query, alles op auto-fit, clamp
 * en max-width. Daardoor werkt een nieuwe pagina meteen op elk formaat en
 * kost een extra landingspagina nul nieuwe CSS.
 *
 * Bron: docs/specs/frames/*.md, alle 46 frames uitgelezen 2026-08-10.
 * Besluit D-020: de Figma-designs zijn leidend. Wat hier bewust afwijkt,
 * staat per regel toegelicht — en wijkt uitsluitend af waar het ontwerp op
 * een telefoon niet kán werken.
 */

/* ---------------------------------------------------------------------------
   1. BAND — de horizontale drager
   Figma tekent alles in een band van 1200px binnen 1440px (px 120).
   Onder 1440 moet die marge meekrimpen, anders schuift de inhoud eruit.
   --------------------------------------------------------------------------- */
.aac-band {
	width: 100%;
	/* CH-019. De padding hoort BUITEN de bandbreedte te vallen.
	   Met box-sizing:border-box ging `max-width:1200px` + `padding-inline`
	   ervan af in plaats van erbij: de inhoud haalde nooit meer dan 1067px
	   (maximum van min(1200, W-2p) - 2p, bij W~1333). Elke drie-koloms rij
	   viel daardoor terug naar twee, want die vraagt exact 1200 (D-022).
	   Nu is de buitenmaat 1440 en de inhoud exact 1200 — de verhouding uit
	   Figma: 1200 binnen een frame van 1440. */
	max-width: calc(var(--wp--style--global--wide-size, 1200px) + 2 * var(--wp--style--root--padding-left));
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left);
}

/* ---------------------------------------------------------------------------
   2. STACK — verticaal ritme
   Vervangt de vaste y-posities uit Figma. Secties krijgen hun ademruimte van
   clamp() in plaats van een hardgecodeerde py-waarde, zodat 72px op desktop
   netjes 40px wordt op een telefoon.
   --------------------------------------------------------------------------- */
.aac-stack > * + * {
	margin-block-start: var(--aac-stack-gap, var(--wp--preset--spacing--40));
}

/* `.aac-sectie` staat hier NIET meer. Tot 2026-08-11 zette dit bestand
   `padding-block: var(--wp--preset--spacing--70)` — clamp(2.5rem, 6vw, 4.5rem),
   dus maximaal 72px. style.css r187-190 zet diezelfde klasse op
   `--wp--custom--sectie--pad-standaard` (88px uit theme.json). Gelijke
   specificiteit (0,1,0) en primitieven laadt ná style.css
   (functions.php r82-89), dus won de 72. Twee gevolgen, en het tweede was het
   ergste:
   1. elke standaardsectie was 2x16px korter dan theme.json voorschrijft;
   2. de vier modifiers `.aac-sectie--hero/--compact/--krap/--cta`
      (style.css r192-195) konden NOOIT winnen. Ook zij zijn (0,1,0), maar ze
      staan in het bestand dat eerder laadt. Ze waren dus niet alleen
      ongebruikt — ze waren onbruikbaar. Een pattern dat er één opzette, zou
      geen enkel verschil hebben gezien.
   Door de regel hier te schrappen is style.css + theme.json weer de enige
   bron voor sectiepadding, en werkt een modifier zodra een pattern hem draagt. */

/* ---------------------------------------------------------------------------
   2b. SECTIEPADDING PER INSTANTIE — tijdelijke brug, bedoeld om te verdwijnen
   Figma kent geen vaste padding per patroon: dezelfde `hero-tekst` staat op
   72px op de marketingframes en op 64px op de juridische. De padding hoort dus
   per sectie-instantie in de markup te staan, als modifierklasse. Zolang géén
   enkel pattern of template die modifier draagt (geverifieerd: `grep -oh
   'aac-sectie--[a-z]*' patterns/ templates/` → 0 treffers) zou elke sectie op
   de basiswaarde 88 uitkomen — ook de 34 die in Figma aantoonbaar 72, 80 of 96
   zijn. Dit blok overbrugt dat: het bindt de patroonklasse die wél in de markup
   staat aan de tokenwaarde die in het frame gemeten is. Nagemeten over de 21
   gepubliceerde pagina's: 29 secties komen op 72, 3 op 80, 2 op 96; 10 blijven
   op de basis 88 en staan hieronder als gemelde uitzondering.

   Elke regel hieronder is met een node-ID te controleren. De waarden zijn niet
   overgenomen uit een samenvatting maar nagerekend op de frame-geometrie
   (sectiehoogte minus de y van het eerste en het einde van het laatste kind);
   de methode is geijkt op `3:66`, waar hij exact de 80 uit de frame-extractie
   oplevert.

   `:not([class*="aac-sectie--"])` is de zelfvernietigingsknop: zet een pattern
   straks `aac-sectie--krap` op de sectie, dan matcht de regel hier niet meer en
   wint de modifier uit style.css. Dit blok kan dan in zijn geheel weg.
   --------------------------------------------------------------------------- */

/* 72px — `--krap`.
   hero-tekst      `3:107` `4:20` `4:87` `5:20` `40:20` `6:20` `41:116` `41:61`
   hero-split      `4:189` (Werkwijze) · `6:74` (Over)
   hero-formulier  `3:14`  (Scan)
   hero-kennisbank `41:116` — h 284, kop y 72, laatste tekst eindigt 212 → 72/72
   artikel-kaart   `41:119` — h 546, kop y 72, laatste rij eindigt 474 → 72/72
                   (de sectie "Start hier" op het kennisbankframe)
   datatabel       `32:24`  — h 534, kop y 72, laatste kaart eindigt 462 → 72/72
   prose-lang      `32:53` `32:56` — h 257, kop y 72, tekst eindigt 185 → 72/72

   Twee klassen staan hier op een AFGELEIDE waarde, en dat hoort gezegd:
   `.aac-artikel-lijst-sectie` ("Alle artikelen") en `.aac-onderwerp-index`
   ("Onderwerpen") bestaan niet op het kennisbankframe — Figma tekent daar maar
   één artikelraster, `41:119`. Ze krijgen de 72 van dát raster omdat het
   hetzelfde sectietype is; wie een eigen ontwerp voor die twee maakt, moet deze
   twee regelnamen opnieuw beoordelen. */
.aac-sectie:not([class*="aac-sectie--"]):is(
	.aac-hero-tekst,
	.aac-hero-split,
	.aac-hero-formulier-split,
	.aac-hero-kennisbank,
	.aac-artikel-kaart,
	.aac-artikel-lijst-sectie,
	.aac-onderwerp-index,
	.aac-datatabel,
	.aac-prose-lang
) {
	padding-top: var(--wp--custom--sectie--pad-krap);
	padding-bottom: var(--wp--custom--sectie--pad-krap);
}

/* 72px — `--krap`, tweede vorm: de templates.
   `single.html`, `single-aac_solution.html`, `single-aac_icp.html`,
   `archive*.html` en `search.html` zetten `aac-sectie` op een kale
   `<section>` zonder patroonklasse. De eerste daarvan is inhoudelijk gewoon
   de `hero-tekst` uit Figma — hij draagt de H1 van de pagina (als
   `post-title` op de singles, als `core/heading` op het archief) en staat op
   off-white. Figma zet die op 72: `5:20` `26:20` `39:20` `39:92` `5:153`
   (use-cases), `40:20` `40:98` (ICP), `5:20` (Oplossingen-archief).
   Herkenbaar aan de H1 als direct kind — beide varianten renderen als
   `<h1>`. `:has()` is sinds eind 2023 breed beschikbaar.

   LET OP — twee soorten kale secties vallen hier bewust buiten:
   - de wikkel om `post-content` in diezelfde templates. Die heeft geen
     tegenhanger in Figma en hoort er volgens V3 §M5 helemaal af te gaan;
     zolang hij er staat telt zijn padding op bij die van de patterns
     erbinnen. Hem hier een waarde geven zou dat verstoppen.
   - de twee kaartsecties op `/oplossingen/` (`5:23` en `5:43`, allebei
     py 80). Die dragen geen enkele klasse waaraan ze te herkennen zijn en
     beginnen met een gewone H2, net als vier andere secties die géén 80
     horen te krijgen. Ze hebben `aac-sectie--compact` in
     `archive-aac_solution.html` nodig; gemeld, niet hier geraden. */
.aac-sectie:not([class*="aac-sectie--"]):has(> h1) {
	padding-top: var(--wp--custom--sectie--pad-krap);
	padding-bottom: var(--wp--custom--sectie--pad-krap);
}

/* 80px — `--compact`.
   faq-lijst          `3:66`  — h 607, vraag-vak y 80, laatste kaart eindigt 527 → 80/80
   prijsrij           `3:110` (frame-extractie: padding 120/80)
   vergelijkingstabel `4:90`  (idem) */
.aac-sectie:not([class*="aac-sectie--"]):is(
	.aac-faq-lijst,
	.aac-prijsrij,
	.aac-vergelijkingstabel
) {
	padding-top: var(--wp--custom--sectie--pad-compact);
	padding-bottom: var(--wp--custom--sectie--pad-compact);
}

/* 96px — `--hero`. Twee uitzonderingen, allebei gemeten.
   `2:20` Home-hero: als enige hero-split op 96 (frame-extractie: padding 120/96).
   Daarom op `body.home` gescoped — de klasse `.aac-hero-split` zelf zegt 72.
   `41:12` bedanktpagina: h 506, eerste tekst y 96, laatste eindigt 410 → 96/96. */
.aac-sectie:not([class*="aac-sectie--"]).aac-hero-gecentreerd,
body.home .aac-sectie:not([class*="aac-sectie--"]).aac-hero-split {
	padding-top: var(--wp--custom--sectie--pad-hero);
	padding-bottom: var(--wp--custom--sectie--pad-hero);
}

/* ---------------------------------------------------------------------------
   3. RASTER — kaartrijen
   Dit is de kern van de mobiele werking. De smalste kaart in de designs is
   384px; met auto-fit levert dat vanzelf 3 kolommen op de band van 1200,
   2 rond 790px en 1 onder 410px. Geen breakpoint nodig.
   --------------------------------------------------------------------------- */
.aac-raster {
	display: grid;
	/* De rijen zijn semantisch <ul>/<ol> (contractregel 7). Zonder dit
	   verschijnen bullets, en bij de genummerde procedurerij een dubbele
	   nummering naast het cijfer dat al in de tekst staat. */
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var(--wp--custom--gap--kaarten);
	grid-template-columns: repeat(auto-fit, minmax(min(var(--aac-kaart-min, 384px), 100%), 1fr));
	/* Productiepolish CH-040: kaarten binnen dezelfde horizontale rij delen
	   één hoogte. Grid-stretch gebruikt de hoogste intrinsieke kaart als maat;
	   er komt dus nergens een vaste pixelhoogte bij. */
	align-items: stretch;
}
.aac-raster--breed { --aac-kaart-min: 588px; }  /* de 2-koloms rijen */
/* CH-019: deze twee krijgen gap 20 in plaats van de 24 uit spacing--40.
   Nagerekend tegen een band van 1200: 4x285 + 3x24 = 1212 en
   5x222 + 4x24 = 1206 passen NIET en vallen een kolom terug; met gap 20
   is het 1200 respectievelijk 1190. Figma schrijft voor deze rijen ook 20
   voor (docs/specs/frames/NL-overig.md r164). De 3- en 2-koloms rijen
   houden 24, want die komen daarmee exact op 1200 uit. */
.aac-raster--smal  { --aac-kaart-min: 285px; gap: 20px; }  /* de 4-koloms fase-rij */
.aac-raster--extra-smal { --aac-kaart-min: 222px; gap: 20px; }  /* de 5-koloms rij op Over */

/* Onder deze breedte past ook de smalste 222px-variant binnen de werkelijke
   paginagoot nog maar één keer. Gestapelde kaarten houden dan hun eigen
   intrinsieke hoogte; stretch heeft daar geen visuele of semantische taak. */
@media (max-width: 480px) {
	.aac-raster { align-items: start; }
}

/* De gestapelde variant van `fase-rij-breed` (Werkwijze `4:201`: vier kaarten
   van 1200px ónder elkaar, tegenover vier van 285px naast elkaar op Home
   `2:48`). Eén kolom is hier niets anders dan een kaartminimum van 100%, dus
   de bestaande auto-fit hoeft niet vervangen te worden — geen tweede raster,
   geen media query, geen vaste breedte.

   Deze regel stond als openstaand punt in de docblock van
   `patterns/fase-rij-breed.php`: dat pattern mocht in zijn eigen ronde geen
   CSS schrijven en viel daarom terug op de rij-weergave — lelijk, niet stuk.
   Toegevoegd 2026-08-10, samen met `.aac-procedurerij__badge` in
   componenten.css; die twee waren de laatste twee patterns die op een
   ongeschreven CSS-regel wachtten. */
.aac-fase-rij-breed--gestapeld .aac-raster { --aac-kaart-min: 100%; }

/* min() in de minmax is essentieel: zonder dat loopt een kaart van 384px
   buiten een viewport van 360px en krijg je horizontaal scrollen. */

/* ---------------------------------------------------------------------------
   4. SPLIT — tekst naast beeld
   Figma zet de hero op 700 + 360 met een vaste gap. Onder ±900px moet dat
   onder elkaar; auto-fit met een ruime minimum doet dat zonder query.
   --------------------------------------------------------------------------- */
.aac-split {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3.75rem);
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	align-items: center;
}

/* Scan `3:14` is de enige split met een eigen desktopcontract. De 1200px
   band bevat 600px tekst + 56px gap + 480px formulier; de resterende 64px
   blijft rechts leeg zoals in Figma. Onder 1280px blijft de intrinsiek
   responsieve generieke split leidend, omdat er geen mobiel ontwerp is. */
@media (min-width: 80rem) {
	.aac-hero-formulier-split .aac-split {
		grid-template-columns:
			minmax(0, var(--wp--custom--kolom--scan-tekst))
			minmax(0, var(--wp--custom--kolom--scan-formulier));
		gap: var(--wp--custom--gap--hero-kolommen-scan);
	}
}

/* ---------------------------------------------------------------------------
   5. PROSE — leesbreedte
   Figma zet lopende juridische tekst op 1000px (~150 tekens per regel).
   Dat is voor niemand prettig en op mobiel irrelevant. Hier begrensd op 72ch;
   dit is een bewuste afwijking van het design, vastgelegd in D-020-context.
   --------------------------------------------------------------------------- */
.aac-prose { max-width: var(--wp--custom--prose, 72ch); }
.aac-prose--juridisch {
	width: 100%;
	max-width: 62.5rem;
	margin-inline: 0;
}
.aac-prose > * + * { margin-block-start: 1em; }

/* ---------------------------------------------------------------------------
   6. DE MOBIELE REPARATIES
   Alles hieronder corrigeert iets wat in Figma op 1440px klopt maar op een
   telefoon breekt. Dit is het enige waar het design bewust wordt overruled,
   en precies wat er is afgesproken: "alleen telefoon veranderen".
   --------------------------------------------------------------------------- */

/* 6a. nowrap eraf.
   In de designs staat white-space:nowrap op ~30 koppen en microcopy-regels.
   Eén CTA-kop is 996px breed en breekt daarmee al onder een viewport van
   1200px. Op 390px loopt dat ver buiten beeld. */
.aac-band :is(h1, h2, h3, h4, p, span, a, li) { white-space: normal; }

/* 6b. Vaste tekstbreedtes worden maxima.
   Figma zet breedtes van 700/640/600/560/…/237px hard op tekstblokken.
   Als max-width doen ze precies wat bedoeld is en krimpen ze wel mee. */
.aac-breedte-700 { max-width: 700px; }
.aac-breedte-640 { max-width: 640px; }
.aac-breedte-600 { max-width: 600px; }
.aac-breedte-560 { max-width: 560px; }
.aac-breedte-328 { max-width: 328px; }

/* 6c. Niets mag horizontaal scrollen.
   Vangnet, geen excuus: als dit ooit aanslaat is er elders iets fout. */
html, body { overflow-x: clip; }
.aac-band > * { min-width: 0; }

/* 6d. Tabellen. De vergelijkingstabel heeft vaste kolommen (300/320/290/290)
   en de prijsrij 360/190/540. Op een telefoon past dat niet; laat de tabel
   in zijn eigen container scrollen in plaats van de pagina open te duwen. */
.aac-tabel-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.aac-tabel-wrap > table { min-width: 40rem; }

/* 6e. Knoppen huggen hun label.
   De Engelse primaire CTA is 269px tekst in een knop van 321px — geen
   speling. Vaste breedtes zouden bij een langere vertaling afkappen.

   HOOGTE — toegevoegd 2026-08-11 na de theme.json-ronde.
   `theme.json` `styles.elements.button` schrijft de Figma-knop voor: 16px
   semibold, regelhoogte 1.1875 (= 19px), padding 14/26 → 14 + 19 + 14 = 47px
   (`NL-overig.md` r46, r520-521, r523-525). Dat blok raakt alleen
   `.wp-element-button`. `.aac-knop` zette geen `font-size` en geen
   `line-height` en erfde dus de bodytypografie: 1.0625rem (17px) × 1,6 =
   27,2 + 28 = **55,2px**. theme.json zei 47, de site toonde 55,2 — twee
   bronnen die iets anders beweren.

   Bewust ZONDER fallbackwaarde, anders dan de twee regels hieronder: een
   `var(--x, 16px)` zou de maat een tweede keer vastleggen, en dat is precies
   wat hier wordt opgelost. Ontbreekt het token, dan valt de declaratie weg en
   erft de knop weer de bodymaat — zichtbaar fout in plaats van stil verkeerd.

   `1rem` = 16px: geen enkel stylesheet in dit theme zet `html { font-size }`,
   dus de root staat op de browserstandaard. Nagekeken in style.css,
   primitieven.css, componenten.css en de gegenereerde global styles. */
.aac-knop {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: auto;
	max-width: 100%;
	border-radius: var(--wp--custom--knop--radius, 10px);
	padding: var(--wp--custom--knop--padding, 0.875rem 1.625rem);
	text-decoration: none;
	font-size: var(--wp--custom--knop--label);
	line-height: var(--wp--custom--knop--regelhoogte);
	font-weight: 600;
}

@media (max-width: 30rem) {
	.aac-knop:not(.aac-knop--zonder-pijl) {
		max-inline-size: 15rem;
		justify-content: center;
	}

	.aac-knop__label {
		min-inline-size: 0;
		text-align: center;
	}
}
/* De pijl is een apart element, geen twee spaties in de tekst. In HTML
   klappen die toch samen; dit geeft dezelfde optische ruimte op elk formaat. */
.aac-knop::after { content: "→"; }
/* De headerknop draagt in Figma géén pijl (`2:19`, `3:106`, `4:19`: alleen
   "Gratis scan"). Zonder deze modifier zet de regel hierboven er alsnog een
   bij — een verschil dat je pas in de gerenderde header ziet. */
.aac-knop--zonder-pijl::after { content: none; }

/* ---------------------------------------------------------------------------
   7. TOEGANKELIJKHEID
   --------------------------------------------------------------------------- */
/* DE FOCUSRING STAAT HIER NIET MEER — geschrapt 2026-08-11, SC 1.4.11.
   Hier stonden twee regels die style.css r120-142 letterlijk herhaalden, met
   andere kleuren, en die op laadvolgorde wonnen:

     :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible
         → outline-color: var(--wp--preset--color--cycle-teal)   #12B5B0
     .has-ink-background-color :where(a, button):focus-visible
         → outline-color: var(--wp--preset--color--teal-licht)   #2DD4BF

   De teal ring is doorgerekend tegen elk fond waarop hij werkelijk verschijnt
   (WCAG 2.x relatieve-luminantieformule, niet geschat):

     #12B5B0 op wit        #FFFFFF   2,54:1   ✗
     #12B5B0 op off-white  #F7F8FA   2,39:1   ✗
     #12B5B0 op teal-vlak  #E8F9F8   2,34:1   ✗   ← laagste, in het vraag-vak
     #12B5B0 op amber-vlak #FFF8E8   2,40:1   ✗

   SC 1.4.11 eist 3:1 voor een focusindicator. Alle vier zakken erdoor; de
   teal-vlak-combinatie het diepst. De tokens uit CH-017 halen het ruim:

     #0B1F3A (`--focus--licht`)  op wit 16,52 · off-white 15,54 ·
                                 teal-vlak 15,21 · amber-vlak 15,61:1  ✓
     #FFFFFF (`--focus--donker`) op ink #0B1F3A 16,52:1 ·
                                 op ink-kaart #132A4A 14,41:1          ✓

   Waarom hier niets voor terugkomt: style.css zet inmiddels beide ringen op
   precies deze tokens, met dezelfde elementenlijst (inclusief `[tabindex]`,
   dus de scrollende tabelcontainers uit 6d houden hun ring) én met de
   gecorrigeerde donkere selector `.has-ink-background-color` /
   `.has-ink-kaart-background-color` — de klassen die de inktvlakken in de
   markup werkelijk dragen. Een derde definitie zou het probleem herhalen dat
   deze reparatie oplost. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}
.aac-skip-link:not(:focus) {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* 6f. Inline SVG's mogen de band niet openduwen.
   De beeldplaceholder is 300x300; onder ~330px viewport loopt die eruit
   (SC 1.4.10 eist reflow tot 320px zonder horizontaal scrollen). */
.aac-beeld-placeholder svg {
	max-inline-size: 100%;
	block-size: auto;
}