/*
 * De Plato-procesinfographic — [phrona_plato_proces]
 *
 * WAAROM DE BANEN NAAST ELKAAR STAAN EN NIET ONDER ELKAAR
 * Aletheia, Hermes en Kosmos zijn drie ONAFHANKELIJKE lezingen van hetzelfde
 * document. Onder elkaar leest dat als drie stappen die elkaar opvolgen, en dat
 * is precies het misverstand dat deze pagina moet wegnemen. Naast elkaar, met
 * dezelfde breedte en dezelfde opbouw, zie je dat het drie keer hetzelfde
 * document is met drie verschillende vragen.
 *
 * WAAR DE KLEUREN VANDAAN KOMEN
 * Er is geen nieuwe kleur bijgekomen. Aletheia is het groen van de huisstijl
 * (--green), Hermes het terracotta (--terra), Kosmos het lei-blauw dat al in de
 * bouwstenen-illustraties zit (--slate). Elk in een DONKERE variant voor tekst:
 * het origineel haalt op wit 3,6 tot 4,9:1 en dat is te weinig voor een label
 * van 11px. Zie de berekende waarden per regel.
 *
 * WAT HET BEWUST NIET DOET
 * Geen pijlen die knipperen, geen "AI"-vonkje, geen glow. Dit is een uitleg van
 * een proces dat je moet kunnen narekenen; beweging zou suggereren dat er iets
 * gebeurt wat je niet ziet — en dat is nu juist de kritiek op de blackbox.
 */

.pl-proces {
  --pl-groen: #3F5D52;   /* 6,9:1 op wit */
  --pl-terra: #6D4A38;   /* 7,4:1 op wit */
  --pl-lei:   #40596B;   /* 7,0:1 op wit */
  margin: clamp(28px, 3.6vw, 44px) 0 clamp(32px, 4vw, 52px);
  padding: clamp(22px, 3vw, 34px);
  background: var(--bg-warm);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}

/* ---------------------------- kop ---------------------------- */

.pl-proces__kop {
  display: block;
  margin: 0 0 clamp(22px, 2.6vw, 30px);
}
.pl-proces__eyebrow {
  display: block;
  font-size: max(11px, .7rem);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #4E6B5C; /* 5,7:1 op --bg-warm */
}
.pl-proces__titel {
  display: block;
  margin-top: .35em;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.42rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* ---------------------------- stappen ---------------------------- */

.pl-stap + .pl-stap {
  margin-top: clamp(16px, 2vw, 22px);
}

/*
 * Het stapnummer is een label, geen opsommingsteken: klein, gespatieerd, en met
 * een lijn die de rest van de regel vult. Zonder die lijn zweeft het label
 * boven de kaart in plaats van hem aan te kondigen.
 */
.pl-stap__num {
  display: flex;
  align-items: center;
  gap: .7em;
  margin-bottom: .55em;
  font-size: max(11px, .7rem);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.pl-stap__num::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

/* ---------------------------- stap 1: bron ---------------------------- */

.pl-bron {
  display: flex;
  align-items: flex-start;
  gap: .85em;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.pl-bron__icoon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--pl-groen);
  background: #EDF1ED;
  border-radius: var(--r-sm);
}
.pl-bron__body {
  display: flex;
  flex-direction: column;
  gap: .18em;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--body);
}
.pl-bron__body strong {
  font-weight: 600;
  color: var(--ink);
}

/* ---------------------------- stap 2: drie banen ---------------------------- */

.pl-banen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 16px);
}

/* Alleen op smalle schermen zichtbaar; zie de media-query onderaan. */
.pl-banen__noot { display: none; }

.pl-baan {
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 1.8vw, 18px);
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--baan);
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.pl-baan--aletheia { --baan: #536D62; --baan-ink: #3F5D52; }
.pl-baan--hermes   { --baan: #A86F5C; --baan-ink: #6D4A38; }
.pl-baan--kosmos   { --baan: #5F7181; --baan-ink: #40596B; }

.pl-baan__kop {
  display: flex;
  align-items: center;
  gap: .55em;
}
.pl-symbool {
  display: block;
  flex: 0 0 auto;
  color: var(--baan-ink);
}
.pl-symbool .pl-accent { stroke: var(--baan); }
.pl-symbool .pl-dot { fill: var(--baan); stroke: none; }

/*
 * `.entry-content h4` zet geen marge, maar de kop zit hier in een kaart en niet
 * in de tekstkolom: zet de maat expliciet, zodat een latere regel in style.css
 * hem niet opnieuw verschuift. Zelfde les als bij .werker__naam.
 */
.pl-proces .pl-baan__naam {
  margin: 0;
  font-family: var(--font-sans);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--baan-ink);
}
.pl-baan__rol {
  display: block;
  margin-top: .12em;
  font-size: max(11.5px, .72rem);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--muted);
}

.pl-proces .pl-baan__vraag {
  margin: .8em 0 .35em;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.25;
  color: var(--ink);
}

.pl-proces .pl-baan__levert {
  margin: 0;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--body);
}

/*
 * Het label onderaan de baan ("claim", "les", "verband") is het enige verschil
 * in uitvoer tussen de drie. Het staat daarom onderaan en niet in de kop: het
 * is de opbrengst, niet de identiteit.
 */
.pl-baan__uit {
  align-self: flex-start;
  margin-top: auto;
  padding-top: .9em;
  font-size: max(11.5px, .72rem);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--baan-ink);
}
.pl-baan__uit::before {
  content: "→ ";
  color: var(--baan);
}

/* ---------------------------- de samenkomst ---------------------------- */

/*
 * De SVG die de drie banen naar één punt brengt. `preserveAspectRatio="none"`
 * rekt hem mee met de container, en `vector-effect: non-scaling-stroke` in de
 * SVG houdt de lijn 1,4px dik ongeacht die rek. Zonder dat tweede wordt de
 * lijn op 1240px bijna onzichtbaar dun en op 390px juist dik.
 */
.pl-voeg {
  height: clamp(52px, 5.4vw, 76px);
  margin: 0;
  color: var(--green-line);
}
.pl-voeg svg {
  display: block;
  width: 100%;
  height: 100%;
}

/*
 * De banen en de kennislaag zitten in twee verschillende .pl-stap-blokken, en
 * `.pl-stap + .pl-stap` zet daar 16 tot 22px marge tussen. Die marge valt
 * precies tussen het eind van de stam en de kaarten in: een kier die je als
 * afgebroken lijn leest. De SVG heeft zijn eigen hoogte en landt op de rand,
 * dus de marge gaat hier naar nul.
 */
.pl-voeg { margin-block: 0; }
.pl-voeg + .pl-stap { margin-top: 0; }

/* De optionele tak is gestreept, net als de kaart waar hij op uitkomt. Zo is
 * zichtbaar dat die route optioneel is en niet de hoofdroute. */
.pl-voeg__tak { stroke-dasharray: 5 5; }

/* ---------------------------- stap 3: kennislaag ---------------------------- */

.pl-kennis {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(10px, 1.4vw, 16px);
  align-items: stretch;
}

/* Het stapnummer van de kennislaag zit in de kaart zelf: op de lijn zou het de
 * verbinding onderbreken, en dat was precies de fout in de vorige versie. */
.pl-kaart__stap {
  display: block;
  margin-bottom: .5em;
  font-size: max(11px, .7rem);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.pl-kaart {
  padding: clamp(14px, 1.8vw, 18px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.pl-kaart--kennis { border-left: 3px solid var(--pl-groen); }

/*
 * De optionele tak is een zijspoor, en dat mag je zien: een gestreepte rand en
 * een lichtere achtergrond. Niet omdat het minder belangrijk is, maar omdat het
 * uit staat tot iemand het aanzet.
 */
.pl-kaart--optie {
  background: #FBF8F4;
  border: 1px dashed var(--sand);
}
.pl-kaart__tak {
  display: inline-block;
  margin-bottom: .5em;
  font-size: max(11px, .7rem);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7A4632; /* 7,0:1 op #FBF8F4 */
}

.pl-proces .pl-kaart__titel {
  margin: 0 0 .35em;
  font-family: var(--font-sans);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--ink);
}
.pl-proces .pl-kaart__tekst {
  margin: 0;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--body);
}
.pl-kaart__klein {
  display: block;
  margin-top: .7em;
  font-size: max(12px, .76rem);
  color: var(--muted);
}

.pl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35em;
  margin: .9em 0 0;
  padding: 0;
  list-style: none;
}
.pl-chips li {
  margin: 0;
  padding: .22em .6em;
  font-size: max(12px, .74rem);
  line-height: 1.4;
  color: var(--pl-groen);
  background: #EDF1ED;
  border-radius: var(--r-pill);
}

/* ---------------------------- stap 4 en 5: rijen met pijlen ---------------------------- */

.pl-rij {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(6px, 1vw, 12px);
}
.pl-rij--drie {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
}

.pl-pijl {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-line);
}
.pl-pijl svg {
  width: 28px;
  height: 14px;
}

.pl-kaart--poort {
  border-color: var(--green-line);
  background: #F4F7F3;
}

/* ---------------------------- smalle schermen ---------------------------- */

/*
 * Onder 880px is er geen samenkomst meer: de banen staan onder elkaar en drie
 * kronkelende lijnen naar één punt zouden naar niets wijzen. De SVG verdwijnt
 * en er blijft een rechte lijn over — dezelfde volgorde, zonder de suggestie
 * van een gedeelde as.
 */
@media (max-width: 880px) {
  .pl-banen {
    grid-template-columns: minmax(0, 1fr);
  }

  /*
   * De noot onder de banen bestaat alleen hier, want alleen hier is de
   * volgorde mis te verstaan. Boven 880px staan de banen naast elkaar en
   * spreekt de vorm voor zich; een zin die dan uitlegt wat je al ziet, is ruis.
   */
  .pl-banen__noot {
    display: block;
    margin: .9em 0 0;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--muted);
  }

  .pl-baan {
    border-top-width: 1px;
    border-left: 3px solid var(--baan);
    border-radius: 0 var(--r-md) var(--r-md) 0;
  }
  .pl-baan__uit { margin-top: .8em; padding-top: 0; }

  /*
   * GEEN CONNECTOR OP MOBIEL — en dat is een correctie, geen weglating.
   *
   * Eerst stond hier één rechte lijn van de laatste baan naar de kennislaag.
   * Op een screenshot leest die lijn als "Kosmos leidt naar stap 3", terwijl
   * juist de drie lenzen samen die laag vormen. Een lijn die de verkeerde
   * hiërarchie suggereert is erger dan geen lijn: de stapnummers doen het werk
   * hier al, en de noot erboven zegt wat de vorm niet kan zeggen.
   */
  .pl-voeg { display: none; }

  .pl-kennis {
    grid-template-columns: minmax(0, 1fr);
  }

  /* De kennislaag is nu een gewoon volgend blok; hij heeft zijn eigen afstand
     nodig omdat de connector die hierboven stond is weggevallen. */
  .pl-stap--kennis { margin-top: clamp(16px, 2vw, 22px); }

  /* Pijlen wijzen hier omlaag; een liggende pijl tussen gestapelde kaarten is
     een richting die de lezer niet kan volgen. */
  .pl-rij,
  .pl-rij--drie {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .pl-pijl { display: none; }
}

@media (max-width: 560px) {
  .pl-proces { padding: 18px 16px; }
  .pl-proces__titel { font-size: 1.1rem; }
  .pl-bron { padding: 12px; }
  .pl-bron__icoon { width: 34px; height: 34px; }
}

/* ---------------------------- donker / print ---------------------------- */

@media print {
  .pl-proces { background: #fff; border-color: #999; break-inside: avoid; }
  .pl-baan, .pl-kaart { break-inside: avoid; }
}