/*
 * Blok: Paginakop (template-parts/pagina-kop.php).
 * Band in een lichte tint van de onderwerpkleur. Met foto (ontwerp C): de foto rechts met een ronde rand; zonder foto
 * een paar cirkels als verwijzing naar het SWO-logo. Geen motief (dat staat eronder); het zoekveld is .swo-zoeken__field.
 */

.blok-pagina-kop {
	--kop-tint: color-mix(in srgb, var(--blok-accent) 8%, #FFFBF6);
	--kop-cirkel: color-mix(in srgb, var(--blok-accent) 16%, #FFFFFF);
	--kop-ring: color-mix(in srgb, var(--blok-accent) 26%, #FFFFFF);
	position: relative;
	padding: 24px 0 48px;
	background:
		radial-gradient(circle at calc(100% - 60px) -40px, var(--kop-cirkel) 0 190px, transparent 191px),
		radial-gradient(circle at calc(100% - 300px) 118%, transparent 0 66px, var(--kop-ring) 67px 70px, transparent 71px),
		radial-gradient(circle at 70% 150%, color-mix(in srgb, var(--blok-accent) 5%, #FFFFFF) 0 240px, transparent 241px),
		var(--kop-tint);
	border-bottom: 1px solid color-mix(in srgb, var(--blok-accent) 16%, #FFFFFF);
}

.blok-pagina-kop__kruimels { margin-bottom: 22px; color: var(--blok-tekst); font-size: 17px; line-height: 1.5; }
.blok-pagina-kop__kruimels p { margin: 0; }
.blok-pagina-kop__kruimels a { color: var(--swo-color-heading); font-weight: 600; text-decoration: underline; text-decoration-color: var(--blok-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.blok-pagina-kop__kruimels a:hover { color: var(--blok-accent); }
.blok-pagina-kop__kruimels a:focus-visible { outline: 3px solid var(--swo-color-focus); outline-offset: 2px; }

.blok-pagina-kop__titel { max-width: 820px; margin: 0; color: var(--swo-color-heading); font-size: clamp(36px, 4vw, 52px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.blok-pagina-kop__intro { max-width: 720px; margin: 14px 0 0; color: var(--blok-tekst); font-size: 20px; line-height: 1.6; }
.blok-pagina-kop__zoeken { max-width: 620px; margin-top: 28px; }

/* ---------- Met foto (ontwerp C) ---------- */
/* Foto rechts tot aan de rand van het scherm, met een ronde linkerkant en een waas in de onderwerpkleur. */
.blok-pagina-kop.heeft-foto { --kop-foto: clamp(380px, 42vw, 820px); display: flex; min-height: 400px; align-items: center; overflow: hidden; padding: 30px 0 44px; background: var(--kop-tint); }
.blok-pagina-kop.heeft-foto > .site-container { position: relative; z-index: 1; width: 100%; }
.blok-pagina-kop.heeft-foto .blok-pagina-kop__tekst { max-width: min(640px, calc(100vw - var(--kop-foto) - 72px - (100vw - 100%) / 2)); }
.blok-pagina-kop__foto { position: absolute; top: 0; right: 0; bottom: 0; width: var(--kop-foto); overflow: hidden; background: #EEE8E1; border-radius: 240px 0 0 240px; }
.blok-pagina-kop__foto::after { position: absolute; inset: 0; content: ""; background: var(--blok-accent); opacity: .18; pointer-events: none; }
.blok-pagina-kop__img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
	/* Smal: de foto bovenaan over de volle breedte, met een ronde hoek linksonder. */
	.blok-pagina-kop.heeft-foto { display: block; min-height: 0; padding: 0 0 32px; }
	.blok-pagina-kop__foto { position: relative; width: 100%; height: 220px; margin-bottom: 22px; border-radius: 0 0 0 120px; }
	.blok-pagina-kop.heeft-foto .blok-pagina-kop__tekst { max-width: none; }
}

@media (max-width: 700px) {
	.blok-pagina-kop { padding: 18px 0 32px; background: radial-gradient(circle at calc(100% + 20px) -30px, var(--kop-cirkel) 0 110px, transparent 111px), var(--kop-tint); }
	.blok-pagina-kop__kruimels { margin-bottom: 16px; font-size: 16px; }
	.blok-pagina-kop__intro { font-size: 18px; }
	.blok-pagina-kop__zoeken { margin-top: 22px; }
}

@media (forced-colors: active) {
	.blok-pagina-kop { border-bottom-color: CanvasText; }
}