/**
 * CTXR — kaartjes: toon-op-toon + leesbaarheid (site-breed, op verzoek)
 *
 * Dezelfde behandeling als de kaartjes op de homepage (theme/sections/home-v2.php):
 * elk tekstkadertje met titel + tekst krijgt de vormentaal van de bands (een ring
 * en een zwierige streep) in een tint van zijn eigen kleur, per kaartje anders
 * uitgesneden. Op mobiel wordt de tekst groter (nooit kleiner dan ~17px) met ruimere
 * regelafstand; op desktop blijft de typografie zoals hij was (op verzoek teruggezet).
 * Geladen vanuit theme/snippets/meta.php, dus vóór de stijl van de pagina zelf:
 * daarom !important of "html body" op de paar eigenschappen die het moet winnen.
 *
 * Kaders hier (de homepage regelt zijn eigen kaartjes in home-v2.php):
 *   - /waarom-ctxr: drie stappen (ol.steps), "reken zelf na" (ul.three),
 *     privacy-punten (ul.points)
 *   - /about: "Waarom CTXR" (.cols > .card)
 * Niet: prijskaarten (diensten, waarom-ctxr), quiz, calculator en FAQ.
 *
 * Tinten: --ct-tone kiest de vormen bij de kaartkleur: licht (wit, op geel),
 * geel-op-bruin, of bruin-op-geel.
 *
 * Verder: de oorspronkelijke desktop-lettergroottes van de homepage-kaartjes, de
 * onderstreping in de homepage-H1 (<i>), de tijdslijn voor sliders die op mobiel vanzelf
 * afspelen, op desktop geen sliders (raster), de punt tussen de menu-items op desktop,
 * en (op verzoek) een rustigere basis-typografie op desktop (helemaal onderaan).
 */
:root {
	--ct-light: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20300%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Ccircle%20cx%3D%22372%22%20cy%3D%2218%22%20r%3D%22118%22%20fill%3D%22none%22%20stroke%3D%22rgba%28255%2C255%2C255%2C.42%29%22%20stroke-width%3D%2246%22%2F%3E%3Cpath%20d%3D%22M-40%20262%20C%2070%20196%2C%20190%20298%2C%20440%20206%22%20fill%3D%22none%22%20stroke%3D%22rgba%28255%2C255%2C255%2C.28%29%22%20stroke-width%3D%2258%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2234%22%20cy%3D%2270%22%20r%3D%2222%22%20fill%3D%22rgba%28255%2C255%2C255%2C.28%29%22%2F%3E%3C%2Fsvg%3E");
	--ct-ondark: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20300%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Ccircle%20cx%3D%22372%22%20cy%3D%2218%22%20r%3D%22118%22%20fill%3D%22none%22%20stroke%3D%22rgba%28255%2C222%2C23%2C.07%29%22%20stroke-width%3D%2246%22%2F%3E%3Cpath%20d%3D%22M-40%20262%20C%2070%20196%2C%20190%20298%2C%20440%20206%22%20fill%3D%22none%22%20stroke%3D%22rgba%28255%2C222%2C23%2C.045%29%22%20stroke-width%3D%2258%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2234%22%20cy%3D%2270%22%20r%3D%2222%22%20fill%3D%22rgba%28255%2C222%2C23%2C.045%29%22%2F%3E%3C%2Fsvg%3E");
	--ct-brownish: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20300%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Ccircle%20cx%3D%22372%22%20cy%3D%2218%22%20r%3D%22118%22%20fill%3D%22none%22%20stroke%3D%22rgba%28100%2C13%2C13%2C.07%29%22%20stroke-width%3D%2246%22%2F%3E%3Cpath%20d%3D%22M-40%20262%20C%2070%20196%2C%20190%20298%2C%20440%20206%22%20fill%3D%22none%22%20stroke%3D%22rgba%28100%2C13%2C13%2C.045%29%22%20stroke-width%3D%2258%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2234%22%20cy%3D%2270%22%20r%3D%2222%22%20fill%3D%22rgba%28100%2C13%2C13%2C.045%29%22%2F%3E%3C%2Fsvg%3E");
}

.page-article .band--yellow ol.steps > li { --ct-tone: var(--ct-ondark); }
.page-article .band--brown ul.three > li { --ct-tone: var(--ct-light); }
.page-article .band--yellow ul.points > li { --ct-tone: var(--ct-brownish); }
.page-about .cols > .card { --ct-tone: var(--ct-light); background-color: rgba(255,255,255,.16) !important; }

.page-article .band--yellow ol.steps > li,
.page-article .band--brown ul.three > li,
.page-article .band--yellow ul.points > li,
.page-about .cols > .card {
	background-image: var(--ct-tone) !important;
	background-repeat: no-repeat !important;
	background-size: 170% auto !important;
	background-position: 100% 0 !important;
}
.page-article ol.steps > li:nth-child(3n+2),
.page-article ul.three > li:nth-child(3n+2),
.page-article ul.points > li:nth-child(3n+2),
.page-about .cols > .card:nth-child(3n+2) { background-position: 0 100% !important; background-size: 190% auto !important; }
.page-article ol.steps > li:nth-child(3n),
.page-article ul.three > li:nth-child(3n),
.page-article ul.points > li:nth-child(3n),
.page-about .cols > .card:nth-child(3n) { background-position: 60% 45% !important; background-size: 210% auto !important; }
.page-article ul.points > li:nth-child(4n+4) { background-position: 20% 0 !important; }

/* leesbaarheid (op verzoek): op mobiel nooit kleiner dan ~17px, ruimere regelafstand, vol contrast.
   Op desktop blijft de typografie zoals hij was (op verzoek teruggezet). */
@media (max-width: 767px) {
	.page-article ol.steps > li > span { font-size: 1.0625rem !important; line-height: 1.55 !important; opacity: 1 !important; }
	.page-article ol.steps > li > strong { font-size: 1.2rem !important; }
	.page-article ul.three > li,
	.page-article ul.points > li { font-size: 1.0625rem !important; line-height: 1.55 !important; }
	.page-article ul.three > li > strong,
	.page-article ul.points > li > strong { font-size: 1.15rem !important; line-height: 1.3 !important; }
	.page-about .cols > .card li { font-size: max(1.0625rem, 1em) !important; line-height: 1.55 !important; }
}

/* homepage op desktop: de kaartjes weer in hun oorspronkelijke verhoudingen (op verzoek
   teruggezet), met een ondergrens van ~17px voor de tekst en koppen die altijd groter blijven
   dan de tekst. html body ervoor: wint van home-v2. */
@media (min-width: 768px) {
	html body .hv-card { font-size: .88em; gap: .6em; }
	html body .hv-card h3 { font-size: max(1.2rem, 1.02em); line-height: 1.2; }
	html body .hv-card p { font-size: max(1.0625rem, .88em); line-height: 1.45; opacity: .9; }
	html body .hv-pillars .hv-card { font-size: .95em; }
	html body .hv-pillars .hv-card h3 { font-size: max(1.3rem, 1.15em); }
	html body .hv-steps { font-size: .92em; }
	html body .hv-steps h3 { font-size: max(1.3rem, 1.12em); }
	html body .hv-steps p { font-size: max(1.0625rem, .9em); line-height: 1.45; }
	html body .hv-who { font-size: .85em; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
	html body .hv-who li { padding: 1.2em .9em; }
	html body .hv-who h3 { font-size: max(1.125rem, .95em); line-height: 1.2; }
	html body .hv-who p { font-size: max(1rem, .85em); line-height: 1.4; opacity: .92; }
}

/* homepage-hero: de onderstreping onder "online makers" in de H1. Sinds de engine-update staat
   de nadruk als <i> in de data (was <em>); home-v2 stijlt alleen em, dus hier ook i. Als inline-block
   met regelhoogte 1, zodat de streep direct onder de woorden staat, ook als de kop daarna doorloopt. */
html body .hv-hero h1 i { font-style: normal; color: #ffde17; position: relative; white-space: nowrap; display: inline-block; line-height: 1; }
html body .hv-hero h1 i::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.06em; height: .14em; background: #ff0099; border-radius: 2px; transform: scaleX(0); transform-origin: left; animation: hv-underline .7s 1.1s ease forwards; }
@media (prefers-reduced-motion: reduce) { html body .hv-hero h1 i::after { transform: none; animation: none; } }

/* tijdslijn onder een slider die op mobiel vanzelf afspeelt (theme/static/js/hs-autoplay.js):
   loopt van links naar rechts vol en kleurt daarbij van geel naar roze */
.hs-time { position: relative; height: 5px; margin: .2em 0 .9em; border-radius: 99px; overflow: hidden; background: rgba(100,13,13,.16); transition: opacity .4s ease; }
.band--brown .hs-time { background: rgba(255,222,23,.2); }
.hs-time > i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #ffde17 0%, #ff0099 100%); clip-path: inset(0 100% 0 0); }
.hs-time.is-off { opacity: 0; height: 0; margin: 0; }

/* desktop (muis/trackpad): geen sliders die meeschuiven met het scrollen, maar de kadertjes
   weer gewoon als raster (op verzoek). Geldt voor elke .hs-slider op de site (homepage,
   /waarom-ctxr). Op touch-schermen blijven het sliders die vanzelf afspelen.
   (html body ervoor: wint van de slider-stijl die later in de pagina zelf staat.) */
@media (pointer: fine) {
	html body .hs { overflow: visible !important; }
	html body .hs .hs-track { display: grid !important; transform: none !important; }
	html body .hs .hs-track:not(.hv-grid):not(.hv-steps):not(.hv-who) { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
	html body .hs-dots { display: none !important; }
}
@media (pointer: fine) and (min-width: 821px) {
	html body .hs .hv-steps li + li::after { display: block !important; }
}

/* menu (desktop, op verzoek): een punt met aan weerszijden een spatie tussen de menu-items
   (de ruimte links komt uit de bestaande gap van de lijst). Niet in het uitklapmenu op mobiel
   en niet in het zwevende menu. */
@media (min-width: 768px) {
	header#top nav:not(.float-nav) > ul[data-node-id="menu"] > li + li::before { content: "\00b7"; display: inline-block; margin-right: .9rem; font-weight: 700; opacity: .75; }
}

/* typografie (op verzoek): op desktop waren body-tekst en koppen buitenproportioneel groot.
   site.css laat de basisgrootte meegroeien met de schermbreedte (clamp(1rem, .5789rem + 1.0526vw,
   2rem): 22,7px op 1280, 24,4px op 1440, tot 32px). Hier groeit hij rustig en stopt vroeg
   (17,3px op 1280, 17,8px op 1440, max 19px); op mobiel blijft het 16px. De koppen zijn
   minder groot ten opzichte van de tekst. Alles in em schaalt mee (menu, kaarten, knoppen). */
body { font-size: clamp(1rem, .8rem + .35vw, 1.1875rem); }
@media (min-width: 768px) {
	h1 { font-size: 2.1em; }
	h2 { font-size: 1.65em; }
	h3 { font-size: 1.25em; }
	/* de H1 van de homepage-hero heeft een eigen schaal (3,6vw); die rustiger mee */
	html body .hv-hero h1 { font-size: clamp(2em, 2.8vw, 2.5em); }
}

/* portfolio-overzicht (op verzoek): de beelden naast de tekst kleiner, zodat ze mooi op de pagina
   passen en verticaal op één lijn staan met de tekst ernaast. Nooit bijgesneden: het beeld krijgt een
   maximale breedte en hoogte en houdt zijn eigen verhoudingen. Alleen op desktop/tablet; op mobiel
   blijft het beeld boven de tekst over de volle breedte. */
@media (min-width: 769px) {
	html body .pf-row-inner { align-items: center; gap: 3.5em; }
	html body .pf-row-media { flex: 0 0 min(38%, 400px); margin: 0; overflow: visible; border-radius: 0; display: flex; justify-content: center; }
	html body .pf-row-media a { display: block; border-radius: .75rem; overflow: hidden; line-height: 0; box-shadow: 0 .8em 2em rgba(0,0,0,.18); }
	html body .pf-row-media img { width: auto; max-width: 100%; max-height: 340px; }
	html body .pf-row-text { flex: 1 1 0; }
}