/* ==========================================================================
   Blok — Onderdelen: "Wat we voor je doen"
   Rustige tegels met een icoon in een lichte cirkel. De tegel neemt de kleur
   van de band over (zacht vlak op wit, wit vlak op grijs/roze, donker vlak op
   navy). Met een link is de hele tegel klikbaar (.kaart-patroon) en vult de
   cirkel zich bij hover/focus, net als de nummerstip bij home-diensten.
   - Mobiel: één kolom.
   - Vanaf 640px: twee kolommen.
   - Vanaf 1024px: drie kolommen (--3); vier kolommen vanaf 1100px (--4).
   - Vijf smalle tegels (--5): drie vanaf 1024px, vijf op één rij vanaf 1200px.
   - Punten onder de tekst (bijv. gedrag bij een kernwaarde): vinklijst met
     een dunne lijn erboven.
   - Twee kolommen (--2) vanaf 960px: icoon links naast de tekst.
   ========================================================================== */
.b-onderdelen {
  --b-onderdelen-tegel: var(--grijs-licht);
  --b-onderdelen-cirkel: var(--wit);
  --b-onderdelen-icoon: var(--blauw);
  --b-onderdelen-rand: transparent;
  --b-onderdelen-schaduw: none;
  --b-onderdelen-pad: clamp(1.5rem, 1.15rem + 1vw, 2.125rem);
}
.b-onderdelen.band--grijs,
.b-onderdelen.band--roze {
  --b-onderdelen-tegel: var(--wit);
  --b-onderdelen-cirkel: var(--grijs-licht);
  --b-onderdelen-schaduw: var(--shadow-sm);
}
.b-onderdelen.band--roze { --b-onderdelen-cirkel: var(--roze-licht); }
.b-onderdelen.band--navy {
  --b-onderdelen-tegel: var(--navy-90);
  --b-onderdelen-cirkel: var(--navy-80);
  --b-onderdelen-icoon: var(--blauw-licht);
  --b-onderdelen-rand: var(--navy-80);
}

/* --- Raster ------------------------------------------------------------ */
.b-onderdelen__lijst {
  display: grid;
  gap: var(--gap);
}
@media (min-width: 640px) {
  .b-onderdelen__lijst--2,
  .b-onderdelen__lijst--3,
  .b-onderdelen__lijst--4,
  .b-onderdelen__lijst--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .b-onderdelen__lijst--3,
  .b-onderdelen__lijst--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .b-onderdelen__lijst--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .b-onderdelen__lijst--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(.875rem, .4rem + .6vw, 1.25rem);
  }
  /* Smalle tegel: iets minder ruimte, kop en tekst een tikje kleiner */
  .b-onderdelen .b-onderdelen__lijst--5 .b-onderdelen__tegel { gap: 1.25rem; padding: clamp(1.25rem, .9rem + .5vw, 1.6rem); }
  .b-onderdelen__lijst--5 .b-onderdelen__titel { font-size: clamp(1.05rem, .95rem + .2vw, 1.15rem); }
  .b-onderdelen__lijst--5 .b-onderdelen__tekst { font-size: var(--fs-small); }
}

/* minmax(0, 1fr): een lang woord in de kop mag de tegel niet oprekken */
.b-onderdelen__item { display: grid; grid-template-columns: minmax(0, 1fr); }

/* --- Tegel ------------------------------------------------------------- */
/* .b-onderdelen ervoor: wint van .kaart (wit vlak, schaduw, navy tekst) bij
   gelinkte tegels; de tekstkleur volgt de band, ook op navy */
.b-onderdelen .b-onderdelen__tegel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
  padding: var(--b-onderdelen-pad);
  border: 1px solid var(--b-onderdelen-rand);
  border-radius: var(--r-lg);
  background: var(--b-onderdelen-tegel);
  color: inherit;
  box-shadow: var(--b-onderdelen-schaduw);
}
/* Gelinkte tegel: optillen (transform komt uit .kaart:hover) */
.b-onderdelen .kaart.b-onderdelen__tegel:hover { box-shadow: var(--shadow-lift); }
.b-onderdelen.band--navy .kaart.b-onderdelen__tegel:hover {
  border-color: rgba(255, 255, 255, .28);
  box-shadow: none;
}
/* Focusring (uit .kaart) blijft staan als de gefocuste tegel ook gehoverd wordt */
.b-onderdelen .kaart.b-onderdelen__tegel:has(.kaart__titel a:focus-visible) { box-shadow: var(--focus), var(--shadow-lift); }
.b-onderdelen.band--navy .kaart.b-onderdelen__tegel:has(.kaart__titel a:focus-visible) { box-shadow: var(--focus); }

.b-onderdelen__icoon {
  display: grid;
  flex: none;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--b-onderdelen-cirkel);
  color: var(--b-onderdelen-icoon);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.b-onderdelen__icoon .icoon { width: 1.5rem; height: 1.5rem; }
.b-onderdelen .kaart:is(:hover, :focus-within) .b-onderdelen__icoon {
  background: var(--blauw);
  color: var(--wit);
}

.b-onderdelen__inhoud {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

/* Zelfde kop als .kaart__titel, ook voor tegels zonder link. (Een lange
   samenstelling breekt af via base.css: overflow-wrap op alle koppen.) */
.b-onderdelen__titel {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: 0;
}

/* 15px in smalle kolommen, oplopend naar 17px (zoals routes en diensten) */
.b-onderdelen__tekst {
  margin-top: .6rem;
  color: var(--tekst-zacht);
  font-size: clamp(var(--fs-small), .47rem + .725vw, var(--fs-body));
  line-height: 1.6;
}
/* Een link in de tekst blijft klikbaar boven de klikbare tegel */
.b-onderdelen__tekst a { position: relative; z-index: 2; }

/* Punten (vinklijst) onder de tekst, gescheiden door een dunne lijn */
/* .b-onderdelen ervoor: wint van de lijstreset (ul[role="list"]) in base.css */
.b-onderdelen .b-onderdelen__punten {
  margin: 1.25rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--lijn);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.b-onderdelen.band--navy .b-onderdelen__punten { border-top-color: var(--navy-80); }

.b-onderdelen__voet {
  margin-top: auto;
  padding-top: 1.25rem;
  line-height: 1.45;
}

/* --- Mobiel: compacter (kleinere cirkel, minder ruimte) ---------------- */
@media (max-width: 639.98px) {
  .b-onderdelen .b-onderdelen__tegel { gap: 1.1rem; }
  .b-onderdelen__icoon { width: 2.875rem; height: 2.875rem; }
  .b-onderdelen__icoon .icoon { width: 1.35rem; height: 1.35rem; }
}

/* --- Tablet: een losse laatste tegel vult de rij, icoon ernaast --------- */
@media (min-width: 640px) and (max-width: 1023.98px) {
  :is(.b-onderdelen__lijst--3, .b-onderdelen__lijst--4, .b-onderdelen__lijst--5) .b-onderdelen__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  :is(.b-onderdelen__lijst--3, .b-onderdelen__lijst--4, .b-onderdelen__lijst--5) .b-onderdelen__item:last-child:nth-child(odd) .b-onderdelen__tegel { flex-direction: row; }
  :is(.b-onderdelen__lijst--3, .b-onderdelen__lijst--4, .b-onderdelen__lijst--5) .b-onderdelen__item:last-child:nth-child(odd) .b-onderdelen__inhoud { padding-top: .75rem; }
  :is(.b-onderdelen__lijst--3, .b-onderdelen__lijst--4, .b-onderdelen__lijst--5) .b-onderdelen__item:last-child:nth-child(odd) .b-onderdelen__tekst { max-width: 58ch; }
}

/* --- Twee kolommen: icoon naast de tekst ------------------------------- */
@media (min-width: 960px) {
  .b-onderdelen__lijst--2 .b-onderdelen__tegel,
  .b-onderdelen__lijst--1 .b-onderdelen__tegel {
    flex-direction: row;
    gap: 1.5rem;
    padding: clamp(1.75rem, 1.2rem + 1.2vw, 2.5rem);
  }
  .b-onderdelen__lijst--2 .b-onderdelen__icoon,
  .b-onderdelen__lijst--1 .b-onderdelen__icoon {
    width: 3.75rem;
    height: 3.75rem;
  }
  .b-onderdelen__lijst--2 .b-onderdelen__icoon .icoon,
  .b-onderdelen__lijst--1 .b-onderdelen__icoon .icoon { width: 1.65rem; height: 1.65rem; }
  /* Kop op de hoogte van het midden van de cirkel */
  .b-onderdelen__lijst--2 .b-onderdelen__inhoud,
  .b-onderdelen__lijst--1 .b-onderdelen__inhoud { padding-top: .35rem; }
  .b-onderdelen__lijst--2 .b-onderdelen__tekst,
  .b-onderdelen__lijst--1 .b-onderdelen__tekst { max-width: 58ch; }
}

/* Windows-contrastmodus: tegels zonder vlak houden een rand */
@media (forced-colors: active) {
  .b-onderdelen .b-onderdelen__tegel { border-color: CanvasText; }
}