/* HH3 — Een recruiter wacht, wij bellen op.
   Hergebruikt het navy ankerpaneel van es4 (.es-markt-paneel), maar ZONDER de
   20/80-stippenfiguur: die claim staat al op de ES- en de W&S-pagina en een derde
   keer is herhaling, geen bewijs. Zonder figuur is het tweekoloms grid van es4 half
   leeg, dus hier een kolom.
   ⛔ Gescopeerd op .hh-verschil, zodat de ES-pagina die het figuur WEL heeft
   onaangeroerd blijft. Zie STAND.md 5q voor wat een ongescopeerde regel in een gedeeld
   stylesheet 13-09 heeft aangericht. */

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

/* Zonder figuur naast zich mag de tweeslag groter. Dit is het argument van de pagina.
   De kop houdt een eigen maat zodat hij over drie regels valt en niet over vijf. */
.hh-verschil .es-markt-copy h2 {
  font-size: clamp(2.1rem, 3.6vw, 3.4rem);
  max-width: 22ch;
}

/* De twee alinea's naast elkaar. Een enkele kolom liet de rechterhelft van het paneel
   leeg (13-09 in een opname gezien); tekst over de volle paneelbreedte leest juist
   slecht. Twee kolommen lost allebei op. */
.hh-verschil-tekst {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
  margin-top: 6px;
}

.hh-verschil-tekst > * {
  margin: 0;
  max-width: 46ch;
}

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

/* 14-09-2026 (avond, later): het paneel en de tweekolomstekst zijn GEDEELD geworden:
   css/sections/paneel-anker.css (.paneel-anker--solo, .paneel-anker-tekst). De regels hierboven
   zijn daardoor overbodig maar onschadelijk; hh3.html gebruikt nu de gedeelde klassen.
   ⛔ 15-09-2026: dat gedeelde bestand heette paneel-licht.css en zette het paneel op paper. Timo
   heeft dat teruggedraaid; het paneel is weer navy. Zie de kop van paneel-anker.css. */