/* Dienstpagina's, eigen laag
 *
 * Laadt na tokens.css, componenten.css en site.css. De vijf dienstpagina's
 * delen één skelet en gebruiken vrijwel alles uit de bibliotheek: de balk, de
 * hero, de kaart, de knop, de faq en de voettekst. Wat hier staat is de
 * feitenrij onder de hero en de rij naar de andere diensten.
 *
 * De 2518 regels ingebouwde CSS die deze pagina's uit _v5 meedroegen zijn weg.
 */

/* ---------- de hero zonder beeld ----------
 * De hero uit de bibliotheek staat op twee kolommen, want op de homepage staat
 * er een portret naast. Een dienstpagina heeft dat niet, en dan blijft de
 * rechterhelft leeg terwijl de tekst en de feitenrij in de linkerhelft geperst
 * worden. */

.hero--tekst .hero__inner { grid-template-columns: 1fr; }
.hero--tekst .hero__titel { max-width: 20ch; }

/* ---------- de feitenrij onder de hero ----------
 * Vier feiten die de eerste vragen beantwoorden: wat kost het, hoe lang duurt
 * het, wat moet je zelf doen en waar werk ik. Op de hero staat de tekst op het
 * donkere vlak, dus de rij erft de omgekeerde kleuren. */

.feiten {
  display: grid;
  gap: var(--sp-1);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  padding-block-start: var(--sp-2);
  border-block-start: 1px solid currentColor;
}
/* Op leadformaat en niet op kopformaat. Vier feiten naast elkaar laten per stuk
   ongeveer 260 pixels over, en een kop van dat formaat breekt daarin in twee
   regels van twee woorden. */
.feit__waarde { font: var(--type-lead); color: inherit; display: block; }
.feit__uitleg { font: var(--type-body-sm); display: block; margin-block-start: 4px; }
.section--inverse .feiten { border-block-start-color: var(--color-text-inverse); }
.section--inverse .feit__uitleg { color: var(--color-text-inverse); opacity: .82; }

/* De feitenrij hangt binnen de hero onder de knoppen en niet ernaast, want een
   feit dat je naast een knop zet leest als onderdeel van die knop. */
.hero__inner > .stack > .feiten { margin-block-start: var(--sp-1); }

/* ---------- de lijst met herkenningspunten ---------- */

.herken { display: grid; gap: var(--sp-0); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.herken li {
  font: var(--type-body);
  padding-inline-start: var(--sp-1);
  position: relative;
}
.herken li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ---------- de rij naar de andere diensten ---------- */

.andere { display: grid; gap: var(--sp-1); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.andere__kop { font: var(--type-label); display: block; }
.andere__tekst { font: var(--type-body-sm); color: var(--color-text-subtle); display: block; margin-block-start: var(--sp-0); }

/* ---------- het contactblok onderaan ---------- */

.dienst-slot { display: grid; gap: var(--sp-1); }
.dienst-slot__knoppen { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
@media (max-width: 520px) {
  .dienst-slot__knoppen { flex-direction: column; align-items: stretch; }
}