/* ============================================================================
   careers.css - /careers-at-spoke/ (ronde 7 stap 2)

   NAAMRUIMTE: alles onder .careers-. Getoetst tegen styles.css, forms.css,
   services.css, work.css, about.css, news.css en privacy.css vóór het bouwen:
   0 treffers voor `careers`, `cv`, `opening` en `upload`. LET OP het bestaande
   `.about-careers-*` in about.css: dat is een ANDER voorvoegsel en botst niet,
   want een selector `.careers-grid` matcht `.about-careers-grid` niet. Dit is
   DESIGN.md §6b3, en het kostte ronde 6 een kopsectie van 495px.

   DE INVULVELDEN ZIJN .enquiry-field UIT forms.css, hergebruikt en niet
   nagebouwd. Die klassen zijn formuliermeubilair en niet aanvraag-specifiek; het
   bestand heet niet voor niets forms.css. Een tweede set velddefinities is
   precies hoe twee formulieren op dezelfde site uit elkaar gaan lopen.

   Uitsluitend bestaande tokens (§1). Geen nieuwe kleur, ease of radius.
   ========================================================================== */

/* ------------------------------------------------ BAND 1: de hero (ink) */
.careers-hero {
  background: var(--ink);
  color: var(--paper);
  padding: calc(var(--nav-h) + 40px) 0 clamp(56px, 6vw, 80px);
}
/* De huisregel die tot ronde 2 nergens stond: elke donkere sectie zet .kicker
   op --grey. Op --grey-2 is dat 3,37:1 op ink, onder de 4,5:1 van §8. */
.careers-hero .kicker { color: var(--grey); }

/* Tweezonig (§6b): de kop links, de intro plus het dossier rechts. Het
   story-raster "tekst naast beeld" uit styles.css, hier met tekst in beide
   zones omdat het beeld de band eronder is (de landschapsvorm van heroVorm). */
.careers-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
}
.careers-hero h1 { margin: 14px 0 0; }

.careers-hero-side { display: grid; align-content: start; gap: clamp(24px, 3vw, 34px); }
.careers-intro > :first-child { margin-top: 0; }
.careers-intro p { margin: 0 0 16px; line-height: 1.6; }
.careers-intro p:last-child { margin-bottom: 0; }
.careers-intro strong { font-weight: 700; }

/* Label boven waarde, letterlijk de .about-facts-vorm uit ronde 4. Bewust NIET
   de odometer-cijferband: twee cijfers waarvan er een "1" is pretenderen een
   prestatie te tonen, en §6b noemt opvulling in de tweede zone een fout. */
.careers-facts {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--line-w);
}
.careers-facts div {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-w);
}
.careers-facts dt { color: var(--grey); }
.careers-facts dd { margin: 0; font-weight: 650; font-size: 1.05rem; }

/* De beeldband. 21/9 op desktop, net als de dienstpagina's en de contact-hero;
   onder 900px 16/9, want daar wordt 21/9 een strook van 150px die geen werk
   doet. Extra breakpoints zijn expliciet toegestaan (§6).
   De maten en de bovengrens staan INLINE op het beeld zelf, uit de
   asset-metadata (CaseImage): dat is wat een layoutsprong voorkomt (§4). */
.careers-hero-media { margin-top: clamp(36px, 4vw, 52px); }
.careers-hero-media .beeld-open { display: block; }
.careers-hero-media img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: center 40%;
  border-radius: 3px;
  display: block;
}

/* ------------------------------- BAND 2: vacature en formulier (paper-2) */
/* --paper-2 en niet --paper: de banden erboven en eronder zijn allebei ink, en
   dit is de enige lichte band. Gemeten contrast op #eceae4: --grey-2 4,87:1 en
   --red-deep 4,79:1, allebei boven de 4,5:1 van §8. */
.careers-work {
  background: var(--paper-2);
  color: var(--ink);
  padding: clamp(64px, 7vw, 96px) 0;
}

/* ---- de vacatures -------------------------------------------------------- */
/* DE RAIL DRAAGT ALLEEN DE KOP. Dat is de vorm die ronde 5 heeft uitgemeten voor
   het work-blok op een dienstpagina, juist omdat een lijst met variabele lengte
   bij N=1 een te hoge rail krijgt. Hier IS N=1 de werkelijkheid en niet het
   randgeval. Niet sticky, en dat is geen vergetelheid: bij een of twee rollen is
   de stroom ernaast korter dan het venster, dus er valt niets te volgen. */
.careers-roles { margin-bottom: clamp(56px, 6vw, 84px); }
.careers-roles-rail { align-self: start; }
/* DE BOVENGRENS IS 3rem EN NIET DE 3.7rem VAN `.news-rail`, en dat is gemeten.
   De huismaat voor een kop in een smalle kolom (§6b) gaat ervan uit dat het
   LANGSTE WOORD past, en die aanname houdt hier niet: "opportunities." is
   veertien tekens. Boven ~1301px loopt de railkolom vast op ~331px omdat --wrap
   bij 1240px stopt, terwijl `4.2vw` doorgroeit tot de bovengrens van 3.7rem
   (59,2px). Gemeten vóór deze regel: tekst 369px in een masker van 331px, dus
   36 tot 38px eraf, en `.line-mask` heeft `overflow: hidden` dus je ziet de
   laatste letter gewoon verdwijnen. Koen zag het op 1440px.
   Dezelfde vorm als §6b3a: een maat die met het VENSTER meegroeit in een kolom
   die dat niet doet. Met 3rem (48px) is dezelfde tekst 299px in 331px, dus 90%
   van de kolom en 32px marge voor een langere vacaturekop. */
.careers-roles-rail .section-title {
  font-size: clamp(2.3rem, 4.2vw, 3rem);
  margin: 0;
}
.careers-roles-rail .kicker { color: var(--grey-2); margin: 0 0 14px; }

.careers-roles-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-k);
}

/* DE OMSCHRIJVING STAAT OP EEN EIGEN RASTERRIJ over beide kolommen, en dat is
   geen smaakkeuze maar de reparatie die DESIGN.md §6b twee keer heeft moeten
   opschrijven: ronde 4 op .about-row en ronde 5 op .work-row. Onder de titel IN
   de titelkolom zetten wringt de tekst in de smalste kolom van de rij terwijl de
   ruimte ernaast leeg blijft.

   De vaste maten zijn de huisgrammatica en geen nieuwe waarden: 46px indexkolom
   en gap clamp(14px, 2vw, 28px), allebei uit .about-row. */
.careers-role {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-areas:
    "num  title"
    "num  body";
  gap: 6px clamp(14px, 2vw, 28px);
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-bottom: 1px solid var(--line-k);
}
.careers-role-num { grid-area: num; color: var(--grey-2); padding-top: 8px; }
.careers-role-title {
  grid-area: title;
  margin: 0;
  font-size: clamp(1.55rem, 2.9vw, 2.35rem);
  font-stretch: 64%;
  font-weight: 820;
  letter-spacing: 0.002em;
  line-height: 1.05;
  text-transform: uppercase;
}
.careers-role-body { grid-area: body; margin-top: 10px; }
.careers-role-body p { margin: 0 0 12px; line-height: 1.6; max-width: 68ch; }
.careers-role-body p:last-child { margin-bottom: 0; }

/* ---- het formulier ------------------------------------------------------- */
/* EEN ANKERDOEL DAT GEEN <section> IS, VALT BUITEN DE HUISREGEL. `styles.css`
   r.78 dekt `section[id]` en `main[id]`, en dit is een <div id="cvForm">. De
   knop "Back to the form" op de bedankpagina wijst hierheen; zonder deze regel
   landt het hele blok op top 0 en staat de kop van het formulier achter de
   vaste nav van 72px. Gemeten op 1440px voor de reparatie: top 0. */
.careers-form-block { scroll-margin-top: calc(var(--nav-h) + 24px); }
.careers-form-head .section-title { margin: 0 0 clamp(28px, 3vw, 40px); }

/* Tweezonig: de velden links, de staande foto rechts. Precies zoals hun eigen
   pagina het doet, en zoals /speak-to-spoke/ zijn korte velden al paart. Zonder
   die foto heeft deze band alleen invulvelden en is de tweede zone leeg. */
.careers-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 64px);
  align-items: start;
}
.careers-form-media img { border-radius: 3px; }

/* De vier korte velden in twee kolommen, het bericht en het bestand over de
   volle breedte van de formulierkolom. Zelfde indeling als .enquiry-form. */
.careers-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.careers-form > .enquiry-field-wide,
.careers-form > .enquiry-hp,
.careers-form > .enquiry-submit,
.careers-form > .enquiry-privacy { grid-column: 1 / -1; }

/* Het upload-veld. Een file-input is niet te stylen als een tekstveld, dus hij
   krijgt zijn eigen doos met dezelfde randen en radius als de andere velden. */
.careers-file input[type="file"] {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line-k);
  border-radius: 3px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
}
.careers-file input[type="file"]:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-color: var(--red);
}
.careers-file input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 8px 16px;
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 650;
  cursor: pointer;
}
.careers-file-note { display: block; margin-top: 8px; color: var(--grey-2); }
/* De melding staat er altijd en is leeg tot er iets mis is; zo springt de
   layout niet op het moment dat iemand een te groot bestand kiest. --red-deep
   en niet --red: op paper-2 haalt het accentrood 3,5:1 en dat is te weinig voor
   tekst (§8). */
.careers-file-error { display: block; margin-top: 6px; color: var(--red-deep); min-height: 1.2em; }
.careers-file-error:empty { min-height: 0; }

.careers-fallback { max-width: 46ch; }

/* ---- responsive ---------------------------------------------------------- */
/* Onder 1000px klappen alle twee-koloms varianten naar 1fr, net als elders op
   deze site (styles.css r.1067). */
@media (max-width: 1000px) {
  .careers-hero-grid { grid-template-columns: 1fr; }
  .careers-form-grid { grid-template-columns: 1fr; }
  /* De foto onder de velden zou een sollicitant eerst het hele formulier laten
     scrollen voor hij hem ziet; boven de velden staat hij in de leesvolgorde
     waar hij op desktop ook staat. */
  .careers-form-media { order: -1; max-width: 420px; }
}
@media (max-width: 900px) {
  /* 21/9 wordt op een smal scherm een strook die geen werk doet. Zelfde
     afweging en dezelfde maat als de contact-hero in ronde 2. */
  .careers-hero-media img { aspect-ratio: 16 / 9; }
  .careers-form { grid-template-columns: 1fr; }
  .careers-role {
    grid-template-columns: 1fr;
    grid-template-areas:
      "num"
      "title"
      "body";
  }
  .careers-role-num { padding-top: 0; }
}