/**
 * 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, en de tekst wordt groter (nooit kleiner dan ~17px) met ruimere
 * regelafstand. Geladen vanuit theme/snippets/meta.php, dus vóór de stijl van de
 * pagina zelf: daarom !important 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.
 *
 * Onderaan: de tijdslijn voor sliders die op mobiel vanzelf afspelen.
 */
: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: tekst nooit kleiner dan ~17px, ruimere regelafstand, vol contrast */
.page-article ol.steps > li > span { font-size: clamp(1.0625rem, .9rem + .3vw, 1.2rem) !important; line-height: 1.55 !important; opacity: 1 !important; }
.page-article ol.steps > li > strong { font-size: clamp(1.2rem, 1rem + .35vw, 1.35rem) !important; }
.page-article ul.three > li,
.page-article ul.points > li { font-size: clamp(1.0625rem, .9rem + .3vw, 1.2rem) !important; line-height: 1.55 !important; }
.page-article ul.three > li > strong,
.page-article ul.points > li > strong { font-size: clamp(1.15rem, 1rem + .3vw, 1.3rem) !important; line-height: 1.3 !important; }
.page-about .cols > .card li { font-size: max(1.0625rem, 1em) !important; line-height: 1.55 !important; }

/* 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; }