/* ---------------------------------------------------------------------------
 * Blok: CTA-balk. Lichtblauwe afgeronde band met titel en twee knoppen.
 * Maten uit het ontwerp: band 1400 breed, 218 hoog, radius 25, titel 40/50.
 * ------------------------------------------------------------------------- */

.blok-cta-balk {
	position: relative;
	z-index: 1; /* boven de footer-curve als de band eroverheen schuift */
}

.blok-cta-balk__band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px 40px;
	min-height: 218px;
	padding: 34px 95px 34px 80px;
	background: var(--c-blauw);
	border-radius: var(--radius-sectie);
}

.blok-cta-balk__titel {
	margin: 0;
	max-width: 560px;
	font-size: 40px;
	line-height: 50px;
	color: var(--c-wit);
}

.blok-cta-balk__knoppen {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* Witte knop op de blauwe band (variant die alleen hier voorkomt). */
.blok-cta-balk__knop-wit {
	background: var(--c-wit);
	color: var(--c-donkerblauw);
}

.blok-cta-balk__knop-wit:hover {
	background: var(--c-grijs-2);
}

/* Als laatste blok op de pagina schuift de band over de gebogen bovenrand
 * van de footer: precies de hoogte van de curve (113px op 1920 breed). */
.site-main > .blok-cta-balk:last-child {
	margin-bottom: calc(100vw * -113 / 1920);
}

@media (max-width: 767px) {
	.blok-cta-balk__band {
		flex-direction: column;
		align-items: flex-start;
		gap: 19px;
		min-height: 0;
		padding: 34px 30px;
	}

	.blok-cta-balk__titel {
		font-size: 24px;
		line-height: 30px;
	}

	.blok-cta-balk__knoppen {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	/* Op mobiel hangt de band dieper in het donkere vlak (ontwerp: 182px). */
	.site-main > .blok-cta-balk:last-child {
		margin-bottom: calc(-160px - 100vw * 113 / 1920);
	}
}