/* Job board: /jobs and /jobs/:slug (rendered by api/jobs/page.js). */

.jobs-wrap { max-width: 960px; }
.jobs-sub {
  margin: 16px auto 0; max-width: 560px;
  font-size: 15px; line-height: 1.6; color: var(--wh-55);
}

/* ── Chips ─────────────────────────────────────────────────── */
.job-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.job-chips-center { justify-content: center; margin-top: 4px; }
.job-chip {
  display: inline-block; padding: 5px 10px;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wh-70); background: var(--wh-06); border: 1px solid var(--wh-06);
}
.job-chip:first-child { color: #fff; background: var(--red-subtle); border-color: rgba(232,0,29,0.35); }

/* ── List ──────────────────────────────────────────────────── */
.jobs-count {
  font-size: var(--text-sm); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wh-40); margin-bottom: 16px;
}
.jobs-count strong { color: #fff; font-family: var(--race); font-weight: 400; font-size: 15px; letter-spacing: 0.04em; }
.job-list { display: grid; gap: 12px; }

/* Each role reads like a line on a pit board: big race-font number, the
   role, then the call to action at the far edge. */
.job-card {
  position: relative; display: grid; grid-template-columns: 72px 1fr auto; gap: 24px; align-items: center;
  padding: 26px 28px; text-decoration: none; color: inherit;
  background: var(--d2); border: 1px solid var(--wh-06);
  transition: background var(--dur-md), border-color var(--dur-md), transform var(--dur-md) var(--ease-out);
}
.job-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red);
  transform: scaleY(0.35); transform-origin: center; transition: transform var(--dur-md) var(--ease-out);
}
.job-card:hover, .job-card:focus-visible { background: var(--d3); border-color: var(--wh-15); transform: translateX(4px); }
.job-card:hover::before, .job-card:focus-visible::before { transform: scaleY(1); }
.job-card:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.job-card-num {
  font-family: var(--race); font-size: 44px; line-height: 1; color: transparent;
  -webkit-text-stroke: 1px var(--wh-25); transition: -webkit-text-stroke-color var(--dur-md);
}
.job-card:hover .job-card-num { -webkit-text-stroke-color: var(--red); }
.job-card-body { display: grid; gap: 10px; min-width: 0; }
.job-card-title {
  font-family: var(--race); font-size: clamp(18px, 2.2vw, 24px); text-transform: uppercase;
  letter-spacing: 0.02em; line-height: 1.05; color: #fff;
}
.job-card-summary { font-size: 14px; line-height: 1.6; color: var(--wh-55); }
.job-card-go {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red-lt);
}
.job-card-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-md) var(--ease-out); }
.job-card:hover .job-card-go svg { transform: translateX(4px); }

.jobs-empty {
  text-align: center; padding: 56px 28px; background: var(--d2); border: 1px dashed var(--wh-15);
}
.jobs-empty-title { font-family: var(--race); font-size: 22px; text-transform: uppercase; margin-bottom: 12px; }
.jobs-empty p { max-width: 520px; margin: 0 auto 24px; font-size: 14px; line-height: 1.7; color: var(--wh-55); }
.jobs-empty p a { color: var(--red-lt); }

/* ── Detail ────────────────────────────────────────────────── */
.job-banner {
  margin-bottom: 32px; padding: 14px 18px; font-size: 14px; color: var(--wh-90);
  background: var(--d2); border: 1px solid var(--wh-15); border-left: 3px solid var(--red);
}
.job-banner a { color: var(--red-lt); }
.job-banner-preview { border-left-color: var(--yellow); background: var(--yellow-subtle); }

.job-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; align-items: start; }
.job-summary { font-size: 17px !important; line-height: 1.65 !important; color: var(--wh-90) !important; margin-bottom: 24px !important; }
.job-desc h3 { margin-top: 28px; }
.job-desc ul { margin-bottom: 16px; }
.job-desc li::marker { color: var(--red); }

.job-glance {
  position: sticky; top: calc(var(--hdr-h) + 24px);
  padding: 24px; background: var(--d2); border: 1px solid var(--wh-06); border-top: 3px solid var(--red);
}
.job-glance-kicker {
  font-family: var(--race); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--red-lt); margin-bottom: 12px;
}
.job-glance dl { margin: 0 0 20px; }
.job-glance-row { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--wh-06); }
.job-glance-row dt { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wh-40); }
.job-glance-row dd { margin: 0; font-size: 14px; color: #fff; }
.job-glance-cta { width: 100%; padding-left: 16px; padding-right: 16px; }
.job-share {
  display: block; margin-top: 14px; text-align: center;
  font-size: var(--text-sm); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wh-55); text-decoration: none;
}
.job-share:hover { color: #fff; }

/* ── Apply form ────────────────────────────────────────────── */
.job-apply {
  margin-top: 64px; padding: 40px; background: var(--d1); border: 1px solid var(--wh-06);
  scroll-margin-top: calc(var(--hdr-h) + 16px);
}
.job-apply h2 {
  font-family: var(--race); font-size: var(--text-h2); text-transform: uppercase; line-height: 1; margin-bottom: 8px;
}
.job-apply h2 em { font-style: normal; color: var(--red); }
.job-apply-lede { font-size: 14px; color: var(--wh-55); margin-bottom: 28px; }
.job-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.job-form textarea.form-input { resize: vertical; min-height: 140px; line-height: 1.6; }
.job-form .form-input[aria-invalid="true"] { border-color: var(--red); }

.job-drop {
  position: relative; display: flex; align-items: center; gap: 16px; cursor: pointer;
  padding: 20px; background: var(--d3); border: 1px dashed var(--wh-25);
  transition: border-color var(--dur-micro), background var(--dur-micro);
}
.job-drop:hover, .job-drop.is-over { border-color: var(--red); background: var(--red-subtle); }
.job-drop:focus-within { outline: 2px solid var(--red); outline-offset: 2px; }
.job-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.job-drop-icon svg { width: 30px; height: 30px; fill: none; stroke: var(--wh-55); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.job-drop-text { font-size: 13px; line-height: 1.5; color: var(--wh-55); }
.job-drop-text strong { color: #fff; }
.job-drop.has-file { border-style: solid; border-color: var(--green); background: rgba(34,197,94,0.06); }
.job-drop.has-file .job-drop-text { display: none; }
.job-drop-file { font-size: 14px; color: #fff; word-break: break-all; }
.job-drop-file small { display: block; color: var(--wh-40); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; }

.job-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.job-form-err { min-height: 20px; margin: 4px 0 12px; font-size: 13px; color: var(--red-lt); }
.job-submit { width: 100%; }
.job-submit[disabled] { opacity: 0.6; cursor: progress; }

.job-done { text-align: center; padding: 24px 0 8px; }
.job-done-check {
  width: 64px; height: 64px; margin: 0 auto 18px; display: grid; place-items: center;
  border: 2px solid var(--green); border-radius: 50%;
}
.job-done-check svg { width: 30px; height: 30px; fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 30; stroke-dashoffset: 30; animation: job-check 0.5s 0.15s var(--ease-out) forwards; }
@keyframes job-check { to { stroke-dashoffset: 0; } }
.job-done h3 { font-family: var(--race); font-size: 24px; text-transform: uppercase; margin-bottom: 10px; }
.job-done p { font-size: 14px; line-height: 1.7; color: var(--wh-70); max-width: 480px; margin: 0 auto 22px; }

@media (max-width: 860px) {
  .job-layout { grid-template-columns: 1fr; gap: 24px; }
  .job-glance { position: static; order: -1; }
}
@media (max-width: 640px) {
  .job-card { grid-template-columns: 1fr; gap: 12px; padding: 22px 20px; }
  .job-card-num { font-size: 30px; }
  .job-card-go { margin-top: 4px; }
  .job-apply { padding: 28px 18px; margin-top: 40px; }
  .job-form .form-row { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .job-card, .job-card::before, .job-card-go svg { transition: none; }
  .job-done-check svg { animation: none; stroke-dashoffset: 0; }
}