/*
 * Inhoudsblokken – gedeelde opmaak (inc/blokken.php), oktober 2026.
 * Alleen geladen als er minstens één van deze blokken op de pagina staat; elk blok heeft daarnaast een eigen bestand.
 *
 * Kleur: --blok-accent is de kleur van het onderwerp (dienstkleur of "Kleur van de pagina").
 * Die kleur zit in iconen, lijntjes en de paginakop. Oranje blijft voor de actieknoppen (ontwerpbrief).
 * Belangrijke tekst minimaal 18px; labels en toelichting 16px.
 */

body.heeft-blokken {
	--blok-tint: color-mix(in srgb, var(--blok-accent) 10%, #FFFFFF);
	--blok-tint-sterk: color-mix(in srgb, var(--blok-accent) 20%, #FFFFFF);
	--blok-lijn: #E4DBD0;
	--blok-tekst: #394452;
	--blok-zacht: #5A544E;
	--blok-ease: cubic-bezier(.2, .7, .2, 1);
}

/* Achtergrond met het lichte motief onder de paginakop (de kop zelf is effen). */
.heeft-blokken #primary { padding-bottom: 64px; background-color: var(--swo-color-background-soft); background-image: var(--swo-motif); background-size: var(--swo-motif-size); background-position: var(--swo-motif-position); }

/* ---------- Ritme ---------- */
.blok { padding: 40px 0; }
.blok-pagina-kop + .blok, .blok-pagina-kop + .blok-rij { padding-top: 64px; }

/* ---------- Twee blokken naast elkaar (Breedte: halve breedte) ---------- */
/*
 * kami_blokken_tonen() zet twee halve blokken in een rij. Binnen een cel valt de eigen container van het blok weg,
 * en blokken die naast elkaar breed uitvallen (twee kolommen, knoppen opzij) stapelen hier.
 */
.blok-rij { padding: 40px 0; }
.blok-rij__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; align-items: stretch; }
.blok-rij__cel { display: flex; min-width: 0; flex-direction: column; }
.blok-rij__cel > .blok { display: flex; flex: 1; flex-direction: column; padding: 0; }
.blok-rij__cel > .blok > .site-container { display: flex; flex: 1; flex-direction: column; max-width: none; padding: 0; }
.blok-rij__cel .blok__kaart, .blok-rij__cel .blok-oproep__vlak, .blok-rij__cel .blok-stappen__band, .blok-rij__cel .blok-contact { flex: 1; }
/* Contact en Oproep stapelen zelf op hun eigen breedte (container queries); een uitgerekt oproepvlak centreert zijn inhoud. */
.blok-rij__cel .blok-oproep__vlak { align-content: center; }
.blok-rij__cel .blok__kop, .blok-rij__cel .blok-tekst__inhoud, .blok-rij__cel .blok__kaart { max-width: none; }
.blok-rij__cel .blok-tekst-afbeelding__raster { grid-template-columns: minmax(0, 1fr); gap: 30px; }
.blok-rij__cel .blok-tekst-afbeelding__media { order: -1; }
.blok-rij__cel .blok-praktische-info__lijst { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.blok-rij__cel .blok-tarieven__raster { flex: 1; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.blok-rij__cel .blok-opsomming__kaart.is-lang .blok-opsomming__lijst { grid-template-columns: minmax(0, 1fr); }
.blok-rij__cel .blok-data__lijst { grid-template-columns: minmax(0, 1fr); }
.blok__kop { max-width: 780px; margin-bottom: 22px; }
.blok__titel { margin: 0; color: var(--swo-color-heading); font-size: clamp(28px, 2.6vw, 34px); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.blok__intro { margin: 10px 0 0; color: var(--blok-tekst); font-size: 19px; line-height: 1.6; }
.blok__kaart { padding: 30px 34px; background: var(--swo-color-card); border: 1px solid var(--blok-lijn); border-radius: 16px; box-shadow: 0 2px 10px rgba(70, 45, 20, .05); }
.blok__knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ---------- Opgemaakte tekst (WYSIWYG) ---------- */
.blok-tekstopmaak { color: var(--swo-color-text); font-size: 18px; line-height: 1.7; }
.blok-tekstopmaak > :first-child { margin-top: 0; }
.blok-tekstopmaak > :last-child { margin-bottom: 0; }
.blok-tekstopmaak p { margin: 0 0 1em; }
.blok-tekstopmaak h2, .blok-tekstopmaak h3, .blok-tekstopmaak h4 { margin: 1.5em 0 .45em; color: var(--swo-color-heading); font-weight: 800; line-height: 1.25; }
.blok-tekstopmaak h2 { font-size: 26px; }
.blok-tekstopmaak h3 { font-size: 22px; }
.blok-tekstopmaak h4 { font-size: 19px; }
.blok-tekstopmaak ul, .blok-tekstopmaak ol { margin: 0 0 1em; padding-left: 1.4em; }
.blok-tekstopmaak li { margin: .35em 0; padding-left: .25em; }
.blok-tekstopmaak ul li::marker { color: var(--blok-accent); font-size: 1.15em; }
.blok-tekstopmaak ol li::marker { color: var(--blok-accent); font-weight: 800; }
.blok-tekstopmaak a { color: var(--swo-color-heading); font-weight: 700; text-decoration: underline; text-decoration-color: var(--blok-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color .2s ease; }
.blok-tekstopmaak a:hover { color: var(--blok-accent); }
.blok-tekstopmaak a:focus-visible { outline: 3px solid var(--swo-color-focus); outline-offset: 2px; border-radius: 3px; }
.blok-tekstopmaak strong { color: var(--swo-color-heading); font-weight: 700; }
.blok-tekstopmaak blockquote { margin: 1.2em 0; padding: 4px 0 4px 20px; color: var(--swo-color-heading); border-left: 4px solid var(--blok-accent); font-size: 20px; }
.blok-tekstopmaak img { max-width: 100%; height: auto; border-radius: 12px; }

/* ---------- Knoppen (oranje alleen voor de belangrijkste actie) ---------- */
.swo-knop { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 10px; padding: 12px 22px; color: #111111; border: 2px solid transparent; border-radius: 10px; font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, transform .2s var(--blok-ease); }
.swo-knop:hover { color: #111111; text-decoration: none; }
.swo-knop:focus-visible { outline: 3px solid var(--swo-color-focus); outline-offset: 3px; }
.swo-knop svg { flex: none; width: 22px; height: 22px; }
.swo-knop__pijl { transition: transform .2s var(--blok-ease); }
.swo-knop:hover .swo-knop__pijl { transform: translateX(3px); }
.swo-knop--primair { background: #E97C1A; border-color: #E97C1A; }
.swo-knop--primair:hover { background: #D86D0D; border-color: #D86D0D; }
.swo-knop--secundair { background: var(--swo-color-card); border-color: #A34700; }
.swo-knop--secundair svg { color: #A34700; }
.swo-knop--secundair:hover { background: #FCE8D3; }

/* ---------- Icoon in een rondje (kleur van het onderwerp) ---------- */
.blok-icoon { display: inline-flex; flex: none; width: 48px; height: 48px; align-items: center; justify-content: center; color: var(--blok-accent); background: var(--blok-tint); border-radius: 50%; }
.blok-icoon svg { display: block; width: 24px; height: 24px; }

/* ---------- Verschijnen tijdens scrollen (alleen als de browser het ondersteunt) ---------- */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.blok:not(.blok-pagina-kop) > .site-container { animation: blok-in linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; }
	}
}
@keyframes blok-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
	.blok-rij__raster { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
	.blok, .blok-rij { padding: 28px 0; }
	.blok-pagina-kop + .blok, .blok-pagina-kop + .blok-rij { padding-top: 40px; }
	.blok__kaart { padding: 22px 20px; }
	.blok__intro { font-size: 18px; }
	.blok__knoppen .swo-knop { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.swo-knop, .swo-knop__pijl { transition: none; }
	.swo-knop:hover .swo-knop__pijl { transform: none; }
}

@media (forced-colors: active) {
	.swo-knop { border-color: ButtonText; }
	.blok-icoon { border: 1px solid CanvasText; }
	.blok__kaart { border-color: CanvasText; }
}