/*
 * De vijf Workers: symbolen, rijen en de tweedeling "beschikbaar / nog niet".
 *
 * WAT HIER BEWUST NIET GEBEURT
 * Geen hover-effect dat de rij optilt, geen gradient-rand, geen "AI"-vonkje.
 * Dit is een uitlegsectie, geen etalage.
 *
 * DE MATEN ZIJN GEMETEN, NIET GEKOZEN
 * De symbolen zijn op 96px gerenderd en de inktzwaarte is per symbool gemeten
 * (som van de dekking). De eerste set liep uiteen met factor 2,5 -- Database
 * woog tweeënhalf keer zo zwaar als Audio, en dat zie je. Na herverdeling zit
 * alles binnen 16% van het gemiddelde.
 */

/* ---------- symbolen ---------- */

.wk-symbool {
  display: block;
  color: var(--green);
}

/* Het accent is de tweede kleur van de huisstijl, niet een nieuwe. */
.wk-symbool .wk-accent {
  stroke: var(--green-soft);
}
.wk-symbool .wk-dot {
  fill: currentColor;
  stroke: none;
}
.wk-symbool .wk-accent.wk-accent-ring {
  fill: none;
  stroke: var(--green-soft);
}

/* ---------- sectie ---------- */

/*
 * De container is sinds thema 1.43.0 overal 1240px (zie .entry-content in
 * style.css), met de leesbreedte per tekstblok. De :has()-uitzondering die hier
 * eerst stond is daarmee overbodig geworden -- en zou nu juist een verschil
 * maken tussen deze pagina en de rest, wat het tegenovergestelde is van uniform.
 */
.werkers {
  margin: clamp(32px, 4vw, 48px) 0;
}

.werkers__titel {
  margin: 0 0 .5em;
}

.werkers__intro {
  max-width: 62ch;
  margin: 0 0 clamp(26px, 3vw, 36px);
  color: var(--body);
}

/*
 * VIJF RIJPEN, GEEN RASTER -- en waarom dit de derde poging is.
 *
 * Poging 1: vijf kaarten naast elkaar. Op 1240px houdt elke kaart ~200px over;
 * de taglines braken op vier regels en de uitleg op acht. Onleesbaar.
 *
 * Poging 2: 3 + 2 in een raster. Vijf is een rotgetal: gelijke kaarten laten een
 * gat op de tweede rij, en de onderste twee breder maken suggereert een rangorde
 * die er niet is. Erger nog: de kaarten werden 840px hoog omdat de smalle
 * tekstkolom de copy opbolde -- twee schermen voor vijf dingen die je in één
 * oogopslag wilt vergelijken.
 *
 * Poging 3: dit. Elke Worker een volle rij, binnen de rij drie zones (kop met
 * tagline / uitleg / specificaties). Geen gat, geen rangorde, en de copy heeft
 * eindelijk de breedte om in twee regels te passen. De scheiding tussen rijen is
 * een lijn, niet een gat: het leest als een overzicht met uitleg, wat het is.
 */
.werkers__grid {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-soft);
}

/*
 * EXPLICIETE PLAATSING VOOR ELK KIND -- dat is hier geen overdaad maar de fix
 * voor een echte bug. Eerst had alleen de tagline `grid-column: 2` en de rest
 * geen plaatsing. Op het driedelige raster ging dat goed, maar zodra de media-
 * query naar één kolom ging, dwong die ene `grid-column: 2` een impliciete
 * tweede kolom af. Resultaat: op 390px stond de uitleg in een strook van 28px
 * (één woord per regel) naast een kolom van 291px. De media-query matchte wel
 * degelijk; het was de plaatsing van één kind die het raster oprekte.
 *
 * Les: bij grid is "laat de rest maar auto-plaatsen" een aanname die alleen
 * klopt zolang het aantal kolommen niet verandert.
 */
.werker {
  --werker-pad: clamp(20px, 2.2vw, 28px);
  display: grid;
  grid-template-columns: minmax(0, 22fr) minmax(0, 40fr) minmax(0, 38fr);
  grid-template-rows: auto auto auto;
  column-gap: clamp(24px, 3.4vw, 52px);
  padding: clamp(26px, 3vw, 38px) 0;
  border-bottom: 1px solid var(--line-soft);
}

/* Zone 1: icoon, naam en tagline bij elkaar. */
/*
 * KOPREGEL: ICOON EN TITEL OP ÉÉN HARTHOOGTE.
 *
 * Dit stond eerst als grid met `grid-row: 1 / span 2` op het icoon. In een kop
 * met maar één regel (de titel) maakt die span een tweede, lege rij aan. Het
 * icoon werd dan over twee rijen verdeeld en kwam 15px boven de titel te staan:
 * gemeten hartlijn icoon 833, hartlijn titel 848. Bij alle vijf Workers hetzelfde,
 * dus het valt op als "de icoontjes staan niet in verhouding tot de kop".
 *
 * Een flexregel met `align-items: center` doet precies wat hier nodig is: twee
 * dingen naast elkaar, verticaal gecentreerd op dezelfde as. Geen rijen, geen
 * span, geen aanname over het aantal regels van de titel.
 *
 * Dit is de standaardvorm voor "icoon + kop" in dit thema; de homepage gebruikt
 * dezelfde klasse (.werker__kop) voor de bouwsteen-kaarten.
 */
.werker__kop {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: .7em;
}

.werker__symbool {
  display: flex;
  flex: 0 0 auto;
}

/*
 * `margin: 0` was NIET genoeg. `.entry-content h3` (specificiteit 0,1,1) zet
 * `margin-top: 1.8em`, en dat won van `.werker__naam` (0,1,0). Gemeten gevolg:
 * 30,5px marge boven de titel binnen een flexregel van 81px, dus het icoon kwam
 * 15px boven de titel te staan -- ook met align-items:center. De selector hier is
 * 0,2,0 (.entry-content .werker__naam) en wint dus wel.
 *
 * Les: `margin: 0` in een component betekent niets zolang een opmaakregel van de
 * tekstkolom eromheen zwaarder weegt. Een component in `.entry-content` moet zijn
 * eigen marges met een zwaardere selector terugzetten.
 */
.entry-content .werker__naam,
.werker__naam {
  margin-block: 0;
  margin-inline: 0;
  font-size: 1.06rem;
  letter-spacing: -.01em;
  /* 1.25 op 1.06rem is 21px; het icoon is 44px. De titel hoeft niet even hoog te
   * zijn als het icoon -- hij moet op dezelfde hartlijn staan, en dat doet
   * align-items: center. */
  line-height: 1.25;
}

/* De tagline hoort bij de naam, dus in dezelfde zone, niet in de uitlegkolom. */
.werker__tagline {
  grid-column: 1;
  grid-row: 2;
  margin: .35em 0 0;
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink);
  line-height: 1.35;
  text-wrap: balance;
}

/* Zone 2: de uitleg. De enige kolom met lopende tekst, daarom de breedste. */
.werker__tekst {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  margin: 0;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--body);
}

/* Zone 3: de specificaties, naast de uitleg en op dezelfde hoogte. */
.werker__doet {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: start;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .45em;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--muted);
}

.werker__doet li {
  position: relative;
  padding-left: 1.15em;
}

/* Een liggend streepje als opsommingsteken: rustiger dan een bolletje en het
 * leest als een specificatie, niet als een verkooplijst. */
.werker__doet li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: .55em;
  height: 1.5px;
  background: var(--line);
  border-radius: 1px;
}

/*
 * "Nog niet" over de volle breedte onder de rij: het geldt voor de hele Worker,
 * niet voor één onderdeel. Eerst stond hij onderaan een kaart op 4,6:1 -- te
 * licht voor tekst die je juist moet lezen. Nu --body (11,7:1) in een eigen band
 * met een gekleurde rand, zodat hij leest als voorwaarde en niet als laatste
 * bullet.
 */
.werker__beperking {
  grid-column: 1 / -1;
  grid-row: 3;
  margin: 1em 0 0;
  padding: .85em 1em;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--body);
  background: #FAF8F4;
  border-left: 3px solid var(--sand);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.werker__label {
  display: inline-block;
  margin-right: .45em;
  padding: .12em .52em;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #7A4632; /* donkerder terracotta: 6,27:1 op --beige */
  background: var(--beige);
  border-radius: var(--r-pill);
  vertical-align: .1em;
}

/*
 * Onder 880px past de driedeling niet: de uitlegkolom zou onder de 40 tekens per
 * regel zakken. Dan twee zones naast elkaar (uitleg links, specificaties
 * rechts) en de kop over de volle breedte.
 */
@media (max-width: 880px) {
  .werker {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    column-gap: clamp(16px, 3vw, 28px);
    row-gap: .8em;
  }

  .werker__kop {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .werker__tagline {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0;
  }

  .werker__tekst {
    grid-column: 1;
    grid-row: 3;
  }

  .werker__doet {
    grid-column: 2;
    grid-row: 3;
  }

  .werker__beperking {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: .3em;
  }
}

/*
 * Onder 560px alles onder elkaar. Elk kind krijgt hier expliciet kolom 1 --
 * zonder dat houdt een achtergebleven `grid-column: 2` het raster op twee
 * kolommen en wordt de tekst één woord per regel.
 */
@media (max-width: 560px) {
  .werker {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .werker__kop,
  .werker__tagline,
  .werker__tekst,
  .werker__doet,
  .werker__beperking {
    grid-column: 1;
    grid-row: auto;
  }

  .werker__kop { margin-bottom: .1em; }
  .werker__tagline { margin-top: .4em; }
  .werker__tekst { margin-top: .2em; }
  .werker__doet { margin-top: .5em; }
}