/*
 * Blok: Oproep met knop (template-parts/oproep.php).
 * Een vlak in de tint van het onderwerp met cirkels (zoals de paginakop), zodat het opvalt tussen de kaarten.
 * Altijd dezelfde opbouw: icoon links met de titel ernaast, daaronder de tekst en de knoppen naast elkaar.
 * Het blok reageert op zijn eigen breedte (ook op halve breedte naast een ander blok).
 */

.blok-oproep > .site-container { container-type: inline-size; }

.blok-oproep__vlak {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 22px;
	align-content: center;
	overflow: hidden;
	padding: 36px 40px;
	background:
		radial-gradient(circle at calc(100% - 40px) calc(100% + 60px), color-mix(in srgb, var(--blok-accent) 18%, #FFFFFF) 0 140px, transparent 141px),
		radial-gradient(circle at 46% -70px, transparent 0 74px, color-mix(in srgb, var(--blok-accent) 24%, #FFFFFF) 75px 78px, transparent 79px),
		color-mix(in srgb, var(--blok-accent) 11%, #FFFFFF);
	border: 1px solid color-mix(in srgb, var(--blok-accent) 22%, #FFFFFF);
	border-radius: 20px;
}
.blok-oproep__tekst { min-width: 0; }
.blok-oproep__kop { display: flex; align-items: center; gap: 18px; }
.blok-oproep__kop .blok-oproep__icoon { order: -1; } /* Icoon links, titel ernaast. */
.blok-oproep__icoon { display: inline-flex; flex: none; width: 64px; height: 64px; align-items: center; justify-content: center; color: var(--blok-accent); background: var(--swo-color-card); border-radius: 50%; box-shadow: 0 6px 16px rgba(70, 45, 20, .10); }
.blok-oproep__icoon svg { width: 30px; height: 30px; }
.blok-oproep__titel { margin: 0; color: var(--swo-color-heading); font-size: clamp(26px, 2.6vw, 32px); font-weight: 800; line-height: 1.2; text-wrap: balance; }
.blok-oproep__intro { max-width: 720px; margin: 10px 0 0; color: var(--swo-color-text); font-size: 19px; line-height: 1.6; }
.blok-oproep__knoppen { display: flex; flex-wrap: wrap; gap: 10px 12px; }

@container (max-width: 760px) {
	.blok-oproep__vlak { padding: 30px 28px; }
	.blok-oproep__icoon { width: 56px; height: 56px; }
	.blok-oproep__icoon svg { width: 26px; height: 26px; }
}

@container (max-width: 460px) {
	.blok-oproep__vlak { padding: 26px 22px; }
	.blok-oproep__knoppen .swo-knop { width: 100%; white-space: normal; }
	.blok-oproep__intro { font-size: 18px; }
}

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