/* ---------------------------------------------------------------------------
 * Blok: Voorbeelden. Teksttabbladen met een onderstreping, daaronder de
 * voorbeelden als genummerde rijen met dunne lijnen ertussen (zoals een
 * inhoudsopgave): nummer en titel, de omschrijving, en twee korte regels.
 * Bewust geen kaarten of iconen: de typografie draagt het blok.
 * ------------------------------------------------------------------------- */

.blok-voorbeelden {
	padding-block: var(--blok-pt) var(--blok-pb);
}

.blok-voorbeelden__kop {
	max-width: 900px;
	margin-bottom: 48px;
}

.blok-voorbeelden__titel {
	margin: 0 0 16px;
	font-size: var(--fs-h2);
	line-height: 1.25;
	color: var(--c-donkerblauw);
}

.blok-voorbeelden__intro {
	color: var(--c-grijs-4);
}

.blok-voorbeelden__intro p {
	margin: 0;
}

.blok-voorbeelden__intro p + p {
	margin-top: 16px;
}

/* Tabbladen: tekst met een blauwe streep onder de actieve tab. */

.blok-voorbeelden__tabs {
	display: flex;
	gap: 40px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--c-grijs-3);
}

.blok-voorbeelden__tabs[hidden] {
	display: none;
}

.blok-voorbeelden__tab {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: -1px;
	padding: 0 0 18px;
	border: 0;
	background: none;
	color: var(--c-grijs-4);
	font: 600 18px/1.3 var(--font-base);
	cursor: pointer;
	transition: color var(--dur-kort) var(--ease-out);
}

.blok-voorbeelden__tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--c-blauw);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-kort) var(--ease-out);
}

.blok-voorbeelden__tab:hover {
	color: var(--c-donkerblauw);
}

.blok-voorbeelden__tab[aria-selected="true"] {
	color: var(--c-donkerblauw);
}

.blok-voorbeelden__tab[aria-selected="true"]::after {
	transform: scaleX(1);
}

.blok-voorbeelden__tab:focus-visible {
	outline: 2px solid var(--c-blauw);
	outline-offset: 4px;
	border-radius: 4px;
}

.blok-voorbeelden__aantal {
	font-size: 14px;
	font-weight: 600;
	color: var(--c-grijs-4);
}

/* Panelen: zonder tabbladen staan ze onder elkaar met hun eigen kop. */

.blok-voorbeelden__paneel + .blok-voorbeelden__paneel {
	margin-top: 72px;
}

.blok-voorbeelden.is-tabs .blok-voorbeelden__paneel + .blok-voorbeelden__paneel {
	margin-top: 0;
}

.blok-voorbeelden__paneel[hidden] {
	display: none;
}

.blok-voorbeelden.is-tabs .blok-voorbeelden__paneel:not([hidden]) {
	animation: voorbeelden-in 450ms var(--ease-out);
}

@keyframes voorbeelden-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
}

.blok-voorbeelden__paneel:focus-visible {
	outline: 2px solid var(--c-blauw);
	outline-offset: 8px;
}

.blok-voorbeelden__groep-titel {
	margin: 0 0 12px;
	font-size: var(--fs-h3);
	line-height: 1.3;
	color: var(--c-donkerblauw);
}

/* Met tabbladen is de tab zelf de zichtbare kop; de kop blijft voor
 * schermlezers in de kopstructuur. */
.blok-voorbeelden.is-tabs .blok-voorbeelden__groep-titel {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.blok-voorbeelden__groep-intro {
	max-width: 760px;
	padding: 28px 0 8px;
	color: var(--c-grijs-4);
}

.blok-voorbeelden__groep-intro p {
	margin: 0;
}

/* Rijen: nummer, titel, omschrijving, feiten. */

.blok-voorbeelden__lijst {
	margin: 0;
	padding: 0;
	list-style: none;
}

.blok-voorbeelden__rij {
	display: grid;
	grid-template-columns: 56px minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr);
	column-gap: 40px;
	align-items: start;
	padding: 36px 0 38px;
	border-bottom: 1px solid var(--c-grijs-3);
}

.blok-voorbeelden__nummer {
	padding-top: 4px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	color: var(--c-blauw);
}

.blok-voorbeelden__rij-titel {
	margin: 0;
	font-size: 22px;
	line-height: 30px;
	font-weight: 700;
	color: var(--c-donkerblauw);
}

.blok-voorbeelden__rij-tekst {
	font-size: 16px;
	line-height: 26px;
	color: var(--c-grijs-4);
}

.blok-voorbeelden__rij-tekst p {
	margin: 0;
}

.blok-voorbeelden__feiten {
	display: grid;
	gap: 16px;
	margin: 0;
}

.blok-voorbeelden__feiten dt {
	margin-bottom: 2px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	color: var(--c-donkerblauw);
}

.blok-voorbeelden__feiten dd {
	margin: 0;
	font-size: 15px;
	line-height: 24px;
	color: var(--c-donkerblauw);
}

.blok-voorbeelden__feiten dd p {
	margin: 0;
}

/* Laptop: feiten onder de omschrijving, naast elkaar. */
@media (max-width: 1199px) {
	.blok-voorbeelden__rij {
		grid-template-columns: 56px minmax(0, 2fr) minmax(0, 3fr);
		row-gap: 20px;
	}

	.blok-voorbeelden__feiten {
		grid-column: 3;
		grid-template-columns: 1fr 1fr;
		gap: 24px;
	}
}

@media (max-width: 767px) {

	.blok-voorbeelden__kop {
		margin-bottom: 32px;
	}

	.blok-voorbeelden__tabs {
		gap: 22px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.blok-voorbeelden__tab {
		flex: 0 0 auto;
		padding-bottom: 14px;
		font-size: 15px;
		white-space: nowrap;
	}

	.blok-voorbeelden__rij {
		grid-template-columns: 40px minmax(0, 1fr);
		row-gap: 12px;
		padding: 28px 0 30px;
	}

	.blok-voorbeelden__nummer {
		grid-row: 1;
	}

	.blok-voorbeelden__rij-titel {
		font-size: 19px;
		line-height: 27px;
	}

	.blok-voorbeelden__rij-tekst,
	.blok-voorbeelden__feiten {
		grid-column: 2;
	}

	.blok-voorbeelden__rij-tekst {
		font-size: 15px;
		line-height: 25px;
	}

	.blok-voorbeelden__feiten {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.blok-voorbeelden.is-tabs .blok-voorbeelden__paneel:not([hidden]) {
		animation: none;
	}

	.blok-voorbeelden__tab::after {
		transition: none;
	}
}

/* Staat er een intro tussen tabbladen en rijen, dan opent de lijst met een lijn. */
.blok-voorbeelden__groep-intro + .blok-voorbeelden__lijst {
	margin-top: 24px;
	border-top: 1px solid var(--c-grijs-3);
}