/* HH-V4 — de eigen secties van de headhunterpagina na de copyronde van 18-09-2026 (copy v4).
   Drie blokken: de teller van "waar het misgaat" (hh3), de aanpak in ÉÉN rij van vier (hh11), de bon
   van "wat je krijgt" (hh5), plus de directieregel onder de kostenkaart (hh2). Gedeelde opbouw van
   het mis-paneel: css/sections/mis-paneel.css. De hero-regels staan in css/sections/hero-zin.css. */

/* ── HH3 de teller: 0 → 80 zodra hij in beeld komt (js/dienst-figuren.js) ── */
.hh-teller-kaart {
  margin: 0;
  background: var(--surface-card-dark);
  border: var(--border-inv);
  border-radius: var(--r-md);
  padding: clamp(20px, 2.4vw, 30px);
}
.hh-teller { margin: 0; line-height: 1; }
.hh-teller-getal {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 8vw, 7.5rem);
  line-height: .9;
  color: var(--blue-200);
  letter-spacing: .005em;
  font-variant-numeric: tabular-nums;
}
.hh-teller-tekst { margin: 12px 0 0; font-size: var(--text-lead); font-weight: 600; color: var(--text-strong-inv); max-width: 26ch; }
.hh-teller-klein { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line-inv); font-size: var(--text-small); color: var(--text-muted-inv); }
.hh-teller-klein-getal { font-family: var(--font-display); font-size: 1.35rem; color: var(--text-strong-inv); margin-right: .35em; }

/* ── HH11 aanpak: vier kaarten in één rij boven 1100px (ws13-recept, css/werving-selectie/ws13-aanpak.css) ── */
@media (min-width: 1101px) {
  .hh-aanpak .ws-aanpak2-kaarten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hh-aanpak .ws-aanpak2-kaart { padding: 24px; }
  .hh-aanpak .ws-aanpak2-ico { width: 60px; height: 60px; }
}

/* ── HH5 de bon: één papieren kaart in het navy paneel, vier genummerde regels op streeplijnen ── */
.hh-bon-paneel { display: grid; justify-items: center; }
.hh-bon {
  position: relative;
  width: 100%;
  max-width: 640px;
  background: var(--surface-card);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  padding: clamp(24px, 3vw, 36px) clamp(22px, 3vw, 40px) clamp(24px, 3vw, 34px);
  box-shadow: var(--shadow-card);
}
/* de gescheurde onderrand van een bon: twee gradients maken een zaagtand van 10px */
.hh-bon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 10px;
  background:
    linear-gradient(135deg, var(--surface-card) 50%, transparent 50%) 0 0 / 20px 10px repeat-x,
    linear-gradient(225deg, var(--surface-card) 50%, transparent 50%) 0 0 / 20px 10px repeat-x;
}
.hh-bon-kop {
  margin: 0 0 4px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--text-strong);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-strong);
}
.hh-bon-regels { list-style: none; margin: 0; padding: 0; }
.hh-bon-regels li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px dashed var(--line);
}
.hh-bon-regels li:last-child { border-bottom: 0; padding-bottom: 6px; }
.hh-bon-nr { font-family: var(--font-display); font-size: 1.4rem; line-height: 1; color: var(--accent); padding-top: .15em; }
.hh-bon-regels h3 {
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-strong);
}
.hh-bon-regels p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--text-body); }
@media (max-width: 560px) {
  .hh-bon { padding: 22px 18px 20px; }
  .hh-bon-regels li { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
}

/* ── HH2 de directieregel onder de kostenkaart ── */
.hh-kosten-directie { margin: 26px 0 0; max-width: 64ch; font-size: var(--text-small); color: var(--text-body); }
.hh-kosten-directie a { color: var(--text-strong); text-decoration: underline; text-underline-offset: 3px; }