/* ------------------------------------------------------------------ */
/* page-vacatures.css — styling voor patterns/page-vacatures.php       */
/* Geëxtraheerd uit _preview/preview-vacatures.html inline <style>     */
/* (sessie 27, pure-pattern refactor). page-hero / eyebrow / btn /     */
/* continuum-bols komen uit preview-shared.css; hier alleen de         */
/* .jobs / .proc / .apply secties (+ hero-visual + intro).             */
/* Conditioneel ge-enqueued op slug 'vacatures'/'working-at-one'       */
/* (functions.php).                                                    */
/* ------------------------------------------------------------------ */

/* HERO — full-bleed rally-foto (missie/visie-stijl) met trage Ken Burns-zoom.
   Geïnspireerd op de .svc__illustration-hover-zoom op /diensten/ (zelfde easing),
   maar als ambient hero-zoom (auto, niet hover). De default scrim van
   .page-hero--with-visual::before blijft staan voor WCAG-leesbaarheid van de
   witte titel over de heldere woestijnfoto. Scoped op .page-vacatures. */
.page-vacatures .page-hero { padding-top: clamp(72px, 9vw, 132px); padding-bottom: clamp(56px, 7vw, 96px); }
.page-vacatures .page-hero__visual {
  object-position: 50% 60%;
  transform-origin: 50% 60%;
  animation: vac-hero-zoom 20s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes vac-hero-zoom { from { transform: scale(1); } to { transform: scale(1.09); } }
.page-vacatures .pillar-hero__title { margin-bottom: var(--space-md); max-width: 18ch; }
.page-vacatures .page-hero--with-visual .page-hero__lead {
  color: #fff; max-width: 46ch; margin: 0 0 var(--space-xl);
  font-family: var(--font-body); font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .page-vacatures .page-hero__visual { animation: none; transform: scale(1.03); }
}

/* INTRO — wervende lead onder de hero-foto */
.page-vacatures .vac-intro { padding: clamp(32px, 4vw, 56px) var(--space-2xl) clamp(12px, 1.5vw, 20px); background: var(--color-bg-base); }
/* Links uitgelijnd op dezelfde grid als .jobs__inner (1440px), zodat de
   intro-tekst exact onder de hero-content begint. */
.page-vacatures .vac-intro__inner { max-width: 1440px; margin: 0 auto; }
/* Titel: 2 regels via <br>, geen max-width nodig; een paar woorden geel via <em>. */
.page-vacatures .vac-intro__q {
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: clamp(26px, 3.2vw, 42px); line-height: 1.14; letter-spacing: -0.02em;
  color: var(--color-text-primary); margin: 0 0 var(--space-lg);
}
.page-vacatures .vac-intro__q em { font-style: italic; color: var(--color-accent); }
.page-vacatures .vac-intro__body {
  font-family: var(--font-body); font-size: clamp(17px, 1.5vw, 20px);
  line-height: var(--leading-relaxed); color: var(--color-text-secondary);
  margin: 0 0 var(--space-md); max-width: 72ch;
}
.page-vacatures .vac-intro__body:last-of-type { margin-bottom: var(--space-lg); }
.page-vacatures .vac-intro__sub {
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(17px, 1.5vw, 20px); line-height: var(--leading-relaxed);
  color: var(--color-text-primary); margin: 0 0 var(--space-sm); max-width: 72ch;
}
.page-vacatures .vac-intro__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-sm); max-width: 72ch; }
.page-vacatures .vac-intro__list li {
  position: relative; padding-left: 1.5em;
  font-family: var(--font-body); font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.5; color: var(--color-text-secondary);
}
.page-vacatures .vac-intro__list li::before {
  content: ""; position: absolute; left: 2px; top: 0.6em;
  width: 7px; height: 7px; background: var(--color-accent); border-radius: 50%;
}
.page-vacatures .vac-intro__outro {
  font-family: var(--font-body); font-size: clamp(17px, 1.5vw, 20px);
  line-height: var(--leading-relaxed); color: var(--color-text-secondary);
  margin: var(--space-lg) 0 0; max-width: 72ch;
}

/* Intro 2-koloms: tekst links, "Werken bij ONE"-video rechts (2026-06-11).
   De openingsvraag (h2) blijft erboven over de volle breedte. Zonder video
   (ACF "-") valt de grid terug op één kolom (--novideo). */
.page-vacatures .vac-intro__cols {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 500px);
  column-gap: clamp(32px, 5vw, 96px); align-items: start;
}
.page-vacatures .vac-intro__cols--novideo { grid-template-columns: minmax(0, 1fr); }
.page-vacatures .vac-intro__media { margin: 0; min-width: 0; }

/* Click-to-play facade: zelf-gehoste poster + play-knop; pas na klik wordt de
   youtube-nocookie-iframe geïnjecteerd (app.js) — AVG: 0 externe requests bij
   paginalading. Petrol play-knop, geel alleen als hover/focus-detail (één
   accent per viewport: de gele em + bullets staan al links). */
.page-vacatures .vac-video__trigger {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  padding: 0; border: 0; border-radius: var(--radius-md); overflow: hidden;
  cursor: pointer; background: var(--color-petrol-900);
}
.page-vacatures .vac-video__poster {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--duration-base) var(--ease-standard);
}
.page-vacatures .vac-video__trigger:hover .vac-video__poster,
.page-vacatures .vac-video__trigger:focus-visible .vac-video__poster { transform: scale(1.04); }
.page-vacatures .vac-video__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 72px; height: 72px;
  border-radius: var(--radius-full); background: rgba(31, 58, 68, 0.88);
  color: #fff; transition: background var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}
.page-vacatures .vac-video__play svg { margin-left: 4px; }
.page-vacatures .vac-video__trigger:hover .vac-video__play,
.page-vacatures .vac-video__trigger:focus-visible .vac-video__play {
  background: var(--color-accent); color: var(--color-petrol-900);
  transform: translate(-50%, -50%) scale(1.06);
}
.page-vacatures .vac-video__trigger:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.page-vacatures .vac-video__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; background: var(--color-petrol-900); }
.page-vacatures .vac-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.page-vacatures .vac-video__caption {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-secondary);
}
@media (prefers-reduced-motion: reduce) {
  .page-vacatures .vac-video__poster,
  .page-vacatures .vac-video__play { transition: none; }
  .page-vacatures .vac-video__trigger:hover .vac-video__poster { transform: none; }
}

/* Mobiel/tablet: één kolom; de video stackt direct onder de openingsvraag,
   vóór de bodytekst (daar is de film de sterkste opener). */
@media (max-width: 960px) {
  .page-vacatures .vac-intro__cols { display: flex; flex-direction: column; gap: var(--space-lg); }
  .page-vacatures .vac-intro__media { order: -1; max-width: 640px; }
}

@media (max-width: 768px) {
  .page-vacatures .vac-intro { padding: clamp(28px, 7vw, 44px) var(--space-lg) clamp(12px, 3vw, 18px); }
  .page-vacatures .vac-intro__q { max-width: none; }
}

/* JOBS — open posities lijst. Top-padding kleiner: sluit direct aan op de intro
   (minder witruimte tussen opsomming en "§ 01 Open posities"). */
.jobs { padding: clamp(28px, 3.5vw, 48px) var(--space-2xl) var(--space-4xl); background: var(--color-bg-base); }
.jobs__inner { max-width: 1440px; margin: 0 auto; }
.jobs__head { margin-bottom: var(--space-2xl); max-width: 720px; }
.jobs__title { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(34px, 4vw, 56px); line-height: 1.02; letter-spacing: -0.02em; margin: var(--space-md) 0; }
.jobs__title em { font-style: italic; color: var(--color-accent); }
.jobs__list { display: grid; gap: 0; border-top: 1px solid var(--color-rule); }
.job {
  display: grid; grid-template-columns: 120px 1fr auto auto;
  gap: var(--space-xl); align-items: center;
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--color-rule);
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-standard), padding var(--duration-base) var(--ease-standard);
}
.job:hover { background: var(--color-bg-subtle); padding-left: var(--space-md); padding-right: var(--space-md); }
.job__num { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.22em; color: var(--color-accent); }
.job__body h3 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(20px, 1.6vw, 26px); line-height: 1.15; letter-spacing: -0.01em; color: var(--color-text-primary); margin: 0 0 6px; }
.job__body p { font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-secondary); margin: 0; max-width: 62ch; }
.job__meta {
  display: grid; gap: 4px; text-align: right;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.job__meta strong { color: var(--color-text-primary); font-weight: var(--weight-semibold); }
.job__arrow {
  font-family: var(--font-mono); font-size: var(--text-md);
  color: var(--color-text-primary);
  transition: transform var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
.job:hover .job__arrow { transform: translateX(6px); color: var(--color-accent); }

/* Paginering (verschijnt bij >10 vacatures) — mono-nummers op dezelfde grid. */
.jobs__pages { display: flex; gap: var(--space-xs); margin-top: var(--space-lg); }
.jobs__page {
  font-family: var(--font-mono); font-size: var(--text-sm);
  min-width: 38px; height: 38px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; color: var(--color-text-secondary);
  border: 1px solid var(--color-rule);
  transition: color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.jobs__page:hover { color: var(--color-text-primary); border-color: var(--color-text-muted); }
.jobs__page.is-current { color: var(--color-petrol-900); background: var(--color-accent); border-color: var(--color-accent); }

.jobs__spontaan {
  margin-top: var(--space-2xl);
  padding: var(--space-xl);
  background: var(--color-bg-subtle);
  border-top: 2px solid var(--color-accent);
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-xl); align-items: center;
}
.jobs__spontaan h3 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(20px, 1.8vw, 28px); line-height: 1.2; margin: 0 0 6px; color: var(--color-text-primary); }
.jobs__spontaan p { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; max-width: 60ch; line-height: 1.5; }

/* PROCES — 4 stappen sollicitatieproces (petrol layer) */
.proc {
  padding: var(--space-4xl) var(--space-2xl);
  position: relative; overflow: hidden; isolation: isolate;
}
.proc__inner { max-width: 1440px; margin: 0 auto; position: relative; z-index: 2; }
.proc__head { margin-bottom: var(--space-2xl); max-width: 720px; }
.proc__title {
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: clamp(28px, 3vw, 44px); line-height: 1.04;
  letter-spacing: -0.02em; margin: var(--space-md) 0;
  color: var(--color-text-primary);
}
.proc__title em { font-style: italic; color: var(--color-accent); }
.proc__lead {
  font-family: var(--font-body); font-size: var(--text-md);
  line-height: var(--leading-relaxed); color: var(--color-text-secondary);
  margin: 0; max-width: 60ch;
}
.proc__steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg); margin-top: var(--space-2xl);
  counter-reset: step;
}
.proc__step {
  counter-increment: step;
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 2px solid var(--color-accent);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex; flex-direction: column;
  transition: transform var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              background var(--duration-base) var(--ease-standard);
}
.proc__step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: -22px; right: -8px;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(120px, 13vw, 180px);
  line-height: 1; letter-spacing: -0.04em;
  color: rgba(255,255,255,0.04);
  z-index: -1;
  pointer-events: none;
  user-select: none;
}
.proc__step:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 183, 9, 0.32);
  background: rgba(255,255,255,0.04);
}
.proc__step-num {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.22em; color: var(--color-accent);
  display: inline-flex; align-items: center; gap: 8px;
}
.proc__step-num::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent); display: inline-block;
}
.proc__step-h3 {
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: clamp(18px, 1.3vw, 22px); line-height: 1.2;
  margin: var(--space-md) 0 var(--space-sm);
  color: var(--color-text-primary);
}
.proc__step-p {
  font-family: var(--font-body); font-size: var(--text-sm);
  line-height: 1.55; color: var(--color-text-secondary); margin: 0 0 var(--space-lg);
  flex: 1;
}
.proc__step-time {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-accent); display: block;
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: 1px dashed rgba(255,255,255,0.10);
}
.proc__total {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-text-muted); margin-top: var(--space-2xl);
}
.proc__total strong { color: var(--color-accent); font-weight: var(--weight-semibold); }

/* APPLY — formulier */
.apply { padding: var(--space-4xl) var(--space-2xl); background: var(--color-bg-base); }
/* Eén kolom sinds 2026-06-03 (zijbalk verwijderd): kop + lead + formulier,
   links uitgelijnd op een leesbare breedte. */
.apply__inner { max-width: 1440px; margin: 0 auto; }
.apply__head { margin-bottom: var(--space-xl); max-width: 720px; }
.apply__title { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(34px, 4vw, 56px); line-height: 1.02; letter-spacing: -0.02em; margin: var(--space-md) 0; }
.apply__title em { font-style: italic; color: var(--color-accent); }
.apply__lead { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--color-text-secondary); margin: 0; max-width: 62ch; }
.apply__form { display: grid; gap: var(--space-md); max-width: 720px; background: var(--color-bg-subtle); padding: var(--space-xl); border-top: 2px solid var(--color-accent); }
.apply__field { display: grid; gap: 6px; }
.apply__field label { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-muted); }
.apply__field input,
.apply__field textarea,
.apply__field select {
  font-family: var(--font-body); font-size: var(--text-base);
  padding: 12px 14px;
  background: var(--color-bg-base);
  border: 1px solid var(--color-rule);
  color: var(--color-text-primary);
  border-radius: 0;
  transition: border-color var(--duration-base) var(--ease-standard);
}
.apply__field input[type="file"] { padding: 10px 12px; background: var(--color-bg-base); }
.apply__field input:focus,
.apply__field textarea:focus,
.apply__field select:focus {
  outline: 2px solid var(--color-accent); outline-offset: 0;
  border-color: var(--color-accent);
}
.apply__field textarea { min-height: 160px; resize: vertical; }
.apply__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.apply__legal { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; line-height: 1.5; }
.apply__legal a { color: var(--color-accent); text-decoration: none; border-bottom: 1px solid currentColor; }

@media (max-width: 1024px) {
  .proc__steps { grid-template-columns: repeat(2, 1fr); }
  .apply__row { grid-template-columns: 1fr; }
  .job { grid-template-columns: 60px 1fr auto; }
  .job__meta { grid-column: 2 / -1; text-align: left; }
}
@media (max-width: 640px) {
  .job { grid-template-columns: 1fr; gap: var(--space-sm); }
  .proc__steps { grid-template-columns: 1fr; }
  .jobs__spontaan { grid-template-columns: 1fr; }
}