/* ---------------------------------------------------------------------------
 * 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): binnen
 * dit blok rendert de stijl "primair" uit de knoppen-repeater als de witte
 * knop met donkere tekst uit het ontwerp, in plaats van blauw. */
.blok-cta-balk .knop--primair {
	--knop-bg: var(--c-wit);
	--knop-kleur: var(--c-donkerblauw);
	--knop-hover-bg: var(--c-donkerblauw);
	--knop-hover-kleur: var(--c-wit);
}

/* 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). */
/* Ook wanneer de band genest staat (zoals op het klantcase-archief):
 * binnen zijn eigen container is hij nog steeds last-child. */
.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);
	}
}

/* Optionele tekstregel onder de kop (gebruikt door de overgenomen banners van
 * de oude site; in het ontwerp blijft de band alleen kop plus knoppen). */
/* Kop en tekst vormen samen de linkerkolom van de band. */
.blok-cta-balk__kop {
	flex: 0 1 auto;
	max-width: 760px;
}

.blok-cta-balk__tekst {
	margin: 14px 0 0;
	max-width: 760px;
	color: var(--c-wit);
}

.blok-cta-balk__tekst p {
	margin: 0;
}

.blok-cta-balk__tekst p + p {
	margin-top: 12px;
}

/* Een link in de tekst zou MobileXL-blauw op de blauwe band zijn; wit met
 * onderstreping blijft leesbaar en herkenbaar als link. */
.blok-cta-balk__tekst a,
.blok-cta-balk__tekst a:hover {
	color: var(--c-wit);
}

.blok-cta-balk__tekst a:hover {
	text-decoration-thickness: 2px;
}

/* Accentwoorden in de kop: op de blauwe band is MobileXL-blauw onzichtbaar,
 * dus daar wordt het accent donkerblauw. */
.blok-cta-balk__titel .accent {
	color: var(--c-donkerblauw);
}

/* Optionele QR-code rechts in de band: kop en knoppen links, de code ernaast
 * over de volle hoogte. Op een telefoon scan je jezelf niet, dus daar weg. */
.blok-cta-balk__band--qr {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "kop qr" "knoppen qr";
	align-items: center;
	gap: 24px 48px;
}

.blok-cta-balk__band--qr .blok-cta-balk__kop {
	grid-area: kop;
}

.blok-cta-balk__band--qr .blok-cta-balk__knoppen {
	grid-area: knoppen;
	flex-wrap: wrap;
}

.blok-cta-balk__qr {
	grid-area: qr;
	margin: 0;
	padding: 14px 14px 12px;
	width: 188px;
	background: var(--c-wit);
	border-radius: 16px;
	text-align: center;
}

.blok-cta-balk__qr-beeld {
	display: block;
	width: 160px;
	height: 160px;
	image-rendering: pixelated;
}

.blok-cta-balk__qr-tekst {
	margin-top: 8px;
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	color: var(--c-donkerblauw);
}

@media (max-width: 1023px) {
	.blok-cta-balk__band--qr {
		display: flex;
	}

	.blok-cta-balk__qr {
		display: none;
	}
}