/* SR2 — Een lege commerciele stoel kost geen salaris, hij kost omzet.
   Hergebruikt het navy ankerpaneel van es4 (.es-markt-paneel) in EEN kolom, zonder de
   20/80-stippenfiguur: die claim staat al op ES en W&S en is op deze SERP bovendien
   dubbel bezet (brandnewsales voert 78 procent met een eigen prestatiecijfer).
   Zonder figuur is het tweekoloms grid van es4 half leeg, dus hier een kolom met de
   twee alinea's naast elkaar.

   ⛔ DIT IS EEN EIGEN BESTAND EN GEEN LINK NAAR css/headhunter/hh3.css, hoewel de
   regels er bijna gelijk aan zijn. Reden: STAND.md 5q. Een stylesheet dat door twee
   pagina's wordt gelinkt moet bij elke wijziging op BEIDE pagina's nagemeten worden,
   en dat is 13-09 een keer vergeten met een onzichtbaar cijferblok op de ES-pagina tot
   gevolg. Dertig regels duplicaat is goedkoper dan die val. Alles hier is gescopeerd
   op .sr-probleem. */

.sr-probleem .es-markt-grid {
  grid-template-columns: minmax(0, 1fr);
}

/* De eyebrow staat in het paneel, niet erboven: het paneel IS de sectie. Kleur komt
   uit .on-dark .eyebrow in base.css, hier alleen de ruimte eronder. */
.sr-probleem .es-markt-copy .eyebrow { margin: 0 0 18px; }

/* Zonder figuur naast zich mag de tweeslag groter. Dit is het frame van de pagina:
   de vacature is geen salarispost maar omzetverlies. */
.sr-probleem .es-markt-copy h2 {
  font-size: clamp(2.1rem, 3.6vw, 3.4rem);
  max-width: 24ch;
}

/* De twee alinea's naast elkaar. Een enkele kolom laat de rechterhelft van het paneel
   leeg; tekst over de volle paneelbreedte leest juist slecht. */
.sr-probleem-tekst {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
  margin-top: 6px;
}

.sr-probleem-tekst > * {
  margin: 0;
  max-width: 46ch;
}

/* Gestapeld onder de vouwbreedte: twee kolommen van 23ch leest niet op mobiel. */
@media (max-width: 860px) {
  .sr-probleem-tekst { grid-template-columns: 1fr; gap: 1rem; }
  .sr-probleem .es-markt-copy h2 { max-width: none; }
}