/* WS6 TRUSTBAR, VIER CIJFERS. Overschrijft ws6.css (drie kolommen, kicker onder het getal) en
   trustbar.css (kleinere getallen). Laadt als laatste van de drie, dus wint op volgorde.

   17-09-2026 (feedbackronde Timo op de v3-pagina): de getallen "een stuk groter", zoals de
   cijfers in het homepage-caseblok (s4.css: clamp(3rem, 4.6vw, 4.25rem)), met hetzelfde
   icoon-in-cirkel ervoor en het label in twee regels (sterk in caps, gedempt eronder). De
   getallen zijn nu kaal: "48" met "dagen" in het label, "20" zonder plus, zodat alle vier
   even zwaar kunnen. De kicker-streep onder het getal (ws6.css ::after) is uit: s4 heeft hem
   ook niet en met het icoon ernaast werd het druk.
   Markup is een ul/li (was dl met div's: een icoon-span naast dt/dd is geen geldige dl). */
.trustbar .ws-cijfers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 17-09 (laat, Timo): het label van "48" liep op vier regels omdat het naast het icoon in een kolom van
   ~157px stond. Nu een rooster: icoon en getal op de eerste rij, het label op de tweede rij over de
   VOLLE celbreedte (ook onder het icoon), zodat de gedempte regel twee regels wordt en het hele label
   drie. Onder 560 wordt het weer een kolom. */
.trustbar .ws-cijfer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "ico getal" "label label";
  align-items: start;
  column-gap: 16px;
  padding-inline: clamp(18px, 2.4vw, 34px);
  padding-block: 0;
  border-top: 0;
}
.trustbar .ws-cijfer-ico { grid-area: ico; }
.trustbar .ws-cijfer-body { display: contents; }
.trustbar .ws-cijfer-getal { grid-area: getal; align-self: center; }
.trustbar .ws-cijfer-label { grid-area: label; }
.trustbar .ws-cijfer:first-child { padding-left: 0; }
.trustbar .ws-cijfer:last-child { padding-right: 0; }
.trustbar .ws-cijfer + .ws-cijfer { border-left: 1px solid var(--line); }
.trustbar .ws-cijfer-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--orange-500);
  flex: none;
  margin-top: 4px;
}
.trustbar .ws-cijfer-ico svg { width: 24px; height: 24px; }
.trustbar .ws-cijfer-body { min-width: 0; }
.trustbar .ws-cijfer-getal {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 4.6vw, 4.25rem);
  line-height: 1;
  letter-spacing: .005em;
  color: var(--text-strong);
  margin: 0;
}
.trustbar .ws-cijfer-getal::after { display: none; }
.trustbar .ws-cijfer-label {
  display: block;
  margin: 10px 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: none;
}
.trustbar .ws-cijfer-sterk { display: block; color: var(--text-strong); }
.trustbar .ws-cijfer-zacht { display: block; color: var(--text-muted); }
@media (max-width: 1100px) {
  .trustbar .ws-cijfer { gap: 12px; }
  .trustbar .ws-cijfer-ico { width: 46px; height: 46px; }
}
@media (max-width: 880px) {
  .trustbar .ws-cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .trustbar .ws-cijfer { padding-inline: clamp(16px, 3vw, 28px); }
  .trustbar .ws-cijfer:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
  .trustbar .ws-cijfer:nth-child(2n) { padding-right: 0; }
  .trustbar .ws-cijfer:nth-child(n + 3) { border-top: 1px solid var(--line); padding-top: 26px; }
}
@media (max-width: 560px) {
  .trustbar .ws-cijfer { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ico" "getal" "label"; row-gap: 12px; }
  .trustbar .ws-cijfer-label { margin-top: 0; }
  .trustbar .ws-cijfer-ico { width: 44px; height: 44px; margin-top: 0; }
  .trustbar .ws-cijfer-getal { font-size: clamp(2.6rem, 11vw, 3.2rem); }
}