/* Haags.nl — "rotating image trail" hero (bovenste section homepage).
 *
 * Etch-NATIEF formaat: elke top-level regel is één class-style (id = classnaam),
 * met @media GENEST in de selector en pseudo/descendant via &-nesting. Zo leest
 * StylesParser dit als Etch-stijlen (via de HaagsHero-pattern), waardoor het
 * ontwerp OOK in de builder-canvas zichtbaar is. De niet-class-gebonden regels
 * (fonts, beeld-trail, oker-productsectie) staan in RotatingTrailHero.global.css. */

.scroll-section {
	/* Reveal-effect (zoals sjaakbralide): de hero "plakt" aan de bovenkant terwijl
	 * de volgende section (de shop) er bij het scrollen overheen schuift. */
	position: sticky;
	top: 0;
	z-index: 0;
	height: 100vh;
	/* Iets kleiner: de langste regel ("Haagse cadeaus bestel?") besloeg 76% van de
	 * schermbreedte en las daardoor niet in één oogopslag. */
	font-size: clamp(2.75rem, 8.25vw, 6.75rem);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: #2a9d6e;
	line-height: 0.95;
	font-family: "Antonio", system-ui, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;

	& * {
		box-sizing: border-box;
	}

	/* Verticale rasterlijnen zoals de rest van de site. */
	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 0;
		background-image:
			linear-gradient(90deg, rgba(255, 255, 255, 0.1) 2px, transparent 2px),
			linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
		background-size:
			100px 100%,
			20px 100%;
		background-position:
			-2px 0,
			-1px 0;
	}

	/* Tussenformaat (o.a. MacBook Pro, 1440/1512px). */
	@media (max-width: 1600px) and (min-width: 769px) {
		font-size: clamp(2.5rem, 7.5vw, 6.25rem);
	}

	/* Mobiel. */
	@media (max-width: 768px) {
		font-size: clamp(2rem, 12vw, 3.5rem);
		padding: 0 1rem;
	}
}

.scroll-section__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	transform: translateY(-5vh);
}

.scroll-section__logo {
	display: block;
	width: min(70vw, 54rem);
	height: auto;
	/* Hoogte al vóór het laden (viewBox 1920×1080), anders verspringt de hero. */
	aspect-ratio: auto 1920 / 1080;
	margin-top: -3rem;
	margin-bottom: -7rem;
	pointer-events: none;
	user-select: none;
	/* Bij overlap (parallax/tilt) moet het logo vóór de tekstregels blijven. */
	position: relative;
	z-index: 2;

	@media (max-width: 1600px) and (min-width: 769px) {
		width: min(63vw, 46rem);
		margin-top: -2.25rem;
		margin-bottom: -6rem;
	}

	@media (max-width: 768px) {
		width: min(92vw, 34rem);
		margin-top: -1.5rem;
		margin-bottom: -3.25rem;
	}
}

.scroll-section__text {
	margin: 0;
	/* Het thema (AutomaticCSS) zet een globale line-height (~1.5) op <p>/spans, die
	 * de van .scroll-section geërfde 0.95 overschrijft. Forceer hier een strakke
	 * line-height — ook op de SplitText-woord-wrappers (div's binnen de tekst). */
	line-height: 0.9 !important;

	& div {
		line-height: 0.9 !important;
	}
}

.scroll-section__line {
	display: block;
	line-height: 0.9 !important;
}

.highlight-yellow {
	/* Fel geel — leest goed op de groene hero-achtergrond, afgestemd op het logo. */
	color: #f7e87d;
}