/* ---------------------------------------------------------------------------
 * Blok: Supportkaarten (Figma 65:6173, sectie "Support nodig?").
 * Gecentreerde kop (36/44) met grijze intro, daaronder drie horizontale witte
 * kaarten (451x168, radius 20, zachte schaduw) met een blauwe icoontegel
 * (70px, radius 10, wit icoon 45px), titel 18 bold en tekst 16/26.
 * Mobiel toont het ontwerp niet; zelf ingevuld in lijn met de andere blokken.
 * ------------------------------------------------------------------------- */

.blok-support-kaarten {
	padding-top: 140px;
	padding-bottom: 75px;
	/* Ankerdoel (/contact/#support): niet onder de vaste headerbalk springen. */
	scroll-margin-top: 110px;
}

.blok-support-kaarten__inleiding {
	max-width: 1160px;
	margin: 0 auto 38px;
	text-align: center;
}

.blok-support-kaarten__kop {
	margin: 0 0 15px;
	font-size: 36px;
	line-height: 44px;
	color: var(--c-donkerblauw);
}

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

/* --------------------------------------------------------------------------
 * Kaarten
 * ------------------------------------------------------------------------ */

.blok-support-kaarten__kaarten {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.blok-support-kaarten__kaart {
	display: flex;
	align-items: center;
	gap: 36px;
	min-height: 168px;
	padding: 30px 30px 30px 35px;
	background: var(--c-wit);
	border-radius: 20px;
	box-shadow: 5px 5px 12.5px rgb(0 0 0 / 5%);
	color: var(--c-donkerblauw);
	text-decoration: none;
}

/* Klikbare kaart: iets diepere schaduw bovenop de gedeelde kaart-hover-lift. */
a.blok-support-kaarten__kaart:hover {
	box-shadow: 5px 8px 25px rgb(0 0 0 / 9%);
}

a.blok-support-kaarten__kaart:focus-visible {
	outline: 2px solid var(--c-blauw);
	outline-offset: 3px;
}

.blok-support-kaarten__tegel {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 70px;
	height: 70px;
	background: var(--c-blauw);
	border-radius: 10px;
}

.blok-support-kaarten__tegel .icoon,
.blok-support-kaarten__tegel .icoon svg {
	display: block;
	width: 45px;
	height: 45px;
}

.blok-support-kaarten__inhoud {
	display: block;
	min-width: 0;
}

.blok-support-kaarten__titel {
	display: block;
	margin-bottom: 7px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.22;
}

.blok-support-kaarten__tekst {
	font-size: 16px;
	line-height: 26px;
}

/* --------------------------------------------------------------------------
 * Desktop: drie naast elkaar zoals het ontwerp.
 * ------------------------------------------------------------------------ */

@media (min-width: 1200px) {
	.blok-support-kaarten__kaarten {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Tussenmaat: een kolom met wat lucht, kaarten niet paginabreed. */
@media (min-width: 768px) and (max-width: 1199px) {
	.blok-support-kaarten__kaarten {
		max-width: 640px;
		margin-inline: auto;
	}
}

/* --------------------------------------------------------------------------
 * Mobiel
 * ------------------------------------------------------------------------ */

@media (max-width: 767px) {
	.blok-support-kaarten {
		padding-top: 70px;
		padding-bottom: 40px;
		scroll-margin-top: 90px;
	}

	.blok-support-kaarten__kop {
		font-size: 26px;
		line-height: 34px;
	}

	.blok-support-kaarten__inleiding {
		margin-bottom: 28px;
	}

	.blok-support-kaarten__kaart {
		gap: 22px;
		min-height: 0;
		padding: 24px;
	}

	.blok-support-kaarten__tegel {
		width: 60px;
		height: 60px;
	}

	.blok-support-kaarten__tegel .icoon,
	.blok-support-kaarten__tegel .icoon svg {
		width: 38px;
		height: 38px;
	}
}