/* ==========================================================================
   H2G — Diensten rijen (wrapper h2g/diensten-rijen + child h2g/dienst-rij)
   Volle-breedte, klikbare rijen (geen kaarten). 12-koloms interne grid,
   mono-nummer links, grote uppercase titel midden, tekst rechts.
   Child-items delen deze CSS met hun wrapper.
   ========================================================================== */

.h2g-diensten-rijen {
  display: block;
  width: 100%;
  padding: 0 var(--gutter) clamp(72px, 10vw, 120px);
}

/* Sluitrand onder de laatste rij (1-op-1 met het ontwerp). */
.h2g-diensten-rijen__einde {
  border-top: 2px solid var(--color-accent);
}

/* --- Eén rij ------------------------------------------------------------- */
.h2g-dienst-rij {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  align-items: baseline;
  border-top: 2px solid var(--color-accent);
  padding: 26px 0;
  cursor: pointer;
  color: var(--color-accent);
  transition: background 0.2s ease, color 0.2s ease;
}

/* HOVER: kleuren omkeren — achtergrond wordt accent, tekst wordt crème. */
.h2g-dienst-rij:hover,
.h2g-dienst-rij:focus-within {
  background: var(--color-accent);
  color: var(--color-white);
}

.h2g-dienst-rij__nr {
  grid-column: 1 / span 1;
  font-family: var(--font-mono);
  font-size: 15px;
  color: inherit;
}

.h2g-dienst-rij__titel {
  grid-column: 2 / span 5;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(32px, 3.6vw, 58px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  color: inherit;
}

.h2g-dienst-rij__tekst {
  grid-column: 8 / span 5;
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.4;
  max-width: 52ch;
  color: inherit;
}

/* --- Tablet (761–1024px): nr + titel op één regel, tekst eronder ---------- */
/* Voorkomt dat de titel-kolom (span 5) op ~768px tot een smalle strook krimpt
   waarin lange titels als "OPLEVERING & NAZORG" rommelig afbreken. */
@media (max-width: 1024px) {
  .h2g-dienst-rij {
    grid-template-columns: auto 1fr;
    row-gap: 10px;
  }
  .h2g-dienst-rij__nr    { grid-column: 1; }
  .h2g-dienst-rij__titel { grid-column: 2; font-size: clamp(30px, 5.5vw, 50px); }
  .h2g-dienst-rij__tekst { grid-column: 1 / -1; max-width: 60ch; }
}

/* --- Mobiel: volledig stapelen (padding via var(--gutter)) ---------------- */
@media (max-width: 760px) {
  .h2g-dienst-rij {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .h2g-dienst-rij__titel {
    font-size: clamp(30px, 9vw, 44px);
  }
}