/* Blok: Pagina-hero — tekst + beeld (sector-/dienstpagina's). */
.block-page-hero { background: var(--amazing-bg); }
.block-page-hero__inner {
	display: grid;
	/* Ontwerp (beeld rechts, Kantoren 157:2057): beeld 906/1920 = 47%, tekst 53%;
	   tekst uitgelijnd op de brede hero-band (x=220 via --amazing-band-pad-wide). */
	grid-template-columns: 53fr 47fr;
	align-items: center;
	min-height: 540px; /* ontwerp: hero-band 659px @1920; content bepaalt hoogte, beeld vult mee (cover) */
}
.block-page-hero__text { padding: 72px 48px 72px var(--amazing-band-pad-wide); }

/* Beeld links → tekst rechts uitgelijnd op de brede hero-band.
   Ontwerp (Kinderopvang 157:2299): beeld 840/1920 = 44%, tekst 56% (rechterrand x=1700). */
.block-page-hero--img-left .block-page-hero__inner { grid-template-columns: 44fr 56fr; }
.block-page-hero--img-left .block-page-hero__media { order: 1; }
.block-page-hero--img-left .block-page-hero__text { order: 2; padding: 72px var(--amazing-band-pad-wide) 72px 48px; margin-left: auto; }
.block-page-hero--noimg .block-page-hero__inner { display: block; min-height: 0; padding-block: 80px; }
.block-page-hero--noimg .block-page-hero__text { padding: 0; max-width: 1240px; }
.block-page-hero--center .block-page-hero__inner { text-align: center; }
.block-page-hero--center .block-page-hero__text { margin-inline: auto; }
.block-page-hero--center .block-page-hero__check { display: inline-grid; text-align: left; }
.block-page-hero__eyebrow {
	display: inline-flex; align-items: center; gap: 22px; margin-bottom: 18px;
}
/* Sector-icoon in accentgoud (recolorbaar via CSS-mask). */
.block-page-hero__eyebrow-icon {
	flex: 0 0 auto; width: 72px; height: 78px;
	background-color: var(--amazing-accent);
	-webkit-mask: var(--eyebrow-icon) center / contain no-repeat;
	        mask: var(--eyebrow-icon) center / contain no-repeat;
}
.block-page-hero__eyebrow-text {
	font-family: var(--amazing-font-body); font-weight: 700; font-size: 24px;
	text-transform: uppercase; letter-spacing: .04em;
	color: var(--amazing-accent); /* ontwerp: gouden eyebrow (over ons / contact / offerte) */
}
/* Sectorpagina's tonen een goud icoon + WITTE tekst ernaast. */
.block-page-hero__eyebrow-icon + .block-page-hero__eyebrow-text { color: #fff; }
.block-page-hero__title { font-size: clamp(34px, 3.13vw, 60px); line-height: 1.1; margin-bottom: 22px; }
/* Beeld-links: kop-breedte begrensd op de Figma-titelbox (657px) zodat de kop op de
   ontwerp-plek afbreekt (bv. "Een veilige omgeving" / "begint met schoon."). */
.block-page-hero--img-left .block-page-hero__title { max-width: 12em; }
.block-page-hero__body { font-size: 20px; line-height: 1.55; margin-bottom: 26px; }
.block-page-hero__body p { margin: 0 0 1em; }
.block-page-hero__check { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; }
.block-page-hero__check li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.block-page-hero__check .usp-check { flex: 0 0 22px; line-height: 0; }
.block-page-hero__media { align-self: stretch; position: relative; }
.block-page-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Decoratieve sparkles over het hero-beeld (posities uit Figma, als % van het beeld). */
.block-page-hero__sparkles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.block-page-hero__sparkle { position: absolute; color: #fff; transform: translate(-50%, -50%); }
/* Posities & groottes exact uit Figma, per beeldzijde (het ontwerp hanteert een
   vaste sparkle-opzet per kant, niet per pagina). */
/* Beeld links -> 3 sparkles: groot rechtsboven, klein midden, middel linksonder. */
.block-page-hero--img-left  .block-page-hero__sparkle--1 { width: 62px; height: 62px; left: 98.6%; top: 13.4%; }
.block-page-hero--img-left  .block-page-hero__sparkle--2 { width: 34px; height: 34px; left: 46%;   top: 61%;   }
.block-page-hero--img-left  .block-page-hero__sparkle--3 { width: 51px; height: 51px; left: 7.6%;  top: 100%;  }
/* Beeld rechts -> 2 sparkles: klein bij de curve, groot midden. */
.block-page-hero--img-right .block-page-hero__sparkle--1 { width: 41px; height: 41px; left: 7.5%; top: 35%;   }
.block-page-hero--img-right .block-page-hero__sparkle--2 { width: 62px; height: 62px; left: 53%;  top: 60.5%; }
.block-page-hero--img-right .block-page-hero__sparkle--3 { display: none; }

@media (max-width: 900px) {
	.block-page-hero__inner { grid-template-columns: 1fr; }
	.block-page-hero__text { order: 2; padding: 48px clamp(20px,5vw,40px); }
	.block-page-hero__media { order: 1; }
	.block-page-hero__img { min-height: 300px; }
}