/*
 * page-service.css — styling voor patterns/page-service.php
 * Sessie 24 (2026-05-26). Universele template voor 8 nieuwe 2-pijler
 * sub-pages onder Internal Audit + Risk Management.
 *
 * Brandbook v3.3 Continuum: petrol hero + white body, accent yellow #F5B709.
 * Tokens via assets/css/tokens.css (var(--color-*), var(--space-*), var(--font-*)).
 */

/* ===== Hero (petrol layer) ===== */
.ps-hero {
  position: relative;
  background: var(--color-petrol-900, #1F3A44);
  /* tekstkleur via text-primary (wit op petrol-layer) — NIET bg-base, want dat
     flipt op data-layer="petrol" naar petrol-900 → onzichtbare donkere titel. */
  color: var(--color-text-primary, #FFFFFF);
  padding: clamp(72px, 9vw, 144px) var(--space-2xl, 48px) clamp(56px, 7vw, 112px);
  overflow: hidden;
}
.ps-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 88% 18%, rgba(245, 183, 9, 0.10), transparent 60%),
    linear-gradient(105deg, rgba(0, 0, 0, 0.18) 0%, transparent 60%);
  pointer-events: none;
}
.ps-hero__inner {
  position: relative; z-index: 1;
  max-width: 1280px; margin: 0 auto;
}

/* ===== Breadcrumb (kruimelpad) — erft witte tekst van de petrol-hero ===== */
.breadcrumb {
  margin-bottom: var(--space-lg, 24px);
}
/* Dienstpagina-hero compacter bovenaan: het kruimelpad (SEO) staat hoger nu de
   gele eyebrow eronder vervallen is. Min 72px houdt het vrij van de fixed header
   (~64px); alleen op .page-service zodat de vacature-hero (.ps-hero) niet wijzigt. */
.page-service .ps-hero {
  padding-top: clamp(72px, 7vw, 100px);
}
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: var(--text-xs, 12px);
  letter-spacing: 0.04em;
}
.breadcrumb__item {
  display: flex;
  align-items: center;
}
.breadcrumb__item + .breadcrumb__item::before {
  content: "/";
  margin-right: 0.5rem;
  opacity: 0.45;
}
.breadcrumb a {
  color: inherit;
  text-decoration: none;
  opacity: 0.72;
  transition: opacity 0.15s ease;
}
.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  opacity: 1;
  text-decoration: underline;
}
.breadcrumb__current {
  opacity: 1;
}

/* ===== Vergelijkingstabel (.ps-compare, witte laag) ===== */
.ps-compare__wrap {
  overflow-x: auto;
  margin-top: var(--space-md, 16px);
}
.ps-compare__wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm, 15px);
  line-height: 1.5;
}
.ps-compare__wrap th,
.ps-compare__wrap td {
  text-align: left;
  vertical-align: top;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-rule, #E4DAC8);
}
.ps-compare__wrap thead th {
  font-family: var(--font-display, sans-serif);
  font-weight: var(--weight-medium, 600);
  color: var(--color-text-primary, #1F3A44);
  border-bottom: 2px solid var(--color-yellow-500, #F5B709);
}
.ps-compare__wrap tbody th {
  font-weight: var(--weight-medium, 600);
  color: var(--color-text-primary, #1F3A44);
}
.ps-compare__wrap td {
  color: var(--color-text-secondary, #465359);
}
.ps-compare__wrap tbody tr:last-child th,
.ps-compare__wrap tbody tr:last-child td {
  border-bottom: none;
}
.ps-hero__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-lg, 24px);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: var(--text-xs, 12px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-yellow-500, #F5B709);
  font-weight: 600;
}
.ps-hero__title {
  font-family: var(--font-display, "Inter Tight", sans-serif);
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 500;
  max-width: 32ch;
  margin: 0 0 var(--space-xl, 32px);
  text-wrap: balance;
}
.ps-hero__title em {
  font-style: italic;
  color: var(--color-yellow-500, #F5B709);
  font-weight: 500;
}
.ps-hero__lead {
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.55;
  max-width: 64ch;
  margin: 0 0 var(--space-xl, 32px);
  color: rgba(255, 255, 255, 0.92);
  text-wrap: pretty;
}
.ps-hero__lead strong { color: #FFFFFF; font-weight: 600; }
.ps-hero__lead em { font-style: italic; color: var(--color-yellow-500, #F5B709); }

.ps-hero__ctas {
  display: flex; flex-wrap: wrap; gap: var(--space-md, 16px);
}

/* ===== Body sections (white layer) ===== */
.ps-section {
  padding: clamp(44px, 5vw, 76px) var(--space-2xl, 48px);
  background: var(--color-bg-base, #FFFFFF);
}
.ps-section__inner {
  max-width: 1280px; margin: 0 auto;
}
/* 2-koloms body-secties: eyebrow + titel links, inhoud rechts. Vult de breedte
   en geeft balans (minder leegte rechts, minder verticale witruimte). Niet op
   de author-kaart; onder 900px stapelt alles weer (zie media-query onderaan). */
.ps-section:not(.ps-author) .ps-section__inner {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  column-gap: clamp(32px, 5vw, 88px);
  align-items: start;
}
.ps-section:not(.ps-author) .ps-section__inner > .eyebrow { grid-column: 1; grid-row: 1; }
.ps-section:not(.ps-author) .ps-section__inner > .ps-section__title { grid-column: 1; grid-row: 2; }
.ps-section:not(.ps-author) .ps-section__inner > .ps-section__body,
.ps-section:not(.ps-author) .ps-section__inner > .ps-faq__list { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.ps-section__title {
  font-family: var(--font-display, "Inter Tight", sans-serif);
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 500;
  max-width: 24ch;
  margin: var(--space-md, 16px) 0 var(--space-xl, 32px);
  color: var(--color-text-primary, #1F3A44);
}
.ps-section__title em {
  font-style: italic;
  color: var(--color-yellow-500, #F5B709);
  font-weight: 400;
}
.ps-section__body {
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.65;
  max-width: 70ch; /* vult kolom 2; bredere tekst dan voorheen (64ch) */
  color: var(--color-text-primary, #1F3A44);
}
.ps-section__body p { margin: 0 0 var(--space-md, 16px); }
.ps-section__body strong { font-weight: 600; }
.ps-section__body em { font-style: italic; color: var(--color-yellow-500, #F5B709); }
.ps-section__body ul, .ps-section__body ol {
  padding-left: 1.5em;
  margin: 0 0 var(--space-md, 16px);
}
.ps-section__body li { margin: 0 0 0.5em; }

/* Onder 900px: 2-koloms body-secties stapelen weer (titel boven, tekst eronder). */
@media (max-width: 900px) {
  .ps-section:not(.ps-author) .ps-section__inner { display: block; }
  .ps-section__title { max-width: none; }
  .ps-section__body, .ps-faq__list { max-width: none; }
}

/* ===== FAQ ===== */
.ps-faq__list {
  display: flex; flex-direction: column;
  gap: var(--space-sm, 12px);
  max-width: 70ch;
}
.ps-faq__item {
  background: var(--color-grey-100, #F4F4F4);
  border-left: 2px solid var(--color-yellow-500, #F5B709);
  border-radius: 6px;
  padding: var(--space-md, 16px) var(--space-lg, 24px);
  transition: background 200ms ease;
}
.ps-faq__item:hover { background: var(--color-grey-200, #E8E8E8); }
.ps-faq__item summary {
  cursor: pointer;
  font-family: var(--font-display, "Inter Tight", sans-serif);
  font-weight: 600;
  font-size: clamp(16px, 1.15vw, 19px);
  list-style: none;
  position: relative;
  padding-right: 2em;
}
.ps-faq__item summary::-webkit-details-marker { display: none; }
.ps-faq__item summary::after {
  content: "+";
  position: absolute; right: 0; top: 0;
  font-weight: 400;
  font-size: 1.5em;
  line-height: 1;
  color: var(--color-yellow-500, #F5B709);
  transition: transform 200ms ease;
}
.ps-faq__item[open] summary::after {
  content: "−";
}
.ps-faq__item summary h3 {
  display: inline;
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}
.ps-faq__answer {
  padding-top: var(--space-md, 16px);
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.6;
  color: var(--color-text-primary, #1F3A44);
}

/* ===== Author block (EEAT signal) ===== */
.ps-author {
  background: var(--color-grey-100, #F4F4F4);
}
.ps-author__card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg, 24px);
  max-width: 80ch;
  padding: var(--space-xl, 32px) var(--space-lg, 24px);
  background: var(--color-bg-base, #FFFFFF);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(31, 58, 68, 0.06);
}
.ps-author__copy h3 {
  font-family: var(--font-display, "Inter Tight", sans-serif);
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 500;
  margin: var(--space-xs, 8px) 0;
  color: var(--color-text-primary, #1F3A44);
}
.ps-author__role {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: var(--text-xs, 12px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted, #465359);
  margin: 0 0 var(--space-md, 16px);
}
.ps-author__bio {
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: var(--text-base, 16px);
  line-height: 1.6;
  color: var(--color-text-primary, #1F3A44);
  margin: 0 0 var(--space-md, 16px);
}
.ps-author__linkedin {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-body, "Inter", sans-serif);
  font-weight: 600;
  font-size: var(--text-sm, 14px);
  color: var(--color-yellow-500, #F5B709);
  text-decoration: none;
}
.ps-author__linkedin:hover { text-decoration: underline; }

/* ===== Verwante diensten (hub-and-spoke interne links) ===== */
.ps-related .ps-section__inner { display: block; border-top: 1px solid var(--color-rule); padding-top: var(--space-2xl); }
.ps-related .eyebrow { display: block; margin-bottom: var(--space-lg); }
.ps-related__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-2xl); }
.ps-related__link { display: inline-flex; align-items: center; gap: .4em; font-weight: var(--weight-semibold); color: var(--color-text-primary); text-decoration: none; }
.ps-related__link span { color: var(--color-accent); transition: transform .15s ease; }
.ps-related__link:hover { color: var(--color-accent); }
.ps-related__link:hover span { transform: translateX(3px); }
.ps-related__link--hub { color: var(--color-text-secondary); }

/* ===== Closer CTA (petrol) ===== */
.ps-cta {
  background: var(--color-petrol-900, #1F3A44);
  /* text-primary (wit op petrol), niet bg-base — zie .ps-hero. */
  color: var(--color-text-primary, #FFFFFF);
  padding: clamp(72px, 9vw, 144px) var(--space-2xl, 48px);
  text-align: center;
}
.ps-cta__inner {
  max-width: 64ch; margin: 0 auto;
}
.ps-cta__title {
  font-family: var(--font-display, "Inter Tight", sans-serif);
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 500;
  margin: 0 0 var(--space-lg, 24px);
}
.ps-cta__title em {
  font-style: italic;
  color: var(--color-yellow-500, #F5B709);
  font-weight: 400;
}
.ps-cta__lead {
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 var(--space-xl, 32px);
}

/* ===== Eyebrow with section number ===== */
.ps-section .eyebrow {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: var(--text-xs, 12px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-yellow-500, #F5B709);
  font-weight: 600;
}
.ps-section .eyebrow .ser { color: var(--color-text-muted, #465359); }

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .ps-hero { padding-left: var(--space-lg, 24px); padding-right: var(--space-lg, 24px); }
  .ps-section { padding-left: var(--space-lg, 24px); padding-right: var(--space-lg, 24px); }
  .ps-cta { padding-left: var(--space-lg, 24px); padding-right: var(--space-lg, 24px); }
  .ps-hero__title { max-width: 100%; }
}

/* ===== 2-pijler submenu styling (sessie 24) ===== */
.submenu--2pillar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl, 32px);
  min-width: 540px;
  padding: var(--space-lg, 24px);
}
.submenu__pillar {
  list-style: none;
  padding: 0;
}
.submenu__pillar-link {
  display: block;
  font-family: var(--font-display, "Inter Tight", sans-serif);
  font-weight: 600;
  font-size: var(--text-base, 16px);
  color: var(--color-text-primary, #1F3A44);
  text-decoration: none;
  padding-bottom: var(--space-sm, 12px);
  border-bottom: 1px solid var(--color-border-default, rgba(31, 58, 68, 0.14));
  margin-bottom: var(--space-sm, 12px);
}
.submenu__pillar[data-num]::before {
  content: attr(data-num);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--color-yellow-500, #F5B709);
  display: block;
  margin-bottom: 0.4em;
}
.submenu__subs, .submenu__leaves {
  list-style: none;
  padding: 0;
  margin: 0;
}
.submenu__subs > li {
  margin-bottom: var(--space-sm, 12px);
}
.submenu__subs > li > a {
  display: block;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: var(--text-sm, 14px);
  font-weight: 500;
  color: var(--color-text-primary, #1F3A44);
  text-decoration: none;
  padding: 0.3em 0;
}
.submenu__subs > li > a:hover { color: var(--color-yellow-500, #F5B709); }
.submenu__leaves {
  padding-left: var(--space-md, 16px);
  margin-top: 0.3em;
}
.submenu__leaves li {
  margin-bottom: 0.3em;
}
.submenu__leaves a {
  font-size: var(--text-xs, 12px);
  color: var(--color-text-muted, #465359);
  text-decoration: none;
}
.submenu__leaves a:hover { color: var(--color-yellow-500, #F5B709); }

/* ===== Footer 2-pijler sub-sub styling ===== */
.ft__col li.sub-sub {
  padding-left: var(--space-md, 16px);
  font-size: 0.92em;
  opacity: 0.85;
}
.ft__col li.sub-sub a::before {
  content: "·";
  margin-right: 0.4em;
  color: var(--color-yellow-500, #F5B709);
}

/* ===== Services-trio 2-pijler grid (sessie 24) ===== */
.svc__grid--2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl, 32px);
  /* Beide kaarten altijd even hoog: de langste bepaalt de rijhoogte, de
     kortere rekt mee. Zo wordt nooit één kader groter dan de ander als er
     meer content in één kaart komt. (expliciet i.p.v. default 'normal') */
  align-items: stretch;
  /* Reset de grijze hairline-achtergrond van de basis-.svc__grid: die is
     bedoeld voor de 4-koloms trio met 1px-gap. Bij de 2-pijler met een
     echte 32px-gap zou hij als grijze strook tússen de foto's verschijnen.
     Transparant → gap toont de witte sectie-achtergrond. (sessie 27) */
  background: transparent;
  border: 0;
}
@media (max-width: 768px) {
  .svc__grid--2 { grid-template-columns: 1fr; }
  .submenu--2pillar { grid-template-columns: 1fr; min-width: 0; }
}

/* ===== Spacing-compressie homepage "Twee specialismen" (sessie 26) =====
   Doel: foto's + de labels (Internal Audit / Risk Management) samen in één
   frame. De basis-.svc (preview-main.css) gebruikt 96px sectie-padding,
   96px header-marge en min-height:720px per kaart → labels vielen buiten
   beeld + veel witruimte boven/onder. Hier scoped teruggebracht. */
.svc--2pillar {
  padding-top: var(--space-2xl);     /* 96px → 48px (gat onder hero) */
  padding-bottom: var(--space-2xl);  /* 96px → 48px (gat boven tickertape) */
}
.svc--2pillar .svc__h {
  margin-bottom: var(--space-xl);    /* 96px → 32px: kaarten dichter onder titel */
  /* Intro onderaan uitgelijnd met de titel: laatste regel zit op de hoogte
     van "een partner." → editoriaal, gebalanceerd (niet zwevend bovenin). */
  align-items: end;
  /* Intro-kolom breder dan de rechter foto + naar links opgeschoven, zodat
     de intro meer lucht krijgt: titel 40%, intro 60%. (sessie 27) */
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}
.svc--2pillar .svc__intro {
  max-width: 74ch;                   /* breder naar rechts → betere regelafbreking ("krijgen" op r2, "Risk Management" samen op r3) */
}
/* Meerdere alinea's in de wysiwyg-intro: nette tussenruimte (de wrapper is
   nu een <div>, niet langer een <p>). */
.svc--2pillar .svc__intro p { margin: 0 0 var(--space-md); }
.svc--2pillar .svc__intro p:last-child { margin-bottom: 0; }
/* Mobiel: titel + intro onder elkaar. Eigen media-override nodig omdat
   .svc--2pillar .svc__h een hogere specificiteit heeft dan de globale
   .svc__h-stack-regel (anders bleef het 2-koloms op mobiel). */
@media (max-width: 960px) {
  .svc--2pillar .svc__h { grid-template-columns: 1fr; gap: var(--space-lg); }
  .svc--2pillar .svc__intro { max-width: none; }
}
.svc--2pillar .svc__card {
  min-height: 0;                     /* schrap 720px-vloer → geen bodem-witruimte */
  /* Subtiele maar zichtbare kaderomlijning rond elke kaart (foto + tekst).
     Op hover iets sterker + lichte lift. (sessie 27) */
  border: 1px solid var(--color-border-default);
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.svc--2pillar .svc__card:hover {
  border-color: var(--color-border-strong);
  box-shadow: 0 4px 24px rgba(31, 58, 68, 0.08);
}
.svc--2pillar .svc__illustration {
  max-height: 320px;                 /* cap fotohoogte zodat foto + label samen in één frame vallen */
}
.svc--2pillar .svc__inner-card {
  padding-top: var(--space-lg);      /* 48px → 24px */
}
.svc--2pillar .svc__num {
  margin-bottom: var(--space-md);    /* 32px → 16px: naam direct onder de foto */
}

/* ===== Titel-overlay linksonder ín de foto (sessie 27, user-request) =====
   Num + naam verhuizen van onder de foto naar een caption linksonder ín
   de foto. Sterker bodem-scrim voor leesbaarheid; titel wit, accent-woord
   (<em> in de ACF-titel) geel. .svc__inner-card houdt desc/bullets/cta. */
.svc--2pillar .svc__illustration {
  display: flex;
  align-items: flex-end;            /* overlay (in-flow) naar onderkant; img is absolute */
}
.svc--2pillar .svc__illustration::after {
  background:
    radial-gradient(70% 60% at 50% 110%, rgba(245, 183, 9, 0.16), transparent 70%),
    linear-gradient(180deg, transparent 38%, rgba(31, 58, 68, 0.82) 100%);
}
.svc--2pillar .svc__overlay {
  position: relative; z-index: 2;   /* boven het ::after-scrim */
  width: 100%;
  padding: var(--space-lg);
  display: grid; gap: var(--space-xs);
}
.svc--2pillar .svc__overlay .svc__num {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.78);
}
.svc--2pillar .svc__overlay .svc__name {
  margin: 0;
  color: #FFFFFF;
}
.svc--2pillar .svc__overlay .svc__name em {
  color: var(--color-accent);
  font-style: normal;
}
/* Meerdere alinea's in de kaart-omschrijving (svc__desc als div met <p>'s). */
.svc--2pillar .svc__desc p { margin: 0 0 var(--space-md); }
.svc--2pillar .svc__desc p:last-child { margin-bottom: 0; }

/* ===== EQA "in detail" — inhoudelijke content op de Kwaliteitstoetsing-leaf
   (ia_quality_eqa). Witte leeskolommen in editoriale stijl, gevolgd door het
   hoofdstuk "Onze aanpak" met het IIA-raamwerk. (2026-06-04) ===== */
.eqa-detail {
  padding: clamp(44px, 5vw, 80px) var(--space-2xl, 48px);
  background: var(--color-bg-base, #FFFFFF);
}
.eqa-detail__inner { max-width: 1280px; margin: 0 auto; }
.eqa-detail__block + .eqa-detail__block { margin-top: clamp(32px, 4vw, 56px); }
.eqa-detail__title {
  font-family: var(--font-display, "Inter Tight", sans-serif);
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-weight: 500;
  max-width: 24ch;
  margin: 0 0 var(--space-md, 16px);
  color: var(--color-text-primary, #1F3A44);
}
.eqa-detail__title em { font-style: italic; color: var(--color-yellow-500, #F5B709); font-weight: 400; }
.eqa-detail__body {
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.7;
  max-width: 72ch;
  color: var(--color-text-secondary, #465359);
}
.eqa-detail__body p { margin: 0 0 var(--space-md, 16px); }
.eqa-detail__body p:last-child { margin-bottom: 0; }
.eqa-detail__body strong { color: var(--color-text-primary, #1F3A44); font-weight: 600; }
.eqa-detail__body ul {
  list-style: none;
  padding-left: 1.4em;
  margin: 0 0 var(--space-md, 16px);
}
.eqa-detail__body ul li {
  position: relative;
  margin: 0 0 0.6em;
}
.eqa-detail__body ul li::before {
  content: "+";
  position: absolute;
  left: -1.4em;
  color: var(--color-yellow-500, #F5B709);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
}

/* Hoofdstuk "Onze aanpak" — subtiele scheiding bovenaan + grote chapter-titel
   met "Brede expertise" als subtitel eronder. */
.eqa-detail--approach { border-top: 1px solid var(--color-border-default, rgba(31, 58, 68, 0.14)); }
.eqa-detail__chapter {
  font-family: var(--font-display, "Inter Tight", sans-serif);
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0;
  color: var(--color-text-primary, #1F3A44);
}
.eqa-detail__subtitle {
  font-family: var(--font-display, "Inter Tight", sans-serif);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text-primary, #1F3A44);
  margin: var(--space-sm, 12px) 0 var(--space-lg, 24px);
}

/* IIA Global Internal Audit Standards-raamwerk (figure) */
.eqa-detail__figure { margin: clamp(28px, 3.5vw, 48px) 0 0; max-width: 1000px; }
.eqa-detail__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--color-border-default, rgba(31, 58, 68, 0.14));
  background: #FFFFFF;
}
.eqa-detail__figure figcaption {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: var(--text-2xs, 11px);
  letter-spacing: 0.04em;
  color: var(--color-text-muted, #465359);
  margin-top: var(--space-sm, 12px);
}
@media (max-width: 768px) {
  .eqa-detail { padding-left: var(--space-lg, 24px); padding-right: var(--space-lg, 24px); }
  .eqa-detail__body, .eqa-detail__title { max-width: none; }
}

/* ===== Single vacature (CPT) — hergebruikt .ps-hero/.ps-section/.ps-cta ===== */
.vac-single__back {
  /* Block: terugknop op een eigen regel, zodat de eyebrow eronder valt
     (was inline-block -> botste met .ps-hero__eyebrow op één regel). */
  display: block; width: fit-content; margin-bottom: var(--space-md, 16px);
  font-family: var(--font-mono); font-size: var(--text-2xs, 11px);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7); text-decoration: none;
}
.vac-single__back:hover { color: var(--color-yellow-500, #F5B709); }
.vac-single__meta {
  list-style: none; padding: 0;
  margin: var(--space-xl, 32px) 0 var(--space-xl, 32px);
  display: flex; flex-wrap: wrap; gap: var(--space-xl, 32px);
}
.vac-single__meta li {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-body); font-size: var(--text-md, 18px); color: #FFFFFF;
}
.vac-single__meta-lbl {
  font-family: var(--font-mono); font-size: var(--text-2xs, 11px);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-yellow-500, #F5B709);
}
/* Slanke petrol-balk onder het sollicitatieformulier op de single-vacature:
   alleen een "Andere vacatures"-terugknop, dus veel minder verticale ruimte. */
.ps-cta--slim { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(32px, 4vw, 56px); }

/* Hero-achtergrondfoto (random per vacature: klimmer/truck/rallyauto/motor).
   Foto vult de hero (.ps-hero heeft al position:relative + overflow:hidden); een
   donker petrol-scrim erover borgt WCAG-contrast voor de witte tekst. */
.vac-single__hero--photo .vac-single__hero-img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  /* Geen kleurfilter: de foto blijft in eigen kleuren (geen blauwe sluier). */
}
.vac-single__hero--photo::after {
  /* Alleen de linkerzijde neutraal (zwart) verdonkeren voor leesbaarheid van
     titel + tekst; rechts blijft de foto open in eigen kleuren. Geen petrol-
     blauwe sluier over de hele foto. Werkt voor alle vier de beelden. */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.46) 26%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0) 68%);
}
.vac-single__hero--photo .ps-hero__inner { z-index: 2; }
@media (prefers-reduced-motion: no-preference) {
  .vac-single__hero--photo .vac-single__hero-img {
    transform-origin: 60% 50%;
    animation: vac-single-hero-zoom 22s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  }
}
@keyframes vac-single-hero-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }

/* Het sollicitatieformulier (template-parts/apply-form.php) is gedeeld met het
   overzicht, waar .apply__inner 1440px is om met .jobs/.proc (1440px) uit te lijnen.
   Op de single-vacature zijn hero + secties echter 1280px (.ps-*__inner), dus
   schaal de apply-container hier mee terug -> alles lijnt links netjes uit. */
.single-vacature .apply__inner { max-width: 1280px; }

/* ---- Single-vacature: leesbare single-column body. De 2-koloms .ps-section
   (titel links, tekst rechts) oogde leeg/krap bij langere vacatureteksten; de
   volledige omschrijving uit de editor (the_content, met eigen H2-koppen) komt
   nu in één leeskolom (max 760px), links uitgelijnd op dezelfde grid als hero +
   formulier (1280px-inner). ---- */
.vac-single__body { padding: clamp(28px, 3vw, 44px) var(--space-2xl, 48px) clamp(18px, 2vw, 28px); background: var(--color-bg-base, #FFFFFF); }
.vac-single__body-inner { max-width: 1280px; margin: 0 auto; }
.vac-single__prose { max-width: 900px; font-family: var(--font-body, "Inter", sans-serif); font-size: clamp(16px, 1.05vw, 18px); line-height: 1.7; color: var(--color-text-primary, #1F3A44); }
.vac-single__prose > :first-child { margin-top: 0; }
.vac-single__prose p { margin: 0 0 1.1em; }
.vac-single__prose strong { font-weight: 600; }
.vac-single__prose em { font-style: italic; color: var(--color-yellow-500, #F5B709); }
.vac-single__prose a { color: var(--color-text-primary, #1F3A44); text-decoration: underline; text-underline-offset: 2px; }
.vac-single__prose h2 { font-family: var(--font-display, "Inter Tight", sans-serif); font-weight: 500; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -0.01em; color: var(--color-text-primary, #1F3A44); margin: 1.9em 0 0.5em; }
.vac-single__prose h3 { font-family: var(--font-display, "Inter Tight", sans-serif); font-weight: 600; font-size: clamp(18px, 1.4vw, 21px); margin: 1.4em 0 0.4em; }
.vac-single__prose ul, .vac-single__prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.vac-single__prose li { margin: 0 0 0.5em; }
.vac-single__h2 { font-family: var(--font-display, "Inter Tight", sans-serif); font-weight: 500; font-size: clamp(22px, 2.2vw, 30px); color: var(--color-text-primary, #1F3A44); margin: 2em 0 0.6em; max-width: 900px; }
.vac-single__list { max-width: 900px; padding-left: 1.3em; }
.vac-single__list li { margin: 0 0 0.5em; line-height: 1.6; color: var(--color-text-primary, #1F3A44); }

/* Hero-tekst links gebundeld zodat titel + lead + meta in het donkere linkerdeel
   van de foto vallen (geldt voor alle hero-beelden). */
.vac-single__hero .ps-hero__title { max-width: 17ch; }
.vac-single__hero .ps-hero__lead { max-width: 40ch; }
.vac-single__hero .vac-single__meta { max-width: 560px; }

/* Strakkere verticale ritme op de single-vacature: minder lucht onder de hero,
   en de apply-sectie sluit direct op de body-tekst aan (was var(--space-4xl)). */
.vac-single__hero { padding-bottom: clamp(40px, 5vw, 72px); }
.single-vacature .apply { padding-top: clamp(22px, 2.6vw, 36px); }