/*
 * De uitvoeringen boven de kleurkeuze (ronde 3, 23-10-2026; naar het
 * goedgekeurde voorbeeld uitvoeringen-combineer.html).
 *
 * - De kop: "Uitvoering" links, de som rechts, in de broodletter 14/24 zoals
 *   de legenda van de kleurkeuze eronder ("Kleur: Zwart"): de titel in ink,
 *   de som in ink-soft (5,49:1 op wit).
 * - De kaartjes: drie even brede kolommen op elke breedte (ook op 320); een
 *   vierde breekt af naar een tweede rij. Elk kaartje is één link: het beeld
 *   (hooguit 72, de maat van de miniaturen), het label in de serif (display)
 *   in kop, het aantal kleuren klein in ink-soft.
 * - Tot 450: 4 tussen de kaartjes, 4 opvulling opzij en het label 12/16. Zo
 *   past "Regenboog" (81 breed in 12 px, 95 in 14 px) op 320 op één regel; een
 *   kaartje is daar 93 breed. Vanaf 451: 8 ertussen, 8 opvulling, label 14/24.
 * - Rand 1 px in line, hoek 8. Het kaartje van dit product: de rand in kop en
 *   0,5 erbij als schaduw aan de binnenkant, samen 1,5 zonder dat de inhoud
 *   verschuift.
 * - Aanwijzen: de rand in ink-soft en het label onderstreept (niet alleen
 *   kleur). De focusring van de site (2 px moss) ligt 2 naar binnen, zodat
 *   geen voorouder hem afknipt.
 * - Raakvlak: het kaartje is altijd hoger en breder dan 44.
 *
 * Van de korte tekst tot hier is 12, van hier tot het koopformulier ook 12
 * (besluit eigenaar 2-11-2026: met 24 stond de koopknop op 1440 x 900 15 px onder
 * de rand van het scherm). Blokstijlen.css zet na de korte tekst 24 voor elk
 * volgend element ("summary + *", drie klassen); deze regel heeft er vier.
 * Twee klassen in elke regel die een marge zet: de layoutregels van WordPress
 * komen ná dit blad in de pagina.
 */
.wp-block-group.is-style-koopblok > .wp-block-dreamglow-uitvoeringen.dg-uitvoeringen {
	margin-block: var(--wp--preset--spacing--12);
}

.dg-uitvoeringen .dg-uitvoeringen__kop {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	column-gap: var(--wp--preset--spacing--16);
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 400;
	line-height: var(--wp--custom--leading--s);
	color: var(--wp--preset--color--ink-soft);
}

.dg-uitvoeringen .dg-uitvoeringen__titel {
	color: var(--wp--preset--color--ink);
}

.dg-uitvoeringen .dg-uitvoeringen__lijst {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--4);
	margin: 0;
	margin-block-start: var(--wp--preset--spacing--8);
	padding: 0;
	list-style: none;
}

.dg-uitvoeringen .dg-uitvoeringen__item {
	min-inline-size: 0;
	margin: 0;
	padding: 0;
}

.dg-uitvoeringen .dg-uitvoeringen__kaart {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	block-size: 100%;
	min-block-size: var(--wp--custom--raakvlak-grof);
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--4);
	border: var(--wp--custom--lijn--dun) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--standaard);
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--kop);
	text-align: center;
	text-decoration: none;
	transition: border-color var(--wp--custom--duur--standaard) var(--wp--custom--curve--standaard);
}

.dg-uitvoeringen .dg-uitvoeringen__kaart[aria-current="page"] {
	border-color: var(--wp--preset--color--kop);
	box-shadow: inset 0 0 0 calc(var(--wp--custom--lijn--dun) * 0.5) var(--wp--preset--color--kop);
}

.dg-uitvoeringen .dg-uitvoeringen__kaart:focus-visible {
	outline: var(--wp--custom--focus-ring);
	outline-offset: calc(-1 * var(--wp--custom--focus--afstand));
}

.dg-uitvoeringen .dg-uitvoeringen__beeld {
	display: block;
	inline-size: 100%;
	max-inline-size: var(--wp--custom--miniatuur);
	block-size: auto;
}

.dg-uitvoeringen .dg-uitvoeringen__beeld--leeg {
	block-size: var(--wp--custom--miniatuur);
}

.dg-uitvoeringen .dg-uitvoeringen__label {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	line-height: var(--wp--custom--leading--xs);
	color: var(--wp--preset--color--kop);
	overflow-wrap: anywhere;
}

.dg-uitvoeringen .dg-uitvoeringen__aantal {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	line-height: var(--wp--custom--leading--xs);
	color: var(--wp--preset--color--ink-soft);
}

@media (width > 450px) {
	.dg-uitvoeringen .dg-uitvoeringen__lijst {
		gap: var(--wp--preset--spacing--8);
	}

	.dg-uitvoeringen .dg-uitvoeringen__kaart {
		padding-inline: var(--wp--preset--spacing--8);
	}

	.dg-uitvoeringen .dg-uitvoeringen__label {
		font-size: var(--wp--preset--font-size--s);
		line-height: var(--wp--custom--leading--s);
	}
}

@media (hover: hover) {
	.dg-uitvoeringen .dg-uitvoeringen__kaart:not([aria-current="page"]):hover {
		border-color: var(--wp--preset--color--ink-soft);
	}

	.dg-uitvoeringen .dg-uitvoeringen__kaart:hover .dg-uitvoeringen__label {
		text-decoration: underline;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dg-uitvoeringen .dg-uitvoeringen__kaart {
		transition: none;
	}
}