/* ============================================================
   RIET QUADEN MAKELAARS — Diensten (Aankoop, Taxaties, Hypotheken, BOG)

   Klassieke, afwisselende twee-koloms lijst: op desktop staat het
   lijn-icoon bij het 1e en 3e item links van de tekst, bij het 2e en 4e
   rechts (nth-child(even), regel onderaan). Op mobiel (< 760px) staat het
   icoon altijd boven de tekst, geen wissel, geen twee kolommen.

   Kleurregel: --rood alleen in de eyebrow-stip en als spaarzaam
   lijn-accent in de vier iconen (allemaal aria-hidden, dus geen
   tekstcontrast-eis). Lopende tekst in --zwart (17:1) op --warmgrijs;
   kleine labels in --steungrijs (6:1 op warmgrijs, zie berekening in het
   taak-7-rapport). Het cijfer vóór elke taxatie-situatie staat in
   --rood-diep (4,7:1 op warmgrijs, ruim boven de 4.5:1-eis) — geen
   rood-vlak nodig, want het is tekstkleur, geen vlak met witte tekst.
   ============================================================ */

#diensten {
  background: var(--warmgrijs);
}

/* ---------- sectiekop ---------- */

.diensten__kop {
  max-width: 40rem;
  margin-bottom: var(--ruimte-xl);
}

.diensten__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--ruimte-xs);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steungrijs);
}
.diensten__stip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rood);
  flex: none;
}

.diensten__titel { font-family: var(--font-kop); }

.diensten__intro {
  margin-top: var(--ruimte-sm);
  max-width: 52ch;
  color: var(--steungrijs);
  text-wrap: pretty;
}

/* ---------- lijst met vier diensten ---------- */

.diensten__lijst {
  display: flex;
  flex-direction: column;
}

.dienst {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ruimte-md);
  padding-block: var(--ruimte-xl);
  border-top: 1px solid rgba(24, 22, 23, 0.12);
}
.dienst:first-child {
  border-top: none;
  padding-top: 0;
}
.dienst:last-child {
  padding-bottom: 0;
}

/* ---------- icoon ---------- */

.dienst__beeld {
  display: flex;
}

.dienst__icoon {
  width: 52px;
  height: 52px;
  color: var(--steungrijs);
  overflow: visible;
}
.dienst__icoon path,
.dienst__icoon rect,
.dienst__icoon circle,
.dienst__icoon polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dienst__icoon .dienst__icoon-accent {
  stroke: var(--rood);
}

/* ---------- tekstinhoud ---------- */

.dienst__inhoud > * + * {
  margin-top: var(--ruimte-sm);
}

.dienst__titel {
  font-family: var(--font-kop);
  color: var(--zwart);
}

.dienst__inhoud p {
  max-width: 66ch;
  color: var(--zwart);
}

.dienst__lead {
  font-family: var(--font-kop);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
}

.dienst__link {
  text-underline-offset: 3px;
  text-decoration: underline;
  text-decoration-color: rgba(24, 22, 23, 0.35);
  transition: text-decoration-color 0.2s var(--ease-luxe), color 0.2s var(--ease-luxe);
}
.dienst__link:hover,
.dienst__link:focus-visible {
  color: var(--rood-diep);
  text-decoration-color: currentColor;
}
.dienst__link:focus-visible {
  outline: 2px solid var(--zwart);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- 9 taxatie-situaties: nette genummerde lijst ---------- */

.dienst__vraag {
  font-weight: 700;
  color: var(--zwart);
}

.dienst__situaties {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 28px;
  counter-reset: situatie;
}

.dienst__situaties li {
  counter-increment: situatie;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--zwart);
}
.dienst__situaties li::before {
  content: counter(situatie);
  flex: none;
  min-width: 1.1em;
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 0.95em;
  color: var(--rood-diep);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   DESKTOP (>= 760px): twee kolommen, afwisselend gespiegeld
   ============================================================ */
@media (min-width: 760px) {
  .dienst {
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: clamp(40px, 5vw, 72px);
    align-items: start;
  }
  .dienst__beeld {
    justify-content: flex-start;
    padding-top: 4px;
  }

  /* even items gespiegeld: icoon rechts, tekst links */
  .dienst:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) 96px;
  }
  .dienst:nth-child(even) .dienst__beeld {
    order: 2;
    justify-content: flex-end;
  }
  .dienst:nth-child(even) .dienst__inhoud {
    order: 1;
  }

  .dienst__situaties {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   MOBIEL
   ============================================================ */
@media (max-width: 759px) {
  .dienst__icoon { width: 44px; height: 44px; }
  .dienst { padding-block: var(--ruimte-lg); }
}

/* ============================================================
   BEWEGING (diensten.js zet de beginstand; dit is de eindstand)
   ============================================================ */
.dienst {
  opacity: 1;
  transform: none;
}