/*
 * 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; }
/* Streepje met bolletje onder de titel, in de onderwerpkleur (decoratief). */
.blok-pagina-kop__titel::after {
	display: block;
	width: 84px;
	height: 8px;
	margin-top: 18px;
	content: "";
	background:
		radial-gradient(circle at 80px 4px, var(--blok-accent) 0 4px, transparent 4.5px),
		radial-gradient(circle at 3px 4px, var(--blok-accent) 0 3px, transparent 3.5px),
		radial-gradient(circle at 61px 4px, var(--blok-accent) 0 3px, transparent 3.5px),
		linear-gradient(var(--blok-accent), var(--blok-accent)) 3px 1px / 58px 6px no-repeat;
	transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
	.blok-pagina-kop__titel::after { animation: kop-streep .6s cubic-bezier(.2, .7, .2, 1) .15s both; }
}
@keyframes kop-streep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.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) ---------- */
/* Zelfde ontwerp als de homepage-hero (basic-hero.css, ontwerp B, 15-10-2026): licht vlak #FBF4EC, de foto rechts tot
   aan de rand van het scherm met een ronde linkerkant, een zachte oranje cirkel bovenaan, geen kleurfilter over de foto.
   De onderwerpkleur blijft in het streepje onder de titel en de kruimelpadlinks. */
.blok-pagina-kop.heeft-foto { --kop-foto: clamp(380px, 44vw, 840px); display: flex; min-height: 420px; align-items: center; overflow: hidden; padding: 30px 0 44px; background: #FBF4EC; border-bottom-color: #EADBCB; }
.blok-pagina-kop.heeft-foto::after { position: absolute; z-index: 0; top: -80px; right: calc(var(--kop-foto) - 120px); width: 230px; height: 230px; content: ""; background: #FCE3CB; border-radius: 50%; pointer-events: none; }
.blok-pagina-kop.heeft-foto > .site-container { position: relative; z-index: 2; 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; z-index: 1; top: 0; right: 0; bottom: 0; width: var(--kop-foto); overflow: hidden; background: #EEE8E1; border-radius: 9999px 0 0 9999px; }
.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.heeft-foto::after { display: none; }
	.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; }
}