/* ---------------------------------------------------------------------------
 * Blok: App-CTA (Figma 124:8012 desktop, 182:11568 mobiel; lichte stijl
 * 277:6000 op de dienstenpagina 141:12164).
 * Afgeronde banner (1400x550, radius 25) met links een kop, tekst en twee
 * knoppen; rechts een diagonaal paars vlak en een tweede diagonaal vlak met
 * daarop de telefoon-mockup. Twee stijlen met dezelfde geometrie:
 * - donker (standaard): donkerblauwe banner, paars vlak op halve dekking,
 *   felblauw vlak;
 * - licht (--licht): lichtblauwe banner, paars vlak dekkend, donkerblauw
 *   vlak.
 * Op mobiel alleen de kaart met tekst en knoppen.
 * ------------------------------------------------------------------------- */

.blok-app-cta {
	padding-block: 105px;
}

.blok-app-cta__banner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 550px;
	padding: 60px 110px;
	background: var(--c-donkerblauw);
	border-radius: var(--radius-sectie);
	overflow: hidden;
	isolation: isolate;
	box-shadow: 5px 5px 25px rgb(0 0 0 / 10%);
}

/* Diagonale vlakken, verankerd aan de rechterkant van de banner. */
.blok-app-cta__decor {
	position: absolute;
	top: 0;
	right: 0;
	width: 1400px;
	height: 550px;
	pointer-events: none;
}

.blok-app-cta__decor-paars {
	fill: var(--c-paars);
	fill-opacity: 0.5;
}

.blok-app-cta__decor-blauw {
	fill: #17a1ff; /* fel appblauw uit het ontwerp, bewust geen token */
}

/* Telefoon-mockup op het blauwe vlak; loopt onderaan de banner uit beeld. */
.blok-app-cta__banner .blok-app-cta__telefoon {
	position: absolute;
	top: 149px;
	right: 57px;
	width: 408px;
	height: auto;
}

.blok-app-cta__inhoud {
	position: relative;
	z-index: 1;
	max-width: 631px;
}

.blok-app-cta__titel {
	margin: 0 0 21px;
	font-size: 36px;
	line-height: 44px;
	color: var(--c-wit);
}

.blok-app-cta__tekst {
	margin-bottom: 33px;
	color: var(--c-wit);
}

.blok-app-cta__tekst p {
	margin: 0;
}

.blok-app-cta__tekst p + p {
	margin-top: 26px;
}

.blok-app-cta__knoppen {
	display: flex;
	align-items: center;
	gap: 18px;
}

/* --------------------------------------------------------------------------
 * Lichte stijl (Figma 277:6000): zelfde vlakgeometrie en telefoonpositie als
 * de donkere banner, alleen andere kleuren en 2px andere tekstmarges uit het
 * ontwerp. De donkere stijl blijft hierboven ongewijzigd.
 *
 * In beide ontwerpen met deze stijl (dienstenpagina 141:12164 en over-ons
 * 278:7146) hangt de banner over de overgang naar een donkere zone: het
 * donkere vlak begint 79px boven de bannerrand en de curve (113px) ligt
 * daar weer boven, allebei achter de banner. Dat vlak en de curve horen
 * daarom bij deze stijl; het volgende (donkere) blok sluit er naadloos op
 * aan. Alles is aan de onderkant van de sectie verankerd, zodat het ook
 * klopt als de banner hoger wordt dan 550px.
 * ------------------------------------------------------------------------ */

.blok-app-cta--naar_donker,
.blok-app-cta--naar_licht {
	position: relative;
	/* 60px onder de banner eindigt de sectie: zo begint de kop van het
	 * volgende blok op de ontwerpafstand onder de bannerrand. */
	padding-bottom: 60px;
}

/* Vlak achter de banneronderkant, en daarboven de curve. */
.blok-app-cta--naar_donker::before,
.blok-app-cta--naar_licht::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}

/* Naar donker (dienstenpagina, over-ons): 79px overlap + 60px sectie-einde. */
.blok-app-cta--naar_donker::before {
	height: 139px;
	background: var(--c-donkerblauw);
}

/* Naar licht (Figma 278:6319): de banner staat op het donkere vlak en het
 * lichte vlak buigt 173px boven de bannerrand omhoog. Het bovenste deel van
 * de sectie blijft daarom donker. */
.blok-app-cta--naar_licht {
	background: var(--c-donkerblauw);
}

.blok-app-cta--naar_licht::before {
	height: 232px;
	background: var(--c-grijs-1);
}

/* Zelfde footer-ellips als elders; de kruin piekt in het midden. */
.blok-app-cta--naar_donker .blok-app-cta__curve,
.blok-app-cta--naar_licht .blok-app-cta__curve {
	position: absolute;
	left: 0;
	right: 0;
	pointer-events: none;
}

.blok-app-cta--naar_donker .blok-app-cta__curve {
	bottom: 139px;
}

.blok-app-cta--naar_licht .blok-app-cta__curve {
	bottom: 232px;
}

.blok-app-cta__curve svg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1920 / 113;
}

.blok-app-cta--naar_donker .blok-app-cta__curve ellipse {
	fill: var(--c-donkerblauw);
}

.blok-app-cta--naar_licht .blok-app-cta__curve ellipse {
	fill: var(--c-grijs-1);
}

/* De banner zelf blijft boven het vlak en de curve. */
.blok-app-cta--naar_donker .blok-app-cta__banner,
.blok-app-cta--naar_licht .blok-app-cta__banner {
	z-index: 1;
}

.blok-app-cta--licht .blok-app-cta__banner {
	background: var(--c-blauw);
}

.blok-app-cta--licht .blok-app-cta__decor-paars {
	fill-opacity: 1; /* in het lichte ontwerp is het paarse vlak dekkend */
}

.blok-app-cta--licht .blok-app-cta__decor-blauw {
	fill: var(--c-donkerblauw);
}

.blok-app-cta--licht .blok-app-cta__titel {
	margin-bottom: 19px;
}

.blok-app-cta--licht .blok-app-cta__tekst {
	margin-bottom: 35px;
}

/* Laptop/tablet-landschap: smallere tekstkolom en kleinere telefoon, zodat
 * niets elkaar overlapt (er is geen tussenformaat in het ontwerp). */
@media (max-width: 1399px) and (min-width: 1024px) {
	.blok-app-cta__inhoud {
		max-width: 50%;
	}

	.blok-app-cta__banner .blok-app-cta__telefoon {
		width: 330px;
		top: 190px;
		right: 36px;
	}
}

/* Tablet-portret: zoals het mobiele ontwerp, zonder telefoon en diagonalen. */
@media (max-width: 1023px) and (min-width: 768px) {
	.blok-app-cta__decor,
	.blok-app-cta__banner .blok-app-cta__telefoon {
		display: none;
	}

	.blok-app-cta__inhoud {
		max-width: 100%;
	}
}

@media (max-width: 767px) {
	.blok-app-cta {
		padding-block: 50px;
	}

	.blok-app-cta__banner {
		display: block;
		min-height: 0;
		padding: 29px 30px 41px;
	}

	/* Op mobiel toont het ontwerp alleen de donkere kaart. */
	.blok-app-cta__decor,
	.blok-app-cta__banner .blok-app-cta__telefoon {
		display: none;
	}

	/* De vaste regelovergang uit de desktopkop vervalt op mobiel. */
	.blok-app-cta__titel br {
		display: none;
	}

	.blok-app-cta__titel {
		margin-bottom: 13px;
		font-size: 22px;
		line-height: 28px;
	}

	.blok-app-cta__tekst {
		margin-bottom: 13px;
	}

	.blok-app-cta__knoppen {
		flex-direction: column;
		align-items: flex-start;
		gap: 13px;
	}

	/* In het mobiele ontwerp heeft de omlijnde knop een lichtgrijze rand. */
	.blok-app-cta__knoppen .knop--omlijnd {
		border-color: var(--c-grijs-3);
	}

	/* Lichte stijl: op de blauwe kaart houdt de omlijnde knop zijn
	 * halfdoorzichtige witte rand (er is geen mobiel ontwerp voor licht). */
	.blok-app-cta--licht .blok-app-cta__knoppen .knop--omlijnd {
		border-color: rgb(255 255 255 / 50%);
	}
}