/* Haags.nl — "Ons verhaal"-section (vierde section homepage): geel vlak met
 * kiosk-foto links en label/titel/tekst/knoppen rechts.
 *
 * Etch-NATIEF formaat (één class-style per top-level regel, @media genest) zodat
 * StylesParser dit als Etch-stijl registreert (via de HaagsStory-pattern) en de
 * sectie óók in de builder-canvas verschijnt. Het Antonio-font komt van de
 * global-CSS (@import). */

/* De sectie: dekkend oker rastervlak — exact dezelfde geel/oker-look als de
 * producten-sectie (.hg-products): kleur + rasterlijnen komen 1-op-1 overeen. Als
 * eigen class-style, dus ook in de builder-canvas oker (de frontend-only
 * `main > section`-regel matcht daar niet). Vult het hele scherm (min-height 100vh)
 * met verticaal gecentreerde inhoud. */
.hg-story {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	background-color: #e6c044;
	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;
	padding-top: clamp(3rem, 6vh, 5rem);
	padding-bottom: clamp(3rem, 6vh, 5rem);
}

.hg-story__grid {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 4vw, 3rem);
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;

	@media (max-width: 860px) {
		grid-template-columns: 1fr;
		gap: clamp(1.75rem, 6vw, 2.75rem);
	}
}

.hg-story__media {
	position: relative;
}

.hg-story__image {
	display: block;
	width: 100%;
	height: auto;
	/* Ruimte al vóór het laden (winkelfoto 1500×1382); een andere foto houdt zijn eigen verhouding. */
	aspect-ratio: auto 1500 / 1382;
	border-radius: clamp(16px, 2.5vw, 28px);
	box-shadow: 0 24px 48px rgba(30, 122, 84, 0.28);
}

.hg-story__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(1rem, 2.2vw, 1.6rem);
}

.hg-story__label {
	display: inline-block;
	margin: 0;
	padding: 0.5em 1.1em;
	border-radius: 999px;
	background-color: #1e7a54;
	color: #f7e87d;
	font-family: "Antonio", system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(0.8rem, 1.4vw, 1rem);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
}

.hg-story__title {
	margin: 0;
	font-family: "Antonio", system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(2.4rem, 5.5vw, 4.5rem);
	line-height: 0.95;
	letter-spacing: -0.015em;
	color: #1e7a54;

	@media (max-width: 760px) {
		font-size: clamp(2rem, 8vw, 2.8rem);
	}
}

.hg-story__text {
	margin: 0;
	max-width: 46ch;
	font-family: "Funnel Display", system-ui, sans-serif;
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	line-height: 1.6;
	color: #163a28;
}

.hg-story__text--accent {
	font-weight: 700;
	color: #1e7a54;
}

.hg-story__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-top: clamp(0.5rem, 1.5vw, 1rem);
}

/* NB: knop-klassen heten bewust `__cta*` en NIET `__btn--*`: AutomaticCSS kaapt
 * elke class met de substring `btn--` via `[class*="btn--"]` (gelijke specificiteit,
 * laadt later → wint), wat onze kleuren zou overschrijven. */
.hg-story__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85em 1.6em;
	border-radius: 10px;
	border: 2px solid transparent;
	font-family: "Funnel Display", system-ui, sans-serif;
	font-weight: 600;
	font-size: clamp(0.95rem, 1.3vw, 1.05rem);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;

	&:hover {
		transform: translateY(-2px);
	}
}

/* Groene knop (primair). Op hover donkerder groen + gele letters. De hover-kleur
 * staat expliciet (0,2,0) zodat 'ie de ACSS-`a:hover`-regel (0,1,1) verslaat, die
 * de tekst anders donker/blauw zou kleuren. */
.hg-story__cta-primary {
	background-color: #2a9d6e;
	border-color: #2a9d6e;
	color: #ffffff;

	&:hover {
		background-color: #1e7a54;
		border-color: #1e7a54;
		color: #f7e87d;
	}
}

/* Gele knop met groene rand/tekst (secundair) — samen met de groene knop de
 * groen/gele huisstijl. */
.hg-story__cta-ghost {
	background-color: #f7e87d;
	border-color: #1e7a54;
	color: #1e7a54;

	&:hover {
		background-color: #1e7a54;
		color: #f7e87d;
	}
}