/* ===========================================================================
   jobs.css — shared by the jobs index (/jobs) and every job detail page
   (/jobs/<role>). Keeping the detail styles in one file is what stops the
   two postings from drifting apart. Linked after site.css.
   =========================================================================== */

main { padding-top: 72px; padding-bottom: 88px; }

/* --- Index: intro --------------------------------------------------------- */
.jobs__head { max-width: 720px; }
.jobs__head h1 { margin-top: 10px; }

/* --- Index: one card per opening ------------------------------------------
   Progressive disclosure: the card carries only what someone needs to decide
   whether to open the full posting. */
.openings { display: grid; gap: 20px; margin-top: 36px; max-width: 900px; }
.opening {
  display: block;
  background: #fff;
  border: 1px solid var(--cream-line);
  border-radius: 16px;
  padding: 28px 30px 30px;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.opening:hover {
  border-color: var(--plum);
  box-shadow: 0 10px 28px rgba(42,33,48,.07);
}
.opening__title { font: 700 22px/1.25 var(--display); color: var(--ink); letter-spacing: -.01em; }
.opening__teaser { margin: 10px 0 0; font: 400 15px/1.65 var(--ui); color: var(--body); }
.opening__cta {
  display: inline-block;
  margin-top: 16px;
  font: 600 14px var(--ui);
  color: var(--plum);
  border-bottom: 2px solid var(--amber);
  padding-bottom: 2px;
}

/* Speculative application — not a posting, so it is visually a different kind
   of thing (dashed, no key facts) and carries no JobPosting markup. */
.opening--open {
  background: transparent;
  border-style: dashed;
  border-color: var(--cream-line);
}
.opening--open:hover { box-shadow: none; background: rgba(110,67,112,.02); }

/* --- Key facts: a definition row used on both card and detail page -------- */
.facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.fact {
  font: 600 12px var(--ui);
  color: var(--plum);
  background: rgba(110,67,112,.08);
  border-radius: 999px;
  padding: 6px 13px;
}

/* --- Detail page ---------------------------------------------------------- */
.job { max-width: 780px; }
.breadcrumb {
  font: 500 13.5px var(--ui);
  color: var(--body);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 22px;
}
.breadcrumb:hover { color: var(--plum); }

/* Summary block directly under the H1 — the facts a candidate screens on,
   above the fold, before any prose. */
.summary {
  margin-top: 24px;
  background: #fff;
  border: 1px solid var(--cream-line);
  border-radius: 16px;
  padding: 22px 24px;
}
.summary__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 28px; }
.summary__key {
  font: 600 10.5px var(--ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.summary__val { font: 400 15px/1.5 var(--ui); color: var(--ink); margin-top: 3px; }
.summary__actions { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--card-line); }
.summary__hint { margin: 10px 0 0; font: 400 12.5px/1.5 var(--ui); color: var(--muted); }

/* Tap targets stay >= 44px high (Apple/Google guidance) */
.btn--apply { min-height: 44px; line-height: 1.25; }

/* --- Application block ---------------------------------------------------- */
.apply {
  margin-top: 40px;
  background: #fff;
  border: 1px solid var(--cream-line);
  border-radius: 16px;
  padding: 28px 30px 30px;
}
.apply h2 { font: 700 22px var(--display); color: var(--ink); letter-spacing: -.01em; }
.apply__question {
  margin: 14px 0 0;
  background: var(--cream);
  border: 1px solid var(--card-line);
  border-radius: 12px;
  padding: 14px 16px;
  font: 400 15px/1.65 var(--ui);
  color: var(--body);
}
.apply__actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* --- Process + closing blocks --------------------------------------------- */
.closing { max-width: 780px; margin-top: 44px; }
.closing h2 { font: 700 22px var(--display); color: var(--ink); letter-spacing: -.01em; margin-top: 32px; }

.steps { display: grid; gap: 10px; margin-top: 14px; padding: 0; list-style: none; counter-reset: step; }
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 42px;
  font: 400 15px/1.6 var(--ui);
  color: var(--body);
  min-height: 28px;
  padding-top: 3px;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(110,67,112,.09);
  color: var(--plum);
  font: 700 13px var(--ui);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Always-visible apply bar (detail pages) ------------------------------
   Fixed so the primary action never leaves the screen: below-the-fold apply
   buttons are a known mobile drop-off point. `body` gets bottom padding to
   match, so the bar never covers the footer. */
.applybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: rgba(247,245,240,.94);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--cream-line);
  box-shadow: 0 -6px 24px rgba(42,33,48,.07);
}
.applybar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.applybar__role { min-width: 0; }
.applybar__title {
  font: 700 15px var(--display);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.applybar__meta { font: 400 12.5px var(--ui); color: var(--muted); margin-top: 1px; }
body.has-applybar { padding-bottom: 84px; }

@media (max-width: 900px) {
  /* 16px is under the 24px WCAG 2.5.8 asks of a standalone link. */
  .breadcrumb { display: inline-block; padding: 5px 0; }

  main { padding-top: 48px; padding-bottom: 64px; }
  .jobs h1, .job h1 { font-size: 29px; }
  .opening { padding: 24px 22px 26px; }
  .opening__title { font-size: 19px; }
  .summary { padding: 20px; }
  .summary__grid { grid-template-columns: 1fr; gap: 14px; }
  .apply { padding: 24px 22px 26px; }
  .applybar__meta { display: none; }
  .applybar__title { font-size: 14px; }
}

@media (max-width: 560px) {
  /* On a phone the bar is the button — the role label would crowd it out. */
  .applybar__role { display: none; }
  .applybar__inner { justify-content: stretch; }
  .applybar .btn { flex: 1; }
  body.has-applybar { padding-bottom: 78px; }
}