/*
 * Regels die echt maar op een pagina gelden.
 *
 * Verhuist iets hiervandaan naar een tweede pagina, dan hoort het in
 * components.css of layout.css. Dit bestand hoort klein te blijven.
 */

/* ---- Home: de werkwijze in vier stappen ----------------------------------
 * Genummerd omdat het echt een volgorde is. Een genummerde lijst waar niets
 * op volgorde staat is een van de duidelijkste sjabloonkenmerken.
 */

.werkwijze {
  list-style: none;
  counter-reset: stap;
  display: grid;
  gap: var(--ruimte-6);
}

@media (min-width: 48rem) {
  .werkwijze {
    grid-template-columns: repeat(2, 1fr);
    /* Ruim tussen de rijen. Met 3rem liepen stap 1 en 3 visueel aan elkaar
     * vast en las de lijst als een doorlopende alinea in plaats van als vier
     * losse stappen. De kolomruimte is groter dan het cijfervakje breed is,
     * anders lijkt stap 2 bij stap 1 te horen. */
    gap: var(--ruimte-9) var(--ruimte-8);
  }
}

.werkwijze li {
  counter-increment: stap;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--ruimte-4);
  align-items: start;
}

.werkwijze li::before {
  content: counter(stap);
  font-family: var(--letter-display);
  font-size: var(--tekst-h3);
  font-weight: var(--gewicht-zwaar);
  line-height: 1;
  color: var(--ink);
  background: var(--oker);
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  /* --rond, want DESIGN-SYSTEM.md noemt ronde markeringen bij de cirkel uit
   * het logo. Hier stond --radius-label, en dat token bestaat niet: de regel
   * werd genegeerd en het cijfer stond in een vierkantje. Gevonden door
   * TokensTest, niet met het oog. */
  border-radius: var(--rond);
}

.werkwijze h3 {
  margin-block-end: var(--ruimte-2);
}

/* ---- Home: contactblok ---------------------------------------------------- */

.contactblok {
  display: grid;
  gap: var(--ruimte-6);
}

@media (min-width: 48rem) {
  .contactblok {
    grid-template-columns: repeat(3, 1fr);
  }
}

.contactblok h3 {
  font-size: var(--tekst-s);
  font-weight: var(--gewicht-vet);
  color: var(--klei);
  margin-block-end: var(--ruimte-2);
}

/* ---- Contact: de kaart ---------------------------------------------------
 * Een statische afbeelding met een link, geen ingesloten Google-kaart. Die
 * iframe zet cookies van derden, op een site die verder geen enkele cookie van
 * derden heeft en daarom geen toestemmingsbanner nodig heeft.
 */

.kaart {
  display: block;
  border: var(--lijn);
}

.kaart img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}