/* Blok: Intro met beeld — tekst naast full-bleed beeld (links of rechts). */
.block-intro-media { background: var(--amazing-bg); }
.block-intro-media__inner {
	display: grid;
	/* Ontwerp: beeld ~44%, tekst ~56%. De tekstkolom moet breed genoeg zijn dat
	   de koppen op het juiste aantal regels vallen: "Uw schoonmaak, onze zorg."
	   op 1 regel en "Schoonmaak op maat…" op 2. */
	grid-template-columns: 56fr 44fr;
	align-items: center;
	min-height: 520px;
}
/* Geen cap op __text zelf: de band-padding (299px) telt met border-box mee in
   max-width en zou de kop anders tot ~420px knijpen (→ ongewenste afbreking).
   De leesbreedte wordt op __body (650px) begrensd. */
.block-intro-media__text { max-width: none; }
/* Intro-media "statement"-kop: 48px met ruime regelhoogte (Figma: H2 48, line-height
   ~normal → duidelijk zichtbare ruimte tussen de twee kopregels). */
.block-intro-media__title { font-size: clamp(34px, 2.7vw, 48px); line-height: 1.32; margin-bottom: 22px; text-wrap: balance; }
.block-intro-media__body { font-size: 16px; line-height: 1.31; margin-bottom: 28px; max-width: 650px; } /* 16/21 ≈ 1.31 (Figma) */
.block-intro-media__body p { margin: 0 0 1em; }
.block-intro-media__body p:last-child { margin-bottom: 0; }
.block-intro-media__media { align-self: stretch; position: relative; }
.block-intro-media__media .block-intro-media__img { width: 100%; height: 100%; min-height: 480px; object-fit: cover; }

/* Beeld rechts (bleedt naar rechterrand); tekst links uitgelijnd op de content-band. */
.block-intro-media--img-right .block-intro-media__text  { order: 1; padding: 72px 40px 72px var(--amazing-band-pad); }
.block-intro-media--img-right .block-intro-media__media { order: 2; }

/* Beeld links (bleedt naar linkerrand); tekst rechts uitgelijnd op de content-band.
   Extra witruimte onder het blok zodat het beeld niet tegen het volgende blok plakt. */
.block-intro-media--img-left { background: var(--amazing-footer); padding-bottom: clamp(40px, 5vw, 72px); } /* #161616 (§6) */
.block-intro-media--img-left .block-intro-media__inner { grid-template-columns: 44fr 56fr; }
.block-intro-media--img-left .block-intro-media__media { order: 1; }
.block-intro-media--img-left .block-intro-media__text  { order: 2; padding: 72px var(--amazing-band-pad) 72px clamp(32px, 4vw, 88px); margin-left: 0; max-width: none; }
.block-intro-media--img-left .block-intro-media__title { text-wrap: normal; }
.block-intro-media--img-left .block-intro-media__body  { max-width: 650px; }

/* Decoratieve sparkles over het beeld (posities uit Figma, als % van het beeld). */
.block-intro-media__sparkles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.block-intro-media__sparkle { position: absolute; color: #fff; transform: translate(-50%, -50%); }
.block-intro-media__sparkle--1 { width: 34px; height: 34px; }
.block-intro-media__sparkle--2 { width: 60px; height: 60px; }
.block-intro-media__sparkle--3 { width: 48px; height: 48px; }
/* Beeld rechts ("Uw schoonmaak, onze zorg.") — 2 sparkles */
.block-intro-media--img-right .block-intro-media__sparkle--1 { left: 11%;  top: 45%; }
.block-intro-media--img-right .block-intro-media__sparkle--2 { left: 56%;  top: 68%; }
.block-intro-media--img-right .block-intro-media__sparkle--3 { display: none; }
/* Beeld links ("Schoonmaak op maat…") — 3 sparkles */
/* Home ("Schoonmaak op maat") — exacte posities zoals gevraagd. */
body.home .block-intro-media--img-left .block-intro-media__sparkle--1 { left: 51%;  top: 59%; }
body.home .block-intro-media--img-left .block-intro-media__sparkle--2 { left: 100%; top: 11%; }
body.home .block-intro-media--img-left .block-intro-media__sparkle--3 { left: 6%;   top: 100%; }
/* Subpagina's: sterretjes op het beeld houden (niet in de donkere tekstgoot). */
body:not(.home) .block-intro-media--img-left .block-intro-media__sparkle--1 { left: 46%;   top: 61%;   }
body:not(.home) .block-intro-media--img-left .block-intro-media__sparkle--2 { left: 98.6%; top: 13.4%; }
body:not(.home) .block-intro-media--img-left .block-intro-media__sparkle--3 { left: 7.6%;  top: 100%;  }

/* Zonder beeld → volledige contentbreedte (bv. "Onze aanpak"). */
.block-intro-media--noimg .block-intro-media__inner { display: block; min-height: 0; padding-block: 72px; }
/* Zonder beeld (bv. "Schoonmaak met extra zorgplicht"): tekst op volledige
   contentbreedte, conform Figma (body-box 1322px). */
.block-intro-media--noimg .block-intro-media__text { padding: 0; max-width: none; }
.block-intro-media--noimg .block-intro-media__body { max-width: none; }

/* Checklist in intro-media */
.block-intro-media__check { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; }
.block-intro-media__check li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.block-intro-media__check .usp-check { flex: 0 0 22px; line-height: 0; }

@media (max-width: 900px) {
	.block-intro-media__inner { grid-template-columns: 1fr; }
	.block-intro-media--img-right .block-intro-media__text,
	.block-intro-media--img-left .block-intro-media__text {
		order: 2; padding: 48px clamp(20px,5vw,40px);
	}
	.block-intro-media--img-right .block-intro-media__media,
	.block-intro-media--img-left .block-intro-media__media { order: 1; }
	.block-intro-media__media .block-intro-media__img { min-height: 300px; }
}