/* WS2 — Werving & Selectie: het probleem (navy, naadloos vervolg op ws1).
   Ruled editorial argument: redactionele hairline bovenaan (de "één donker
   blok"-overgang), daarna 5/7-grid — kop links, drie alinea's als ruled stack
   rechts, alinea 3 = kanteling met oranje kicker. Spiegelverhouding t.o.v. o2
   (5/7 i.p.v. 6/5) legt het gewicht bij de tekst; géén kaart, géén graphic. */

.ws-probleem { padding-block: 0 var(--space-section); }

.ws-probleem-rule {
  border: 0;
  border-top: 1px solid var(--line-inv);
  margin: 0 0 clamp(4rem, 9vh, 6rem);
}

.ws-probleem-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: var(--gap-lg);
  row-gap: var(--gap-md);
  align-items: start;
}

.ws-probleem-head .eyebrow { margin-bottom: 20px; }

.ws-probleem-head h2 {
  font-size: clamp(2.1rem, 3.3vw, 3.1rem);
  /* 18ch (was 20ch): op 20ch viel "IS EEN" als stub-regel boven het
     niet-afbreekbare "BEDRIJFSPROBLEEM." (review 260719); 18ch geeft gemeten
     (1440/1280/1024/834/760) de rag "Een vacature die / maanden openstaat, /
     is geen HR-probleem. / Het is een / bedrijfsprobleem." — hoort bij de
     word-joiner in het fragment (verbiedt de breuk op het koppelteken).
     balance = progressive enhancement tegen restrag, oude browsers vallen
     terug op de max-width alleen. */
  max-width: 18ch;
  text-wrap: balance;
}

/* Ruled stack: scheiding via het sibling-recept — NOOIT :first-of-type
   (gotcha: matcht niet betrouwbaar bij gelijke elementtypes). */
.ws-probleem-alinea { padding-block: clamp(22px, 3vw, 30px); }
.ws-probleem-alinea:first-child { padding-top: 0; }
.ws-probleem-alinea + .ws-probleem-alinea { border-top: 1px solid var(--line-inv); }

.ws-probleem-alinea p {
  max-width: 58ch;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-body-inv);
}

/* Alinea 3 = de kanteling: oranje kicker + sterk wit */
.ws-probleem-alinea--keer .kicker-line { margin-bottom: 18px; }
.ws-probleem-alinea--keer p {
  color: var(--text-strong-inv);
  font-weight: 600;
}

.ws-probleem-link { margin-top: 8px; }

/* ---------- Responsive ---------- */

@media (max-width: 880px) {
  .ws-probleem-grid { grid-template-columns: 1fr; }
  .ws-probleem-rule { margin-bottom: clamp(3rem, 7vh, 4rem); }
  .ws-probleem-alinea p { max-width: none; }
}

@media (max-width: 560px) {
  .ws-probleem-alinea { padding-block: 18px; }
  .ws-probleem-head h2 { max-width: none; }
}

/* ---------- Rollen-index (T4/FAQ-MATRIX D3, 2026-07-20) ---------- */
/* Pills op donker onder de argument-stack; rand = het .hero-clients-recept
   (s1.css: 1px color-mix 14% wit), pill-canon uit DESIGN-RULES (volledig
   rond, 1px rand, 11px uppercase tracked). */

.ws-rollen { margin-top: clamp(2.5rem, 5vh, 3.5rem); }

.ws-rollen-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted-inv);
  margin-bottom: 14px;
}

.ws-rollen-lijst {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.ws-rollen-lijst li {
  border: 1px solid color-mix(in srgb, var(--text-strong-inv) 14%, transparent);
  border-radius: var(--r-pill);
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-strong-inv) 85%, transparent);
}

.ws-rollen-sub {
  font-size: 13px;
  color: var(--text-muted-inv);
  margin-top: 12px;
}