/* ======================================================================
   Sales Source - individual vacancy (job description) pages
   ====================================================================== */

/* Hero fact chips */
.job-facts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.job-fact{ display:inline-flex; align-items:center; gap:9px; padding:9px 15px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); color:#fff; font-weight:600; font-size:.86rem; backdrop-filter:blur(6px); }
.job-fact svg{ width:16px; height:16px; opacity:.9; flex:none; }
/* Region line under the H1 (flags + name) */
.job-region-line{ display:flex; align-items:center; gap:15px; margin:16px 0 2px; flex-wrap:wrap; }
.job-region-line .jr-flags{ display:flex; align-items:center; }
.job-region-line .jr-flags img{ width:42px; height:31px; border-radius:7px; object-fit:cover; box-shadow:0 0 0 1px rgba(255,255,255,.45), 0 8px 16px -7px rgba(0,0,0,.5); }
.job-region-line .jr-flags img + img{ margin-left:-14px; }
.job-region-line .jr-name{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.18rem; color:#fff; letter-spacing:-.01em; }

/* Two-column body: prose + sticky summary card */
.job-layout{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:clamp(32px,4vw,60px); align-items:start; }
@media(max-width:920px){ .job-layout{ grid-template-columns:1fr; } }

.job-main > section{ padding:0; }
.job-main > section + section{ margin-top:46px; }
.job-block-head{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.job-block-ic{ flex:none; width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:var(--bg-soft); color:var(--green); border:1px solid var(--line); }
.job-block-ic svg{ width:22px; height:22px; }
.job-main h2{ font-size:clamp(1.35rem,2.4vw,1.7rem); margin:0; }
.job-main p{ color:var(--ink-soft); line-height:1.7; margin:0 0 16px; max-width:66ch; }
.job-main p:last-child{ margin-bottom:0; }
.job-main strong.lead-in{ color:var(--ink); }

/* Checklist bullets */
.job-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; max-width:68ch; }
.job-list li{ position:relative; padding-left:38px; color:var(--ink-soft); line-height:1.6; }
.job-list li::before{ content:""; position:absolute; left:0; top:1px; width:24px; height:24px; border-radius:8px; background:var(--bg-soft); border:1px solid var(--line); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:14px; }
.job-list li strong{ color:var(--ink); font-weight:700; }

/* Sticky "at a glance" summary card */
.job-aside{ position:sticky; top:calc(var(--nav-h) + 20px); display:flex; flex-direction:column; gap:18px; }
.job-summary{ background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 1px 2px rgba(8,39,57,.05), 0 30px 60px -42px rgba(8,39,57,.3); padding:26px; }
.job-summary h3{ font-size:1.05rem; margin:0 0 18px; }
.job-summary dl{ margin:0; display:flex; flex-direction:column; }
.job-summary .row{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-top:1px solid var(--line); }
.job-summary .row:first-of-type{ border-top:0; padding-top:0; }
.job-summary .row .ji{ flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--bg-soft); color:var(--green); border:1px solid var(--line); }
.job-summary .row .ji svg{ width:17px; height:17px; }
.job-summary dt{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:2px; }
.job-summary dd{ margin:0; font-weight:600; color:var(--ink); font-size:.95rem; line-height:1.4; }
.job-summary .btn{ width:100%; margin-top:22px; }
.job-summary .share-note{ margin-top:14px; font-size:.82rem; color:var(--ink-faint); text-align:center; }
.job-summary .share-note a{ color:var(--green-deep); font-weight:600; }

/* Hiring steps reused on job pages */
.job-steps{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; max-width:68ch; }
@media(max-width:560px){ .job-steps{ grid-template-columns:1fr; } }
.job-step{ display:flex; gap:14px; align-items:flex-start; padding:18px 20px; background:#fff; border:1px solid var(--line); border-radius:15px; }
.job-step .num{ flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.95rem; background:var(--grad-bright); color:#fff; }
.job-step h4{ margin:0 0 3px; font-size:.98rem; }
.job-step p{ margin:0; font-size:.88rem; color:var(--ink-soft); line-height:1.5; }

/* Bottom apply band */
.job-cta{ background:linear-gradient(150deg,#103E54 0%,#11524A 48%,#176046 100%); border-radius:26px; padding:clamp(38px,5vw,60px); text-align:center; color:#fff; position:relative; overflow:hidden; }
.job-cta h2{ color:#fff; font-size:clamp(1.6rem,3vw,2.3rem); margin:0 0 12px; }
.job-cta p{ color:rgba(255,255,255,.85); max-width:54ch; margin:0 auto 28px; line-height:1.6; }
.job-cta .btn-row{ justify-content:center; }
.job-cta .btn.on-dark{ background:linear-gradient(135deg,#1E8F5C 0%,#15786E 100%); color:#fff; border:1px solid rgba(255,255,255,.2); box-shadow:0 16px 38px -14px rgba(7,44,40,.6); }
.job-cta .btn.on-dark:hover{ background:linear-gradient(135deg,#23A066 0%,#18867A 100%); }
.job-cta .btn.ghost{ color:#fff; border-color:rgba(255,255,255,.4); }
.job-cta .btn.ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; }

/* Back link */
.job-back{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--ink-soft); font-size:.92rem; }
.job-back svg{ width:16px; height:16px; }
.job-back:hover{ color:var(--green-deep); }

/* ======================================================================
   Interactive polish - hover life across the page
   ====================================================================== */

/* Hero fact chips lift + brighten */
.job-fact{ transition:background .25s, border-color .25s, transform .25s; }
.job-fact:hover{ background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.45); transform:translateY(-2px); }
.job-region-line .jr-flags{ transition:transform .4s cubic-bezier(.2,.8,.2,1); transform-origin:left center; }
.job-region-line:hover .jr-flags{ transform:scale(1.06) translateY(-1px); }

/* Section icons animate when you hover the section */
.job-block-ic{ transition:transform .35s cubic-bezier(.2,.8,.2,1), background .35s, color .35s, border-color .35s; }
.job-main > section:hover .job-block-ic{ background:var(--grad-bright); color:#fff; border-color:transparent; transform:rotate(-5deg) scale(1.07); box-shadow:0 14px 28px -14px rgba(7,44,40,.5); }

/* Checklist items - slide + the tick fills with the brand gradient */
.job-list li{ transition:transform .25s cubic-bezier(.2,.8,.2,1), color .25s; }
.job-list li::before{ transition:background-color .25s, border-color .25s, box-shadow .25s, transform .25s; }
.job-list li:hover{ transform:translateX(5px); color:var(--ink); }
.job-list li:hover::before{
  border-color:transparent;
  background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 6'/%3E%3C/svg%3E"), linear-gradient(135deg,#1E8F5C,#15786E);
  background-repeat:no-repeat,no-repeat;
  background-position:center,center;
  background-size:14px,cover;
  box-shadow:0 8px 18px -8px rgba(7,44,40,.55);
  transform:scale(1.08);
}

/* Summary card - each row's icon lights up on hover */
.job-summary .row .ji{ transition:background .25s, color .25s, border-color .25s, transform .25s; }
.job-summary .row:hover .ji{ background:var(--grad-bright); color:#fff; border-color:transparent; transform:scale(1.09) rotate(-4deg); }

/* Hiring-step cards lift with an accent + number kick */
.job-step{ position:relative; overflow:hidden; transition:transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s, border-color .32s; }
.job-step::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--grad-bright); transform:scaleY(0); transform-origin:top; transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.job-step:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -30px rgba(13,42,32,.42); border-color:#CFE6D7; }
.job-step:hover::before{ transform:scaleY(1); }
.job-step .num{ transition:transform .32s cubic-bezier(.2,.8,.2,1); }
.job-step:hover .num{ transform:scale(1.1) rotate(-5deg); }

@media (prefers-reduced-motion: reduce){
  .job-fact, .job-region-line .jr-flags, .job-block-ic, .job-list li, .job-list li::before,
  .job-summary, .job-summary .row .ji, .job-step, .job-step .num{ transition:none; }
}