/*
 * Blok: Stappen (template-parts/stappen.php), ontwerp "grote cijfers op een band".
 * Titel en stappen op een band in de tint van het onderwerp, met cirkels zoals de paginakop. Grote cijfers in de
 * onderwerpkleur, de stappen gescheiden door dunne lijnen. Smal (telefoon, of op halve breedte): onder elkaar.
 */

.blok-stappen > .site-container { container-type: inline-size; }

.blok-stappen__band {
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding: 44px 48px 46px;
	background:
		radial-gradient(circle at calc(100% - 40px) -50px, color-mix(in srgb, var(--blok-accent) 18%, #FFFFFF) 0 150px, transparent 151px),
		radial-gradient(circle at 12% 135%, transparent 0 80px, color-mix(in srgb, var(--blok-accent) 22%, #FFFFFF) 81px 84px, transparent 85px),
		color-mix(in srgb, var(--blok-accent) 9%, #FFFBF6);
	border-radius: 24px;
}
.blok-stappen__band .blok__kop { margin-bottom: 0; }

.blok-stappen__lijst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 0; margin: 0; padding: 0; list-style: none; }
.blok-stappen__lijst.kolommen-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blok-stappen__lijst.kolommen-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.blok-stap { display: flex; min-width: 0; flex-direction: column; gap: 10px; padding: 0 32px; border-left: 2px solid color-mix(in srgb, var(--blok-accent) 25%, #FFFFFF); }
/* Begin en eind van elke rij: geen lijn ervoor, geen ruimte erbuiten. */
.kolommen-2 .blok-stap:nth-child(2n+1), .kolommen-3 .blok-stap:nth-child(3n+1), .kolommen-4 .blok-stap:nth-child(4n+1) { padding-left: 0; border-left: 0; }
.kolommen-2 .blok-stap:nth-child(2n), .kolommen-3 .blok-stap:nth-child(3n), .kolommen-4 .blok-stap:nth-child(4n) { padding-right: 0; }

.blok-stap__nummer { color: var(--blok-accent); font-size: 96px; font-weight: 800; line-height: .9; letter-spacing: -.04em; }
.blok-stap__tekst { min-width: 0; }
.blok-stap__titel { margin: 6px 0 0; color: var(--swo-color-heading); font-size: 22px; font-weight: 800; line-height: 1.3; }
.blok-stap__uitleg { margin: 8px 0 0; color: var(--swo-color-text); font-size: 18px; line-height: 1.6; }

@container (max-width: 780px) {
	.blok-stappen__band { gap: 22px; padding: 30px 24px 26px; background: radial-gradient(circle at calc(100% + 20px) -30px, color-mix(in srgb, var(--blok-accent) 18%, #FFFFFF) 0 100px, transparent 101px), color-mix(in srgb, var(--blok-accent) 9%, #FFFBF6); }
	.blok-stappen__lijst, .blok-stappen__lijst.kolommen-2, .blok-stappen__lijst.kolommen-4 { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.blok-stap, .kolommen-2 .blok-stap, .kolommen-3 .blok-stap, .kolommen-4 .blok-stap { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 0 16px; padding: 20px 0; border-top: 2px solid color-mix(in srgb, var(--blok-accent) 25%, #FFFFFF); border-left: 0; }
	.blok-stap:first-child, .kolommen-2 .blok-stap:first-child, .kolommen-3 .blok-stap:first-child, .kolommen-4 .blok-stap:first-child { padding-top: 0; border-top: 0; }
	.blok-stap:last-child { padding-bottom: 0; }
	.blok-stap__nummer { font-size: 64px; }
	.blok-stap__titel { margin-top: 4px; font-size: 20px; }
}

@media (forced-colors: active) {
	.blok-stappen__band { border: 1px solid CanvasText; }
	.blok-stap { border-color: CanvasText; }
}