/*
 * Single Job Opening — mirrors the client-approved "careers-page-redesign"
 * artifact 1:1: same colors, spacing, and section structure, wired to ACF
 * fields instead of static content. #F5820A is the exact brand orange from
 * the SAFIR logo / artifact — not the site's separate muted --gold token.
 */
.jb-hero{background:linear-gradient(180deg,rgba(6,15,32,.55) 0%,rgba(6,15,32,.78) 55%,rgba(6,15,32,.96) 100%),url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;}
.jb-hero.has-hero-image .page-hero-grid{opacity:.4;}
.jb-hero.has-hero-image .page-hero-glow{opacity:.6;}
.jb-hero .page-hero-inner{position:relative;}

.jb-eyebrow{display:inline-block;background:rgba(245,130,10,.22);border:1px solid rgba(245,130,10,.6);color:#FFCE94;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;border-radius:999px;margin-bottom:18px;}

.jb-hero-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;margin-bottom:26px;}
.jb-hero-meta .job-tag{color:rgba(255,255,255,.85);}
.jb-hero-meta .job-tag svg{opacity:.85;}

.jb-hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.btn-orange{padding:13px 24px;background:#F5820A;color:#fff;}
.btn-orange:hover{background:#DB7208;transform:translateY(-2px);}
.btn-ghost{padding:13px 24px;background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.45);}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.14);}
.btn-brochure{display:inline-flex;align-items:center;gap:8px;}
.btn-brochure svg{flex-shrink:0;}

/* ── Section rhythm — alternating white / tint bands, matching the artifact ── */
.jb-section{padding:64px 5%;}
.jb-tint{background:#F4F7FB;}
.jb-section .kicker{color:#F5820A;font-weight:700;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;}
.jb-section h2{font-size:clamp(22px,2.6vw,28px);margin:0 0 14px;font-weight:700;color:#0E2748;}
.jb-section .lede{color:var(--textm);font-size:15.5px;max-width:680px;}

/* ── About the role ── */
.jb-about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;}
.jb-about-grid.jb-single-col{grid-template-columns:1fr;max-width:720px;}
.jb-description-headline{font-size:18px;font-weight:700;line-height:1.5;color:#0E2748;margin:0 0 16px;}
.jb-description{font-size:14.5px;font-weight:300;line-height:1.85;color:var(--textm);}
.jb-about-photo{border-radius:14px;overflow:hidden;box-shadow:0 18px 40px rgba(11,21,38,.16);}
.jb-about-photo img{display:block;width:100%;height:auto;}

/* ── Journey timeline ── */
.jb-timeline{margin-top:36px;}
.tl-item{display:grid;grid-template-columns:56px 1fr;gap:20px;position:relative;padding-bottom:36px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{content:"";position:absolute;left:27px;top:56px;bottom:-4px;width:2px;background:#E5EAF2;}
.tl-item:last-child::before{display:none;}
.tl-num{width:56px;height:56px;border-radius:50%;background:#0E2748;color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--ff-head);font-weight:700;font-size:18px;flex-shrink:0;z-index:2;}
.tl-body h3{font-family:var(--ff-head);margin:6px 0 6px;font-size:17.5px;font-weight:600;color:var(--text);}
.tl-body p{margin:0;color:var(--textm);font-size:14.5px;max-width:640px;line-height:1.7;font-weight:300;}

/* ── What you'll gain ── */
.gain-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 32px;margin-top:8px;}
.gain-item{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--text);}
.gain-item .tick{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:#E4EFFF;color:#1B6FEF;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;}

/* ── Who should apply ── */
.jb-apply-wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
.jb-apply-wrap.jb-single-col{grid-template-columns:1fr;max-width:720px;}
.apply-photo{border-radius:14px;overflow:hidden;box-shadow:0 18px 40px rgba(11,21,38,.14);}
.apply-photo img{display:block;width:100%;height:auto;}
.req-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 28px;margin:22px 0 26px;}
.req-grid .item{display:flex;gap:10px;font-size:14px;color:var(--text);}
.req-grid .item .tick{color:#1B6FEF;flex-shrink:0;font-weight:700;}
.badge-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px;}
.badge-row .badge{background:#fff;border:1px solid #E5EAF2;color:#0E2748;font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;}

/* ── Country / location strip ── */
.jb-country-strip{background:#0E2748;color:#fff;padding:16px 0;}
.jb-country-strip-inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:13.5px;}
.jb-country-label{color:#FFCE94;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:12px;}
.jb-chip{background:rgba(255,255,255,.08);padding:5px 12px;border-radius:999px;}

/* ── Journey steps process bar (legacy optional field) ── */
.journey-steps{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0 auto;max-width:420px;}
.journey-step{width:100%;text-align:center;padding:12px 20px;border-radius:30px;background:var(--off);border:1px solid var(--card-border);font-family:var(--ff-head);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text);}
.journey-step.is-final{background:#F5820A;border-color:#F5820A;color:#fff;}
.journey-arrow{color:#F5820A;opacity:.7;display:flex;align-items:center;justify-content:center;margin:2px 0;}

@media(min-width:760px){
  .journey-steps{flex-direction:row;flex-wrap:wrap;justify-content:center;max-width:820px;gap:6px;}
  .journey-step{width:auto;}
  .journey-arrow{transform:rotate(-90deg);margin:0;}
}

/* ── Interested in this role (cta card) ── */
.jb-cta-card{background:linear-gradient(135deg,#0E2748,#1B6FEF);color:#fff;border-radius:18px;padding:48px 44px;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;}
.jb-cta-card h2{color:#fff;margin-bottom:8px;font-size:clamp(20px,2.4vw,26px);}
.jb-cta-card p{margin:0;color:rgba(255,255,255,.85);font-size:14.5px;line-height:1.7;}
.jb-cta-btns{display:flex;gap:12px;flex-wrap:wrap;}

@media(max-width:860px){
  .jb-about-grid,.jb-apply-wrap,.gain-grid,.req-grid{grid-template-columns:1fr;}
}

@media(max-width:640px){
  .jb-cta-card{padding:30px 26px;flex-direction:column;align-items:flex-start;}
}