/* ═══════════════════════════════════════════════════════════
   JOB DETAIL PAGE — Product Designer & Developer
   A dedicated page per opening (linked from career/list.html's list),
   built to match the reference job-posting layout: a dark hero with
   the role title and a floating meta-facts card, then a plain white
   body with the responsibilities/qualifications lists.
═══════════════════════════════════════════════════════════ */
#job-hero{
  position:relative;overflow:hidden;background:var(--ink);
  margin-top:-92px;padding:200px 0 72px;
}
.job-hero-grid{
  position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) 420px;gap:56px;align-items:start;
}
.job-back{
  position:absolute;top:-40px;left:0;
  font-size:14px;font-weight:600;color:rgba(255,255,255,.7);
  transition:color .15s;
}
.job-back:hover{color:var(--white)}
.job-hero-main{padding-top:8px}
.job-hero-title{
  font-family:var(--serif);font-weight:400;color:var(--white);
  font-size:clamp(34px,4.6vw,58px);line-height:1.1;letter-spacing:-.005em;
  margin:16px 0 28px;
}
.job-hero-sub{color:rgba(255,255,255,.55);font-size:.6em}
.job-hero-intro{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}
.job-hero-intro p{font-size:17px;line-height:1.75;color:rgba(255,255,255,.75)}
.job-hero-intro b{color:var(--white)}
.job-note{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  padding:18px 22px;display:flex;flex-direction:column;gap:6px;
}
.job-note b{font-size:14px;font-weight:600;color:var(--white)}
.job-note p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.7)}
.job-note em{font-style:italic}

.job-meta-card{
  background:var(--white);border-radius:16px;padding:28px;
  box-shadow:0 30px 60px rgba(0,0,0,.35);
}
.job-meta-row{
  display:flex;align-items:center;gap:14px;padding:16px 0;
  border-bottom:1px solid var(--line);
}
.job-meta-row:first-child{padding-top:0}
.job-meta-icon{
  flex-shrink:0;width:32px;height:32px;color:var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.job-meta-icon svg{width:20px;height:20px}
.job-meta-label{flex:1;font-size:15px;font-weight:600;color:var(--ink)}
.job-meta-value{font-size:15px;color:var(--ink-soft);text-align:right}
.job-apply{width:100%;margin-top:20px}

/* CMS: a role hidden from the list keeps its page, marked closed */
.job-closed-note{
  display:none;margin:-12px 0 24px;padding:12px 18px;
  background:rgba(246,193,148,.12);border:1px solid rgba(246,193,148,.4);
  font-size:15px;line-height:1.6;color:var(--white);
}
[data-job-status="closed"] .job-closed-note{display:block}
[data-job-status="closed"] .job-apply{display:none}
.job-note:has(> p:empty){display:none}
.job-hero-sub:empty{display:none}
/* a fact left empty in the CMS (e.g. no salary range yet) is not shown */
.job-meta-row:has(.job-meta-value:empty){display:none}

#job-body{padding:96px 0}
.job-block{max-width:760px;margin:0 auto 56px}
.job-block h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.6vw,32px);
  color:var(--ink);margin-bottom:24px;
}
.job-list{display:flex;flex-direction:column;gap:16px}
.job-list li{
  position:relative;padding-left:22px;font-size:17px;line-height:1.75;color:var(--ink-soft);
}
.job-list li::before{
  content:'';position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--accent-1);
}
.job-list li b{color:var(--ink)}
.job-apply--end{max-width:760px;margin:0 auto;display:flex}

@media (max-width:900px){
  .job-hero-grid{grid-template-columns:1fr;gap:40px}
  .job-back{position:static;display:inline-block;margin-bottom:24px}
  #job-hero{padding:160px 0 56px}
}