/*
 * Fortuna UI — uitgelicht, gesplitst: tekst op donkergroen naast een grote foto (zoals Sonos).
 * Voor één bijzonder verhaal per pagina (Uit de oude doos, een seizoensoverzicht).
 *   <article class="fu-split"><div class="fu-split__body">…</div><div class="fu-split__media"><img …></div></article>
 */
.fu-split {
	--fu-c-kop: var(--fu-c-on-brand);
	display: grid;
	overflow: hidden;
	border-radius: var(--fu-r-lg);
	background: var(--fu-c-brand);
	color: var(--fu-c-on-brand);
	--fu-c-fg: var(--fu-c-on-brand);
	--fu-c-fg-sub: color-mix(in srgb, var(--fu-c-on-brand) 72%, transparent);
	--fu-c-link: var(--fu-c-accent);
}

.fu-split__body { display: grid; align-content: center; gap: var(--fu-ritme-tekst-ruim); padding: var(--fu-space-6); }
.fu-split__kicker { color: var(--fu-c-accent); font: 600 var(--fu-fs-sm) / 1.2 var(--fu-font-text); }
.fu-split__title { margin: 0; font-family: var(--fu-font-display); font-size: var(--fu-fs-xl); font-weight: var(--fu-display-weight); letter-spacing: var(--fu-track-display); line-height: var(--fu-lh-tight); text-wrap: balance; }
.fu-split__text { margin: 0; max-width: 46ch; color: var(--fu-c-fg-sub); font: 400 var(--fu-fs-base) / 1.5 var(--fu-font-text); }
.fu-split__media { position: relative; overflow: hidden; min-height: var(--fu-split-beeld-min); }
/* Zelfde watermerkbehandeling als bij kaartfoto's (card.css). */
.fu-split__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--fu-foto-zoom)); transform-origin: 100% 0; }
.fu-split__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--fu-foto-schaduw); }

/* Knop met witte rand op groen. */
.fu-split .fu-btn.fu-btn--outline { justify-self: start; border-color: color-mix(in srgb, var(--fu-c-on-brand) 60%, transparent); color: var(--fu-c-on-brand); }
.fu-split .fu-btn.fu-btn--outline:hover { border-color: var(--fu-c-on-brand); background: color-mix(in srgb, var(--fu-c-on-brand) 8%, transparent); color: var(--fu-c-on-brand); }

@media (min-width: 900px) {
	.fu-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: var(--fu-split-hoogte); }
	.fu-split__body { padding: var(--fu-space-8) var(--fu-space-10); }
}

/* Groot: voor één verhaal dat de pagina draagt (rubriekpagina, seizoensoverzicht). */
.fu-split--groot .fu-split__body { gap: var(--fu-space-6); padding: var(--fu-space-8) var(--fu-space-6); }
.fu-split--groot .fu-split__title { font-size: var(--fu-fs-2xl); }
.fu-split--groot .fu-split__text { font-size: var(--fu-fs-md); }
.fu-split--groot .fu-split__media { min-height: var(--fu-split-beeld-min-groot); }
@media (min-width: 900px) {
	.fu-split--groot { min-height: var(--fu-split-hoogte-groot); }
	.fu-split--groot .fu-split__body { padding: var(--fu-space-12); }
}