/* ===========================================================================
 * Blok: werkwijze (stappen met flip-dot-display)
 *
 * blocks/werkwijze.js zet:
 * - .is-actief zodra het canvas draait (dan verdwijnt het CSS-display en
 *   klappen de stappen in tot de actieve);
 * - .is-hijack (vanaf 900px): sticky podium in een baan van --baan hoog;
 * - .is-actief op de stap die aan de beurt is.
 * De kleuren van de schijfjes (--dot-*) en het raster (--raster-*) komen uit
 * de tint van het blok.
 * ========================================================================= */

.blok-werkwijze {
	--werk-rand: var(--gutter);
	color: var(--c-wit);
}

@media (min-width: 900px) {
	.blok-werkwijze {
		--werk-rand: calc(var(--gutter) + 3.125rem);
	}
}

.werkwijze--roze {
	--dot-a: var(--c-pd-roze);
	--dot-b: var(--c-pd-ijsblauw);
	--dot-vul-a: var(--c-pd-licht-roze);
	--dot-vul-b: var(--c-pd-licht-blauw);
	--raster-basis: color-mix(in srgb, var(--c-pd-roze) 3%, var(--c-pd-zwart));
	--raster-a: var(--c-pd-roze);
	--raster-b: var(--c-pd-ijsblauw);
}

.werkwijze--merk {
	--dot-a: var(--c-pd-oranje);
	--dot-b: var(--c-pd-cyaan);
	--dot-vul-a: var(--c-pd-licht-oranje);
	--dot-vul-b: var(--c-pd-licht-blauw);
	--raster-basis: var(--c-pd-zwart);
	--raster-a: var(--c-pd-oranje);
	--raster-b: var(--c-pd-cyaan);
}

/* Kleur per stap: blocks/werkwijze.js laat het raster in dit blok overlopen
   naar de --raster-* van de actieve stap, en de schijfjes naar --dot-*:
   dezelfde kleur, maar fel (gloed verzadigd, vulling licht). */
.werkwijze__stap[data-tint="roze"] {
	--raster-basis: color-mix(in srgb, var(--c-pd-roze) 12%, var(--c-pd-zwart));
	--raster-a: var(--c-pd-roze);
	--raster-b: var(--c-pd-licht-roze);
	--dot-a: var(--c-pd-roze);
	--dot-b: color-mix(in srgb, var(--c-pd-roze) 55%, var(--c-wit));
	--dot-vul-a: color-mix(in srgb, var(--c-pd-roze) 45%, var(--c-wit));
	--dot-vul-b: color-mix(in srgb, var(--c-pd-roze) 18%, var(--c-wit));
}

.werkwijze__stap[data-tint="ijsblauw"] {
	--raster-basis: color-mix(in srgb, var(--c-pd-ijsblauw) 10%, var(--c-pd-zwart));
	--raster-a: var(--c-pd-ijsblauw);
	--raster-b: var(--c-pd-licht-blauw);
	--dot-a: var(--c-pd-ijsblauw);
	--dot-b: color-mix(in srgb, var(--c-pd-ijsblauw) 55%, var(--c-wit));
	--dot-vul-a: color-mix(in srgb, var(--c-pd-ijsblauw) 45%, var(--c-wit));
	--dot-vul-b: color-mix(in srgb, var(--c-pd-ijsblauw) 18%, var(--c-wit));
}

.werkwijze__stap[data-tint="cyaan"] {
	--raster-basis: color-mix(in srgb, var(--c-pd-cyaan) 9%, var(--c-pd-zwart));
	--raster-a: var(--c-pd-cyaan);
	--raster-b: var(--c-pd-licht-blauw);
	--dot-a: var(--c-pd-cyaan);
	--dot-b: color-mix(in srgb, var(--c-pd-cyaan) 55%, var(--c-wit));
	--dot-vul-a: color-mix(in srgb, var(--c-pd-cyaan) 45%, var(--c-wit));
	--dot-vul-b: color-mix(in srgb, var(--c-pd-cyaan) 18%, var(--c-wit));
}

.werkwijze__stap[data-tint="oranje"] {
	--raster-basis: color-mix(in srgb, var(--c-pd-oranje) 13%, var(--c-pd-zwart));
	--raster-a: var(--c-pd-oranje);
	--raster-b: var(--c-pd-licht-oranje);
	--dot-a: var(--c-pd-oranje);
	--dot-b: color-mix(in srgb, var(--c-pd-oranje) 55%, var(--c-wit));
	--dot-vul-a: color-mix(in srgb, var(--c-pd-oranje) 45%, var(--c-wit));
	--dot-vul-b: color-mix(in srgb, var(--c-pd-oranje) 18%, var(--c-wit));
}

.werkwijze__stap[data-tint="merk"] {
	--raster-basis: color-mix(in srgb, var(--c-pd-cyaan) 4%, var(--c-pd-zwart));
	--raster-a: var(--c-pd-oranje);
	--raster-b: var(--c-pd-cyaan);
	--dot-a: var(--c-pd-oranje);
	--dot-b: var(--c-pd-cyaan);
	--dot-vul-a: var(--c-pd-licht-oranje);
	--dot-vul-b: var(--c-pd-licht-blauw);
}

/* --- Opbouw ---------------------------------------------------------------- */
.werkwijze__raam {
	display: grid;
	gap: var(--ruimte-8);
	align-items: center;
	padding-inline: var(--werk-rand);
}

@media (min-width: 900px) {
	.werkwijze__raam {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		gap: clamp(3rem, 6vw, 7rem);
	}
}

.werkwijze__kop {
	max-width: 12ch;
	margin-bottom: var(--ruimte-5);
	font-size: clamp(2.5rem, 1.5rem + 3.6vw, 5rem);
	line-height: 1.04;
	letter-spacing: -0.035em;
}

.werkwijze__intro {
	max-width: 32rem;
	color: rgba(255, 255, 255, 0.72);
}

/* --- Stappen --------------------------------------------------------------- */
.werkwijze__stappen {
	display: grid;
	gap: var(--ruimte-2);
	margin: var(--ruimte-7) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.werkwijze__stap {
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr);
	gap: var(--ruimte-4);
	padding-block: var(--ruimte-4);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.werkwijze__nr {
	padding-top: 0.2em;
	font-family: var(--font-kop);
	font-size: var(--fs-label);
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, 0.4);
	transition: color var(--duur) var(--ease-uit);
}

.werkwijze__stap-titel {
	margin: 0;
	font-size: var(--fs-h3);
	transition: color var(--duur) var(--ease-uit), opacity var(--duur) var(--ease-uit);
}

.werkwijze__uitleg {
	max-width: 34rem;
	margin-top: var(--ruimte-2);
	color: rgba(255, 255, 255, 0.7);
}

.werkwijze__uitleg > :last-child {
	margin-bottom: 0;
}

.werkwijze__knoppen {
	margin-top: var(--ruimte-7);
}

/* Met JS: alleen de actieve stap klapt open, de rest is een rustige lijst. */
.blok-werkwijze.is-actief .werkwijze__stap {
	cursor: pointer;
}

.blok-werkwijze.is-actief .werkwijze__stap-inhoud {
	display: grid;
	grid-template-rows: auto 0fr;
	transition: grid-template-rows 0.6s var(--ease-uit);
}

.blok-werkwijze.is-actief .werkwijze__uitleg {
	min-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.4s var(--ease-uit);
}

.blok-werkwijze.is-actief .werkwijze__stap:not(.is-actief) .werkwijze__stap-titel {
	opacity: 0.42;
}

.blok-werkwijze.is-actief .werkwijze__stap:not(.is-actief):hover .werkwijze__stap-titel {
	opacity: 0.75;
}

.blok-werkwijze.is-actief .werkwijze__stap.is-actief .werkwijze__stap-inhoud {
	grid-template-rows: auto 1fr;
}

.blok-werkwijze.is-actief .werkwijze__stap.is-actief .werkwijze__uitleg {
	opacity: 1;
	transition-delay: 0.12s;
}

.blok-werkwijze.is-actief .werkwijze__stap.is-actief .werkwijze__nr {
	color: var(--c-wit);
}

/* --- Display --------------------------------------------------------------- */
.werkwijze__display {
	position: relative;
	width: min(100%, 44rem, 66svh);
	aspect-ratio: 1;
	margin-inline: auto;
}

/* Het canvas steekt rondom 10% uit voor de gloed (blocks/werkwijze.js). */
.werkwijze__canvas {
	position: absolute;
	display: block;
	pointer-events: none;
}

/* CSS-display (terugval): zelfde maten als het logo, steek 37, bolletje 22:
   tussenruimte (15/37) / (10 + 22/37) = 3,83% van de breedte. */
.werkwijze__dots {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(11, 1fr);
	grid-template-rows: repeat(11, 1fr);
	gap: 3.83%;
}

.werkwijze__dot {
	grid-column: var(--kol);
	grid-row: var(--rij);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.werkwijze__dot.is-aan {
	background: linear-gradient(-45deg, var(--dot-vul-a) 15%, var(--dot-vul-b) 85%);
	box-shadow:
		2px 2px 6px -3px var(--dot-a),
		-2px -2px 6px -3px var(--dot-b);
}

.blok-werkwijze.is-actief .werkwijze__dots {
	visibility: hidden;
}

/* --- Sticky (groot scherm) ------------------------------------------------- */
.blok-werkwijze.is-hijack .werkwijze__baan {
	height: var(--baan, auto);
}

.blok-werkwijze.is-hijack .werkwijze__podium {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	min-height: 100svh;
	padding-top: var(--header-hoogte);
	padding-bottom: var(--ruimte-6);
}

.blok-werkwijze.is-hijack .werkwijze__raam {
	width: 100%;
}

/* Klein scherm: display boven de stappen. */
@media (max-width: 899px) {
	.werkwijze__display {
		order: -1;
		width: min(78vw, 22rem);
	}
}