/*
 * dreamglow/herocarrousel en dreamglow/herodia: de hero van de homepage als
 * carrousel (spec 2026-10-25-homepage-ronde-carrousel-design.md, §4.1; de
 * goedgekeurde mockup mockup-carrousel/carrousel-hero.html). De dia heeft geen
 * eigen blad: dit blad draagt beide.
 *
 * - De dia's liggen in één rastercel (grid-row en grid-column 1). De cel is zo
 *   hoog als de hoogste dia, al vanaf de server: een dia die niet in beeld is,
 *   is onzichtbaar (visibility), maar telt mee in de hoogte. Bladeren verandert
 *   de hoogte dus nooit. Het beeld van een volgende dia staat tot de eerste
 *   bladeractie op hidden (render.php van de dia): zijn vak houdt de maat vast,
 *   alleen het beeld laadt nog niet.
 * - Telefoon en tablet (tot en met 1023): de foto boven in 4:3 over de volle
 *   breedte, de tekst eronder op lichtgrijs, en de bediening onder de tekst.
 * - Op de telefoon (tot en met 639) is de bediening alleen de stipjes: de teller
 *   "1 van 3" en de knoppen Vorige en Volgende zijn daar weg (display: none, dus ook
 *   voor de schermlezer; de dia's houden hun naam "1 van 3" en de stipjes hun naam
 *   "Dia N"). Besluit eigenaar 3-11-2026, zoals de telefoonafdruk van de goedgekeurde
 *   mockup. De tablet (640 tot en met 1023) en de desktop houden alles. 639 is de
 *   grens tussen telefoon en tablet van het ontwerpsysteem (de header, het menu en
 *   het zoeken schakelen daar ook); 450 splitst alleen de staande telefoon af.
 * - Vanaf 1024: een band van custom.hero-carrousel.hoogte (600), de foto van
 *   rand tot rand of rechts (56 %, hooguit 800, met een zachte rand naar links:
 *   licht-op-beeld.rand) op de achtergrondkleur van de dia, een witte waas aan
 *   de tekstkant (licht-op-beeld.waas), de tekst links in een kolom van
 *   custom.hero-carrousel.tekst (470) op de lijn van de container, en de
 *   bediening onderin: de teller links, de puntjes in het midden, de knoppen
 *   rechts.
 * - Vervagen in custom.duur.standaard (300 ms), pas na de eerste bladeractie
 *   (is-gebladerd), en nooit met prefers-reduced-motion.
 * - De achtergrondkleur van een dia komt inline uit zijn attribuut
 *   (--dg-herodia-achtergrond, alleen #rrggbb); zonder kleur lichtgrijs.
 *
 * Elke maat, kleur en duur komt uit een token (HomepageCssTest). De enige
 * getallen zijn de verhouding 4 / 3 (de benoemde uitzondering), de factor 2 (de
 * lijn van de container) en de factor 0,37 van de waas: de tekstkolom staat op 37 %
 * van de waas, zoals in de mockup op 1440. Die factor hangt af van de stops van het
 * token licht-op-beeld.waas (92 % op 0, 78 % op 30 %, 0 op 58 %): verandert dat
 * token, dan moet de factor mee. De contrasttoets
 * (HerocarrouselTest.test_contrast_tegen_de_donkerste_pixel) bewaakt het gevolg.
 */

.dg-herocarrousel {
	/* De lijn van de container: de zijmarge, of op een breed scherm de rand van wideSize. */
	--dg-herocarrousel-lijn: max(var(--dg-zijmarge), calc((100% - var(--wp--style--global--wide-size)) / 2));
	position: relative;
	display: grid;
	background-color: var(--wp--preset--color--lichtgrijs);
}

.dg-herocarrousel__dias {
	display: grid;
	min-inline-size: 0;
}

.dg-herodia {
	--dg-herodia-achtergrond: var(--wp--preset--color--lichtgrijs);
	--dg-herodia-tekstgrond: var(--wp--preset--color--lichtgrijs);
	display: flex;
	flex-direction: column;
	grid-row: 1;
	grid-column: 1;
	min-inline-size: 0;
	opacity: 0;
	visibility: hidden;
}

.dg-herodia.is-actief {
	opacity: 1;
	visibility: visible;
}

/* Vervagen, pas na de eerste bladeractie: dia 1 staat er bij het laden meteen. */
.dg-herocarrousel.is-gebladerd .dg-herodia {
	transition:
		opacity var(--wp--custom--duur--standaard) var(--wp--custom--curve--standaard),
		visibility 0s linear var(--wp--custom--duur--standaard);
}

.dg-herocarrousel.is-gebladerd .dg-herodia.is-actief {
	transition:
		opacity var(--wp--custom--duur--standaard) var(--wp--custom--curve--standaard),
		visibility 0s;
}

.dg-herodia__beeld {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--dg-herodia-achtergrond);
}

.dg-herodia__foto {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* Tot de eerste bladeractie: het vak houdt zijn maat, het beeld laadt niet. */
.dg-herodia__foto[hidden] {
	display: none;
}

/*
 * Een dia zonder foto (Review Focus 3) toont zijn achtergrondkleur ook onder
 * 1024: dan krijgt het tekstvlak de kleur van de dia. Zonder kleur in het
 * attribuut is dat lichtgrijs, net als onder een foto.
 */
.dg-herodia--zonder-foto {
	--dg-herodia-tekstgrond: var(--dg-herodia-achtergrond);
}

.dg-herodia__tekst {
	box-sizing: border-box;
	flex: 1 1 auto;
	padding-block: var(--wp--preset--spacing--24) var(--wp--preset--spacing--16);
	padding-inline: var(--dg-herocarrousel-lijn);
	background-color: var(--dg-herodia-tekstgrond);
}

/*
 * De tekststapel van de mockup: bovenschrift, 8, kop, 16, tekst, 24, knop, 16,
 * regel. Het bovenschrift heeft de tokens van de blokstijl eyebrow (Libre
 * Baskerville 400, kapitalen, spatie--groot, --dg-rol-eyebrow), in ink: op de waas
 * haalt ink-soft geen 4,5:1.
 */
.dg-herodia__bovenschrift {
	margin: 0 0 var(--wp--preset--spacing--8);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--dg-rol-eyebrow);
	font-weight: 400;
	line-height: var(--wp--custom--leading--s);
	letter-spacing: var(--wp--custom--spatie--groot);
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

/*
 * De kop in de rol hero, of hij nu de h1 (dia 1) of een h2 is. Hij breekt af zoals in de
 * goedgekeurde mockup: de eerste regel zo vol mogelijk ("Ontdek de schoonheid / in
 * jezelf"), besluit eigenaar 3-11-2026. blocks/header/style.css zet voor alle koppen van
 * de site :where(h1, h2, h3) { text-wrap: balance } (T-61), en dat verdeelde de woorden
 * in evenwicht ("Ontdek de / schoonheid in jezelf"). Dat :where() heeft geen
 * specificiteit, dus dit wint; alleen de koppen van de dia's vragen de gewone afbreking,
 * op elke breedte.
 */
.dg-herodia__kop {
	margin: 0;
	font-size: var(--dg-rol-hero);
	text-wrap: wrap;
}

.dg-herodia__zin {
	margin: var(--wp--preset--spacing--16) 0 0;
	font-size: var(--wp--preset--font-size--m);
	line-height: var(--wp--custom--leading--m);
	color: var(--wp--preset--color--ink);
}

.dg-herodia__knop {
	display: inline-block;
	margin-block-start: var(--wp--preset--spacing--24);
	text-decoration: none;
}

.dg-herodia__regel {
	margin: var(--wp--preset--spacing--16) 0 0;
	font-size: var(--wp--preset--font-size--s);
	line-height: var(--wp--custom--leading--s);
	color: var(--wp--preset--color--ink);
}

/*
 * De bediening: de teller, de puntjes en de knoppen op één rij. Zonder
 * JavaScript staat ze er niet (render.php); met scripting al bij de eerste paint,
 * niet pas bij de hydratatie, zodat er niets verspringt (zoals de
 * carrouselbediening). De zijkolommen zijn minstens zo breed als wat erin staat:
 * zo past de rij met vijf puntjes ook op 320.
 */
.dg-herocarrousel__bediening {
	display: grid;
	grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr);
	align-items: center;
	column-gap: var(--wp--preset--spacing--8);
	padding-block: 0 var(--wp--preset--spacing--24);
	padding-inline: var(--dg-herocarrousel-lijn);
}

.dg-herocarrousel__bediening[hidden] {
	display: none;
}

@media (scripting: enabled) {
	.dg-herocarrousel__bediening[hidden] {
		display: grid;
	}
}

/*
 * De teller en de knoppen staan er pas vanaf 640 (onderaan, bij @media (width > 639px)):
 * op de telefoon is de bediening alleen de stipjes. Verborgen met display: none: dan
 * staat er ook niets in de tabvolgorde of voor de schermlezer. Nergens wijst iets
 * (aria-controls, aria-labelledby) naar de teller of de knoppen.
 */
.dg-herocarrousel__teller {
	display: none;
	justify-self: start;
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	line-height: var(--wp--custom--leading--xs);
	white-space: nowrap;
	color: var(--wp--preset--color--ink);
}

/* In de middelste kolom, ook als de teller en de knoppen (telefoon) er niet zijn. */
.dg-herocarrousel__punten {
	display: flex;
	grid-column: 2;
	justify-self: center;
}

/* Een stip van custom.hero-carrousel.punt in een raakvlak van punt-raakvlak. */
.dg-herocarrousel__punt {
	box-sizing: border-box;
	display: grid;
	place-items: center;
	inline-size: var(--wp--custom--hero-carrousel--punt-raakvlak);
	block-size: var(--wp--custom--hero-carrousel--punt-raakvlak);
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--rond);
	background: transparent;
	cursor: pointer;
}

.dg-herocarrousel__punt::before {
	content: "";
	box-sizing: border-box;
	inline-size: var(--wp--custom--hero-carrousel--punt);
	block-size: var(--wp--custom--hero-carrousel--punt);
	border: var(--wp--custom--lijn--dun) solid var(--wp--preset--color--ink-soft);
	border-radius: var(--wp--custom--radius--rond);
	background-color: var(--wp--preset--color--paper);
}

.dg-herocarrousel__punt[aria-current="true"]::before {
	border-color: var(--wp--preset--color--kop);
	background-color: var(--wp--preset--color--kop);
}

.dg-herocarrousel__knoppen {
	display: none;
	justify-self: end;
	gap: var(--wp--preset--spacing--8);
}

/* Rond, wit, met een rand in ink-soft en de pijl in kop (spec §4.1); het raakvlak voor een vinger. */
.dg-herocarrousel__knop {
	box-sizing: border-box;
	display: inline-grid;
	place-items: center;
	inline-size: var(--wp--custom--raakvlak-grof);
	block-size: var(--wp--custom--raakvlak-grof);
	padding: 0;
	border: var(--wp--custom--lijn--dun) solid var(--wp--preset--color--ink-soft);
	border-radius: var(--wp--custom--radius--rond);
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--kop);
	cursor: pointer;
}

.dg-herocarrousel__knop svg {
	inline-size: var(--wp--preset--spacing--24);
	block-size: var(--wp--preset--spacing--24);
}

@media (hover: hover) {
	.dg-herocarrousel__knop:hover,
	.dg-herocarrousel__punt:hover::before {
		border-color: var(--wp--preset--color--kop);
	}
}

/* Vanaf de tablet de volle bediening: de teller links, de knoppen rechts (op de telefoon alleen de stipjes). */
@media (width > 639px) {
	.dg-herocarrousel__teller {
		display: block;
	}

	.dg-herocarrousel__knoppen {
		display: flex;
	}
}

@media (width > 1023px) {
	/*
	 * De band: de dia vult hem, met de achtergrondkleur onder de foto. De foto en
	 * de waas liggen absoluut in de dia; de tekst is het enige kind in het raster,
	 * verticaal in het midden. isolation houdt hun lagen binnen de dia.
	 */
	.dg-herodia {
		position: relative;
		isolation: isolate;
		display: grid;
		align-items: center;
		block-size: var(--wp--custom--hero-carrousel--hoogte);
		background-color: var(--dg-herodia-achtergrond);
	}

	/*
	 * De waas staat in procenten van zijn eigen breedte (licht-op-beeld.waas). In
	 * de goedgekeurde mockup (1440) eindigt de tekstkolom op 37 % daarvan, waar de
	 * waas nog 0,59 wit is. Op een smaller scherm schuift de kolom naar 49 % (1024),
	 * waar de waas bijna op is, en haalde de tekst op de zee van de strandfoto geen
	 * 4,5:1 meer (gemeten: 2,79:1). Daarom is de waas minstens zo breed als de
	 * kolom gedeeld door 0,37: de kolom staat zo op elke breedte in hetzelfde deel
	 * van de waas, en op 1440 is hij gewoon de volle breedte (spec §6: de waas mag
	 * per dia anders, zolang het contrast gehaald wordt).
	 */
	.dg-herodia::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background-image: var(--wp--custom--licht-op-beeld--waas);
		background-repeat: no-repeat;
		background-size: max(100%, calc((var(--dg-herocarrousel-lijn) + var(--wp--custom--hero-carrousel--tekst)) / 0.37)) 100%;
	}

	.dg-herodia__beeld {
		position: absolute;
		inset: 0;
		aspect-ratio: auto;
	}

	/* Rechts: het fotovlak, met een zachte rand naar de kleur die links doorloopt. */
	.dg-herodia--rechts .dg-herodia__beeld {
		inset-inline-start: auto;
		inline-size: min(var(--wp--custom--hero-carrousel--foto-rechts), var(--wp--custom--hero-carrousel--foto-rechts-max));
		-webkit-mask-image: var(--wp--custom--licht-op-beeld--rand);
		mask-image: var(--wp--custom--licht-op-beeld--rand);
	}

	.dg-herodia__tekst {
		position: relative;
		z-index: 2;
		box-sizing: border-box;
		max-inline-size: calc(var(--dg-herocarrousel-lijn) + var(--wp--custom--hero-carrousel--tekst));
		padding-block: 0;
		padding-inline: var(--dg-herocarrousel-lijn) 0;
		background-color: transparent;
	}

	.dg-herocarrousel__bediening {
		position: absolute;
		inset-inline: 0;
		inset-block-end: var(--wp--preset--spacing--16);
		z-index: 1;
		padding-block: 0;
	}

	.dg-herocarrousel__knoppen {
		gap: var(--wp--preset--spacing--12);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dg-herocarrousel.is-gebladerd .dg-herodia,
	.dg-herocarrousel.is-gebladerd .dg-herodia.is-actief {
		transition: none;
	}
}