/*
 * De blokstijlen van deelproject 2, taak 3: eyebrow en klein (op
 * core/paragraph) en module-tegels (op core/group), en twee regels voor elke
 * module: het vangnet voor twee gelijke modules na elkaar, en de haarlijn
 * boven de crème footer. inc/modules/paginas/pagina.php registreert de stijlen met dit blad,
 * zoals inc/modules/winkel/blokstijlen.php dat voor 4/7 doet: vaste CSS op de
 * vaste klasse, en geen theme.json-partials in styles/. Anders nummert
 * WordPress de klasse per pagina (afwijkingen-4-7.md, "Blokstijlen: statische
 * CSS").
 *
 * WordPress zet dit blad vóór de globale stijlen in de pagina. Een regel die
 * van een layoutregel moet winnen (:root :where(.is-layout-constrained) > *,
 * specificiteit 0,1,0), weegt daarom meer.
 *
 * Elke maat komt uit een token: de modules uit --dg-module-*, de eyebrow uit
 * --dg-rol-eyebrow, lijnen uit --wp--custom--lijn--*.
 */

/*
 * Eyebrow (ontwerpsysteem §1): serif 500, kapitalen met 2 px, ink-soft; 14/24
 * tot en met 1023 en 16/24 vanaf 1024 (de schakelaar --dg-rol-eyebrow).
 * Serif onder 20 px mag alleen in kapitalen of cijfers (§2, regel 9).
 */
.is-style-eyebrow {
	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);
}

/* De tekststapel (ontwerpsysteem §2, regel 5): eyebrow, 8, titel. */
p.is-style-eyebrow + h1,
p.is-style-eyebrow + h2,
p.is-style-eyebrow + h3 {
	margin-block-start: var(--wp--preset--spacing--8);
}

/*
 * Klein (ontwerpsysteem §1, rol "Klein, meta, eenheidsprijs"): 14/24 in Jost,
 * zonder spatiëring, in ink-soft, op elke breedte gelijk (§2, regel 4:
 * alleen koppen krimpen).
 */
.is-style-klein {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--s);
	line-height: var(--wp--custom--leading--s);
	letter-spacing: 0;
	color: var(--wp--preset--color--ink-soft);
}

/* Module tegels (ontwerpsysteem §6): wit, 40, vanaf 1024 64 en vanaf 1440 96. */
.wp-block-group.is-style-module-tegels {
	padding-block: var(--dg-module-tegels);
	background-color: var(--wp--preset--color--paper);
}

/*
 * Het vangnet (spec 2-3, "De valkuil: twee gelijke modules onder elkaar"):
 * de tweede van twee gelijke modules krijgt de helft van zijn bovenpadding,
 * zodat hun ruimtes niet optellen tot een gat. Eén regel per blokstijl, met
 * vier klassen: zo wint hij van de regel van de module zelf (twee klassen),
 * in welk blad die ook staat.
 */
.wp-block-group.is-style-module-tekstband + .wp-block-group.is-style-module-tekstband {
	padding-block-start: calc(var(--dg-module-tekstband) / 2);
}

.wp-block-group.is-style-module-productgrid + .wp-block-group.is-style-module-productgrid {
	padding-block-start: calc(var(--dg-module-productgrid) / 2);
}

.wp-block-group.is-style-module-carrousel + .wp-block-group.is-style-module-carrousel {
	padding-block-start: calc(var(--dg-module-carrousel) / 2);
}

.wp-block-group.is-style-module-tegels + .wp-block-group.is-style-module-tegels {
	padding-block-start: calc(var(--dg-module-tegels) / 2);
}

/*
 * De haarlijn (ontwerpsysteem §6): een crème vlak direct boven de crème
 * footer krijgt een lijn als grens; daar valt de kleurwissel weg. Twee
 * gevallen: een module tekstband als laatste blok van main, en een main die
 * zelf crème is (de 404). Onder de header staat de lijn al: rij 2 van
 * dreamglow/header heeft haar op elke breedte.
 */
main > .wp-block-group.is-style-module-tekstband:last-child,
main.has-surface-background-color {
	border-block-end: var(--wp--custom--lijn--dun) solid var(--wp--preset--color--line);
}