/*
 * De klassieke inhoud van de informatiepagina's (verzending, retourneren,
 * over ons): HTML met .pagina-tekst, .pagina-intro en .pagina-kaart, zoals de
 * eigenaar hem in WordPress schreef. Afwijking 2 van het plan: opmaak, geen
 * omzetting naar blokken, want de inhoud is van de eigenaar. De vorm is die
 * van het oude thema, in de
 * tokens van het ontwerpsysteem:
 *
 * - tekst en kaart naast elkaar vanaf 1024 (het oude thema: 900, geen breekpunt van
 *   DreamGlow), daaronder de kaart onder de tekst, met 48 ertussen;
 * - de tekst in de leeskolom (contentSize, 35rem), de kaart in de zijkolom
 *   van het ontwerpsysteem (custom.kolom.filters, 320; het oude thema: 340), met ten
 *   minste 64 ertussen;
 * - de intro een maat groter dan de tekst: 20/28 (het oude thema: 18/28; 18 staat niet
 *   meer in de schaal);
 * - de kop van de kaart als eyebrow: de letter Marcellus van het oude thema heeft het
 *   blokthema niet;
 * - de kaart loopt niet mee met scrollen (het oude thema: sticky vanaf 900): de header
 *   van 1b schuift weg en terug, en een vaste bovenrand zou dan verspringen.
 *
 * inc/modules/paginas/pagina.php laadt dit blad alleen waar core/post-content
 * rendert. WordPress zet het vóór de globale stijlen in de pagina; waar een
 * regel van een layoutregel moet winnen, weegt hij meer.
 */

/* Tekst en kaart: één kolom, de kaart 48 onder de tekst. */
.wp-block-post-content:has(> .pagina-kaart) {
	display: grid;
	row-gap: var(--wp--preset--spacing--48);
}

/*
 * In het raster geen marges van de layout (de blockGap) tussen tekst en
 * kaart. En elk kind vult zijn kolom: de layout zet margin-right op auto
 * !important, en dan zou een kind met weinig tekst smaller worden dan zijn
 * kolom. border-box: het thema heeft geen globale reset (het oude thema wel), en in
 * content-box komt de padding van een kind bovenop zijn 100% (de kaart werd
 * 399 in plaats van 351 breed op 390, en de pagina liep over de rand).
 */
.wp-block-post-content:has(> .pagina-kaart) > * {
	box-sizing: border-box;
	margin-block: 0;
	inline-size: 100%;
}

@media (width > 1023px) {
	.wp-block-post-content:has(> .pagina-kaart) {
		grid-template-columns: minmax(0, var(--wp--style--global--content-size)) var(--wp--custom--kolom--filters);
		column-gap: var(--wp--preset--spacing--64);
		/* De kaart direct naast de tekst, 64 ervan af; met space-between stond
		   er 440 leegte tussen (vergelijking met de Rituals-analyse,
		   13-10-2026, L-43). */
		justify-content: start;
		align-items: start;
	}
}

/* De tekst: 24 tussen de blokken, 48 boven een tussenkop (het oude thema). */
.pagina-tekst > * {
	margin-block: 0;
}

.pagina-tekst > * + * {
	margin-block-start: var(--wp--preset--spacing--24);
}

.pagina-tekst > h2:not(:first-child) {
	margin-block-start: var(--wp--preset--spacing--48);
}

/* De eerste alinea draagt de belofte van de pagina: de rol lead uit het
   ontwerpsysteem (§1, "Sectietitel, productintro (lead)"), dezelfde als de
   productintro en .is-style-lead. Was Jost 20/28, een maat zonder rol
   (vergelijking met de Rituals-analyse, 13-10-2026, T-87). */
.pagina-intro {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--dg-rol-sectietitel);
	font-weight: 500;
	line-height: calc(1em + var(--wp--preset--spacing--8));
	letter-spacing: var(--wp--custom--spatie--krap);
	color: var(--wp--preset--color--kop);
}

.pagina-tekst ul,
.pagina-tekst ol {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
	padding-inline-start: var(--wp--preset--spacing--24);
}

/* Genummerde stappen: het cijfer is informatie, de volgorde telt. */
.pagina-tekst ol {
	padding-inline-start: var(--wp--preset--spacing--32);
	list-style: none;
	counter-reset: stap;
}

.pagina-tekst ol > li {
	position: relative;
}

.pagina-tekst ol > li::before {
	content: counter(stap);
	counter-increment: stap;
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: calc(-1 * var(--wp--preset--spacing--32));
	inline-size: var(--wp--preset--spacing--24);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	line-height: var(--wp--custom--leading--m);
	text-align: end;
	color: var(--wp--preset--color--moss);
}

.pagina-tekst li strong {
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

/* De kaart: crème op wit, 24 rondom (het oude thema). */
.pagina-kaart {
	padding: var(--wp--preset--spacing--24);
	background-color: var(--wp--preset--color--surface);
}

/*
 * wpautop zet in de kaart lege alinea's: de bron heeft een losse </p> in elke
 * rij met feiten, en een browser maakt daar een lege p van. Als derde element
 * in de rij trok die de omschrijving weg van de rechterkant.
 */
.pagina-kaart p:empty {
	display: none;
}

/*
 * De kop van de kaart heeft de rol eyebrow: dezelfde declaraties als
 * .is-style-eyebrow in blokstijlen.css. Verandert de rol, verander dan beide.
 */
.pagina-kaart__kop {
	margin: 0 0 var(--wp--preset--spacing--16);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--dg-rol-eyebrow);
	font-weight: 500;
	line-height: var(--wp--custom--leading--s);
	letter-spacing: var(--wp--custom--spatie--groot);
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
}

/* Feit en waarde als term en omschrijving, in twee kolommen. */
.pagina-kaart__feiten {
	margin: 0;
}

.pagina-kaart__feit {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--16);
	padding-block: var(--wp--preset--spacing--8);
	border-block-start: var(--wp--custom--lijn--dun) solid var(--wp--preset--color--line);
}

.pagina-kaart__feit:first-child {
	padding-block-start: 0;
	border-block-start: 0;
}

.pagina-kaart__feit dt {
	color: var(--wp--preset--color--ink-soft);
}

.pagina-kaart__feit dd {
	margin: 0;
	text-align: end;
	text-wrap: balance;
	color: var(--wp--preset--color--ink);
}

/* De links: tegen de rand van de kaart, met lijnen ertussen. */
.pagina-kaart__links {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pagina-kaart__links li + li {
	border-block-start: var(--wp--custom--lijn--dun) solid var(--wp--preset--color--line);
}

/* Een rij van 40, bij aanraken 44: het raakvlak is de hele link, met de padding erin. */
.pagina-kaart__links a {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-block-size: var(--dg-raakvlak);
	padding-block: var(--wp--preset--spacing--8);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.pagina-kaart__links a:focus-visible {
	color: var(--wp--preset--color--moss);
}

@media (hover: hover) {
	.pagina-kaart__links a:hover {
		color: var(--wp--preset--color--moss);
	}
}

/* Hoe je een mens bereikt: onderaan de kaart, na een lijn. */
.pagina-kaart__hulp {
	margin-block-start: var(--wp--preset--spacing--24);
	padding-block-start: var(--wp--preset--spacing--24);
	border-block-start: var(--wp--custom--lijn--dun) solid var(--wp--preset--color--line);
}

.pagina-kaart__hulp p {
	margin: 0;
	color: var(--wp--preset--color--ink-soft);
}

.pagina-kaart__hulp p + p {
	margin-block-start: var(--wp--preset--spacing--12);
}

.pagina-kaart__hulp .pagina-kaart__hulpkop {
	color: var(--wp--preset--color--ink);
}

.pagina-kaart__tijden {
	font-size: var(--wp--preset--font-size--s);
	line-height: var(--wp--custom--leading--s);
}