/* Career detail styles moved unchanged from pineverse.css. */
/* ══════════════════════════════════════════════════════
   JOB DETAIL  —  Figma node 246:500 (1440 canvas)

   Canvas lock + rhythm tokens as on the About page, plus
   ONE type scale used by every element on the page, so the
   description, the labels, the inputs and the buttons all
   sit on the same steps.
══════════════════════════════════════════════════════ */

.job-page {
  /* container 170 → 1320 (the rules); copy column is 1089 wide inside it */
  --jb-gl: var(--pv-gutter);
  --jb-gr: var(--pv-gutter);

  /* ── vertical rhythm ── */
  --jb-block: clamp(48px, 5.63vw, 81px);   /* block ↔ block, rule spacing  */
  --jb-lg:    clamp(32px, 3.40vw, 49px);   /* group → group inside a block */
  --jb-md:    clamp(20px, 2.01vw, 29px);   /* field → field                */
  --jb-sm:    clamp(12px, 1.18vw, 17px);   /* small gaps                   */

  /* ── ONE type scale for the whole page ── */
  --jb-fs-display: clamp(30px, 3.34vw, 48px);  /* hero heading, job title  */
  --jb-fs-h2:      clamp(21px, 1.81vw, 26px);  /* section headings         */
  --jb-fs-lead:    clamp(17px, 1.39vw, 20px);  /* opening paragraph        */
  --jb-fs-body:    clamp(16px, 1.25vw, 18px);  /* copy, bullets, inputs    */
  --jb-fs-meta:    clamp(16px, 1.53vw, 22px);  /* meta line, back link     */
  --jb-fs-label:   clamp(13px, 1.04vw, 15px);  /* field labels, notes      */
  --jb-lh-copy: 1.75;

  --jb-ink:   #e6e6e6;
  --jb-dim:   #9a9a9a;
  --jb-lime:  #b7f66e;
  --jb-green: #18c03d;

  overflow-x: clip;
}

/* ══════════════════════════════════════════════════════
   HERO  (Figma 0 → 569)
══════════════════════════════════════════════════════ */
.jb-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(340px, 39.5vw, 569px);
  background: var(--jb-lime);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  /* Figma: heading's right edge at 1369, i.e. a 71px gutter */
  padding: 0 var(--pv-gutter) clamp(56px, 8.2vw, 118px);
}

.jb-hero-pattern {
  position: absolute;
  top: 0;
  height: 100%;
  width: 54.2%;
  z-index: -1;
  opacity: 0.55;
  pointer-events: none;
}

.jb-hero-pattern img { width: 100%; height: 100%; object-fit: cover; }
.jb-hero-pattern--left  { left: 0; }
.jb-hero-pattern--right { left: 49.1%; }

.jb-hero-heading {
  max-width: 571px;
  margin: 0;
  font-family: 'Host Grotesk', sans-serif;
  font-size: var(--jb-fs-display);
  font-weight: 400;
  line-height: 1.33;
  letter-spacing: -0.04em;
  text-transform: capitalize;
  text-align: right;
  color: #021717;
}

/* ══════════════════════════════════════════════════════
   BODY
══════════════════════════════════════════════════════ */
.jb-body {
  background: #080808;
  color: var(--jb-ink);
  padding: calc(var(--jb-block) * 1.5) var(--jb-gr)
           calc(var(--jb-block) * 2) var(--jb-gl);
}

/* every block sits in the 1089 column, flush with the site gutter (the
   Figma 7px nudge is gone — it put these 7px inside the band's own edge) */
.jb-back,
.jb-title,
.jb-meta,
.jb-article,
.jb-apply { max-width: 1089px; }

/* ── Back link ── */
.jb-back {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  /* no negative pull: the arrow starts on the gutter like everything else */
  font-family: 'Host Grotesk', sans-serif;
  font-size: var(--jb-fs-meta);
  font-weight: 400;
  line-height: 1.33;
  letter-spacing: -0.03em;
  text-transform: capitalize;
  color: var(--jb-green);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.25s ease, gap 0.25s ease;
}

.jb-back:hover { color: var(--jb-lime); gap: 26px; }

.jb-back-arrow {
  width: 10px;
  height: 19px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.jb-back:hover .jb-back-arrow { transform: translateX(-3px); }

/* ── Title + meta ── */
.jb-title {
  margin-top: var(--jb-lg);
  font-family: 'Host Grotesk', sans-serif;
  font-size: var(--jb-fs-display);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.04em;
  text-transform: capitalize;
  color: #ffffff;
}

.jb-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  font-family: 'Host Grotesk', sans-serif;
  font-size: var(--jb-fs-meta);
  font-weight: 400;
  line-height: 1.33;
  letter-spacing: -0.03em;
  text-transform: capitalize;
  color: var(--jb-dim);
}

.jb-meta-icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  color: var(--jb-lime);
}

/* ── Description ── */
.jb-article { margin-top: var(--jb-block); }

.jb-h {
  margin-top: var(--jb-lg);
  font-family: 'Host Grotesk', sans-serif;
  font-size: var(--jb-fs-h2);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.jb-article > .jb-h:first-child { margin-top: 0; }

.jb-p,
.jb-list li {
  font-family: 'Host Grotesk', sans-serif;
  font-size: var(--jb-fs-body);
  font-weight: 300;
  line-height: var(--jb-lh-copy);
  letter-spacing: -0.01em;
  color: var(--jb-ink);
  /* full-width justified copy — hyphenation keeps the word gaps even */
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.jb-p { margin-top: var(--jb-sm); }
.jb-h + .jb-p { margin-top: 10px; }

.jb-p--lead {
  margin-top: 0;
  font-size: var(--jb-fs-lead);
  color: #f2f2f2;
}

.jb-strong { font-weight: 500; color: #ffffff; }

.jb-list {
  margin: 12px 0 0;
  padding-left: 26px;
  list-style: disc;
  display: grid;
  gap: 8px;
}

.jb-list li::marker { color: var(--jb-lime); }

/* ── Rules (Figma: 170 → 1320, i.e. the full container) ── */
.jb-rule {
  height: 0;
  margin: var(--jb-block) 0;
  border: none;
  border-top: 1px solid rgba(230, 230, 230, 0.16);
}

.jb-rule--last { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════
   APPLY  —  premium panel
══════════════════════════════════════════════════════ */
.jb-apply-heading {
  font-family: 'Host Grotesk', sans-serif;
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.04em;
  text-transform: capitalize;
  color: #ffffff;
}

.jb-required-note {
  margin-top: 10px;
  font-family: 'Host Grotesk', sans-serif;
  font-size: var(--jb-fs-label);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--jb-dim);
}

.jb-req { color: var(--jb-lime); }

.jb-optional {
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 99px;
  border: 1px solid rgba(230, 230, 230, 0.2);
  font-size: 0.8em;
  font-weight: 400;
  color: var(--jb-dim);
  text-transform: none;
  letter-spacing: 0;
  vertical-align: 1px;
}

.jb-apply-card {
  margin-top: var(--jb-lg);
  padding: clamp(26px, 3.34vw, 48px);
  border: 1px solid rgba(230, 230, 230, 0.12);
  border-radius: 24px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(183, 246, 110, 0.06), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.012));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.38);
}

.jb-form { display: grid; gap: var(--jb-md); }

.jb-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--jb-md);
}

/* ── Fields ── */
.jb-field {
  display: block;
  padding: 14px 20px 16px;
  border: 1px solid rgba(230, 230, 230, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  cursor: text;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.jb-field:hover { border-color: rgba(230, 230, 230, 0.28); }

.jb-field:focus-within {
  border-color: var(--jb-lime);
  background: rgba(183, 246, 110, 0.05);
  box-shadow: 0 0 0 3px rgba(183, 246, 110, 0.14);
}

.jb-field-label {
  display: block;
  font-family: 'Host Grotesk', sans-serif;
  font-size: var(--jb-fs-label);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-transform: capitalize;
  color: var(--jb-dim);
  pointer-events: none;
}

.jb-field-input {
  width: 100%;
  margin-top: 6px;
  padding: 0;
  border: none;
  outline: none;
  background: none;
  font-family: 'Host Grotesk', sans-serif;
  font-size: var(--jb-fs-body);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.jb-field-input::placeholder { color: rgba(230, 230, 230, 0.32); font-weight: 300; }

.jb-field-input:-webkit-autofill {
  -webkit-text-fill-color: #ffffff;
  transition: background-color 9999s;
}

/* ── Phone row ── */
.jb-phone-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 14px;
}

.jb-field--code { cursor: default; }

.jb-code {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 6px;
  font-family: 'Host Grotesk', sans-serif;
  font-size: var(--jb-fs-body);
  font-weight: 400;
  line-height: 1.6;
  color: #ffffff;
  white-space: nowrap;
}

.jb-flag {
  display: flex;
  flex-direction: column;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}

.jb-flag-stripe   { flex: 1; }
.jb-flag-saffron  { background: #ff7337; }
.jb-flag-white    { background: #ffffff; }
.jb-flag-green    { background: #18c03d; }

/* ── Upload drop zones ── */
.jb-upload { display: block; }

.jb-upload-label {
  display: block;
  margin-bottom: 10px;
  pointer-events: auto;
}

.jb-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.jb-drop {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 108px;
  padding: 20px 24px;
  border: 1.5px dashed rgba(183, 246, 110, 0.36);
  border-radius: 16px;
  background: rgba(183, 246, 110, 0.03);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.2s ease;
}

.jb-drop:hover {
  border-color: rgba(183, 246, 110, 0.7);
  background: rgba(183, 246, 110, 0.07);
}

.jb-upload.is-dragover .jb-drop {
  border-color: var(--jb-lime);
  background: rgba(183, 246, 110, 0.12);
  transform: scale(1.005);
}

.jb-upload.has-file .jb-drop {
  border-style: solid;
  border-color: rgba(183, 246, 110, 0.45);
}

.jb-upload-input:focus-visible + .jb-drop {
  outline: 2px solid var(--jb-lime);
  outline-offset: 3px;
}

.jb-drop-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(183, 246, 110, 0.3);
  background: rgba(183, 246, 110, 0.08);
  color: var(--jb-lime);
}

.jb-drop-icon svg { width: 24px; height: 24px; }

.jb-drop-text { display: grid; gap: 5px; min-width: 0; }

.jb-drop-title {
  font-family: 'Host Grotesk', sans-serif;
  font-size: var(--jb-fs-body);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.jb-drop-title u { text-underline-offset: 3px; color: var(--jb-lime); }

.jb-drop-note {
  font-family: 'Host Grotesk', sans-serif;
  font-size: var(--jb-fs-label);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--jb-dim);
}

.jb-drop-note[hidden] { display: none; }

.jb-upload-file {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 11px 16px;
  border-radius: 12px;
  border: 1px solid rgba(183, 246, 110, 0.28);
  background: rgba(183, 246, 110, 0.07);
  font-family: 'Host Grotesk', sans-serif;
  font-size: var(--jb-fs-label);
  font-weight: 400;
  line-height: 1.45;
  color: var(--jb-lime);
}

.jb-upload-file[hidden] { display: none; }

.jb-upload-file.is-error {
  border-color: rgba(255, 125, 92, 0.35);
  background: rgba(255, 125, 92, 0.08);
  color: #ff9c81;
}

.jb-upload-clear {
  margin-left: auto;
  border: none;
  background: none;
  padding: 0 0 0 8px;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
  font-size: 15px;
  line-height: 1;
}

.jb-upload-clear:hover { opacity: 1; }

/* ── Submit (not in the Figma frame — added so the form can be sent) ── */
.jb-submit-row {
  margin-top: var(--jb-sm);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.jb-submit {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 62px;
  padding: 0 36px;
  border: none;
  border-radius: 63px;
  background: var(--jb-lime);
  cursor: pointer;
  font-family: 'Host Grotesk', sans-serif;
  font-size: var(--jb-fs-body);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #021717;
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.jb-submit svg { width: 20px; height: 20px; transition: transform 0.25s ease; }
.jb-submit:hover svg { transform: translateX(4px); }

.jb-submit:hover {
  background: #a7fc00;
  transform: translateY(-1px);
  box-shadow: 0 14px 38px rgba(167, 252, 0, 0.24);
}

.jb-submit:disabled { opacity: 0.55; pointer-events: none; }

.jb-form-error {
  font-family: 'Host Grotesk', sans-serif;
  font-size: var(--jb-fs-label);
  color: #ff9c81;
}

.jb-form-error[hidden] { display: none; }

/* ── Sticky apply CTA (addition, not in the frame) ── */
.jb-sticky-apply {
  position: fixed;
  right: clamp(16px, 2.8vw, 40px);
  bottom: clamp(16px, 2.8vw, 40px);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 26px;
  border-radius: 63px;
  background: var(--jb-lime);
  color: #021717;
  text-decoration: none;
  font-family: 'Host Grotesk', sans-serif;
  font-size: var(--jb-fs-body);
  font-weight: 500;
  letter-spacing: -0.01em;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.jb-sticky-apply[hidden] { display: none; }
.jb-sticky-apply.is-in { opacity: 1; transform: none; }
.jb-sticky-apply svg { width: 20px; height: 20px; }
.jb-sticky-apply:hover { background: #a7fc00; }

/* the footer must clear the body block */
.job-page > .pv-footer { position: relative; z-index: 6; }

/* On the green hero the white wordmark washes out — darken it for this page.
   Swap for a dark logo asset when there is one. */
body.page-job header .logo-img { filter: brightness(0); }

/* ══════════════════════════════════════════════════════
   JOB DETAIL — RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .job-page { --jb-gl: var(--pv-gutter); --jb-gr: var(--pv-gutter); }

}

@media (max-width: 1024px) {
  .job-page { --jb-gl: var(--pv-gutter); --jb-gr: var(--pv-gutter); }

}

@media (max-width: 760px) {
  .job-page { --jb-gl: var(--pv-gutter); --jb-gr: var(--pv-gutter); }

  .jb-hero { justify-content: flex-start; }
  .jb-hero-heading { text-align: left; }

  .jb-back,
  .jb-title,
  .jb-meta,
  .jb-article,
  .jb-apply { margin-left: 0; }

  .jb-back { gap: 14px; }

  /* justified text needs room; below this it reads better ragged-right */
  .jb-p,
  .jb-list li { text-align: left; hyphens: none; }

  .jb-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .jb-phone-row { grid-template-columns: 108px minmax(0, 1fr); }

  .jb-drop { flex-direction: column; align-items: flex-start; gap: 14px; min-height: 0; }

  .jb-submit { width: 100%; justify-content: center; }
  .jb-sticky-apply { height: 50px; padding: 0 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .jb-sticky-apply,
  .jb-back,
  .jb-back-arrow,
  .jb-drop,
  .jb-submit { transition-duration: 0.01ms !important; }
}