/* ==========================================================================
   Course archive — listing layer
   Spec: roadmap/phase-05-training-and-calendar/artifacts/page-whs-courses-category-spec.md (Block 4)
   Figma: "WHS COURSES // DESKTOP" 12488:5573 → Section_Courses 12488:5638

   Scope: the listing chrome only — intro row, filter panel, active-filter chips,
   sort menu, results grid, pagination. The `.course-training-card` component base
   lives in cards.css (globally enqueued); per-consumer card deltas live in this
   file (listing) and course-single.css (single course).

   Shared by all three Batch-5 listing contexts (WHS category, All Courses,
   Short Courses) — the card subtree is byte-identical on all three frames.
   Desktop-first: mobile @media blocks are at the bottom of this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section + wrapper
   -------------------------------------------------------------------------- */
.course-archive__listing {
  padding: 112px 80px; /* Figma 12488:5638 layout_pad_T112_R80_B112_L80 */
  background-color: var(--color-white); /* Figma 12488:5638 fill #ffffff */
}

.course-archive__wrap {
  display: flex;
  flex-direction: column;
  gap: 48px; /* Figma 12488:5639 layout_gap_48 */
  max-width: 1280px; /* Figma 12488:5639 box_w_1280 */
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Intro — heading + lead on the left, Training Calendar CTA on the right
   -------------------------------------------------------------------------- */
.course-archive__intro {
  display: flex;
  flex-direction: row; /* Figma 12488:5640 layout_HORIZONTAL */
  justify-content: space-between; /* Figma 12488:5640 layout_primary_SPACE_BETWEEN */
  align-items: flex-start; /* Figma 12488:5640 layout_counter_MIN */
  gap: 96px; /* Figma 12488:5640 layout_gap_96 */
}

.course-archive__intro-copy {
  display: flex;
  flex-direction: column;
  gap: 22px; /* Figma 12488:5641 layout_gap_22 — untokenized, no --space-* rung at 22 */
}

.course-archive__intro .btn {
  flex: 0 0 auto;
}

.course-archive__heading {
  margin: 0;
  font-size: 48px; /* Figma 12488:5646 font_size_48 */
  line-height: 1.2; /* Figma 12488:5646 font_LH_57.6 */
  letter-spacing: -0.48px; /* Figma 12488:5646 font_LS_-0.48 */
  font-weight: var(--font-weight-regular); /* Figma 12488:5646 FrutigerLTStd-Roman 400 */
  color: var(--color-navy); /* Figma 12488:5646 fill #0b1628 */
}

.course-archive__lead {
  margin: 0;
  font-size: 20px; /* Figma 12488:5648 font_size_20 */
  line-height: 1.3; /* Figma 12488:5648 font_LH_26 */
  font-weight: var(--font-weight-bold); /* Figma 12488:5648 weight_700 */
  color: var(--color-navy); /* Figma 12488:5648 fill #0b1628 */
}

/* --------------------------------------------------------------------------
   Body — filter panel column + results column
   -------------------------------------------------------------------------- */
.course-archive__body {
  display: flex;
  flex-direction: row; /* Figma 12490:7685 layout_HORIZONTAL */
  align-items: flex-start; /* Figma 12490:7685 layout_counter_MIN */
  gap: 64px; /* Figma 12490:7685 layout_gap_64 */
}

/* Mobile-only affordance; the panel is always open on desktop. */
.course-archive__filter-toggle {
  display: none;
}

/* --------------------------------------------------------------------------
   Filter panel
   -------------------------------------------------------------------------- */
.course-archive__filter-panel {
  flex: 0 0 321px; /* Figma 12490:9445 box_w_321 (273 list + 24 pad each side) */
  padding: 24px; /* Figma 12490:9445 layout_pad_24 */
  background-color: var(--color-navy-lightest-50); /* Figma 12490:9445 fill #e6e7e9 opacity 0.5 */
  border-radius: var(--radius-sm); /* Figma 12490:9445 cornerRadius_4 */
  /* Sticky is desktop-only (designer comment 1914861550 context); disabled at <=1024 below.
     This declaration shipped inert and QA reported it 2026-09-18 as "filter box to be sticky
     on scroll". TWO independent causes, both measured at 1440x900, both fixed here:

     1. Body was the scrollport. The note that used to sit here — "no ancestor of this panel
        establishes a scroll container" — was wrong: base.css:36 sets `html, body
        { overflow-x: hidden }`, and `overflow-x: hidden` forces body's used `overflow-y` to
        `auto`, so BODY is a scroll container while the viewport is what actually scrolls.
        The panel's document-space top therefore never engaged (viewport top read 699 at
        scrollY 0, -501 at 1200, -2301 at 3000 — it scrolled away with the page). Same cause,
        same fix as course-single.css:705-728: `overflow-x: clip` on this template's own body
        class below. It clips identically but is not scrollable, so it is not a scrollport.
     2. Even pinned, a sticky box taller than the viewport only engages after the visitor has
        scrolled past its bottom edge, and this panel is ~1179px against a 900px viewport.
        The cap makes the pin immediate; the internal scroll is ours, not Figma's, which
        draws the panel at its full intrinsic height. `.course-archive__body` is already
        `align-items: flex-start`, so the cap is what bounds the panel, not the row height. */
  position: sticky;
  top: 24px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Cause 1 above. Scoped to the two body classes that load this file, so base.css keeps its
   single site-wide `overflow-x: hidden` (css-architecture.md) and no other page is touched.
   An engine without `clip` support drops the declaration and keeps today's non-pinning
   behaviour. The category template is included deliberately: its panel is shorter than the
   viewport, so it pins with no internal scroll, and the three listings then behave alike —
   which is what this file has declared since it shipped. */
body.page-template-template-course-listing,
body.page-template-template-course-category {
  overflow-x: clip;
}

.course-archive__filter-list {
  display: flex;
  flex-direction: column;
  gap: 24px; /* Figma 12490:9446 layout_gap_24 */
  margin: 0;
  padding: 3px 1px; /* Figma 12490:9446 layout_pad_T3_R1_B3_L1 — optical nudge, untokenized */
}

.course-archive__filter-group,
.course-archive__search {
  display: flex;
  flex-direction: column;
  gap: 16px; /* Figma 12490:9449 layout_gap_16, Figma 12490:7759 layout_gap_16 */
}

.course-archive__filter-heading {
  margin: 0;
  font-size: 16px; /* Figma 12490:9450 font_size_16 */
  line-height: 1.4; /* Figma 12490:9450 font_LH_22.4 */
  font-weight: var(--font-weight-bold); /* Figma 12490:9450 weight_700 */
}

/* Two headings, two fills — the facet heading is pure black, the search heading navy-darkest. */
.course-archive__filter-group > .course-archive__filter-heading {
  color: #000000; /* Figma 12490:9450 fill #000000 — untokenized, not --color-navy */
}

.course-archive__search > .course-archive__filter-heading {
  color: var(--color-navy-darkest); /* Figma 12490:7761 fill #03060c */
}

/* Client Pastel R7 #1 (2026-09-18) — the magnifier is now the control that commits the
   keyword. Geometry repeats .form-input-icon / --right (forms.css:180-199) rather than
   extending it: that base declares `pointer-events: none`, which is exactly what a button
   must not have, and it is shared with every other form on the site. 24x24 is both the
   drawn glyph box (Figma 12760:19141) and the WCAG 2.2 minimum target, so the button is
   the icon and nothing more — the field's painted appearance is unchanged. */
.course-archive__search-submit {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--text);
  cursor: pointer;
}

.course-archive__search-submit:hover {
  color: var(--color-tangerine);
}

.course-archive__checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 12px; /* Figma 12490:9541 layout_gap_12 — not the .newsroom__filter-list 8px */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* .checkbox / .checkbox__box / .checkbox__label bases are controls.css:10-83 and already
   match Figma 12490:9452 (gap 8, box 18x18, --color-navy-light) value for value. */

/* Category facet — pills, NOT checkbox rows. Only the two wide listings paint it; a
   category page is already one category and has no such group. Each category is its own
   "Checkboxes wrapper" holding a single Button frame, so the visible 16px rhythm is the
   GROUP's gap (pill tops 780 → 836 = 40 + 16), not the wrapper's own 12. */
.course-archive__pill-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Figma 12513:2966 layout_sizingH_HUG — pill width hugs its label */
  gap: 16px; /* Figma 12513:2963 layout_gap_16 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.course-archive__pill {
  display: inline-flex;
  align-items: center; /* Figma 12513:2966 layout_counter_CENTER */
  justify-content: center; /* Figma 12513:2966 layout_primary_CENTER */
  gap: 12px; /* Figma 12513:2966 layout_gap_12 */
  min-height: 40px; /* Figma 12513:2966 box_h_40 layout_sizingV_FIXED */
  padding: 8px 20px; /* Figma 12513:2966 layout_pad_T8_R20_B8_L20 */
  border: 0;
  border-radius: var(--radius-xs); /* Figma 12513:2966 cornerRadius_2 */
  background-color: var(--color-white); /* Figma 12513:2966 fill #ffffff */
  color: var(--color-navy); /* Figma 12513:2967 fill #0b1628 */
  font-family: inherit;
  font-size: 16px; /* Figma 12513:2967 font_size_16 */
  line-height: 1.5; /* Figma 12513:2967 font_LH_24 */
  font-weight: var(--font-weight-bold); /* Figma 12513:2967 weight_700 */
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease; /* for the hover below — matches .checkbox__box */
}

.course-archive__pill[aria-pressed="true"] {
  background-color: var(--color-navy-light); /* Figma 12513:2972 fill #545b68 */
  color: var(--color-white); /* Figma 12513:2973 fill #ffffff */
}

/* Client Pastel R8 (2026-09-21), All Courses #1 / Short Courses #3 — "Can these buttons
   please be Navy Lightest on hover?". Unpressed only: the pressed pill is already filled
   --color-navy-light with white text, and repainting it on hover would read as a
   deselect. Figma has no hover frame for this pill. */
.course-archive__pill:not( [aria-pressed="true"] ):hover {
  background-color: var(--color-navy-lightest);
}

.course-archive__pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.course-archive__filter-divider {
  width: 100%; /* Figma 12490:9540, 12490:9483 box_w_273 (= the list's content width) */
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-navy-lighter); /* Figma 12490:9483 stroke #ced0d4 weight 1 */
}

/* Results count + reset button. Figma 12490:9484 is gap 0 / primary=MIN, NOT space-between —
   the count TEXT node is itself 167px wide (far wider than its ~70px of glyphs), i.e. it FILLs
   the row and pushes the 104px button to the right edge. Reproduced with flex-grow on the count
   rather than justify-content, so a longer or shorter count string behaves the same way. */
.course-archive__filter-foot {
  display: flex;
  flex-direction: row;
  align-items: center; /* Figma 12490:9484 layout_counter_CENTER */
  justify-content: flex-start; /* Figma 12490:9484 layout_primary_MIN */
  gap: 0; /* Figma 12490:9484 layout_gap_0 */
  min-height: 24px; /* Figma 12490:9484 box_h_24 */
}

.course-archive__filter-results {
  flex: 1 1 auto; /* Figma 12490:9485 box_w_167 inside a 271px row — the text node fills */
  font-size: 12px; /* Figma 12490:9485 font_size_12 */
  line-height: 1.3; /* Figma 12490:9485 font_LH_15.6 */
  font-weight: var(--font-weight-regular); /* Figma 12490:9485 weight_400 */
  color: var(--color-navy-light); /* Figma 12490:9485 fill #545b68 */
}

/* .btn--tiny.btn--secondary (buttons.css:77-88, 155-163) already carries pad 4/8, gap 8,
   12px/400, 1px --color-tangerine-light border and --color-tangerine text —
   Figma 12490:9486 value for value. No override needed. */

/* --------------------------------------------------------------------------
   Results column + toolbar
   -------------------------------------------------------------------------- */
.course-archive__column {
  display: flex;
  flex-direction: column;
  gap: 24px; /* Figma 12490:7800 layout_gap_24 */
  flex: 1 1 auto;
  min-width: 0; /* flex child of .course-archive__body; the grid below must be allowed to shrink */
}

.course-archive__toolbar {
  display: flex;
  flex-direction: row; /* Figma 12490:7801 layout_HORIZONTAL */
  justify-content: space-between; /* Figma 12490:7801 layout_primary_SPACE_BETWEEN */
  align-items: center; /* Figma 12490:7801 layout_counter_CENTER */
  gap: 24px; /* Figma 12490:7801 layout_gap_24 */
  min-height: 40px; /* Figma 12490:7801 box_h_40 */
}

/* --------------------------------------------------------------------------
   Active-filter chips
   -------------------------------------------------------------------------- */
.course-archive__active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* derived — Figma 12490:7801 draws a single chip, no inter-chip gap node exists */
  margin: 0;
  padding: 0;
  list-style: none;
}

.filter-chip {
  display: inline-flex;
  flex-direction: row;
  align-items: center; /* Figma 12490:7802 layout_counter_CENTER */
  gap: 8px; /* Figma 12490:7802 layout_gap_8 */
  padding: 8px 12px 8px 16px; /* Figma 12490:7802 layout_pad_T8_R12_B8_L16 — asymmetric, do not normalize */
  background-color: var(--color-neutral-lightest); /* Figma 12490:7802 fill #f2f2f2 */
}

.filter-chip__label {
  font-size: 16px; /* Figma 12490:7803 font_size_16 */
  line-height: 1.5; /* Figma 12490:7803 font_LH_24 */
  font-weight: var(--font-weight-regular); /* Figma 12490:7803 weight_400 */
  color: var(--color-navy-darkest); /* Figma 12490:7803 fill #03060c */
}

.filter-chip__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px; /* Figma 12490:7804 box_w_19 */
  height: 19px; /* Figma 12490:7804 box_h_19 */
  padding: 4px; /* Figma 12490:7804 layout_pad_4 */
  /* Same optical correction as .checkbox (controls.css): the 16/24 label's cap band is
     centred 2px above its line box, so a geometrically-centred cross reads 2px low
     (measured ink: label cap 13->24 centre 18.5, cross 17.75->23.25 centre 20.5).
     The negative/positive pair cancels, so the chip stays 40px tall. */
  margin-block: -2px 2px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--color-neutral-darkest); /* Figma 12490:7805 fill #0d0b00 */
}

.filter-chip__clear .material-symbols-outlined {
  font-size: 11px; /* Figma 12490:7805 box_11x11 vector */
  line-height: 1;
}

.filter-chip__clear:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Sort
   The open menu has no Figma node — the cache draws only the closed "Sort by"
   trigger (I12490:7806). Panel styling below is a project-consistent default
   (tokens + the filter panel's own radius/shadow), not a transcription.
   -------------------------------------------------------------------------- */
.course-archive__sort {
  position: relative;
  flex: 0 0 auto;
}

.course-archive__sort-toggle {
  gap: 8px; /* Figma 12490:7806 layout_gap_8 */
  padding: 0; /* Figma 12490:7806 layout_pad_0 (Style=Link variant) */
}

.course-archive__sort-toggle .btn__label {
  font-size: 16px; /* Figma I12490:7806;4179:8938 font_size_16 */
  line-height: 1.5; /* Figma I12490:7806;4179:8938 font_LH_24 */
  font-weight: var(--font-weight-regular); /* Figma I12490:7806;4179:8938 weight_400 */
  color: var(--color-navy); /* Figma I12490:7806;4179:8938 fill #0b1628 */
}

.course-archive__sort-toggle .material-symbols-outlined {
  color: var(--color-navy-darkest); /* Figma I12490:7806;4179:8939;7044:24627 fill #03060c */
}

.course-archive__sort-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 2;
  min-width: 200px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background-color: var(--color-white);
  border: 1px solid var(--color-navy-lightest);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.course-archive__sort-menu[hidden] {
  display: none;
}

.course-archive__sort-menu li {
  padding: 8px 16px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-navy);
  cursor: pointer;
}

.course-archive__sort-menu li:hover,
.course-archive__sort-menu li:focus-visible,
.course-archive__sort-menu li[aria-selected="true"] {
  background-color: var(--color-navy-lightest-50);
}

/* --------------------------------------------------------------------------
   Results grid
   -------------------------------------------------------------------------- */
/* The track count follows the column width instead of being pinned at 2. Figma's 895px
   results column still resolves to exactly 2 x 429.5 (3 tracks would need 1134), so the
   signed-off desktop render is unchanged — but between 769 and ~1240 the 321px filter
   panel starved a hard 2-column grid down to 119px cards, which is what overflowed the
   card chrome (QA 2026-09-17). 330px is the narrowest track the card's chip row and
   two-line title still fit; min() keeps it from overflowing a container narrower than that. */
.course-archive__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); /* Figma 12573:4065 — 2 columns at the 895px desktop column */
  column-gap: 36px; /* Figma 12573:4065 — column-B x=2610 minus column-A right edge 2575 */
  row-gap: 36px; /* Figma 12573:4065 — row-2 y=1348 minus row-1 bottom 1312 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.course-archive__item {
  display: flex;
  min-width: 0;
}

.course-archive__empty {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-navy-light);
}

/* --------------------------------------------------------------------------
   Card — listing-scoped deltas only. The base is cards.css.
   -------------------------------------------------------------------------- */
.course-archive__grid .course-training-card {
  width: 100%; /* FILLs its grid track; course-single.css keeps its own 400px override */
}

.course-archive__grid .course-training-card__copy {
  font-size: 14px; /* Figma 12573:4087 font_size_14 */
  line-height: 1.4; /* Figma 12573:4087 font_LH_19.6 */
  color: var(--color-navy-darkest); /* Figma 12573:4087 fill #03060c */
}

.course-archive__grid .course-training-card__code {
  font-size: 14px; /* All Courses 12513:3049 / Short Courses 12573:3801 — absent on a category page */
  line-height: 1.3; /* font_LH_18.2 */
  text-transform: uppercase; /* Figma 12513:3049 textCase UPPER — the term name is title-case in the CMS */
}

/* The listing badge icon is 20x20; the single-course one is 28x28
   (I12030:2564;11792:4160). badges.css hardcodes 29x29, so the rung is scoped here
   and must never move into the shared layer. */
.course-archive__grid .course-badge__icon {
  width: 20px; /* Figma 12573:4251 box_w_20 */
  height: 20px; /* Figma 12573:4251 box_h_20 */
}

/* --------------------------------------------------------------------------
   Pagination
   No Figma node exists on ANY Batch-5 listing frame (verified across all three
   raw frames). De-scoped verbatim from the shipped Newsroom pagination
   (newsroom.css:277-338) so the two listings stay visually consistent.
   -------------------------------------------------------------------------- */
.course-archive__listing .navigation.pagination {
  display: flex;
  justify-content: center;
  padding: 9px 0;
  margin-top: 48px;
}

.course-archive__listing .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 3px 9px;
}

.course-archive__listing .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 33px;
  height: 29px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--color-navy);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.course-archive__listing .page-numbers.current {
  border-color: var(--color-tangerine);
  color: var(--color-tangerine);
}

.course-archive__listing .page-numbers:not(.current):hover {
  color: var(--color-tangerine-dark);
}

.course-archive__listing .page-numbers.dots {
  border: 0;
}

.course-archive__listing .page-numbers .material-symbols-outlined {
  font-size: 24px;
  line-height: 1;
}

.course-archive__listing .navigation .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   AJAX states
   -------------------------------------------------------------------------- */
[data-course-results][aria-busy="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.course-archive__error {
  margin: 0;
  padding: 16px;
  background-color: var(--color-neutral-lightest);
  border-left: 4px solid var(--color-tangerine);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-navy-darkest);
}

/* ==========================================================================
   Tablet / landscape phone — <=1024px.
   The panel is a fixed 321px beside a 64px gap, so it takes 385px of whatever the
   viewport gives the body. Below 1025 that leaves the results column too narrow to
   read (370px at 915, 279px at 820 — QA saw the desktop panel and card text spilling
   past the card at 915x412). The drawer the 768 rules already defined is therefore
   raised to 1024: the panel collapses behind the Filter button and the results column
   takes the full width, matching the Newsroom behaviour QA cited.
   ========================================================================== */
@media (max-width: 1024px) {
  .course-archive__body {
    flex-direction: column;
    /* NOT inherited from the desktop rule: with a column direction `flex-start` is a
       CROSS-axis rule, so the panel and the results column shrink-to-fit instead of
       filling the page (measured 263px of 362 at 402 — QA's "filters should be on all
       page for mobile view"). */
    align-items: stretch;
    gap: 24px;
  }

  /* Filter drawer — same pattern as .newsroom__filter-toggle / __filter-panel
     (newsroom.css:418-443), per designer comment 1914861550. */
  .course-archive__filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 44px;
    padding: 10px 24px;
    background-color: var(--color-white);
    color: var(--color-navy);
    border: 2px solid var(--color-navy);
    border-radius: var(--radius-xs);
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
  }

  .course-archive__filter-panel {
    display: none;
    /* `flex: 0 0 321px` is a WIDTH basis on the desktop row and a HEIGHT basis here —
       it would pin the open panel to 321px tall. */
    flex: 1 1 auto;
    position: static; /* sticky is a desktop-only affordance */
    /* …and so is the viewport cap that goes with it — an inline drawer must not scroll
       inside itself. */
    max-height: none;
    overflow: visible;
    padding: 16px;
    border-radius: var(--radius-sm);
  }

  .course-archive__filter-panel.is-open {
    display: block;
  }
}

/* ==========================================================================
   Mobile — <=768px. 402 inherits (no narrower Figma frame exists for this block).
   ========================================================================== */
@media (max-width: 768px) {
  .course-archive__listing {
    padding: 50px 20px; /* Section Padding large 112 -> 50 (derived, mobile-derivation-catalog) */
  }

  .course-archive__intro {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .course-archive__heading {
    /* 48/Roman has no named type-scale rung; the nearest desktop rung is H2 (44),
       so its mobile counterpart (32) is used. Spec open question — pending designer. */
    font-size: 32px;
  }

  .course-archive__lead {
    font-size: 18px; /* Text Large 20 -> 18 */
  }

  .course-archive__toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .course-archive__sort-menu {
    right: auto;
    left: 0;
  }

  .course-archive__grid .course-training-card__title {
    font-size: 18px; /* H6 20 -> 18 */
  }
}