/* =========================================================================
   Profielpagina's team-<id>.html (17×, gebouwd met _bron/bouw-profielen.js).
   Ontwerp: optie A uit team-opties-bas-2.html (cv naast de kaart), met de loopbaan in een
   kadertje links onder het contact en beweging 1 ('groeiende lijn') uit team-opties-bas-4.html.
   De regels hieronder zijn letterlijk overgenomen uit team-opties.css, team-opties-2.css en
   team-opties-4.css (zelfde maten, kleuren en volgorde); alleen wat optie A gebruikt.
   Bouwt op style.css en doorklik.css (dk-kruimel, dk-lbl). Alleen kleuren uit de tokens.
   Portretbron is 648 × 830: nergens breder dan 324 px weergegeven (2× scherp).
   ========================================================================= */

/* ------------------------------------------------------------ pagina (uit team-opties.css .to-proef) */
.pf-pagina { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(72px, 9vw, 128px); overflow-x: clip; }
.to-kruimel { margin-bottom: clamp(28px, 4vw, 48px); }
/* laatste scheidingsteken en naam blijven bijeen als het kruimelpad afbreekt */
.pf-kruimel-eind { display: inline-flex; align-items: center; gap: 10px; }

/* ------------------------------------------------------------ gedeelde bouwstenen (team-opties.css) */
.to-lbl { margin: 0 0 16px; font-size: 13px; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--zacht); font-weight: 400; }
.to-functie { display: inline-block; margin: 0; font-size: 13px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; color: var(--inkt); background: var(--geel); padding: 7px 10px 6px; border-radius: 4px; }
.p2-naam strong { font-weight: 500; }
.to-kaart { position: relative; background: var(--wit); border-radius: var(--hoek); padding: 6px 6px 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -16px rgba(0,0,0,.18); }
.to-portret { display: block; background: #fff; } /* dicht: reist mee als reizend-portret; doorzichtig liet de vorige foto erdoor schijnen (zwart shirt, opname Jochem 2 nov) */
.to-portret img { width: 100%; height: auto; border-radius: 8px 8px 0 0; }
/* herstel: de onderste ±100 px van een aantal bronnen (Emma, Maaike, Alexander, Kay) bevatten uitgerekte
   pixelrijen; daarom wordt het portret voor iedereen gelijk op 648 × 724 van de bron afgesneden (bovenkant
   blijft staan, dus hoofden even groot en op dezelfde plek) */
.pf .to-portret { aspect-ratio: 648 / 724; overflow: hidden; border-radius: 8px 8px 0 0; }
.to-strook { display: block; margin: 12px 10px 0; background: var(--geel); padding: 6px 10px 5px; font-size: 17px; line-height: 1.2; color: var(--inkt); }
.to-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--inkt); }
.to-lijst.kaal { gap: 4px; color: var(--grijs); }
.to-lijst.stip li { position: relative; padding-left: 22px; }
/* zelfde stip als de loopbaan (.p4-punt): 9 px geel, rand 1,5 px inkt; midden op dezelfde plek als de oude 8 px-stip */
.to-lijst.stip li::before { content: ""; position: absolute; left: .5px; top: calc(.6em - .5px); width: 9px; height: 9px; border-radius: 50%; background: var(--geel); box-shadow: 0 0 0 1.5px var(--inkt); }
.to-bijlinks { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 18px; font-size: 16px; }
.to-bijlinks .pijllink { min-height: 44px; color: var(--inkt); }
.to-bijlinks .pijllink:hover svg { transform: none; }
.to-bijlinks .pijllink:hover span { background-size: 100% 2px; }
.to-feiten { display: flex; flex-wrap: wrap; gap: 16px 40px; margin: 0; }
.to-feiten dt { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--zacht); line-height: 1.4; text-wrap: balance; }
.to-feiten dd { margin: 4px 0 0; font-size: 28px; line-height: 1.1; color: var(--inkt); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
/* terugweg: altijd onderaan */
.to-verder { margin-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--inkt); padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 40px; }
.to-terug { display: inline-flex; align-items: flex-end; padding-bottom: 2px; gap: 10px; min-height: 44px; color: var(--inkt); text-decoration: none; font-size: 17px; font-weight: 500; }
.to-terug span { line-height: 1.3; }
.to-terug svg { width: 20px; height: 20px; flex: none; transition: transform .3s var(--ease); }
.to-terug:hover svg { transform: translateX(-4px); }
.to-terug:hover span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.to-buren { display: flex; flex-wrap: wrap; gap: 8px 40px; }
.to-buren a { display: grid; min-height: 44px; align-content: center; text-decoration: none; color: var(--inkt); font-size: 17px; line-height: 1.3; }
.to-buren a:last-child { text-align: right; }
.to-buren a:hover span:last-child { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
/* rustig binnenkomen: alleen opacity/transform (zonder js: geen .js-klasse, dus direct zichtbaar) */
.js [data-to] { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-to].in { opacity: 1; transform: none; }
.js [data-to].direct { transition: none; } /* aankomst met het meereizende portret: meteen in beeld (profiel.js) */
/* ... en al vóór profiel.js: dat staat onderaan de body en draait soms pas na het eerste beeld van de overgang; dan stond er
   alleen kop, kruimelpad en het reizende portret op een lege pagina (WorkxIN → profiel, doorkliktest 1 nov). Geldt voor elke
   aankomst via een overgang (wx-vt-kom: met portret, wx-vt-in: via menu of buren-link). Wat buiten beeld staat krijgt van
   profiel.js .to-wacht en komt zoals altijd op bij het scrollen (vgl. html.wx-vt-in / .vt-wacht in style.css). */
html.wx-vt-kom.js [data-to]:not(.to-wacht), html.wx-vt-in.js [data-to]:not(.to-wacht) { opacity: 1; transform: none; transition: none; }
html.wx-vt-kom.js [data-to].to-wacht:not(.in), html.wx-vt-in.js [data-to].to-wacht:not(.in) { transition: none; }

/* ------------------------------------------------------------ raster (team-opties-2.css) */
.p2-raster { display: grid; gap: 48px clamp(40px, 7vw, 112px); align-items: start; }
.p2-links { min-width: 0; }
.p2-rechts { min-width: 0; }
/* meeschuiven alleen op een scherm dat hoog genoeg is om de hele kolom te tonen */
@media (min-width: 861px) and (min-height: 780px) { .pa > .p2-links { position: sticky; top: 100px; } }
.p2-kop .to-functie { margin: 0; }
.p2-naam { margin: 16px 0 0; font-size: clamp(32px, 2.6vw + 20px, 56px); line-height: 1.06; letter-spacing: -.01em; overflow-wrap: anywhere; }
.p2-kop .to-feiten { margin-top: 24px; }
.p2-bio p { color: var(--grijs); max-width: 62ch; }
/* geen los woord op de laatste regel */
.pf .p2-bio p, .pf .to-lijst li, .pf .p4-tekst > span, .pf .p4-det { text-wrap: pretty; }
.pf .p4-tekst > span, .pf .p4-det, .pf .to-lijst li, .pf .to-buren a span { text-wrap: balance; }
.p2-bio p:last-child { margin-bottom: 0; }
.p2-contact ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.p2-contact li { display: grid; gap: 2px; min-width: 0; }
.p2-contact a:not(.pijllink) { color: var(--inkt); text-decoration: none; font-size: 17px; display: inline-flex; justify-self: start; align-items: center; min-height: 44px; padding-block: 8px; margin-block: -8px; overflow-wrap: anywhere; }
.p2-contact a:not(.pijllink):hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ------------------------------------------------------------ A · cv naast de kaart */
.pa { grid-template-columns: 300px minmax(0, 1fr); }
/* in de html staat portret/contact (links) vóór naam en cv (rechts): mobiel is dat de volgorde in beeld,
   zodat er tijdens het laden niets boven het al getekende cv wordt ingevoegd (geen CLS); hier vaste plekken */
.pa > .p2-links { grid-column: 1; grid-row: 1; }
.pa > .p2-rechts { grid-column: 2; grid-row: 1; }
.pa-contact { margin-top: 28px; }
.pa-contact .to-bijlinks { margin-top: 14px; gap: 0 24px; }
.pa-kop { padding-bottom: 32px; border-bottom: 2px solid var(--inkt); }
.pa-rij { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px 40px; padding-block: 28px; border-bottom: 1px solid var(--lijn); }
.pa-rij:last-child { border-bottom: 0; padding-bottom: 0; }
.pa-rij .to-lbl { margin: 4px 0 0; color: var(--inkt); font-weight: 500; }

/* ------------------------------------------------------------ meelopende kolom (team-opties-4.css)
   blijft meelopen; is hij hoger dan het scherm, dan schuift hij eerst door tot de onderkant in beeld
   is (--p4h = hoogte van de kolom, gezet door profiel.js) */
@media (min-width: 861px) and (min-height: 780px) {
  .p4-raster > .p2-links { top: min(100px, calc(100vh - var(--p4h, 0px) - 24px)); }
}

/* ------------------------------------------------------------ het loopbaankadertje (team-opties-4.css) */
.p4-kader { position: relative; margin-top: 28px; border: 1px solid var(--lijn); border-radius: var(--hoek); padding: 18px 20px 20px; }
.p4-kader .to-lbl { margin: 0 0 14px; color: var(--inkt); font-weight: 500; }
.p4-loop { list-style: none; margin: 0; padding: 0; }
.p4-loop li { position: relative; padding: 0 0 12px 22px; font-size: 15px; line-height: 1.45; }
.p4-loop li:last-child { padding-bottom: 0; }
/* stip en lijnstuk naar de volgende stip (zelfde tekening als de tijdlijn van optie A, kleiner) */
.p4-punt { position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--geel); box-shadow: 0 0 0 1.5px var(--inkt); z-index: 1; }
.p4-loop li:last-child .p4-punt { background: var(--inkt); box-shadow: 0 0 0 1.5px var(--inkt), 0 0 0 4px var(--geel); }
.p4-loop li::after { content: ""; position: absolute; left: 3.75px; top: 10.5px; bottom: -10.5px; width: 1.5px; background: var(--lijn); transform-origin: 50% 0; }
.p4-loop li:last-child::after { display: none; }
.p4-jaar { display: block; font-weight: 500; color: var(--inkt); font-variant-numeric: tabular-nums; }
.p4-tekst { display: block; color: var(--grijs); }
.p4-kop { display: block; }
.p4-uitleg { display: block; font-size: 15px; color: var(--zacht); }
/* 1 · lijn groeit omlaag; een stap verschijnt zodra de lijn hem bereikt.
   Alleen met js (klasse .js) en zonder reduced-motion; anders staat direct het eindbeeld er. */
@media (prefers-reduced-motion: no-preference) {
  .js .p4-kader { --stap: .6s; }
}

/* ------------------------------------------------------------ 861–1100 */
@media (max-width: 1100px) {
  .pa { grid-template-columns: 260px minmax(0, 1fr); }
  .pa-rij { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pa-rij .to-lbl { margin: 0; }
  .pa-contact .to-bijlinks { column-gap: 12px; }
}

/* ------------------------------------------------------------ telefoon en tablet (≤ 860) */
@media (max-width: 860px) {
  /* volgorde: portret, naam, contact (met loopbaan), cv */
  .p2-raster { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .p2-links, .p2-rechts { display: contents; }
  .p2-links > .to-kaart { order: 1; width: min(240px, 100%); }
  .p2-rechts > div:first-child { order: 2; margin-top: 28px; }
  .p2-links > :not(.to-kaart) { order: 3; }
  .p2-rechts > :not(:first-child) { order: 4; }
  /* tijdens het laden: contact/loopbaan pas tonen als naam en cv er zijn, anders schuiven ze omlaag zodra de naam ertussen komt */
  .pa:not(:has(.pa-cv)) > .p2-links > :not(.to-kaart) { display: none; }
  .pa-contact { margin-top: 28px; }
  .pa-kop { border-bottom: 0; padding-bottom: 0; }
  .pa-cv { margin-top: 36px; border-top: 2px solid var(--inkt); }
  .to-buren a:last-child { text-align: left; }
}
@media (max-width: 560px) {
  .to-verder { align-items: flex-start; flex-direction: column; }
  /* feiten bij iedereen in twee kolommen, cijfers op één lijn (een lang label loopt over twee regels) */
  .to-feiten { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 16px 24px; }
  .to-feiten > div { display: flex; flex-direction: column; }
  .to-feiten dd { margin-top: auto; padding-top: 4px; }
  /* vorige/volgende altijd in twee gelijke kolommen, 'Volgende' rechts tegen de rand */
  .to-buren { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 24px; width: 100%; }
  .to-buren a:last-child { text-align: right; }
  .to-buren a { align-content: start; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-to] { opacity: 1; transform: none; transition: none; }
  .to-terug svg { transition: none; }
  .to-terug:hover svg { transform: none; }
  .pf .pijllink svg { transition: none; }
}