/* Haags.nl — Bericht-section: globale CSS die niet aan één class-block hangt
 * (fonts-@import, box-sizing-reset, GSAP-runtime-helpers) + de builder-reveal-
 * overrides. Als globale Etch-stylesheet geregistreerd (HaagsMessage-pattern),
 * dus laadt site-breed én in de builder-canvas. */


.hero-message *,
.hero-message *::before,
.hero-message *::after {
	box-sizing: border-box;
}

/* ---- GSAP-helpers (woord-/regel-wrappers die SplitText runtime aanmaakt) ---- */
.hero-message__linewrap {
	position: relative;
	display: block;
	overflow: hidden;
	white-space: nowrap;
}

.hero-message .word {
	display: inline-block;
	position: relative;
	margin: 0 0.15em;
}

/* Meerdere alinea's (Over ons-pagina): ruimte ertussen. */
.hero-message__body .hero-message__text + .hero-message__text {
	margin-top: 1em;
}

/* Intro-variant bovenaan een pagina (Over ons): geen scroll-afstand nodig, dus
 * één scherm hoog met de inhoud in het midden. */
.hero-message[data-hero-message-intro] {
	min-height: 100vh;
}

/* Kop van de intro-variant (Over ons): groter dan op de homepage, zodat het
 * witte vlak (eigen, vaste maat) relatief minder van de letters afdekt. */
.hero-message[data-hero-message-intro] .hero-message__heading {
	font-size: clamp(3rem, 9.4vw, 9.6rem);
}

/* Het witte vlak staat in de flow tussen de twee regels, niet gecentreerd over
 * beide heen: het valt (negatieve marges) net over de onderkant van de bovenste
 * en net over de bovenkant van de onderste regel. De 6rem-gap van de kopgroep
 * (bedoeld voor het losstaande homepage-vlak) zou hier twee keer tellen. */
.hero-message[data-hero-message-intro] .hero-message__text-stack {
	gap: 0;
}

.hero-message[data-hero-message-intro] .hero-message__badge {
	position: relative;
	top: auto;
	left: auto;
	transform: rotate(3deg);
	/* Marges in em van de kopgrootte (font-size = die van de koppen; de tekst in
	 * het vlak heeft een eigen maat). Door de 3° valt het vlak links dieper over
	 * de bovenste en rechts dieper over de onderste regel; op die diepste hoek
	 * ~13% van de letterhoogte, aan de andere kant raakt het de letters net.
	 * Gemeten op de glyphs (Antonio-hoofdletters lopen tot 8% onder de
	 * regelhoogte door), incl. de groene rand van het vlak. Meer overlap maakte
	 * "UT VEHAAL" slecht leesbaar (23%: de E verloor haar bovenste arm). */
	font-size: clamp(3rem, 9.4vw, 9.6rem);
	margin-top: -0.02em;
	margin-bottom: -0.15em;
}

/* Compacte badge: langere labels ("OVER ONS") op één regel (zelfde oplossing als
 * de biografie op sjaakbralide). */
.hero-message[data-hero-message-intro] .hero-message__badge-text {
	font-size: clamp(2rem, 4.6vw, 4.6rem);
	letter-spacing: -0.1vw;
	white-space: nowrap;
}

/* Links in de tekst (bv. www.zzf.nl): geel en onderstreept, wit bij hover. */
.hero-message__text a {
	color: #f7e87d;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.hero-message__text a:hover,
.hero-message__text a:focus-visible {
	color: #ffffff;
}

@media (max-width: 760px) {
	.hero-message[data-hero-message-intro] {
		min-height: auto;
	}

	.hero-message[data-hero-message-intro] .hero-message__heading {
		font-size: clamp(2.75rem, 12.5vw, 4.75rem);
	}

	/* Mobiel heeft de kop regelhoogte 0.95 (i.p.v. 0.9): eigen verhouding. */
	.hero-message[data-hero-message-intro] .hero-message__badge {
		font-size: clamp(2.75rem, 12.5vw, 4.75rem);
		margin-top: -0.04em;
		margin-bottom: -0.17em;
	}

	.hero-message[data-hero-message-intro] .hero-message__badge-text {
		font-size: clamp(1.6rem, 5.6vw, 2.3rem);
	}
}

/* In de Etch-builder draait de reveal-JS niet (geen scroll); toon daar meteen de
 * eindstaat, anders blijven de koppen "ghosted" en het HAAGS.NL-vlak ingeklapt.
 * De body-class hg-etch-builder wordt in de canvas gezet door EtchBuilderPreview.js. */
body.hg-etch-builder .hero-message__heading {
	color: #f7e87d;
}

body.hg-etch-builder .hero-message__badge {
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* Zonder scroll-reveal heeft het berichtvlak geen 120vh scroll-afstand nodig; in
 * de builder compact zodat de secties niet uit elkaar staan. */
body.hg-etch-builder .hero-message {
	min-height: auto;
	padding-top: clamp(3rem, 6vh, 5rem);
	padding-bottom: clamp(3rem, 6vh, 5rem);
}