/* ==========================================================================
   Blokken op subpagina's
   --------------------------------------------------------------------------
   .page-block            lichte sectie met ruime padding
   .page-block--divided   met lijn erboven
   Twee lichte blokken na elkaar krijgen vanzelf een lijn ertussen.
   .page-block__title     sectiekop in het formaat van subpagina's
   .split                 twee kolommen: kop links, tekst rechts
   .split--warm           idem op warme grond (--paper-warm)
   ========================================================================== */

.page-block,
.split {
  padding-block: var(--section-m);
  background: var(--bg);
  color: var(--fg-1);
}

.page-block--divided,
:is(.split, .page-block) + :is(.split, .page-block) {
  border-top: var(--border-width) solid var(--border);
}

.page-block__title,
.split__title {
  max-width: 18ch;
  margin: var(--space-4) 0 0;
  font-size: var(--fs-h2-sub);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-display);
}

/* Cursief deel: Open Sans regular (niet light), petrol. */
.page-block__title em,
.split__title em {
  color: var(--accent);
  font-weight: var(--fw-regular);
}

.page-block__title {
  margin-bottom: var(--gap-stack);
}

/* Warme grond: het kleurvlak scheidt al, dus geen lijn erboven of eronder. */
.split--warm {
  background: var(--bg-warm);
}

/* Zelfde specificiteit als de lijnregel hierboven (twee classes), staat
   later en wint dus. */
.split.split--warm,
.split--warm + :is(.split, .page-block) {
  border-top: 0;
}

/* Twee kolommen ---------------------------------------------------------- */

.split__grid {
  display: grid;
  gap: var(--space-8);
}

.split__lead {
  max-width: 34ch;
  margin-bottom: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--tr-heading);
}

.split__body p:not(.split__lead) {
  max-width: 60ch;
  color: var(--fg-body);
  line-height: var(--lh-relaxed);
}

.split--text-90 .split__body p:not(.split__lead) {
  max-width: 90%;
}

.split__body p:not(.split__lead) + p {
  margin-top: var(--space-5);
}

/* Genummerde lijst met lijnen; nummers via CSS-teller (01, 02, …). */
.split__list {
  margin-top: var(--space-6);
  padding: 0;
  border-top: var(--border-width) solid var(--border);
  counter-reset: split-item;
  list-style: none;
}

.split__list li {
  display: grid;
  grid-template-columns: var(--space-8) minmax(0, 1fr); /* 32px nummerkolom */
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-bottom: var(--border-width) solid var(--border);
  color: var(--fg-body);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body);
  counter-increment: split-item;
}

.split__list li::before {
  content: counter(split-item, decimal-leading-zero);
  padding-top: 0.2em; /* optisch op de eerste tekstregel */
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
}

.split__list strong {
  color: var(--fg-1);
  font-weight: var(--fw-medium);
}

.split__body .split__after {
  margin-top: var(--space-6);
}

.split__link {
  margin-top: var(--space-2);
  color: var(--accent);
}

.split__link:hover {
  color: var(--link-hover);
}

/* Route: verticale lijn met open stippen, laatste stip gevuld. --------- */
.split__steps {
  position: relative;
  margin: 0; /* eigen rasteritem; de afstand tot de kop komt van de gap */
  padding: 0 0 0 var(--space-8);
  list-style: none;
}

.split__steps::before {
  content: "";
  position: absolute;
  top: var(--space-2);
  bottom: var(--space-2);
  left: 0.3125rem; /* midden van de stip van 11px */
  width: var(--border-width);
  background: var(--petrol-200);
  transform-origin: 50% 0;
}

.split__steps li {
  position: relative;
  padding-block: var(--space-3);
  color: var(--fg-body);
  font-family: var(--font-display);
  font-size: var(--fs-body-l);
  letter-spacing: var(--tr-tight);
}

.split__steps li:first-child,
.split__steps li:last-child {
  color: var(--fg-1);
}

.split__steps li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--space-8));
  width: 0.6875rem;  /* 11px stip */
  height: 0.6875rem;
  margin-top: -0.34375rem;
  border: var(--border-width) solid var(--accent);
  border-radius: var(--radius-round);
  background: var(--bg);
}

.split__steps li:last-child::before {
  background: var(--accent);
}

/* Inhoud onder de twee kolommen (bijvoorbeeld projectkaarten). */
.split__below {
  margin-top: var(--space-12);
}

@media (min-width: 64em) {
  .split__steps {
    margin-top: var(--space-14);
  }

  .split__below {
    margin-top: var(--space-16);
  }
}

/* Kop van een blok met korte toelichting ernaast (vanaf 1024px rechts,
   uitgelijnd op de onderkant). */
.page-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--gap-stack);
}

.page-block__head .page-block__title {
  max-width: 20ch;
  margin-bottom: 0;
}

.page-block__intro {
  max-width: 42ch;
  color: var(--fg-body);
  font-size: var(--fs-body-s);
  line-height: var(--lh-relaxed);
}

/* Kaarten met een kleinere titel (bijv. de twee kaarten op Voor eigenaren). */
.page-block__cards--small-titles .service-card__title {
  font-size: var(--fs-body-l); /* 16→20 */
}

/* Kaartenraster in een blok: één kolom, vanaf 768px twee. */
.page-block__cards {
  display: grid;
  gap: var(--gap-grid);
  padding: 0;
  list-style: none;
}

@media (min-width: 48em) {
  .page-block__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Titels in de rij minstens twee regels hoog, zodat de tekst eronder in
     beide kaarten op dezelfde hoogte begint als één titel afbreekt. */
  .page-block__cards--even-titles .service-card__title {
    min-height: 2lh;
  }
}

/* Foto onder de kop (optioneel), 4:3; eigen rasteritem, de afstand tot de
   kop komt van de gap. Vanaf 1024px blijft hij staan (sticky) terwijl de
   tekstkolom ernaast doorloopt. */
.split__media {
  margin: 0;
  overflow: hidden;
  aspect-ratio: var(--ratio-card);
  background: var(--petrol-media);
}

.split__img {
  width: 100%;
  height: 100%;
  aspect-ratio: var(--ratio-card);
  object-fit: cover;
}

@media (min-width: 64em) {
  .split__media {
    position: sticky;
    top: calc(var(--header-h) + var(--space-8));
    margin-top: var(--space-10);
  }

  .split__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: start;
    gap: var(--gap-split);
  }

  /* Met foto of route: kop boven, foto/route en tekst eronder naast
     elkaar, zodat de tekst op de hoogte van de foto of de eerste stap
     begint in plaats van naast de eyebrow. Staat na .split__grid, zodat
     row-gap de gap daar overschrijft; de afstand onder de kop komt van de
     marge op foto/route en tekst. */
  .split__grid--aside {
    grid-template-areas:
      "head  ."
      "aside body";
    row-gap: 0;
  }

  .split__grid--aside .split__head { grid-area: head; }

  .split__grid--aside :is(.split__media, .split__steps) { grid-area: aside; }

  .split__grid--aside .split__body { grid-area: body; }

  .split__grid--media .split__body {
    margin-top: var(--space-10); /* gelijk aan de foto */
  }

  /* Gelijk aan de route plus de padding van de eerste stap, zodat de
     tekst op de regel van de eerste stap begint. */
  .split__grid--steps .split__body {
    margin-top: calc(var(--space-14) + var(--space-3));
  }

  /* Tekst op de hoogte van de kop: de eyebrow neemt in de kopkolom één
     regel van de lopende tekst in (1lh; kop- en tekstkolom erven dezelfde
     letter en regelhoogte), daarna volgt de marge boven de kop. */
  .split__grid--title .split__body {
    margin-top: calc(1lh + var(--space-4));
  }
}