/*
 * Homepage — Export Loket Direct
 *
 * Volgt sectie voor sectie de opbouw van #homepagina in
 * "Export Loket Direct.dc.html". Tokens komen uit style.css.
 *
 * De clamp-truc op 940px bij de stapkaarten (§6 van HANDOFF.md) is het breekbare
 * stuk in dit bestand. De drie lagen van de schuine band staan in style.css, omdat
 * Over ons ze ook gebruikt.
 */

/* ==========================================================================
   1. Hero
   ========================================================================== */

.eld-hero {
	background: url("../img/hero-banner.png") center top / 100% auto no-repeat;
}

.eld-hero__body {
	padding-block: 26px 44px;
}

.eld-hero__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 790px;
}

.eld-hero__intro {
	max-width: 740px;
	margin-top: 10px;
}

.eld-hero__subtitle {
	font-family: var(--eld-font-head);
	font-size: 26px;
	line-height: 32px;
	color: var(--eld-navy);
}

/*
 * Standaard is er géén lopende lint; die komt er pas bij onder 767px. Dat is
 * bewust deze kant op geregeld en niet met een min-width-tegenhanger: met
 * `max-width: 767px` naast `min-width: 768px` valt de breedte 767 precies tussen
 * wal en schip — deze browser rekent `max-width: 767px` daar al als onwaar — en
 * dan stond de rij ineens met kopieën en al op 88px.
 *
 * display:contents laat de wrapper wegvallen, zodat de <ul> gewoon het flex-kind
 * van .eld-hero__col blijft en de opmaak van het ontwerp niets merkt.
 */
.eld-hero__usps-strip {
	display: contents;
}

/*
 * Twee klassen in de selector, en dat is nodig: .eld-hero__usp krijgt verderop
 * `display: flex`, met hetzelfde gewicht maar later in het bestand — dan wint die
 * en stonden de kopieën op een breed scherm ineens óók in beeld.
 */
.eld-hero__usp.eld-hero__usp--dup {
	display: none;
}

/* In het ontwerp is dit een reeks losse spans; hier een lijst. De onderste marge
   moet expliciet op 0 — de standaardmarge van een <ul> zou de hele pagina
   eronder 15px opschuiven. */
.eld-hero__usps {
	display: flex;
	align-items: center;
	gap: 44px;
	flex-wrap: wrap;
	margin: 10px 0 0;
	list-style: none;
	padding: 0;
}

.eld-hero__usp {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	line-height: 22px;
	color: var(--eld-navy);
}

.eld-hero__usp svg {
	display: block;
	flex: none;
}

/* Het witte paneel met snelkoppelingen */
.eld-hero__panel {
	margin-top: 18px;
	max-width: 455px;
	padding: 14px;
	border-radius: var(--eld-radius-md);
	background: var(--eld-white);
	box-shadow: var(--eld-shadow-hero-panel);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.eld-hero__link {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 52px;
	padding: 0 18px;
	border-radius: var(--eld-radius-sm);
	background: var(--eld-white);
	box-shadow: inset 0 0 0 1px var(--eld-cream-border-4);
	text-decoration: none;
	transition: box-shadow 0.15s ease;
}

.eld-hero__link:hover {
	box-shadow: inset 0 0 0 1px var(--eld-orange);
}

.eld-hero__link svg {
	display: block;
	flex: none;
}

.eld-hero__link-label {
	flex: 1;
	font-size: 15px;
	line-height: 24px;
	color: var(--eld-navy);
}

.eld-hero__panel .eld-btn--orange {
	width: 100%;
	min-width: 0;
	height: 52px;
	padding: 0 18px 0 24px;
	font-size: 15px;
	line-height: 24px;
	letter-spacing: 0;
}

/* ==========================================================================
   2. Diensten
   ========================================================================== */

.eld-diensten {
	padding-block: 80px 0;
}

.eld-diensten__head {
	margin-bottom: 40px;
}

.eld-dienst {
	position: relative;
	display: block;
	aspect-ratio: 312 / 424;
	border-radius: var(--eld-radius-lg);
	overflow: hidden;
	background: var(--eld-navy);
	text-decoration: none;
}

.eld-dienst__media {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
}

.eld-dienst__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Opvulblok voor de twee foto's die nog niet zijn aangeleverd
   (HANDOFF.md §8, punt 2). Vervangbaar via de mediakiezer bij de dienst. */
.eld-dienst__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: repeating-linear-gradient(
		135deg,
		#043a55 0 12px,
		#022f47 12px 24px
	);
	color: var(--eld-blue-gray-3);
	font-size: 13px;
	line-height: 20px;
	text-align: center;
}

.eld-dienst__scrim {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 300px;
	background: linear-gradient(0deg, var(--eld-navy) 0%, rgba(2, 47, 71, 0) 100%);
	pointer-events: none;
}

.eld-dienst__caption {
	position: absolute;
	left: 20px;
	bottom: 20px;
	right: 20px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	pointer-events: none;
}

.eld-dienst__title {
	font-size: 15px;
	line-height: 24px;
	letter-spacing: -0.025em;
	color: var(--eld-white);
}

.eld-dienst__sub {
	font-size: 14px;
	line-height: 22px;
	color: var(--eld-blue-gray-3);
}

/* ==========================================================================
   3. Stappen — "Zo helpen wij jou"
   ========================================================================== */

.eld-stappen {
	padding-block: 96px 0;
}

.eld-stappen__head {
	margin-bottom: 52px;
}

/* De crèmekaart met de uitgesneden cirkel bovenaan. */
.eld-stepcard {
	position: relative;
	z-index: 0;
	padding: 48px 30px 30px;
	border-radius: var(--eld-radius-md);
	background: var(--eld-white);
	border: 1px solid var(--eld-cream-border);
	box-shadow: var(--eld-shadow-cream);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/*
 * Trapsgewijze verspringing boven 940px. De clamp-truc koppelt de marge aan
 * exact dezelfde breedte waarop het raster van drie naar twee kolommen klapt.
 * Zonder dit ontstaat er een gat in de band zodra het raster kantelt.
 * Niet vervangen door vaste marges — HANDOFF.md §6.
 */
.eld-stepcard--2 {
	margin-top: clamp(0px, calc((100vw - 940px) * 1000), 58px);
}

.eld-stepcard--3 {
	margin-top: clamp(0px, calc((100vw - 940px) * 1000), 116px);
}

/* De cirkel: buitenring, wit maskertje over de onderste helft, en het cijfer. */
.eld-stepcard__ring {
	position: absolute;
	left: 24px;
	top: -34px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--eld-white);
	border: 1px solid var(--eld-cream-border);
}

.eld-stepcard__mask {
	position: absolute;
	left: 25px;
	top: -1px;
	width: 54px;
	height: 27px;
	background: var(--eld-white);
}

.eld-stepcard__num {
	position: absolute;
	left: 37px;
	top: -21px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--eld-orange);
	color: var(--eld-white);
	font-size: 14px;
	line-height: 30px;
	text-align: center;
}

.eld-stepcard__label {
	font-size: 14px;
	line-height: 22px;
	color: var(--eld-navy);
}

.eld-stepcard__text {
	margin-top: 8px;
}

/* ==========================================================================
   4. Tekstblok
   ========================================================================== */

.eld-textblock {
	margin-top: 96px;
	background: var(--eld-white);
}

.eld-textblock__inner {
	padding-block: 20px 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
	align-items: center;
	text-align: center;
}

.eld-textblock__title {
	max-width: 520px;
}

.eld-textblock p {
	max-width: 600px;
}

/* ==========================================================================
   5. "Nr.1 Export Loket" — de schuine grijze band
   ==========================================================================

   Alleen de indeling van deze sectie staat hier. De drie lagen van de band zelf
   (.eld-band__edge / __fill / __body) staan in style.css, want Over ons gebruikt
   dezelfde machinerie met een crèmekleurige vorm.
*/

.eld-band--top {
	margin-top: 76px;
}

/* De kop staat in de schuinte zelf en krijgt daarom exact de bandhoogte. */
.eld-band__head {
	height: var(--eld-band-h);
	display: flex;
	align-items: flex-start;
	gap: 22px;
	flex-wrap: wrap;
}

.eld-band__head .eld-kicker {
	margin-top: 6px;
}

.eld-band__grid {
	padding-block: 36px 88px;
}

.eld-usp {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.eld-usp img {
	display: block;
	height: 46px;
	width: auto;
}

.eld-usp p {
	max-width: 300px;
}

/* Alleen zichtbaar als er een kolom zonder pictogram is toegevoegd. */
.eld-usp__placeholder {
	display: block;
	font-size: 13px;
	line-height: 20px;
	color: var(--eld-blue-gray);
}

/* ==========================================================================
   6. "Nieuw!" — tekst naast beeld
   ========================================================================== */

.eld-feature {
	padding-block: 104px 0;
}

.eld-feature__col {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}

.eld-feature__col h2,
.eld-feature__col p {
	max-width: 520px;
}

.eld-feature__media {
	border-radius: var(--eld-radius-lg);
	overflow: hidden;
	background: var(--eld-surface);
}

.eld-feature__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 16 / 10;
}

/* ==========================================================================
   7. RDW — crèmeband
   ========================================================================== */

/* De RDW-band staat in style.css: Over ons gebruikt hem ook. */



/* ==========================================================================
   8. De hero op telefoonformaat
   ==========================================================================

   Twee dingen die op een breed scherm goed werken en op een telefoon niet.

   De bannerfoto is 1920 × 739 en staat op `100% auto`, dus op 390px wordt hij
   390 × 150: een streepje foto achter de header waar niets meer van te herkennen
   is. Hij gaat eruit en er komt een vlak in dezelfde kleur voor terug. Die kleur
   is geen keuze maar een meting: de linkerhelft van hero-banner.png — de kant
   waar de tekst over staat — is #fcf2e7, en dat is op een haartje de
   --eld-cream van het thema.

   Het vlak komt op .eld-hero__body en niet op .eld-hero, want die laatste is de
   wrapper om de héle pagina; daar zou de crème dus tot in de footer doorlopen.
   Op telefoonformaat is .eld-wrap precies zo breed als het scherm, dus het vlak
   loopt van rand tot rand. Onderaan een verloop naar transparant, zodat er geen
   harde streep komt tussen de hero en de dienstensectie — de PNG heeft die zachte
   overgang ook.
   ========================================================================== */

@media (max-width: 767px) {
	/*
	 * !important is hier nodig en niet lui: header.php zet de foto als inline
	 * style op dit element (`style="background-image:url(...)"`), omdat het pad
	 * uit een metaveld komt. Een inline style verslaat elke gewone regel.
	 */
	.eld-hero {
		background-image: none !important;
	}

	/*
	 * De kopbalk moet mee in de kleur. Hij is doorzichtig omdat hij op een breed
	 * scherm over de bannerfoto heen ligt; laat je hem hier wit, dan komt er een
	 * harde streep onder het logo waar de crème begint. Twee blokken naast elkaar
	 * in dezelfde kleur is robuuster dan één verloop over .eld-hero: dat is de
	 * wrapper om de hele pagina, en de hoogte van kop plus hero staat niet vast.
	 *
	 * Alleen op de homepage: .eld-hero staat nergens anders op .eld-page.
	 */
	.eld-hero .eld-header {
		background: var(--eld-cream);
	}

	.eld-hero__body {
		background: linear-gradient(
			to bottom,
			var(--eld-cream) 0,
			var(--eld-cream) calc(100% - 130px),
			rgba(253, 241, 230, 0) 100%
		);
	}

	/*
	 * De vinkjes stonden 88px hoog voor drie regels van 22px: de gap van 44px geldt
	 * ook tussen de regels, en de drie passen samen niet op één regel (172 + 136 +
	 * 139 = 447px in een kolom van 342px). Nu één rij van 22px die onafgebroken
	 * doorloopt als een lint.
	 *
	 * Twee dingen waar het op staat of valt.
	 *
	 * 1. De vinkjes staan er in de opmaak twéé keer. De animatie schuift precies
	 *    één set naar links en springt dan terug naar nul; op dat moment staat set 2
	 *    exact waar set 1 begon, dus je ziet de sprong niet. Met één set zou de lint
	 *    zichtbaar terugklappen.
	 *
	 * 2. De tussenruimte zit in `margin-inline-end` op de vinkjes en níet in `gap`.
	 *    Dat lijkt hetzelfde maar is het niet: met `gap` staat er tussen de zes
	 *    vinkjes vijf keer ruimte, dus is de halve baan een halve tussenruimte korter
	 *    dan één set en verspringt de lint elke ronde 11px. Met een marge achter
	 *    élk vinkje is de baan exact twee keer een set en klopt -50% op de pixel.
	 */
	.eld-hero__usps-strip {
		display: block;
		overflow: hidden;
		margin-inline: calc(var(--eld-gutter) * -1);
		/*
		 * Aan beide kanten vervagen, en precies zo breed als de paginamarge, zodat de
		 * vinkjes niet hard tegen de schermrand aan verschijnen en verdwijnen maar
		 * netjes in en uit beeld lopen.
		 */
		mask-image: linear-gradient(
			to right,
			transparent 0,
			#000 var(--eld-gutter),
			#000 calc(100% - var(--eld-gutter)),
			transparent 100%
		);
	}

	/*
	 * Géén padding op de baan. Die zat er eerst wel, om het eerste vinkje op de
	 * paginamarge te laten beginnen, maar padding hoort bij de breedte van de baan
	 * en niet bij een set — en dan is de halve baan een halve padding lánger dan
	 * één set, dus verspringt de lus elke ronde 12px. Bij een lopende lint heeft
	 * een voorloop toch geen functie: het beginbeeld is er maar een fractie, en het
	 * verloop op de strip zorgt ervoor dat de linkerkant altijd vervaagd is.
	 */
	.eld-hero__usps {
		flex-wrap: nowrap;
		gap: 0;
		width: max-content;
		animation: eld-usp-lint 14s linear infinite;
		will-change: transform;
	}

	.eld-hero__usp {
		flex: 0 0 auto;
		margin-inline-end: 34px;
	}

	/* Zelfde weergave als een echt vinkje; alleen voor het oog, niet voor een
	   schermlezer — daarvoor staat aria-hidden in hero.php. Ook hier twee klassen,
	   anders verliest hij van de basisregel hierboven. */
	.eld-hero__usp.eld-hero__usp--dup {
		display: flex;
	}

	/* Even stilzetten als iemand de lint aanwijst of erin focust, zodat een tekst
	   die je wilt lezen niet onder je ogen wegloopt. */
	.eld-hero__usps-strip:hover .eld-hero__usps,
	.eld-hero__usps-strip:focus-within .eld-hero__usps {
		animation-play-state: paused;
	}
}

@keyframes eld-usp-lint {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		/* Precies één set, want de baan bestaat uit twee identieke sets. */
		transform: translate3d(-50%, 0, 0);
	}
}



/*
 * Wie in zijn systeem heeft aangegeven zo min mogelijk beweging te willen, hoort
 * geen lopende lint te krijgen. Dan valt het terug op regels die netjes afbreken:
 * vinkje 1 en 2 samen op de eerste (172 + 22 + 136 = 330px in een kolom van
 * 342px), vinkje 3 op de tweede. 52px in plaats van 22px, maar er beweegt niets
 * en er valt niets weg.
 *
 * Hier wél `column-gap` en géén `margin-inline-end`. Dat is geen smaak: bij het
 * afbreken telt de marge achter het láátste vinkje van een regel mee in de
 * breedte van die regel. Met een marge van 34px werd regel 2 daardoor 343px in
 * een kolom van 342 — één pixel te veel — en sprong vinkje 3 naar een derde
 * regel. Een gap zit alleen ítussen de vinkjes en heeft dat probleem niet.
 */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.eld-hero__usps-strip {
		display: contents;
	}

	.eld-hero__usps {
		animation: none;
		flex-wrap: wrap;
		width: auto;
		column-gap: 22px;
		row-gap: 8px;
	}

	.eld-hero__usp {
		margin-inline-end: 0;
	}

	.eld-hero__usp.eld-hero__usp--dup {
		display: none;
	}
}