/**
 * Single Job Opening – page-scoped only.
 *
 * The mock-up's `p-*` block from `_mockups/job-detail.html`, renamed into the
 * template's own namespace. The kit already carries the shape of the page:
 * `.page-hero--compact` and `.breadcrumb` from pages.css §1–2, `.prose` from §4,
 * `.with-aside` from §5, `.card` from §6, `.job-row` from §10, `.tag` and
 * `.placeholder-note` from §11, `.callout` from §18.
 *
 * Two things in the mock-up are deliberately NOT ported:
 *
 *   - its `.p-cta .btn--ghost` patch, which repaints a kit button so it survives
 *     the navy band. The kit already has `.btn--ghost-on-dark` for that, and the
 *     template uses it.
 *   - its `.p-dev` "FOR THE BUILD" note, which is scaffolding for the design
 *     review and never belonged on a public page.
 */

/* ----------------------------------------------------------------
   1. HERO
   ---------------------------------------------------------------- */

.job-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-block-start: var(--s-4);
}

/* Employer, posted and closes read as one line separated by middots, and wrap
   as three lines rather than being cut off. */
.job-detail__sub {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--on-dark-strong);
  max-inline-size: none;
}
.job-detail__sub span:not(:first-child)::before {
  content: "·";
  margin-inline-end: var(--s-1);
  color: var(--on-dark-faint);
}

/* The placeholder chip is a light chip on the blue hero and has to stay one.
   `.placeholder-note` is one class; `.page-hero p` is one class plus an element
   and the chip is a <p>, so the kit paints the chip's text white on its own
   pale gold fill at 1.07:1 – "unreadable text on a yellow background", exactly
   as the review put it. Two classes wins it back to --gold-deep on
   --gold-tint-15 at 5.06:1. Same patch as `.qr-explainer .placeholder-note`. */
.job-detail__hero .placeholder-note {
  color: var(--gold-deep);
  margin-block-start: var(--s-4);
  line-height: var(--leading-snug);
}

/* ----------------------------------------------------------------
   2. MAIN COLUMN
   ---------------------------------------------------------------- */

/* `.prose > * + *` owls the top-level children; each reveal group needs the
   same rhythm inside itself. */
.job-detail__block > * + * { margin-block-start: var(--s-3); }

.job-detail__figure img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* The closed notice. `.callout--warn` sets its own body colour, so a link
   inside it has to be told to look like one. */
.job-detail__notice { margin-block-end: var(--s-5); }
.job-detail__notice a,
.job-detail__link {
  color: var(--red-deep);
  font-weight: 700;
  text-decoration: underline;
  border-block-end: none;
}
.job-detail__notice a:hover,
.job-detail__link:hover { color: var(--red); }

/* ----------------------------------------------------------------
   3. THE APPLY PANEL – the most important object on the page
   ---------------------------------------------------------------- */

.job-detail__apply {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lift);
  padding: var(--s-4);
}
.job-detail__apply::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 4px;
  background: linear-gradient(90deg, var(--blue), var(--blue-deep));
}
.job-detail__apply h2 { font-size: var(--text-lg); }
.job-detail__apply-sub {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  margin-block-start: var(--s-1);
}

.job-detail__facts { margin-block-start: var(--s-3); }
.job-detail__facts > div:not(.job-detail__salary) {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  padding-block: var(--s-1);
  border-block-end: 1px solid var(--line-soft);
  font-size: var(--text-s);
}
.job-detail__facts dt {
  color: var(--ink-faint);
  font-weight: 600;
  flex: none;
}
.job-detail__facts > div:not(.job-detail__salary) dd {
  font-weight: 700;
  color: var(--ink);
  text-align: end;
}

/* Salary is an answer, not a gap. It is a fixed string – "Per approved job
   order", from finas_salary_line() – and it is given the answer-first treatment
   precisely so nobody reads the absence of a figure as an omission. */
.job-detail__salary {
  background: var(--blue-tint-05);
  border-inline-start: 3px solid var(--blue);
  border-start-start-radius: 0;
  border-start-end-radius: var(--r-s);
  border-end-end-radius: var(--r-s);
  border-end-start-radius: 0;
  padding-block: var(--s-2);
  padding-inline: var(--s-3);
  margin-block-start: var(--s-3);
}
.job-detail__salary dt {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--blue);
}
.job-detail__salary dd b {
  display: block;
  font-family: var(--display);
  font-size: var(--text-base);
  color: var(--navy);
  margin-block-start: var(--s-1);
}
.job-detail__salary dd small {
  display: block;
  font-size: var(--text-xs);
  color: var(--ink-soft);
  margin-block-start: var(--s-1);
}

.job-detail__actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-block-start: var(--s-4);
}
.job-detail__actions .btn { inline-size: 100%; }

.job-detail__fineprint {
  display: flex;
  align-items: flex-start;
  gap: var(--s-1);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  line-height: var(--leading-snug);
  margin-block-start: var(--s-3);
}
/* Sized in em against the fine print's own --text-xs, so the shield tracks the
   text under zoom instead of drifting away from it. */
.job-detail__fineprint svg {
  inline-size: 1.15em;
  block-size: 1.15em;
  flex: none;
  color: var(--blue);
}

/* ----------------------------------------------------------------
   4. SECOND ASIDE CARD
   ---------------------------------------------------------------- */

.job-detail__side .card h2 { font-size: var(--text-base); }
.job-detail__side-links {
  display: flex;
  flex-direction: column;
  margin-block-start: var(--s-1);
}
/* 44px is the WCAG target-size floor rather than a design value. */
.job-detail__side-links .link-cta {
  min-block-size: 44px;
  align-items: center;
  padding-block: var(--s-1);
  font-size: var(--text-s);
}

/* ----------------------------------------------------------------
   5. SIMILAR ROLES
   ---------------------------------------------------------------- */

.job-detail__similar {
  max-inline-size: var(--container-width);
  margin-inline: auto;
  display: grid;
  gap: var(--s-3);
}