/* tcl-theme/assets/css/join-us.css
 * The Join Us layer (A-03 TCL-714, A-04 TCL-715, A-06 TCL-717).
 *
 * Loaded on /join-us/, on the interim /apply/ page, and on a single opening
 * (functions.php, tcl_enqueue_assets). Built ON TOP of tokens.css and main.css: the nav,
 * footer, hero, section, grid and button language is main.css's, and this file adds only
 * what the Join Us artboards draw and main.css does not have.
 *
 * ---------------------------------------------------------------------------
 * WHERE THIS FILE CAME FROM, AND WHAT WAS CHANGED ON THE WAY IN
 * ---------------------------------------------------------------------------
 * Started from mockup/join-us/g01-index-wireframe/extracted/theme/css/join-us.css, which
 * G-01 delivered as real CSS rather than as a picture (TCL-761's closing comment). Four
 * changes, each deliberate:
 *
 *   1. THE ARTBOARD LAYER IS GONE. G-01's parts A and C re-expressed the theme's own @media
 *      rules as @container on a .ju-frame wrapper so 375px and desktop could be drawn side
 *      by side in one document. On the real site the viewport IS the container, so the
 *      responsive block at the foot of this file is @media and mirrors main.css's own
 *      breakpoints (768 and 1024) rather than restating them in cqw.
 *   2. NOTHING IS STYLED THAT IS NOT RENDERED. The router strip and the general-application
 *      form preview are drawn in the artboards and neither is built here (page-join-us.php
 *      says why for each), so their rules are not carried across. A selector with no markup is
 *      a maintenance cost with no reader. The testimonial rail is the exception now: TCL-743
 *      builds it (WHERE PEOPLE GOT TO below), as one row that slides left since round 2, and its
 *      markup prints whenever two approved entries exist or a member of staff asks for the
 *      preview.
 *   3. EVERY COLOUR IS A TOKEN. G-01 used rgba() literals of the gold channel values for the
 *      coaching slab's internal rules; those are the gold ramp, so they are written as
 *      var(--gold-600) and var(--gold-700). deploy/lint.sh G2 forbids raw hex outside
 *      tokens.css and the spirit of it forbids a raw channel triple too.
 *   4. NO RETIRED-PALETTE COMMENT. G-01's tokens.css spells the two retired Elementor hex
 *      values out in a header comment explaining that they are banned, which trips lint G2 on
 *      the comment itself (TCL-761's closing comment warned about it). This file does not
 *      write either value down, in a rule or in a sentence.
 *
 * MOBILE AT 375px IS THE PRIMARY LAYOUT and desktop is a first-class one, which is the
 * wireframe brief's §2 rule: the rules above the responsive block are the desktop layout and
 * the block collapses them to one column, the same shape main.css already uses.
 *
 * IDENTITY FACES ON HEADLINES ONLY. Norwester appears here on the claim and rung numerals,
 * the milestone thresholds and nowhere else. Never on a label, a chip or a button.
 */

/* ============================================================
   HERO
   ============================================================ */

/* The ladder proof, and the reason it leads the page. Sized between the h1 and the lede
   because it is the strongest verified fact TCL has (wireframe brief §3). */
.ju-hero__fact {
  font: var(--fw-semibold) clamp(22px, 3.2vw, 40px)/1.24 var(--font-ui);
  color: var(--cream);
  margin: 0;
  max-width: 22ch;
  text-wrap: pretty;
}
.ju-hero__orient { max-width: 46ch; }

/* ============================================================
   CARDS: ONE SKELETON, THREE VARIANTS, PLUS THE CLOSED STATE
   ============================================================
   The three groups have to be told apart at a glance, which is the whole design problem
   G-01 was given (wireframe brief §1). The shapes carry it:

     .ju-job      squared, ink-outlined, white. A dated document
     .ju-vol      rounded, soft, shadowed. Reuses main.css's .w-program
     .ju-pathway  forest slab, gold-edged, on the dark section. Never a fifth volunteer card

   Padding lives on .ju-card__inner rather than on .ju-card, so .w-program (which puts its
   own padding on a body element this card does not have) and the two bordered variants can
   share one rule. */
.ju-card { position: relative; }

/* ROUND 1, ITEM 1. THE WHOLE CARD IS ONE LINK, so the anchor is the layout box and the card is
   only its frame. Block, full height, its own text colour rather than the link colour, and the
   hover and focus states belong to it rather than to the title inside it. */
.ju-card__link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.ju-card__link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.ju-card__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  height: 100%;
  box-sizing: border-box;
}
.ju-card__title { margin: 0; font: var(--fw-bold) var(--fs-subtitle)/1.2 var(--font-ui); color: var(--ink); }
.ju-card__link:hover .ju-card__title { color: var(--gold-600); }
.ju-card__body {
  margin: 0;
  font: var(--fs-callout)/var(--lh-body) var(--font-ui);
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ROUND 1, ITEM 8. A numbered run inside a stored body, on the card and on the opening's own
   page: one renderer draws both (tcl_join_us_body_html()). The marker takes the gold the JD
   lists already give theirs, so a list reads the same wherever it appears on this page. */
.ju-card__list {
  margin: 0;
  padding-left: 1.35em;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.ju-card__list li::marker { color: var(--gold); }

/* THE PILL AT THE CARD'S FOOT. A span, not a control: it is inside the card's one anchor (see
   template-parts/opening-card.php), so it is a ghost pill that carries the affordance without
   being a second tab stop. `margin-top: auto` holds it at the bottom whatever the body length,
   which is the same trick .ju-vol uses for its "Where it leads:" paragraph. */
.ju-card__more {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  font: var(--fw-semibold) var(--fs-label)/1 var(--font-ui);
  color: var(--ink-soft);
}
.ju-card__link:hover .ju-card__more {
  border-color: var(--gold-600);
  color: var(--gold-600);
}
/* On a card whose copy ends with the ruled-off "Where it leads:" paragraph, that paragraph is
   already what holds the foot of the card, so the pill sits under it on the flex gap rather
   than fighting it for the same free space. */
.ju-card__leads ~ .ju-card__more { margin-top: 0; }

/* The meta line, and the detail line under it on a paid req. */
.ju-meta {
  margin: 0;
  font: var(--fw-medium) var(--fs-caption)/1.4 var(--font-ui);
  color: var(--ink-muted);
}
.ju-meta--detail { color: var(--ink-soft); }

/* Group 1: paid. */
.ju-job {
  background: var(--white);
  border: 1.5px solid var(--deep-forest);
  border-radius: var(--r-xs);
  box-shadow: none;
}

/* Group 2: volunteer. .w-program supplies the surface, the border and the hover lift. */
.ju-vol .ju-card__leads { margin-top: auto; }

/* "Where it leads:" is the last paragraph of every volunteer and pathway card and the copy
   sets its lead-in in bold, so it is ruled off from the body above it exactly as the
   artboards rule it off, and it holds the foot of the card whatever the body length. */
.ju-card__leads {
  color: var(--gold-600);
  font-weight: var(--fw-semibold);
  border-top: 1px solid var(--line);
  padding-top: var(--s-3);
}

/* Group 3: coaching. The slab, and it sits on the dark section. */
.ju-pathway {
  background: var(--forest);
  border: 1px solid var(--gold-600);
  border-radius: var(--r-xs);
}
.ju-pathway .ju-card__title,
.ju-pathway .ju-card__link:hover .ju-card__title { color: var(--cream); }
.ju-pathway .ju-card__body { color: var(--forest-200); }
.ju-pathway .ju-card__list li::marker { color: var(--gold-200); }
.ju-pathway .ju-meta { color: var(--gold-200); }
.ju-pathway .ju-card__leads { color: var(--gold-200); border-top-color: var(--gold-700); }
.ju-pathway .ju-card__more { border-color: var(--gold-600); color: var(--gold-200); }
.ju-pathway .ju-card__link:hover .ju-card__more { border-color: var(--gold); color: var(--gold); }

/* The closed state. Muted rather than hidden: a shared link outlives the req, so the card
   stays reachable and stays visibly unavailable (TCL-714 AC3). */
.ju-card--closed { border-color: var(--line-strong); }
.ju-card--closed .ju-card__title { color: var(--ink-soft); }
.ju-card--closed .ju-card__body { color: var(--ink-muted); }
.ju-card--closed .ju-card__more { border-color: var(--line); color: var(--ink-muted); }

/* ============================================================
   GROUP TAGS: ONE SHAPE PER GROUP
   ============================================================ */
.ju-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  font: var(--fw-bold) var(--fs-micro)/1 var(--font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ju-tag--paid  { border-radius: var(--r-xs); background: var(--deep-forest); color: var(--cream); }
.ju-tag--vol   { border-radius: var(--r-pill); background: var(--sand-100); color: var(--forest); }
.ju-tag--coach { border-radius: 2px; border: 1px solid var(--gold); background: transparent; color: var(--gold); }
.ju-tag--closed {
  background: transparent;
  border: 1.5px solid var(--line-strong);
  color: var(--ink-muted);
}

/* ============================================================
   THE CARD GRIDS
   ============================================================
   .w-grid--2 from main.css already collapses to one column at 767px. .ju-cards adds the
   stretch a card of unknown body length needs to sit level with its neighbour. */
.ju-cards { align-items: stretch; }
.ju-cards > .ju-card { display: flex; }
.ju-cards > .ju-card > .ju-card__link { flex: 1; }

/* ============================================================
   FILTERS (A-04)
   ============================================================
   Two rows of links, and they are links rather than buttons so the filter survives having no
   JavaScript (assets/js/join-us.js says why at length). The 44px minimum height is the touch
   target: this page is read one-handed on a phone in Kigali. */
.ju-filters {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-8);
  border-bottom: 1px solid var(--line);
}
.ju-filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.ju-filters__legend {
  font: var(--fw-bold) 12px/1 var(--font-ui);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
  width: 92px;
  flex: none;
}
.ju-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--white);
  font: var(--fw-semibold) var(--fs-label)/1 var(--font-ui);
  color: var(--ink-soft);
}
.ju-chip:hover { color: var(--ink); border-color: var(--ink-400); }
.ju-chip[aria-pressed="true"] {
  background: var(--deep-forest);
  border-color: var(--deep-forest);
  color: var(--cream);
}
.ju-chip[aria-pressed="true"]:hover { color: var(--cream); }

/* ROUND 1, ITEM 2. The way back to the whole page, printed only while there is something to
   undo. Gold-edged rather than a fourth grey chip: it is the one control in this block that
   does something to the page as a whole. The row sits under the two dimensions with no legend,
   so the chip lines up with the chips above it rather than with their labels. */
.ju-filters__row--reset { padding-left: 92px; }
.ju-chip--reset { border-color: var(--gold-600); color: var(--gold-600); }
.ju-chip--reset:hover { border-color: var(--gold); color: var(--gold-600); }

/* ============================================================
   EMPTY STATES (A-04)
   ============================================================
   The dashed deep-forest edge is what makes the zero-jobs page read as a deliberate design
   rather than as a page that failed to load, which is this page's normal condition for most of
   the year and mockup/join-us/README.md's second acceptance check. */
.ju-empty {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-items: flex-start;
  padding: var(--s-6);
  background: var(--white);
  border: 1.5px dashed var(--deep-forest);
  border-radius: var(--r-xs);
}
.ju-empty + .ju-cards, .ju-cards + .ju-empty { margin-top: var(--s-6); }
.ju-empty__title {
  margin: 0;
  font: var(--fw-bold) var(--fs-h2)/1.25 var(--font-ui);
  color: var(--ink);
  max-width: 26ch;
}
.ju-empty__body {
  margin: 0;
  font: var(--fs-body)/var(--lh-body) var(--font-ui);
  color: var(--ink-soft);
  max-width: 58ch;
  text-wrap: pretty;
}
.ju-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ⚠️ [hidden] HAS TO WIN, and on this page it needs saying. The card grid sets
   `display: flex` on a card so two cards of different body length sit level, and a `display`
   rule beats the browser's own [hidden] styling, so a filtered-out card would stay visible
   while claiming to be hidden. join-us.js toggles nothing but this attribute, so this rule is
   what the whole filter rests on. */
.ju-page [hidden] { display: none !important; }

/* ============================================================
   THE GENERAL APPLICATION BLOCK
   ============================================================
   The artboards draw a form preview beside it. B-07 (TCL-726) builds that form, so the
   block is the copy and the one button until then, and the band centres rather than sitting
   in a half-width column with nothing opposite it. */
.ju-general { max-width: 62ch; }

/* ============================================================
   THE VOLUNTEER FRAMING BLOCK (A-06)
   ============================================================
   Four claims, and the wireframe brief §4 asks in those words that they read as four claims
   rather than as a paragraph. The rule above each one and the gold numeral are what do it. */
.ju-claims {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  margin-bottom: var(--s-10);
}
.ju-claim {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  border-top: 2px solid var(--sand-300);
  padding-top: var(--s-3);
}
.ju-claim__n { font-family: var(--font-norwester); font-size: 22px; line-height: 1; color: var(--gold); }
.ju-claim__lead { font: var(--fw-bold) var(--fs-body)/1.35 var(--font-ui); color: var(--ink); }
.ju-claim__body {
  margin: 0;
  font: var(--fs-callout)/var(--lh-body) var(--font-ui);
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ============================================================
   THE COACHING SECTION (A-06)
   ============================================================
   A full-bleed forest slab between two light sections, gold-ruled top and bottom. The whole
   point of the treatment is that the one card in here cannot be mistaken for a fifth volunteer
   card (wireframe brief §4). */
.ju-coach {
  background: var(--deep-forest);
  color: var(--on-brand);
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
}
.ju-coach__inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--s-10);
  align-items: start;
}
.ju-coach__cards { display: flex; flex-direction: column; gap: var(--s-4); }

/* ============================================================
   THE PROGRESSION LADDER (A-06)
   ============================================================
   G-04's component, on the background black it is drawn on. Three rungs, and the emphasis
   climbs with them: the third is gold-edged because it is the claim the whole page rests on.
   COACHING IS NOT ON IT, which is a copy rule rather than a layout one. */
.ju-ladder { background: var(--black); }
.ju-ladder__inner { max-width: 800px; }
.ju-ladder__rungs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.ju-rung {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  padding: var(--s-6);
  background: var(--forest-800);
  border: 1px solid var(--line-brand);
  border-radius: var(--r-lg);
}
.ju-rung__n {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background: var(--forest-600);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--fw-heavy) var(--fs-label)/1 var(--font-ui);
}
.ju-rung__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.ju-rung__lead { font: var(--fw-heavy) var(--fs-subtitle)/1.25 var(--font-ui); color: var(--cream); }
.ju-rung__body {
  margin: 0;
  font: var(--fs-callout)/1.6 var(--font-ui);
  color: var(--forest-200);
  max-width: 60ch;
  text-wrap: pretty;
}
.ju-rung--paid { background: var(--forest-700); box-shadow: var(--shadow-sm); }
.ju-rung--paid .ju-rung__n { background: var(--forest-500); }
.ju-rung--paid .ju-rung__lead { font-size: var(--fs-h2); }
.ju-rung--seat {
  background: linear-gradient(160deg, var(--forest-700), var(--deep-forest));
  border: 1.5px solid var(--gold);
  box-shadow: var(--shadow-brand);
}
.ju-rung--seat .ju-rung__n { background: var(--gold); color: var(--on-gold); }
.ju-rung--seat .ju-rung__lead { font-size: var(--fs-title); color: var(--gold-100); }
.ju-rung--seat .ju-rung__body { color: var(--cream); font-weight: var(--fw-semibold); }
.ju-ladder__coda {
  margin: var(--s-8) 0 0;
  padding-left: var(--s-4);
  border-left: 2px solid var(--gold);
  font: var(--fw-medium) var(--fs-body)/1.6 var(--font-ui);
  color: var(--cream);
  max-width: 56ch;
  text-wrap: pretty;
}

/* ============================================================
   THE MILESTONE TIERS (A-06)
   ============================================================
   Four thresholds against four rewards, so a person can place themselves on it in a glance
   (wireframe brief §5.3). A real table, because that is what two columns of it are. */
.ju-miles {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
/* ROUND 1, ITEM 10: "Centrally align the text in the recognition column with the number in
   sessions supported". The threshold is set at 40px and the label at body size, so on a
   baseline the words sat at the bottom of a tall cell and read as a footnote to the numeral
   rather than as its other half. `vertical-align: middle` is what `align-items: center` means
   on a real table, and this is a real table (W50 ruling 12), so it is one property rather than
   a layout change: it holds at every viewport and the row still wraps when a label is long. */
.ju-miles th, .ju-miles td { padding: var(--s-4) var(--s-3); vertical-align: middle; }
.ju-miles thead th {
  font: var(--fw-bold) var(--fs-micro)/1 var(--font-ui);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold-200);
  border-bottom: 1px solid var(--line-brand);
  white-space: nowrap;
}
.ju-mile { border-bottom: 1px solid var(--forest-700); }
.ju-mile:last-child { border-bottom: 0; }
.ju-mile__n {
  font-family: var(--font-norwester);
  font-size: 40px;
  line-height: 1;
  color: var(--gold);
  font-weight: var(--fw-regular);
  font-variant-numeric: tabular-nums;
  width: 1%;
  white-space: nowrap;
}
.ju-mile__label { font: var(--fw-semibold) var(--fs-body)/1.45 var(--font-ui); color: var(--cream); }
.ju-mile--top { background: var(--forest-700); }
.ju-mile--top .ju-mile__n { color: var(--gold-100); font-size: 48px; }
.ju-mile--top .ju-mile__label strong { color: var(--gold-100); }

/* ============================================================
   WHERE PEOPLE GOT TO (TCL-743, D-08)
   ============================================================
   ROUND 2 (DECISIONS.md W78): ONE ROW THAT SLIDES LEFT, AND TWO PHOTOGRAPHS PER PERSON. Noah asked
   for the arrangement Brodie's home page uses, every card in one line moving left on its own, in
   place of W77's grid. The row is a plain horizontal scroller with snap points, so with JavaScript
   off it is still a line a visitor swipes on a phone or scrolls on a laptop; assets/js/landing.js
   adds the five second advance and the Previous and Next buttons on top of it, and the buttons
   are printed hidden until it does.

   A card is min(360px, 85vw) wide: a phone shows one card and the edge of the next, a laptop
   three. The row runs past the content column to the right edge of the section, through a
   negative margin on the track and the same amount given back as padding-inline at its end (on
   the track, never on the section, whose own padding keeps the title in the column), so the cut
   edge of the last visible card says there is more, and at the end of the row the last card stops
   level with the column. The section clips what runs past it, so the page never scrolls sideways.

   Every card is the same box: the pair of tiles, the quote, then the byline pinned to the foot
   with margin-top: auto, so cards of different quote length keep their bylines level along the
   row. A tile with no photograph is the person's initial on the same 4:5 ground, so a card with
   no photographs keeps both tiles and both captions and leaves no gap (AC4). The first caption is
   the first step of the path and the second the last, in gold as the path's own last step is. */
.ju-proof {
  overflow-x: hidden;
  overflow-x: clip;
}
.ju-proof__preview {
  margin: 0 0 var(--s-6);
  font: var(--fw-semibold) var(--fs-caption)/1.4 var(--font-ui);
  color: var(--gold-600);
}
.ju-proof__controls {
  flex: none;
  display: flex;
  gap: var(--s-2);
}
.ju-proof__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.ju-proof__btn:hover {
  border-color: var(--gold-600);
  color: var(--gold-600);
}
.ju-proof__btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.ju-proof__btn svg { display: block; }
.ju-proof__track {
  list-style: none;
  margin: 0 calc(50% - 50vw) 0 0;
  padding-block: var(--s-1) var(--s-2);
  padding-inline: 0 calc(50vw - 50%);
  display: flex;
  gap: var(--s-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.ju-proof__track::-webkit-scrollbar { display: none; }
.ju-proof__track:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.ju-proof__track > li {
  display: flex;
  flex: 0 0 auto;
  width: min(360px, 85vw);
  min-width: 0;
  scroll-snap-align: start;
}
.ju-testi {
  flex: 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.ju-testi__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
}
.ju-testi__shot {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.ju-testi__photo,
.ju-testi__initial {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
}
.ju-testi__photo {
  display: block;
  height: auto;
  object-fit: cover;
}
.ju-testi__initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--forest-700);
  color: var(--cream);
  font-family: var(--font-norwester);
  font-size: var(--fs-display);
  line-height: 1;
  text-transform: uppercase;
}
.ju-testi__cap {
  margin: 0;
  font: var(--fw-semibold) 11px/1.3 var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.ju-testi__cap--now { color: var(--gold-600); }
.ju-testi__quote { margin: 0; }
/* The data holds no quotation marks; the paragraph is wrapped in the typographic pair here. */
.ju-testi__quote p {
  margin: 0;
  font: var(--fs-callout)/var(--lh-body) var(--font-ui);
  color: var(--ink);
  text-wrap: pretty;
  quotes: "\201C" "\201D" "\2018" "\2019";
}
.ju-testi__quote p::before { content: open-quote; }
.ju-testi__quote p::after { content: close-quote; }
.ju-testi__by {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.ju-testi__name { font: var(--fw-bold) var(--fs-callout)/1.2 var(--font-ui); color: var(--ink); }
.ju-path {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-2);
}
.ju-path__step {
  font: var(--fw-semibold) 11px/1 var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
/* The arrow before every step after the first. The second declaration gives the generated
   character an empty alternative text, so a screen reader hears only the hidden "then"; a
   browser that does not know the alt syntax keeps the first and still draws it. */
.ju-path__step + .ju-path__step::before {
  content: "\2192";
  content: "\2192" / "";
  margin-right: var(--s-2);
  color: var(--sand-300);
}
.ju-path__step--now { color: var(--gold-600); }

/* ============================================================
   THE SINGLE OPENING (A-05, TCL-716)
   ============================================================
   One template renders a dated paid req, an evergreen volunteer role and the coaching
   pathway, so every rule below has to survive a section being absent: an evergreen row
   carries a body and no JD sections at all, and nothing here reserves space for one.

   Layout is the g02 wireframe's and the g06 hi-fi's, at one readable measure rather than
   two columns, because a JD is a document. The one place it splits is Required against
   Plus, which the wireframe brief requires be visibly distinct. */
.ju-jd__article {
  max-width: 760px;
  margin: 0 auto;
  padding: calc(84px + var(--s-8)) var(--gutter) var(--s-16);
}
.ju-jd__back { margin: 0 0 var(--s-4); font: var(--fw-semibold) var(--fs-caption)/1 var(--font-ui); }
.ju-jd__back a { color: var(--ink-muted); }
.ju-jd__back a:hover { color: var(--gold-600); }

/* THE CLOSED STATE, above the JD and never instead of it. A shared link outlives a req by
   months, so this block gets real traffic and the document below it stays readable. */
.ju-closed {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-items: flex-start;
  padding: var(--s-6);
  margin-bottom: var(--s-8);
  background: var(--forest);
  border: 1px solid var(--gold-600);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-brand);
}
.ju-closed__title {
  margin: 0;
  font-family: var(--font-norwester);
  font-size: var(--fs-h2);
  line-height: 1.15;
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--cream);
}
.ju-closed__body {
  margin: 0;
  font: var(--fs-body)/var(--lh-body) var(--font-ui);
  color: var(--forest-100);
  max-width: 58ch;
  text-wrap: pretty;
}

/* THE HEADER BLOCK. The photograph is decorative and the scrim is what keeps the title
   legible over it, the same treatment .lp-hero__scrim gives the landing hero. */
.ju-jd__head {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  margin-bottom: var(--s-10);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.ju-jd__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ju-jd__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,48,43,0.94) 0%, rgba(10,48,43,0.62) 55%, rgba(10,48,43,0.18) 100%);
}
/* A filled req is muted rather than re-photographed, which is what the g06 hi-fi does with
   its own header filter on the closed instance. */
.ju-jd__head--closed .ju-jd__photo { filter: grayscale(75%) brightness(0.75); }
.ju-jd__headinner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: var(--s-8) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.ju-jd__title {
  margin: 0;
  font-family: var(--font-norwester);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display-lg);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  letter-spacing: 0.015em;
  color: var(--cream);
  text-wrap: balance;
}
.ju-jd__typeline {
  margin: 0;
  font: var(--fw-semibold) var(--fs-body)/1.4 var(--font-ui);
  color: var(--gold-100);
}
.ju-jd__reports {
  margin: 0;
  font: var(--fs-callout)/1.4 var(--font-ui);
  color: var(--forest-200);
}
.ju-jd__facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-1); }
.ju-jd__meta {
  margin: 0;
  font: var(--fw-medium) var(--fs-caption)/1.4 var(--font-ui);
  color: var(--forest-200);
}
/* The closing line is the one fact on this page a candidate acts on a date about, so it is
   the gold pill both artboards give it. */
.ju-jd__closing {
  margin: 0;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: var(--on-gold);
  font: var(--fw-bold) var(--fs-caption)/1 var(--font-ui);
}

/* THE SECTIONS. One measure, one rhythm, and a heading only ever appears above content
   that exists. */
.ju-jd__section { margin-bottom: var(--s-10); }
.ju-jd__section:last-child { margin-bottom: 0; }
.ju-jd__h2 {
  margin: 0 0 var(--s-4);
  font-family: var(--font-norwester);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  letter-spacing: 0.015em;
  color: var(--deep-forest);
}
.ju-jd__h3 {
  margin: 0 0 var(--s-3);
  font: var(--fw-bold) var(--fs-caption)/1 var(--font-ui);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}
.ju-jd__p {
  margin: 0 0 var(--s-4);
  font: var(--fs-body)/var(--lh-body) var(--font-ui);
  color: var(--ink-soft);
  text-wrap: pretty;
}
.ju-jd__p:last-child { margin-bottom: 0; }
.ju-jd__list { margin: 0; padding-left: 1.35em; display: flex; flex-direction: column; gap: var(--s-3); }
.ju-jd__list li {
  font: var(--fs-body)/1.5 var(--font-ui);
  color: var(--ink-soft);
  text-wrap: pretty;
}
.ju-jd__list li::marker { color: var(--gold); }

/* The body a volunteer or pathway row carries instead of JD sections. It reuses the card's
   own paragraph classes, so the card and the page cannot style one field two ways. */
.ju-jd__section--body .ju-card__body { margin: 0 0 var(--s-4); font-size: var(--fs-body); line-height: var(--lh-body); }
.ju-jd__section--body .ju-card__body:last-child { margin-bottom: 0; }

/* ⚠️ REQUIRED AGAINST PLUS, AND THE DISTINCTION IS STRUCTURAL RATHER THAN DECORATIVE
   (wireframe brief §4 J1). Required items become knockout questions on the form and Plus
   items never do, so Required is a filled forest panel and Plus an outlined one, which is
   the treatment both artboards give them. */
.ju-jd__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  align-items: start;
  margin-top: var(--s-6);
}
.ju-jd__panel { padding: var(--s-5); border-radius: var(--r-md); }
.ju-jd__panel--required {
  background: var(--forest);
  border: 1px solid var(--gold-600);
  box-shadow: var(--shadow-brand);
}
.ju-jd__panel--required .ju-jd__h3 { color: var(--gold); }
.ju-jd__panel--required .ju-jd__list li { color: var(--cream); font-size: var(--fs-callout); }
.ju-jd__panel--required .ju-jd__list li::marker { color: var(--gold-200); }
.ju-jd__panel--plus {
  background: var(--surface);
  border: 1px dashed var(--line-strong);
}
.ju-jd__panel--plus .ju-jd__h3 { color: var(--ink-soft); }
.ju-jd__panel--plus .ju-jd__list li { font-size: var(--fs-callout); }
.ju-jd__panel--plus .ju-jd__list li::marker { color: var(--ink-400); }

/* SAFEGUARDING, and it renders above the apply CTA rather than below it, which is a scroll
   order rather than a style. The panel treatment is here so a candidate cannot scroll past
   the block that tells them a role needs a Criminal Record Certificate. */
.ju-jd__safeguarding {
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: var(--warning-bg);
  border: 1px solid var(--warning);
}
.ju-jd__safeguarding .ju-jd__h2 { margin-bottom: var(--s-3); font-size: var(--fs-subtitle); }

/* TO APPLY. The anchor B-02 mounts the form on, so the block gets the scroll offset a fixed
   nav needs and the response line sits quiet above the form.

   ⚠️ ROUND 1, ITEM 4: THERE IS NO BUTTON IN THIS SECTION ANY MORE, so the rule that spaced one
   is gone with it. Noah: "To Apply section is misguiding with the button, the button just
   pushes you down to the modal, which is already visible. Remove the button". A selector with
   no markup behind it is a maintenance cost with no reader (this file's own rule 2). */
.ju-jd__apply { scroll-margin-top: 96px; }
.ju-jd__response {
  margin: var(--s-4) 0 0;
  font: var(--fs-caption)/1.5 var(--font-ui);
  color: var(--ink-muted);
  max-width: 52ch;
  text-wrap: pretty;
}

/* ============================================================
   RESPONSIVE. Breakpoints mirror main.css's own, 1024 and 768, so the two files can never
   collapse a grid at different widths. 375px is the layout these rules produce and the one
   the page is judged on.
   ============================================================ */
@media (max-width: 1023px) {
  .ju-coach__inner { grid-template-columns: 1fr; gap: var(--s-6); }
}

@media (max-width: 767px) {
  .ju-hero__fact { font-size: 26px; }

  .ju-claims { grid-template-columns: 1fr; gap: var(--s-6); margin-bottom: var(--s-8); }

  .ju-rung { padding: var(--s-5); gap: var(--s-3); }
  .ju-rung--paid .ju-rung__lead { font-size: var(--fs-subtitle); }
  .ju-rung--seat .ju-rung__lead { font-size: var(--fs-h2); }
  .ju-ladder__coda { margin-top: var(--s-6); }

  .ju-miles th, .ju-miles td { padding: var(--s-3) var(--s-2); }
  .ju-mile__n { font-size: 30px; }
  .ju-mile--top .ju-mile__n { font-size: 34px; }
  .ju-mile__label { font-size: var(--fs-callout); }

  /* The legend stops being a column and becomes the row's own label, because 92px of gutter
     on a 375px screen leaves the chips two to a line. */
  .ju-filters__legend { width: 100%; }
  .ju-filters { margin-bottom: var(--s-6); }
  /* The legend is a full-width line here, so the reset row has no column to clear. */
  .ju-filters__row--reset { padding-left: 0; }

  .ju-empty { padding: var(--s-5); }
  .ju-empty__title { font-size: var(--fs-subtitle); }
  .ju-actions { flex-direction: column; align-items: stretch; }
  .ju-actions .w-btn { width: 100%; box-sizing: border-box; justify-content: center; }

  /* The single opening at 375px. The header loses its minimum height, because a long role
     title already fills it, and Required stacks above Plus in that order: the list that
     decides whether somebody can apply is the one they should read first. */
  .ju-jd__article { padding-top: calc(72px + var(--s-6)); padding-bottom: var(--s-12); }
  .ju-jd__head { min-height: 0; margin-bottom: var(--s-8); }
  .ju-jd__headinner { padding: var(--s-6) var(--s-5); }
  .ju-jd__title { font-size: var(--fs-title); line-height: var(--lh-title); }
  .ju-jd__section { margin-bottom: var(--s-8); }
  .ju-jd__split { grid-template-columns: 1fr; gap: var(--s-4); margin-top: var(--s-5); }
  .ju-closed { padding: var(--s-5); }
}