/*
 * Landingspagina — de standaardopmaak van een pagina.
 *
 * Volgt #landingspagina uit "Export Loket Direct.dc.html" (de variant
 * Exportverklaring). Tokens komen uit style.css; de formulierkaart, de knoppen, de
 * beoordelingskaarten en de schuine band staan daar of in pages.css, want die zijn
 * gedeeld met andere pagina's.
 *
 * Twee breekbare dingen staan hier met opzet zo:
 *   - de schuine onderkant van de hero: crèmevlak en vorm sluiten exact aan, géén
 *     overlap (zie de opmerking bij --eld-lp-slope in style.css)
 *   - de clamp-truc op 940px bij de stapkaarten (HANDOFF.md §6)
 */

/* ==========================================================================
   1. Hero — crème met een schuine onderkant
   ==========================================================================

   Drie lagen, net als bij de banden elders, maar omgekeerd: het vlak zit bovenaan
   en de vorm eronder. De header staat in de derde laag, want in het ontwerp valt
   die binnen de crèmevlek.
*/

/*
 * De header staat boven deze wrapper, maar hoort in het ontwerp binnen het crèmevlak.
 * Daarom krijgt hij hier dezelfde kleur: visueel loopt het crème dan door van de
 * bovenrand van de pagina tot de schuinte. .eld-page--lp wordt in header.php gezet.
 */
.eld-page--lp .eld-header {
	background: var(--eld-cream);
}

.eld-lphero {
	position: relative;
}

/* Loopt tot precies waar de vorm begint. Niet 1px verder: zie style.css. */
.eld-lphero__cream {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: var(--eld-lp-slope);
	background: var(--eld-cream);
}

.eld-lphero__slope {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--eld-lp-slope);
	background: url("../shapes/diagonal-cream-bottom.png") center bottom / 100% 100%
		no-repeat;
}

.eld-lphero__body {
	position: relative;
}

.eld-lphero__grid {
	padding-block: 56px 28px;
	align-items: start;
}

.eld-lphero__col {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.eld-lphero__title {
	font-size: clamp(30px, 3vw, 38px);
	line-height: 1.15;
	color: var(--eld-navy);
}

.eld-lphero__subtitle {
	font-family: var(--eld-font-head);
	font-size: 20px;
	line-height: 26px;
	letter-spacing: -0.03em;
	color: var(--eld-navy);
}

.eld-lphero__intro {
	max-width: 560px;
	margin-top: 6px;
	font-size: 17px;
	line-height: 26px;
	color: var(--eld-navy);
}

/* margin-bottom: 0 is functioneel — de standaardmarge van een <ul> schuift alles
   eronder 15px op. */
.eld-lphero__usps {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
}

/* ==========================================================================
   2. De aanvraagkaart in de hero
   ==========================================================================

   Twee delen onder elkaar: de kaart zelf met ronde bovenhoeken, en daaronder de
   blauwe strook met het pijltje. Daarom is de wrapper een flex-kolom en niet één
   kaart met padding.
*/

.eld-lpcard {
	display: flex;
	flex-direction: column;
}

.eld-lpcard__body {
	padding: 34px 36px 30px;
	border-radius: var(--eld-radius-lg) var(--eld-radius-lg) 0 0;
	background: var(--eld-white);
	box-shadow: var(--eld-shadow-form);
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Het <form> is een extra laag tussen de kaart en de velden en neemt de tussenruimte
   over die in het ontwerp op de kaart zelf zat. */
.eld-lpcard__body .eld-form {
	gap: 20px;
}

.eld-lpcard__head {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.eld-lpcard__title {
	font-family: var(--eld-font-head);
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: -0.04em;
	color: var(--eld-navy);
}

.eld-lpcard__intro {
	font-size: 15px;
	line-height: 24px;
	color: var(--eld-navy);
}

/*
 * max(45%, 190px) in plaats van een vaste minimumbreedte: zo blijven de vier velden
 * twee-bij-twee staan tot de kaart echt te smal wordt, en klappen ze dan in één keer
 * naar één kolom in plaats van naar een rommelige 2-1.
 */
.eld-lpcard__fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(45%, 190px)), 1fr));
	gap: 16px 24px;
}

/* De belknop is hier zonder de zachte schaduw die hij op Direct regelen heeft. */
.eld-lpcard .eld-btn--call {
	box-shadow: inset 0 0 0 1px var(--eld-border-med);
	color: var(--eld-navy);
}

.eld-lpcard .eld-btn--call:hover {
	box-shadow: inset 0 0 0 1px var(--eld-navy);
	color: var(--eld-navy);
}

/*
 * font-size en line-height staan hier op de strook en niet alleen op de span erin.
 * Anders krijgt de regel twee verschillende boxen: de strut van de strook (15px/22px
 * uit de body) en de span (13px/22px). Die hebben allebei 22px regelhoogte maar een
 * andere halve leading, en omdat ze op de basislijn worden uitgelijnd wordt de regel
 * samen 22,8px in plaats van 22 — de strook werd er 0,8px te hoog van.
 */
.eld-lpcard__note {
	position: relative;
	padding: 14px 24px;
	border-radius: 0 0 var(--eld-radius-lg) var(--eld-radius-lg);
	background: var(--eld-callback-bar);
	text-align: center;
	font-size: 13px;
	line-height: 22px;
}

/* Het pijltje omhoog: een gedraaid vierkantje dat half onder de kaart schuift. */
.eld-lpcard__arrow {
	position: absolute;
	left: 50%;
	top: -7px;
	width: 14px;
	height: 14px;
	margin-left: -7px;
	background: var(--eld-callback-bar);
	transform: rotate(45deg);
	border-radius: 2px;
}

.eld-lpcard__note-text {
	position: relative;
	font-size: 13px;
	line-height: 22px;
	letter-spacing: -0.025em;
	color: var(--eld-blue-gray);
}

/* ==========================================================================
   3. Waarom kiezen voor ons
   ========================================================================== */

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

.eld-lpwhy__head {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 48px;
}

.eld-lpwhy__head h2 {
	max-width: 460px;
}

.eld-lpwhy__head p {
	max-width: 520px;
}

.eld-lpwhy__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 30px;
	align-items: start;
}

.eld-lpwhy__card {
	position: relative;
	padding: 58px 30px 32px;
	border-radius: var(--eld-radius-lg);
	background: var(--eld-white);
	border: 1px solid var(--eld-cream-border-2);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/*
 * Het rondje met het pictogram valt half boven de kaart uit, en is opgebouwd als
 * op de homepage: een witte ring van 56px met een rand, een maskertje dat de
 * onderste helft van die rand tegen de kaart wegpoetst, en daarop een gekleurd
 * schijfje met het pictogram — dezelfde rolverdeling als ring + nummer bij
 * .eld-stepcard.
 *
 * De ring staat op de plek waar het crème schijfje eerst zelf stond, dus de
 * cirkel zit nog precies waar hij zat; alleen het gekleurde deel is kleiner.
 */
.eld-lpwhy__ring {
	position: absolute;
	left: 26px;
	top: -28px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--eld-white);
	border: 1px solid var(--eld-cream-border);
}

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

.eld-lpwhy__icon {
	position: absolute;
	left: 35px;
	top: -19px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--eld-cream);
	display: flex;
	align-items: center;
	justify-content: center;
}

.eld-lpwhy__icon img {
	display: block;
	width: 22px;
	height: auto;
}

.eld-lpwhy__title {
	font-family: var(--eld-font-head);
	font-size: 22px;
	line-height: 28px;
	letter-spacing: -0.03em;
	color: var(--eld-navy);
}

/* ==========================================================================
   4. Dit heb je nodig
   ========================================================================== */

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

.eld-lpneed__head {
	margin-bottom: 44px;
}

/* Zelfde max()-truc als bij de velden in de aanvraagkaart: twee kolommen tot het
   echt niet meer past. */
.eld-lpneed__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(45%, 260px)), 1fr));
	gap: 18px 26px;
}

.eld-lpneed__item {
	display: flex;
	gap: 14px;
	padding: 22px 24px;
	border-radius: var(--eld-radius-lg);
	background: var(--eld-cream);
}

.eld-lpneed__check {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: var(--eld-white);
}

.eld-lpneed__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

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

.eld-lpneed__desc {
	font-size: 13px;
	line-height: 20px;
	color: var(--eld-blue-gray-2);
}

/* ==========================================================================
   5. Zo helpen wij jou — stapkaarten in de grijze band
   ==========================================================================

   De band begint hier niet bovenaan maar op --eld-lp-band-top, zodat de kaarten
   erboven uit steken. Dat regelt .eld-band--offset in style.css.

   De clamp-truc op 940px laat de tweede en derde kaart trapsgewijs zakken: boven
   940px is (100vw - 940px) positief, maal 1000 ver positief, dus geklemd op 58 en
   116px; onder 940px is het negatief en wordt het 0, want dan staan de kaarten
   onder elkaar. Koppel dit niet los van de breedte waarop het raster kantelt.
   Zie HANDOFF.md §6.
*/

.eld-lpsteps {
	margin-top: 104px;
}

.eld-lpsteps__band {
	margin-top: 56px;
}

.eld-lpsteps__grid {
	position: relative;
	padding-block: 0 120px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 26px;
	align-items: start;
}

.eld-lpstep {
	position: relative;
	padding: 44px 30px 30px;
	border-radius: var(--eld-radius-lg);
	background: var(--eld-white);
	box-shadow: var(--eld-shadow-card);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/*
 * De ring om het stapnummer. Zelfde opbouw als .eld-stepcard__ring op de
 * homepage: een cirkel van 56px met een rand, gecentreerd om het nummer van
 * 38px, plus een maskertje dat de onderste helft van die rand tegen de kaart
 * wegpoetst — anders loopt er een boog dwars door het witte kaartvlak.
 *
 * Drie losse spans en geen ::before/::after: pseudo-elementen van de kaart
 * worden óf vóór álle kinderen óf eráchter getekend, en het masker moet er juist
 * tussen — boven de ring, onder het cijfer. Met echte elementen volgt die
 * stapeling uit de documentorde, precies zoals op de homepage.
 */
.eld-lpstep__ring {
	position: absolute;
	left: 17px;
	top: -28px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--eld-white);
	border: 1px solid var(--eld-cream-border);
}

.eld-lpstep__mask {
	position: absolute;
	left: 18px;
	top: -1px;
	width: 54px;
	height: 29px;
	background: var(--eld-white);
}

.eld-lpstep--2 {
	margin-top: clamp(0px, calc((100vw - 940px) * 1000), 58px);
}

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

.eld-lpstep__num {
	position: absolute;
	left: 26px;
	top: -19px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--eld-step-number);
	color: var(--eld-white);
	font-size: 14px;
	line-height: 38px;
	text-align: center;
}

.eld-lpstep__label {
	font-size: 13px;
	line-height: 20px;
	color: var(--eld-blue-gray);
}

.eld-lpstep__title {
	font-family: var(--eld-font-head);
	font-size: 19px;
	line-height: 26px;
	letter-spacing: -0.03em;
	color: var(--eld-navy);
}

.eld-lpstep p {
	margin-top: 8px;
}

/* ==========================================================================
   6. Tekst met foto
   ========================================================================== */

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

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

.eld-lptext__title {
	max-width: 440px;
}

.eld-lptext__body {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.eld-lptext__body p {
	max-width: 520px;
	font-size: 14px;
	line-height: 22px;
	color: var(--eld-navy);
}

.eld-lptext__body a {
	color: var(--eld-orange);
	text-decoration: underline;
}

.eld-lptext__photo {
	position: relative;
	aspect-ratio: 470 / 440;
	border-radius: 16px;
	overflow: hidden;
	background: var(--eld-surface);
}

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

/* Opvulblok voor de foto die nog niet is aangeleverd (HANDOFF.md §8, punt 2). */
.eld-lptext__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: repeating-linear-gradient(
		135deg,
		#eef2f6 0 12px,
		var(--eld-surface) 12px 24px
	);
	color: var(--eld-blue-gray);
	font-size: 13px;
	line-height: 20px;
	text-align: center;
}

/* ==========================================================================
   7. Crèmeblok onderaan — beoordelingen en het formulier met de kaart
   ========================================================================== */

.eld-lpbottom {
	margin-top: 104px;
	background: var(--eld-cream);
}

.eld-lpbottom__reviews {
	padding-block: 88px 0;
}

.eld-contact--lp .eld-contact__inner {
	padding-block: 64px 96px;
}

/* Ook hier max(45%, …), anders dan op de homepage. Dat staat zo in het ontwerp. */
.eld-contact--lp .eld-contact__fields {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(45%, 190px)), 1fr));
	gap: 18px 24px;
}

.eld-contact--lp .eld-contact__map {
	background: var(--eld-surface);
}

/* ==========================================================================
   8. Smalle schermen
   ========================================================================== */

@media (max-width: 520px) {
	.eld-lpcard__body {
		padding: 26px 20px 24px;
	}

	.eld-lpwhy__card {
		padding: 58px 20px 26px;
	}

	.eld-lpneed__item {
		padding: 18px 18px;
	}
}

/* ==========================================================================
   9. Veelgestelde vragen op een dienstpagina
   ==========================================================================

   Zelfde accordeon als op Exportverzekering (die staat in pages.css). Alleen de
   ruimte eromheen is anders: dit blok staat tussen twee andere blokken in en heeft
   geen sluitende onderruimte nodig — die komt van het crèmeblok erna.
*/

.eld-lpfaq {
	padding-block: 88px 0;
}