/* Blok: Hero */
.hero{
	position:relative; overflow:clip; background:var(--ink);
	display:flex; align-items:center;
}
/* De binnenruimte staat op .hero-inner, niet op .hero. Op de sectie zelf zou
   die botsen met de klassen sw-sp-compact/normal/roomy/none uit de layout-groep
   — beide hebben dezelfde specificiteit, dus wie wint hangt af van de
   laadvolgorde van de stylesheets. Zo werkt het veld "Ruimte" gewoon. */
.hero > .hero-inner{ padding-block:clamp(2rem,5vw,4rem) clamp(4rem,8vw,7rem); }
.hero--compact{ min-height:clamp(320px,44vh,440px); }
.hero--normal{ min-height:clamp(480px,68vh,660px); }
.hero--tall{ min-height:clamp(600px,86vh,820px); }

.hero-media{ position:absolute; inset:0; z-index:0; background-size:cover; }

/* Het masker: links volledig dekkend in merkblauw zodat de kop altijd leesbaar
   is, naar rechts uitvloeiend in een neutrale donkere sluier. Neutraal en niet
   blauw, anders krijgt de foto over de volle breedte een blauwzweem.
   Alpha boven 1 wordt door de browser afgekapt, dus bij de standaardsterkte van
   70 is de linkerhelft echt dicht. */
.hero-mask{
	position:absolute; inset:0; z-index:1;
	background:linear-gradient(90deg,
		rgba(49,62,136,calc(var(--hero-overlay,.7) * 1.45)) 0%,
		rgba(49,62,136,calc(var(--hero-overlay,.7) * 1.45)) 26%,
		rgba(22,24,29,calc(var(--hero-overlay,.7) * .95)) 48%,
		rgba(22,24,29,calc(var(--hero-overlay,.7) * .38)) 70%,
		rgba(22,24,29,calc(var(--hero-overlay,.7) * .08)) 100%);
}
@media (max-width:720px){
	.hero-mask{
		background:linear-gradient(180deg,
			rgba(22,24,29,calc(var(--hero-overlay,.7) * .72)) 0%,
			rgba(28,34,86,calc(var(--hero-overlay,.7) * 1.05)) 55%,
			var(--ink) 100%);
	}
}
.hero-inner{ position:relative; z-index:2; width:100%; }
.hero-copy{ max-width:36rem; }
.hero-title{
	color:#fff; margin:0;
	font-size:clamp(2.4rem, 1.6rem + 2.6vw, 4rem);
	max-width:26ch; font-weight:800;
}
.hero-lead{ color:rgba(255,255,255,.82); margin-top:1.4rem; max-width:44ch; }
.hero .wave--hero{ position:absolute; left:0; right:0; bottom:-1px; z-index:3; }