/* ============================================================
   Omoda Brands — vacaturepagina's /ai-team/<rol>/
   Designtokens en basisregels identiek aan /ai-team/;
   de ob-vac-*-klassen zijn de opmaak uit het aangeleverde ontwerp.
   ============================================================ */
:root {
  /* Basispalet */
  --ob-linen:        #f7f3f0;  /* off-white, paginabodem — nooit puur wit */
  --ob-sand:         #e9e2d5;  /* warm beige, alt-vlak */
  --ob-off-black:    #2e2d2c;  /* primaire inkt */
  --ob-gold:         #907147;  /* Omoda-goud, huisaccent */

  /* Randen */
  --ob-border:        #e3dbce;
  --ob-border-strong: #d8cfbf;

  /* Semantische voorgrond / achtergrond */
  --ob-fg:          #2e2d2c;
  --ob-fg-2:        rgba(46,45,44,.67);
  --ob-fg-3:        rgba(46,45,44,0.55);
  --ob-fg-accent:   #907147;
  --ob-fg-on-dark:  #f7f3f0;
  --ob-bg:          #f7f3f0;
  --ob-bg-alt:      #e9e2d5;

  /* Typografie */
  --ob-font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --ob-font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ob-fw-light:    300;
  --ob-fw-regular:  400;
  --ob-fw-medium:   500;
  --ob-fw-semibold: 600;
  --ob-fs-caption: 13px;
  --ob-fs-sm:      14px;
  --ob-track-display: -0.02em;
  --ob-track-title:   -0.01em;
  --ob-track-eyebrow: 0.22em;

  /* Layout */
  --ob-maxw:     1320px;
  --ob-header-h: 76px;
  --ob-radius-pill: 999px;

  /* Motion — rustig, single-curve: alleen fades en kleine translates */
  --ob-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ob-dur-base: 240ms;
  --ob-blur: blur(14px);
}

/* ---- Base ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--ob-header-h);
}
body {
  background: var(--ob-bg);
  color: var(--ob-fg);
  font-family: var(--ob-font-body);
  font-weight: var(--ob-fw-regular);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: var(--ob-off-black); text-decoration: none; }
::selection { background: var(--ob-off-black); color: var(--ob-linen); }

/* ---- Header ---- */
.ob-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 18px clamp(20px, 5vw, 64px);
  background: rgba(247, 243, 240, 0.94);
  backdrop-filter: var(--ob-blur);
  -webkit-backdrop-filter: var(--ob-blur);
  border-bottom: 1px solid var(--ob-border);
}
.ob-logo { display: inline-flex; align-items: center; }
.ob-logo img { height: 26px; width: auto; }

/* ---- Container ---- */
.ob-container { max-width: var(--ob-maxw); margin: 0 auto; }

/* ---- Eyebrow ---- */
.ob-eyebrow {
  font-family: var(--ob-font-body);
  font-size: var(--ob-fs-caption);
  font-weight: var(--ob-fw-medium);
  letter-spacing: var(--ob-track-eyebrow);
  text-transform: uppercase;
  color: var(--ob-fg-accent);
  display: block;
  margin-bottom: 22px;
}

/* ---- Knop ---- */
.ob-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--ob-font-body);
  font-weight: var(--ob-fw-medium);
  font-size: var(--ob-fs-sm);
  line-height: 1;
  height: 48px;
  padding: 0 28px;
  border-radius: var(--ob-radius-pill);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--ob-dur-base) var(--ob-ease-standard),
              color var(--ob-dur-base) var(--ob-ease-standard),
              border-color var(--ob-dur-base) var(--ob-ease-standard);
}
.ob-btn-outline { background: transparent; color: var(--ob-fg); border: 1.5px solid var(--ob-off-black); }
.ob-btn-outline:hover { background: var(--ob-off-black); color: var(--ob-fg-on-dark); }
.ob-btn .ob-arrow { font-size: 16px; line-height: 0; }

/* Donkere variant — gevuld, keert om op hover */
.ob-btn-dark {
  background: var(--ob-off-black);
  color: var(--ob-fg-on-dark);
  border: 1.5px solid var(--ob-off-black);
}
.ob-btn-dark:hover { background: transparent; color: var(--ob-fg); }

/* ============================================================
   Vacaturepagina
   ============================================================ */

/* ---- Sectie 1: kop ---- */
.ob-vac-head { padding: clamp(48px, 8vh, 96px) clamp(20px, 5vw, 64px) clamp(40px, 6vh, 72px); }
.ob-vac-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: var(--ob-fw-medium);
  text-decoration: none;
  opacity: 0.78;
  transition: opacity var(--ob-dur-base) var(--ob-ease-standard);
}
.ob-vac-back:hover { opacity: 0.5; }
.ob-vac-title { margin-top: clamp(36px, 6vh, 64px); max-width: 980px; }
.ob-vac-title h1 {
  font-family: var(--ob-font-body);
  font-weight: var(--ob-fw-medium);
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
}
.ob-vac-sub {
  font-family: var(--ob-font-display);
  font-weight: var(--ob-fw-light);
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.2;
  letter-spacing: var(--ob-track-display);
  margin: 18px 0 0;
  text-wrap: balance;
}
.ob-vac-sub em { font-style: italic; }

/* ---- Metabalk ---- */
.ob-vac-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: clamp(36px, 5vh, 56px);
  border-top: 1px solid var(--ob-border);
  border-bottom: 1px solid var(--ob-border);
}
.ob-vac-meta > div {
  padding: 20px clamp(20px, 3vw, 40px);
  border-left: 1px solid var(--ob-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ob-vac-meta > div:first-child {
  padding: 20px clamp(20px, 3vw, 40px) 20px 0;
  border-left: 0;
}
/* --ob-fg-3 haalt op linnen maar 3,28:1; .72 tilt deze labels naar 5,31:1. */
.ob-vac-meta dt {
  font-size: 13px;
  font-weight: var(--ob-fw-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(46,45,44,.72);
  margin: 0;
}
.ob-vac-meta dd { font-size: 17px; margin: 0; }

/* ---- Sectie 2: tweekolommen ---- */
.ob-vac-body { padding: 0 clamp(20px, 5vw, 64px) clamp(80px, 13vh, 168px); }
.ob-vac-cols {
  max-width: var(--ob-maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(40px, 6vw, 96px);
  align-items: flex-start;
}
.ob-vac-article {
  flex: 999 1 560px;
  min-width: 0;
  max-width: 72ch;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vh, 64px);
}
.ob-vac-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--ob-border);
}
.ob-vac-block h2 {
  font-family: var(--ob-font-body);
  font-weight: var(--ob-fw-medium);
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: var(--ob-track-title);
  margin: 0;
}
.ob-vac-block h3 {
  font-family: var(--ob-font-body);
  font-weight: var(--ob-fw-semibold);
  font-size: clamp(17px, 1.3vw, 19px);
  letter-spacing: var(--ob-track-title);
  margin: 12px 0 0;
}
.ob-vac-block p {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.65;
  color: var(--ob-fg-2);
  margin: 0;
}
.ob-vac-block ul {
  margin: 0;
  padding: 0 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ob-vac-block li {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.65;
  color: var(--ob-fg-2);
  margin: 0;
  padding-left: 4px;
}

/* ---- Solliciteer-blok ---- */
.ob-vac-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.ob-vac-cta .ob-btn { align-self: flex-start; }
/* Staat zowel op linnen als op het beige aside-vlak: --ob-fg-3 gaf 3,28:1 resp. 3,12:1.
   Met .72 wordt dat 5,31:1 en 4,89:1; de strong op .75 komt op 5,81:1 resp. 5,31:1. */
.ob-vac-note {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(46,45,44,.72);
  margin: 0;
}
.ob-vac-note strong { font-weight: var(--ob-fw-semibold); color: rgba(46,45,44,.75); }

/* ---- Blogteaser onderaan het artikel ---- */
.ob-vac-teaser {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 28px 0;
  border-top: 1.5px solid var(--ob-off-black);
  border-bottom: 1px solid var(--ob-border);
  text-decoration: none;
  color: var(--ob-off-black);
  transition: opacity var(--ob-dur-base) var(--ob-ease-standard);
}
.ob-vac-teaser:hover { opacity: 0.75; }
.ob-vac-teaser img {
  width: 56px;
  height: 56px;
  border-radius: var(--ob-radius-pill);
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.ob-vac-teaser-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* --ob-fg-3 zakt hier naar 3,28:1 op linnen; .72 brengt het op 5,31:1. */
.ob-vac-teaser-role { font-size: 14px; color: rgba(46,45,44,.72); margin: 0; }
.ob-vac-teaser-title {
  font-family: var(--ob-font-display);
  font-weight: var(--ob-fw-light);
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.2;
  letter-spacing: var(--ob-track-display);
  margin: 0;
}
.ob-vac-teaser-title em { font-style: italic; }

/* ---- Aside ---- */
.ob-vac-aside {
  flex: 1 1 300px;
  position: sticky;
  top: 96px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(26px, 3vw, 36px);
  background: var(--ob-bg-alt);
  border: 1px solid var(--ob-border-strong);
}
/* --ob-fg-3 haalt op het beige aside-vlak maar 3,12:1; .72 tilt het naar 4,89:1. */
.ob-vac-aside-label {
  font-size: 13px;
  font-weight: var(--ob-fw-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(46,45,44,.72);
  margin: 0;
}
.ob-vac-aside-title {
  font-family: var(--ob-font-display);
  font-weight: var(--ob-fw-light);
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.15;
  letter-spacing: var(--ob-track-display);
  margin: 0;
}
.ob-vac-aside-title em { font-style: italic; }
.ob-vac-aside .ob-vac-note {
  padding-top: 16px;
  border-top: 1px solid var(--ob-border-strong);
}

/* ---- Mobiel ---- */
@media (max-width: 640px) {
  .ob-header { padding-top: 16px; padding-bottom: 14px; row-gap: 14px; }
  .ob-logo { align-self: center; }
  .ob-logo img { height: 22px; }
  .ob-vac-head { padding-top: clamp(32px, 6vh, 48px); padding-bottom: clamp(28px, 5vh, 40px); }
  .ob-vac-body { padding-bottom: clamp(56px, 9vh, 88px); }
  .ob-vac-title { max-width: 100%; }
  .ob-vac-article { max-width: 100%; }
  .ob-vac-meta > div,
  .ob-vac-meta > div:first-child {
    flex: 1 1 100%;
    padding: 14px 0;
    border-left: 0;
  }
  .ob-vac-meta > div + div { border-top: 1px solid var(--ob-border); }
  .ob-vac-aside { position: static; top: auto; flex: 1 1 100%; width: 100%; }
  .ob-btn { width: 100%; }
  .ob-vac-cta .ob-btn { align-self: stretch; }
  .ob-vac-teaser-title { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; }
}