/**
 * Job post pages.
 *
 * Deliberately does NOT reuse the section components in service-page.css. Those — the photo hero,
 * the 4-up stat band, the tick-mark trust strip, the inverted CTA band — exist to sell a service to
 * a buyer, and a job post that wears them reads as an advert rather than as a description of a job.
 * What is borrowed is only the shell: .service-page, .service-container, .service-nav and
 * .service-button, so the page keeps the site's chrome and its one button style.
 *
 * The shape is the one every job board converged on for good reason: a single reading column at a
 * comfortable measure, and a sticky card holding the facts plus the apply button, so "apply" is
 * never more than one click away no matter how far down the description someone has read.
 */

/* ---- Header ------------------------------------------------------------- */

.job-head {
  padding: 64px 0 44px;
  border-bottom: 1px solid var(--hairline);
}

.job-eyebrow {
  margin: 0 0 16px;
  color: var(--accent-ember-link);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Display font, but nowhere near hero scale — this is a role name, not a headline. */
.job-title {
  margin: 0;
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.4vw, 3rem);
  line-height: 1.06;
  letter-spacing: -.035em;
}

/* Dot-separated rather than pills: a quiet fact line, not a row of tags competing with the title. */
.job-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 20px 0 0;
  color: var(--text-muted);
  font-size: .95rem;
}

.job-meta span {
  color: var(--text-faint);
}

.job-summary {
  max-width: 62ch;
  margin: 22px 0 0;
  color: var(--text-body);
  font-size: 1.08rem;
  line-height: 1.65;
}

/* ---- Two-column body ---------------------------------------------------- */

/* The aside is FIRST in the DOM so that on a phone, where this collapses to one column, the facts
   and the apply button land directly under the title instead of after the whole description. On
   desktop it is placed back into column two by grid-column/grid-row. */
.job-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 72px;
  align-items: start;
  padding: 56px 0 96px;
}

.job-body {
  grid-column: 1;
  grid-row: 1;
  max-width: 68ch;
}

.job-aside {
  grid-column: 2;
  grid-row: 1;
  /* 75px of sticky nav (.service-nav-inner min-height 74px + its 1px border) plus breathing room. */
  position: sticky;
  top: 99px;
  /* A viewport shorter than the card would otherwise pin its top and clip the apply button. */
  max-height: calc(100vh - 123px);
  overflow-y: auto;
}

.job-card {
  padding: 26px 26px 24px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.job-card-heading {
  margin: 0 0 18px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.job-facts {
  margin: 0 0 24px;
}

.job-facts > div + div {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

.job-facts dt {
  margin: 0 0 4px;
  color: var(--text-muted);
  font-size: .82rem;
}

.job-facts dd {
  margin: 0;
  color: var(--text-primary);
  font-size: .95rem;
  line-height: 1.5;
}

.job-apply {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.job-card-note {
  margin: 12px 0 0;
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.5;
}

/* ---- Description -------------------------------------------------------- */

.job-section + .job-section {
  margin-top: 44px;
  padding-top: 44px;
  border-top: 1px solid var(--hairline);
}

/* Body font, not display: these are document headings inside one article, and at display scale they
   would read as separate landing-page sections again. */
.job-section h2 {
  margin: 0 0 18px;
  font-family: var(--font-body);
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.job-section p {
  margin: 0 0 16px;
  color: var(--text-body);
  line-height: 1.75;
}

.job-section > p:last-child {
  margin-bottom: 0;
}

.job-list {
  margin: 0;
  padding-left: 20px;
  color: var(--text-body);
  line-height: 1.75;
}

.job-list li + li {
  margin-top: 8px;
}

/* Numbered responsibilities. The counter sits in the margin so the titles stay flush with the rest
   of the column and the list reads as part of the document rather than as a card grid. */
.job-tasks {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: job-task;
}

.job-tasks li {
  position: relative;
  padding-left: 44px;
  counter-increment: job-task;
}

.job-tasks li + li {
  margin-top: 26px;
}

.job-tasks li::before {
  content: counter(job-task, decimal-leading-zero);
  position: absolute;
  top: 2px;
  left: 0;
  color: var(--accent-ember-link);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
}

.job-tasks h3 {
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.job-tasks p {
  margin: 0;
  color: var(--text-body);
  line-height: 1.7;
}

/* The "nice to have, not a requirement" line. Set apart so nobody reads it as a seventh item. */
.job-callout {
  margin: 30px 0 0;
  padding: 16px 20px;
  border-left: 2px solid var(--accent-ember);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--canvas-soft);
  color: var(--text-body);
}

/* Closing apply block. A plain bordered panel, not the inverted CTA band — someone who read to the
   bottom is deciding whether to apply, not being converted. */
.job-section.job-apply-block {
  padding: 28px 28px 30px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-lg);
  background: var(--canvas-soft);
}

.job-apply-block .job-apply {
  width: auto;
  margin-top: 4px;
}

/* ---- Narrow ------------------------------------------------------------- */

@media (max-width: 900px) {
  .job-head {
    padding: 44px 0 34px;
  }

  .job-layout {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 36px 0 72px;
  }

  /* One column, source order: the facts card and its apply button come first. */
  .job-aside,
  .job-body {
    grid-column: 1;
    grid-row: auto;
  }

  .job-aside {
    position: static;
  }

  .job-apply-block .job-apply {
    width: 100%;
  }
}