/* ══════════════════════════════════════════════════════════════════════════
   Sectieritme en uitlijning, v8.17.0

   Het probleem dat dit oplost: elk blok bepaalt zelf of het wit of creme is,
   maar geen enkel blok weet wat er voor of na komt. Bij het herschikken van
   tracks ontstaan daardoor reeksen van vier of vijf gelijk gekleurde secties
   achter elkaar, en dan valt de scheiding tussen onderwerpen weg.

   Gemeten op v8.16.9: hub 5, makelaar 8 en adviseur 8 opeenvolgende gelijke
   secties.

   De oplossing werkt op de opeenvolging in plaats van op de blokken zelf. Zo
   blijft het kloppen wanneer iemand later een blok verplaatst, en hoeft er geen
   enkel blok te worden aangepast.

   Uitsluitend bestaande tokens uit landing.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Opeenvolgende gelijke secties krijgen een scheiding ─────────────────── */

.lpl-app.lpl-v3 .lpl-section:not(.lpl-section-alt) + .lpl-section:not(.lpl-section-alt)::before,
.lpl-app.lpl-v3 .lpl-section-alt + .lpl-section-alt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100% - 2 * var(--gutter), var(--maxw));
  height: 1px;
  background: var(--line-soft);
  pointer-events: none;
}

/* De eerste sectie na de hero hoort geen streep te krijgen; de hero sluit al
   met zijn eigen vorm af. */
.lpl-app.lpl-v3 .lpl-hero + .lpl-section::before {
  display: none;
}

/* ── Verticaal ritme tussen opeenvolgende gelijke secties ────────────────── */

/* Twee gelijk gekleurde secties na elkaar lezen als één lang vlak. Iets minder
   ruimte ertussen maakt duidelijk dat ze bij elkaar horen, zonder ze te laten
   versmelten. */
.lpl-app.lpl-v3 .lpl-section:not(.lpl-section-alt) + .lpl-section:not(.lpl-section-alt),
.lpl-app.lpl-v3 .lpl-section-alt + .lpl-section-alt {
  padding-top: calc(var(--lpl-space-section) * .72);
}

/* Het staartstuk van elke route (contact, afsluitende oproep) staat dicht op
   elkaar: dat is één afrondend geheel en geen reeks losse onderwerpen. */
.lpl-app.lpl-v3 #contact + .lpl-section,
.lpl-app.lpl-v3 .lpl-end-cta-section {
  padding-top: calc(var(--lpl-space-section) * .55);
}

/* ── Uitlijning: één maat voor tekstkolommen ─────────────────────────────── */

/* Losse max-widths in blokken leverden kolommen op van 46 tot 78 tekens breed.
   Onder de 45 en boven de 75 tekens gaat het lezen merkbaar achteruit; deze
   variabelen houden alles in dat bereik. */
.lpl-app.lpl-v3 {
  --lpl-tekst-smal:  56ch;  /* intro's en losse alinea's */
  --lpl-tekst-breed: 68ch;  /* toelichtingen en opsommingen */
}

.lpl-app.lpl-v3 .lpl-lede,
.lpl-app.lpl-v3 .lpl-kicker {
  max-width: var(--lpl-tekst-breed);
}

.lpl-app.lpl-v3 .lpl-section-head-center .lpl-lede,
.lpl-app.lpl-v3 .lpl-section-head-center .lpl-kicker {
  margin-inline: auto;
}

/* ── Kaartroosters: gelijke hoogte, gelijke uitlijning ───────────────────── */

/* Kaarten in een rij hoorden even hoog te zijn; bij verschillende
   tekstlengtes liepen ze uiteen en oogde de rij scheef. */
.lpl-app.lpl-v3 .lpl-tk-grid > *,
.lpl-app.lpl-v3 .lpl-bezwaren-grid > *,
.lpl-app.lpl-v3 .lpl-role-grid > * {
  display: flex;
  flex-direction: column;
}

/* Laat de laatste alinea van een kaart de resterende ruimte opvullen, zodat
   eventuele knoppen of voetregels onderaan uitlijnen. */
.lpl-app.lpl-v3 .lpl-tk-kanaal > ul:last-child,
.lpl-app.lpl-v3 .lpl-role-card > p:last-child {
  margin-top: auto;
}

/* ── Kopregels: consistente afstand tot wat eronder staat ────────────────── */

.lpl-app.lpl-v3 .lpl-section-head {
  margin-bottom: var(--lpl-space-block);
}

.lpl-app.lpl-v3 .lpl-section-head > *:last-child {
  margin-bottom: 0;
}

/* ── Losse elementen die uit de rooilijn liepen ──────────────────────────── */

/* Blokken met een eigen kaartbreedte trokken de pagina scheef doordat ze een
   andere maximale breedte hadden dan de containers eromheen. */
.lpl-app.lpl-v3 .lpl-tk-grid,
.lpl-app.lpl-v3 .lpl-tk-uitkomst,
.lpl-app.lpl-v3 .lpl-pricing-maand-kaart,
.lpl-app.lpl-v3 .lpl-pricing-bundels-kop {
  margin-inline: auto;
}

/* ── Mobiel: minder ruimte, maar wel evenveel scheiding ──────────────────── */

@media (max-width: 640px) {
  .lpl-app.lpl-v3 .lpl-section:not(.lpl-section-alt) + .lpl-section:not(.lpl-section-alt),
  .lpl-app.lpl-v3 .lpl-section-alt + .lpl-section-alt {
    padding-top: calc(var(--lpl-space-section) * .62);
  }

  /* Op smalle schermen telt elke pixel; de streep blijft, de inspringing niet. */
  .lpl-app.lpl-v3 .lpl-section:not(.lpl-section-alt) + .lpl-section:not(.lpl-section-alt)::before,
  .lpl-app.lpl-v3 .lpl-section-alt + .lpl-section-alt::before {
    width: calc(100% - 2 * var(--gutter));
  }
}

/* ── Verdiepingslinks in de footer, v8.17.1 ──────────────────────────────── */

.lpl-app.lpl-v3 .lpl-footer-verdieping {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 8px 20px;
  margin: 22px 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.lpl-app.lpl-v3 .lpl-footer-verdieping-kop {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.lpl-app.lpl-v3 .lpl-footer-verdieping a {
  font-size: 14.5px;
  color: var(--blue-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--blue-soft);
}

.lpl-app.lpl-v3 .lpl-footer-verdieping a:hover {
  border-bottom-color: var(--blue);
}

@media (max-width: 560px) {
  .lpl-app.lpl-v3 .lpl-footer-verdieping {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}