/* ===================================================================
   JOBS — /jobs/ and /jobs/<slug>/

   Card anatomy is deliberately the same as /serve/ minus the photo:
   white card, hairline border, the site's 10px radius, and the button
   pinned to the base with margin-top:auto so cards of different
   heights still line their buttons up.

   There is no image on a job card on purpose. A stock photo of
   somebody at a laptop would be filler, and the two real postings
   have no artwork of their own.
   =================================================================== */

/* ---------- shared ---------- */

/* Employment badge. Same pill treatment as the event category chips so a
   reader who has seen one recognises the other. */
.job-tag {
  flex: none;
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.job-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem;
}

/* ---------- /jobs/ : intro ---------- */

.job-intro { max-width: 46rem; margin: 0 auto; text-align: center; }
.job-intro .head { margin: 0 0 1.1rem; }
.job-intro p {
  margin: 0 0 0.9rem;
  font-size: 1.02rem; line-height: 1.75; color: var(--slate);
}
.job-intro p:last-child { margin-bottom: 0; }

/* ---------- /jobs/ : cards ---------- */

.job-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  /* Two up, not three: these descriptions are full paragraphs, and a third
     column squeezes them into a column of single words. */
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.job-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(18, 18, 19, 0.08);
}
.job-body {
  display: flex; flex-direction: column; flex: 1;
  padding: clamp(1.5rem, 2.4vw, 2rem);
}
.job-name {
  margin: 0;
  font-size: clamp(1.15rem, 1.9vw, 1.4rem); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.25;
  color: var(--navy);
}
.job-name a { color: inherit; text-decoration: none; }
.job-name a:hover { text-decoration: underline; }

/* The fact row on the card: hours, work week, who it reports to. Separated
   by a dot rather than stacked, so three short facts read as one line. */
.job-meta {
  list-style: none; display: flex; flex-wrap: wrap;
  margin: 0.75rem 0 0; padding: 0;
  font-size: 0.85rem; color: var(--slate);
}
.job-meta li { display: inline-flex; align-items: center; }
.job-meta li + li::before {
  content: "·";
  margin: 0 0.5rem;
  color: var(--line);
}

.job-copy {
  /* The bottom margin matters: margin-top:auto pins the button to the base,
     but that auto space collapses once the copy fills the card and the button
     would sit flush against the last line. Flex containers don't collapse
     margins, so these add. Same reasoning as .serve-copy. */
  margin: 0.9rem 0 clamp(1.25rem, 2.2vw, 1.6rem);
  font-size: 0.95rem; line-height: 1.7; color: var(--slate);
}
/* Two equal-width buttons pinned to the base of the card. flex:1 with a
   min-width means they sit side by side when there is room and stack to full
   width when there isn't — no breakpoint needed, and it degrades the same way
   whether the squeeze comes from a narrow viewport or a long button label. */
.job-actions {
  margin-top: auto;
  display: flex; flex-wrap: wrap; gap: 0.75rem;
}
.job-action {
  /* 11rem basis, so the pair sits side by side above ~24rem of card and
     stacks below it. They can't shrink under their own label — flexbox's
     automatic minimum size stops that — so a long label wraps the row
     rather than overflowing it. */
  flex: 1 1 11rem;
}

.job-empty {
  max-width: 34rem; margin: 0 auto; text-align: center;
  font-size: 1.02rem; line-height: 1.75; color: var(--slate);
}
.job-empty p { margin: 0; }

/* ---------- /jobs/<slug>/ ---------- */

/* Narrow measure. A job description is long-form reading and full-width
   bullet lists are punishing. */
.job-col { max-width: 46rem; margin: 0 auto; }

.job-back {
  display: inline-block; margin-bottom: 1.5rem;
  font-size: 0.9rem; font-weight: 700; color: var(--slate);
  text-decoration: none;
}
.job-back:hover { color: var(--red); }

.job-head--detail { margin-bottom: 1.25rem; }
.job-detail-title { margin: 0; }

.job-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem clamp(1.25rem, 3vw, 2.5rem);
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  padding: clamp(1.1rem, 2vw, 1.5rem);
  background: var(--cream, #f6f4f0);
  border-radius: 10px;
}
.job-facts div { margin: 0; }
.job-facts dt {
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--slate);
}
.job-facts dd {
  margin: 0.25rem 0 0;
  font-size: 0.98rem; font-weight: 600; color: var(--navy);
}

.job-detail-copy { font-size: 1rem; line-height: 1.8; color: var(--slate); }
.job-summary { margin: 0 0 1.5rem; }
.job-section-head {
  margin: clamp(1.75rem, 3vw, 2.25rem) 0 0.75rem;
  font-size: clamp(1.05rem, 1.7vw, 1.2rem); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--navy);
}
.job-detail-copy p { margin: 0 0 0.9rem; }
.job-list { margin: 0; padding-left: 1.2rem; }
.job-list li { margin-bottom: 0.5rem; }
.job-list li:last-child { margin-bottom: 0; }

.job-detail-cta {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.job-resume {
  margin: 1.5rem 0 0;
  font-size: 0.9rem; line-height: 1.7; color: var(--slate);
}
.job-posted { display: block; margin-top: 0.25rem; opacity: 0.8; }

@media (max-width: 52rem) {
  .job-grid { grid-template-columns: 1fr; }
}
@media (max-width: 34rem) {
  .job-facts { grid-template-columns: 1fr; }
  .job-head { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
}