/* ==========================================================================
   Course detail — templates/cpt/single-mba_course.php
   Canonical Figma instance: CPC30220 Cert III in Carpentry, frame 12030:2395
   (desktop-only batch; mobile derived per roadmap/mobile-derivation-catalog.md).
   Spec: roadmap/phase-05-training-and-calendar/artifacts/page-cert-iii-carpentry-spec.md

   Blocks here: 4 Section_About (.course-about), 5 Section_Main (.course-body),
                6 Section_Form (.form-band).
   Block 3 is a pure reuse of .page-banner (banners.css, enqueued globally);
   blocks 1/2/7 are globals.

   Desktop-first: every @media is max-width and sits AFTER the desktop rules,
   per .claude/rules/css-architecture.md.

   Headings note: several Figma headings are 400-weight at H3/H5/H6 sizes, but the
   sitewide h3/h5/h6 selectors force bold (typography.css:276+). Page-scoped
   classes below consume the size/line-height vars and set weight explicitly
   rather than inheriting those selectors.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Block 4 — Section_About (navy band)
   -------------------------------------------------------------------------- */

.course-about {
  position: relative;
  padding: 112px 80px;                  /* Figma 12030:2399 padding 112 80 */
  background-color: var(--color-navy);  /* Figma 12030:2399 fills[0] SOLID #0b1628 a=1.0 */
  overflow: hidden;                     /* clips the texture layer to the band */
}

/* The band's second fill is the SAME photo as the content image, painted over the
   navy at 5% opacity (Figma 12030:2399 fills[1] IMAGE opacity 0.05 — confirmed
   against the node render). A pseudo-element keeps the content at full opacity. */
.course-about::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--course-about-texture, none);
  background-size: cover;
  background-position: center;
  opacity: 0.05;                        /* Figma 12030:2399 fills[1] opacity 0.05 */
  pointer-events: none;
}

.course-about__inner {
  position: relative;                   /* above ::before */
  max-width: 1280px;                    /* Figma 12030:2400 Content Wrapper width 1280 */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;                            /* Figma 12030:2399 itemSpacing 48 — content wrapper to jump nav */
  min-width: 0;                         /* css-architecture.md flex chain */
}

.course-about__intro {
  display: flex;
  flex-direction: row;
  gap: 64px;                            /* Figma 12030:2401 itemSpacing 64 */
  align-items: flex-start;              /* Figma 12030:2401 counter=MIN */
  min-width: 0;
}

.course-about__box {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;                            /* Figma 12030:2402 itemSpacing 24 */
}

.course-about__content {
  display: flex;
  flex-direction: column;
  gap: 36px;                            /* Figma 12030:2405 itemSpacing 36 */
}

.course-about__heading {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;                     /* Figma 12030:2408 FrutigerLTStd-Roman */
  font-size: 44px;                      /* Figma 12030:2408 44px */
  line-height: 1.1;                     /* Figma 12030:2408 LH 48.4 / 44 */
  letter-spacing: -0.01em;              /* Figma 12030:2408 LS -0.44 */
  color: var(--color-white);            /* Figma 12030:2408 fill #ffffff */
}

.course-about__copy {
  display: flex;
  flex-direction: column;
  gap: 22px;                            /* Figma 12030:2410 — the blank line inside the single TEXT node is one 22.4px line */
}

.course-about__copy p {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 700;                     /* Figma 12030:2410 FrutigerLTStd-Bold */
  font-size: 16px;                      /* Figma 12030:2410 16px */
  line-height: 1.4;                     /* Figma 12030:2410 LH 22.4 / 16 */
  color: var(--color-white);            /* Figma 12030:2410 fill #ffffff */
}

/* Nationally Recognised Training badge — base moved to assets/css/badges.css on
   2026-08-11 (Qualifications became the second consumer). This page keeps only its
   own context override, further down at .course-training-card__main. */

.course-about__image {
  flex: 0 0 555px;                      /* Figma 12030:2411 width 555 FIXED */
  margin: 0;
  align-self: stretch;
  min-width: 0;
  border-radius: var(--radius-sm);      /* Figma 12030:2411 cornerRadius 4 */
  /* 82x82 top-right corner cut — Figma 12030:2412, the same treatment already
     tokenised for .advice-content__image / .home-hero__image-frame. */
  --corner-cut: 82px;
  clip-path: var(--corner-cut-clip);
  overflow: hidden;
}

.course-about__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.course-about__jump {
  display: flex;
  flex-direction: column;
  gap: 16px;                            /* Figma 12030:2413 itemSpacing 16 */
}

.course-about__jump-label {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 700;                     /* Figma 12030:2414 FrutigerLTStd-Bold */
  font-size: 20px;                      /* Figma 12030:2414 20px */
  line-height: 1.3;                     /* Figma 12030:2414 LH 26 / 20 */
  letter-spacing: -0.01em;              /* Figma 12030:2414 LS -0.2 */
  color: var(--color-white);            /* Figma 12030:2414 fill #ffffff */
}

.course-about__jump-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: 10px;                            /* Figma 12030:2415 itemSpacing 10 */
  min-width: 0;
}

.course-about__jump-list > li {
  flex: 1 1 0;                          /* Figma 12030:2415 children sizingH=FILL — buttons share the row equally */
  min-width: 0;
  display: flex;
}

/* .btn--sm already carries the Figma padding (8px 20px) and radius; the border is
   1px here against the .btn base 2px — Figma 12030:2416–2421 strokeWeight 1. */
.course-about__jump-link {
  flex: 1 1 auto;
  border-width: 1px;                    /* Figma 12030:2416–2421 strokeWeight 1 */
  white-space: normal;                  /* long labels wrap instead of overflowing the equal-width column */
  text-align: center;
}

/* --------------------------------------------------------------------------
   Block 5 — Section_Main (two columns: body + orange rail)
   The section is full-bleed: left 880 + right 560 = the 1440 frame exactly, with
   no inner max-width wrapper (Figma 12030:2422) — unlike Block 4's 1280 cap.
   -------------------------------------------------------------------------- */

.course-body {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background-color: var(--color-white); /* Figma 12030:2422 fill #ffffff */
  min-width: 0;
}

.course-body__left {
  flex: 1 1 880px;                      /* Figma 12030:2423 width 880 sizingH=FILL */
  min-width: 0;
  padding: 112px 80px;                  /* Figma 12030:2423 padding 112 80 112 80 */
  display: flex;
  flex-direction: column;
  gap: 80px;                            /* Figma 12030:2423 itemSpacing 80 */
}

/* ---- info box (a <details> so mobile can collapse it; see course-single.js) ---- */

.course-info-box {
  display: flex;
  flex-direction: column;
  gap: 24px;                            /* Figma 12030:2424 itemSpacing 24 — heading to content */
}

/* Desktop is the base state: the box is a plain content section, so the summary is
   inert and carries no accordion chrome (no such chrome exists in Figma, and the dev
   note scopes the accordion to mobile). The 768 block re-enables the toggle. */
.course-info-box__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;                     /* hide the native disclosure triangle */
  cursor: default;
  pointer-events: none;
}

.course-info-box__summary::-webkit-details-marker {
  display: none;
}

.course-info-box__heading {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;                     /* Figma 12030:2425 FrutigerLTStd-Roman — NOT the sitewide bold h3 */
  font-size: var(--h3-size);            /* 36px — Figma 12030:2425 */
  line-height: var(--h3-lh);            /* Figma 12030:2425 LH 43.2 / 36 */
  letter-spacing: -0.01em;              /* Figma 12030:2425 LS -0.36 */
  color: var(--color-navy);             /* Figma 12030:2425 fill #0b1628 */
}

/* The chevron is a mobile affordance only — no accordion chrome exists on these
   headings in Figma, and the dev note (11797:745) scopes the accordion to mobile. */
.course-info-box__chevron,
.course-key-info__chevron {
  display: none;
  flex: 0 0 auto;
  font-size: 24px;
  color: var(--color-navy);
  transition: transform 0.2s ease;
}

.course-info-box__content {
  display: flex;
  flex-direction: column;
  gap: 24px;                            /* Figma 12030:2426 itemSpacing 24 — between content items */
}

.course-info-box__item {
  display: flex;
  flex-direction: column;
  gap: 16px;                            /* Figma 12030:2429 itemSpacing 16 — label to list */
}

.course-info-box__item p {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;                     /* Figma 12030:2428 FrutigerLTStd-Roman */
  font-size: 16px;                      /* Figma 12030:2428 16px */
  line-height: 1.4;                     /* Figma 12030:2428 LH 22.4 / 16 */
  color: #000000;                       /* Figma 12030:2428 fill #000000 — untokenized, pure black not --color-navy-darkest */
}

.course-info-box__item p + p {
  margin-top: 6px;                      /* paragraph break inside one Figma TEXT node, tightened against the 16px item gap */
}

.course-info-box__label {
  font-weight: 700 !important;          /* Figma 12030:2430 FrutigerLTStd-Bold — beats the sibling p rule above */
}

/* ---- checklists (tangerine-free tick + text) ---- */

.course-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;                             /* Figma 12030:2431 — derived from consecutive item rel-Y deltas */
}

.course-checklist--roomy {
  gap: 16px;                            /* Figma 12030:2513 — the Entry requirements list is looser */
}

.course-checklist > li {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 4px;                             /* Figma 12030:2432 itemSpacing 4 — icon to text */
  font-family: var(--font-family);
  font-weight: 400;                     /* Figma 12030:2434 FrutigerLTStd-Roman */
  font-size: 16px;                      /* Figma 12030:2434 16px */
  line-height: 1.4;                     /* Figma 12030:2434 LH 22.4 / 16 */
  color: var(--color-navy);             /* Figma 12030:2434 fill #0b1628 */
}

.course-checklist > li > .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: 24px;
  /* 22.4px, not 1.4: a unitless 1.4 resolves against the glyph's OWN 24px font-size
     (33.6px), so the 24px glyph centred in a 33.6px box sat ~6px below the first
     text line. 22.4 = the li's line box (16 x 1.4), which is where Figma 12030:2432
     centres the tick. QA 2026-08-10 #1. */
  line-height: 22.4px;
  color: var(--color-navy);             /* Figma 12030:2433 fill #0b1628 */
}

.course-checklist > li > span:not(.material-symbols-outlined) {
  min-width: 0;
}

/* Entry requirements: Figma 12030:2516/2519/2523/2529 break the bold lead sentence
   from its description with U+2028, and drop the description to 14px. A space read
   as one run of body copy instead. QA 2026-08-10 #5. */
.course-checklist__lead,
.course-checklist__detail {
  display: block;
}

.course-checklist__detail {
  font-size: 14px;                      /* Figma 12030:2516 run ts1 fontSize 14 */
  line-height: 1.4;                     /* Figma 12030:2516 LH 19.6 / 14 */
}

/* ---- callouts (blue / green tinted panels) ---- */

.course-callout {
  display: flex;
  flex-direction: column;
  gap: 16px;                            /* Figma 12030:2461 itemSpacing 16 */
  padding: 24px;                        /* Figma 12030:2461 padding 24 */
}

.course-callout--blue {
  background-color: rgba(203, 218, 230, 0.5); /* Figma 12030:2461 fill #cbdae6 opacity 0.5 — untokenized, no -50 variant of --color-accent-light-blue */
}

.course-callout--green {
  background-color: rgba(129, 185, 162, 0.25); /* Figma 12030:2488 fill #81b9a2 opacity 0.25 — untokenized */
}

.course-callout__top {
  display: flex;
  flex-direction: column;
  gap: 16px;                            /* Figma 12030:2462 itemSpacing 16 */
}

.course-callout__heading-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;                            /* Figma 12030:2463 itemSpacing 16 */
}

.course-callout__heading-row .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: 24px;
  color: var(--color-navy-darkest);     /* Figma 12030:2464 fill #03060c — distinct from the checklist tick */
}

.course-callout__heading {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 700;                     /* Figma 12030:2465 FrutigerLTStd-Bold */
  font-size: var(--h6-size);            /* 20px — Figma 12030:2465 */
  line-height: var(--h6-lh);            /* Figma 12030:2465 LH 26 / 20 */
  letter-spacing: -0.01em;              /* Figma 12030:2465 LS -0.2 */
  color: #000000;                       /* Figma 12030:2465 fill #000000 — untokenized */
}

.course-callout__top > p {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;                      /* Figma 12030:2466 16px */
  line-height: 1.4;                     /* Figma 12030:2466 LH 22.4 / 16 */
  color: #000000;                       /* Figma 12030:2466 fill #000000 — untokenized */
}

.course-callout__bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;                             /* Figma 12030:2467 itemSpacing 8 */
}

/* Every one of these lists is a single Figma TEXT node carrying
   `lineTypes: ["UNORDERED", …]` — i.e. Figma draws a bullet per line. The REST
   dumper flattens `lineTypes` away, so the first build read them as plain lines and
   shipped without markers. QA 2026-08-10 #2/#8. Block layout, not flex: a flex item
   is blockified and loses its `::marker`. */
.course-plain-list {
  list-style: disc;                     /* Figma 12030:2470 lineTypes UNORDERED */
  margin: 0;
  padding-left: 24px;                   /* Figma 12030:2470 render — bullet ink at 9px, text at 24px from the list's left edge */
}

.course-plain-list > li + li {
  margin-top: 6px;                      /* Figma 12030:2470 listSpacing 6 */
}

.course-plain-list > li {
  font-family: var(--font-family);
  font-weight: 400;                     /* Figma 12030:2470 FrutigerLTStd-Roman */
  font-size: 16px;                      /* Figma 12030:2470 16px */
  line-height: 1.4;                     /* Figma 12030:2470 LH 22.4 / 16 */
  color: var(--color-navy);             /* Figma 12030:2470 fill #0b1628 */
}

/* Inline links in body copy — Figma runs these as the paragraph's own ink plus a
   rule (12030:2475 / 2497 / 2507), not the sitewide tangerine `a` from base.css:72.
   Same treatment as .course-chip__link. QA 2026-08-10 #3/#4. */
.course-link {
  color: inherit;
  text-decoration: underline;
}

/* ---- "Courses required" chip inside an Entry-requirements bullet ---- */

.course-chip {
  display: block;
  width: fit-content;
  margin-top: 8px;
  padding: 4px 8px;                     /* Figma 12030:2524 padding 4 8 */
  background-color: var(--color-navy-lightest-50); /* Figma 12030:2524 fill #e6e7e9 opacity 0.5 */
  font-weight: 400;
  /* 14, not 16: Text/Regular/Normal is only this node's BASE style — every run inside
     it (ts1 bold, ts2 plain, ts3 underlined) overrides fontSize to 14. */
  font-size: 14px;                      /* Figma 12030:2525 runs ts1/ts2/ts3 fontSize 14 */
  line-height: 1.4;                     /* Figma 12030:2525 LH 1.4em */
  color: var(--color-navy);             /* Figma 12030:2525 fill #0b1628 */
}

.course-chip strong {
  font-weight: 700;                     /* Figma 12030:2525 run ts1 "65 Bold" / boldWeight 700 */
}

/* Navy, not the sitewide tangerine link colour — the whole text node is fill #0B1628
   and only ts3 adds the rule. */
.course-chip__link {
  color: inherit;                       /* Figma 12030:2525 fill #0b1628 */
  text-decoration: underline;           /* Figma 12030:2525 run ts3 textDecoration UNDERLINE */
}

/* ---- career-outcome cards ---- */

.course-outcome-cards {
  display: flex;
  flex-direction: row;
  gap: 16px;                            /* Figma 12030:2537 itemSpacing 16 */
  min-width: 0;
}

.course-outcome-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;                            /* Figma 12030:2539 itemSpacing 18 — untokenized, single-use */
  padding: 24px;                        /* Figma 12030:2539 padding 24 */
  background-color: var(--color-tangerine-lightest); /* Figma 12030:2538 fill #ffefe5 */
}

.course-outcome-card__image {
  width: 100%;
  height: 149px;                        /* Figma 12030:2540 181x149 — width flexes with the card, height is fixed */
  object-fit: cover;
  border-radius: var(--radius-sm);      /* Figma 12030:2540 cornerRadius 4 */
  display: block;
}

.course-outcome-card__heading {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 700;                     /* Figma 12030:2543 FrutigerLTStd-Bold */
  font-size: var(--h6-size);            /* 20px — Figma 12030:2543 */
  line-height: var(--h6-lh);            /* Figma 12030:2543 LH 26 / 20 */
  letter-spacing: -0.01em;              /* Figma 12030:2543 LS -0.2 */
  color: var(--color-navy);             /* Figma 12030:2543 fill #0b1628 */
}

.course-outcome-card__text {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;                     /* Figma 12030:2544 FrutigerLTStd-Roman */
  font-size: 14px;                      /* Figma 12030:2544 14px */
  line-height: 1.4;                     /* Figma 12030:2544 LH 19.6 / 14 */
  color: var(--color-navy);             /* Figma 12030:2544 fill #0b1628 */
}

/* ---- further-study training card ---- */

.course-training-card {
  width: 400px;                         /* Figma 12030:2564 width 400 FIXED */
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;                            /* Figma 12030:2564 itemSpacing 24 */
  padding: 16px;                        /* Figma 12030:2564 padding 16 */
  background-color: var(--color-white); /* Figma 12030:2564 fill #ffffff */
  border: 1px solid var(--color-navy-lightest); /* Figma 12030:2564 stroke #e6e7e9 weight 1 */
  border-radius: var(--radius-sm);      /* Figma 12030:2564 cornerRadius 4 */
  box-shadow: var(--shadow-md);         /* Figma 12030:2564 DROP_SHADOW 0 3 16 -4 rgba(0,0,0,0.09) */
}

.course-training-card__image {
  width: 100%;
  height: 212px;                        /* Figma I12030:2564;11792:4133 368x212 */
  object-fit: cover;
  border-radius: var(--radius-sm);      /* Figma I12030:2564;11792:4133 cornerRadius 4 */
  display: block;
}

.course-training-card__main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.course-training-card__main .course-badge__text {
  color: var(--color-navy);             /* Figma I12030:2564;11792:4161 fill #0b1628 — navy here, tangerine in Block 4 */
}

.course-training-card__code {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 700;                     /* Figma I12030:2564;11792:4163 FrutigerLTStd-Bold */
  font-size: 16px;                      /* Figma I12030:2564;11792:4163 16px */
  line-height: 1.3;                     /* Figma I12030:2564;11792:4163 LH 20.8 / 16 */
  letter-spacing: 0.03em;               /* Figma I12030:2564;11792:4163 LS 0.48 */
  color: var(--color-tangerine);        /* Figma I12030:2564;11792:4163 fill #ff6600 */
}

.course-training-card__title {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 700;                     /* Figma I12030:2564;11792:4164 FrutigerLTStd-Bold */
  font-size: var(--h6-size);            /* 20px */
  line-height: var(--h6-lh);            /* LH 26 / 20 */
  letter-spacing: -0.01em;
  color: var(--color-navy);             /* Figma I12030:2564;11792:4164 fill #0b1628 */
}

.course-training-card__divider {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-tangerine); /* Figma I12030:2564;11792:4144 stroke #ff6600 */
}

.course-training-card__copy {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;                     /* Figma I12030:2564;11792:4150 FrutigerLTStd-Roman */
  font-size: 16px;
  line-height: 1.4;                     /* LH 22.4 / 16 */
  color: var(--color-navy-darkest);     /* Figma I12030:2564;11792:4150 fill #03060c */
}

.course-training-card__link {
  align-self: flex-start;
  font-size: 14px;                      /* Figma I12030:2564;11792:4152 Text/Small/Bold 14 */
  line-height: 1.4;                     /* Figma I12030:2564;11792:4152 LH 1.4em */
  color: var(--color-tangerine);        /* Figma I12030:2564;11792:4152 fill #ff6600 */
  text-decoration: none;                /* Figma 10343:75217 Style=Link carries no rule, unlike the .btn--link base */
  padding: 0;                           /* Figma I12030:2564;11792:4152 declares no padding; the .btn base was adding 10px block */
}

/* .btn--link hovers to tangerine, which is this link's resting colour — so hover gave
   no feedback at all. Darkening matches what .btn--link.btn--tangerine:hover already does. */
.course-training-card__link:hover,
.course-training-card__link:focus-visible {
  color: var(--color-tangerine-dark);
}

.course-training-card__link .material-symbols-outlined {
  font-size: 24px;                      /* Figma I12030:2564;11792:4152;10343:75219 arrow_outward 24x24 */
}

/* --------------------------------------------------------------------------
   Block 5 — orange rail
   -------------------------------------------------------------------------- */

.course-sidebar {
  flex: 0 1 560px;                      /* Figma 12030:2582 width 560 */
  min-width: 0;
  padding: 112px 80px 112px 40px;       /* Figma 12030:2582 padding 112 80 112 40 — asymmetric, transcribed as-is */
  background-color: var(--color-tangerine); /* Figma 12030:2582 fill #ff6600 */
  display: flex;
  flex-direction: column;
  align-items: center;                  /* Figma 12030:2582 counter=CENTER */
  gap: 36px;                            /* Figma 12030:2582 itemSpacing 36 */
}

.course-sidebar__cta {
  width: 100%;
  max-width: 440px;                     /* Figma 12030:2586 width 440 */
  padding: 24px;                        /* Figma 12030:2586 padding 24 */
  background-color: var(--color-white); /* Figma 12030:2586 fill #ffffff */
  display: flex;
  flex-direction: column;
  gap: 16px;                            /* Figma 12030:2586 itemSpacing 16 */
}

.course-sidebar__cta-heading {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;                     /* Figma 12030:2587 FrutigerLTStd-Roman — not the sitewide bold h5 */
  font-size: var(--h5-size);            /* 24px — Figma 12030:2587 */
  line-height: var(--h5-lh);            /* Figma 12030:2587 LH 31.2 / 24 */
  letter-spacing: -0.01em;              /* Figma 12030:2587 LS -0.24 */
  color: var(--color-navy);             /* Figma 12030:2587 fill #0b1628 */
}

.course-sidebar__cta-btn {
  align-self: stretch;                  /* Figma 12030:2589 sizing horizontal=fill — the button spans the card, it does not hug its label */
}

.course-sidebar__phone {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;                     /* Figma 12030:2592 FrutigerLTStd-Roman */
  font-size: 12px;                      /* Figma 12030:2592 12px */
  line-height: 1.3;                     /* Figma 12030:2592 LH 15.6 / 12 */
  color: var(--color-navy);             /* Figma 12030:2592 fill #0b1628 */
  text-decoration: underline;           /* Figma 12030:2586 render rules the whole sentence, not just the number */
  text-decoration-thickness: 1px;       /* match base.css:75 rather than leave `auto` to resolve per-engine */
}

/* The rule belongs to the sentence, so the link must not draw a second one on top
   of it — base.css:72 underlines every `a`, and the two lines stacked into a thick
   broken band over the number. A descendant cannot cancel an ancestor's underline,
   so the paragraph's single line still runs through the link. */
.course-sidebar__phone a {
  color: inherit;
  text-decoration: none;
}

/* ---- Key information panel ---- */

.course-key-info {
  width: 100%;
  max-width: 440px;                     /* Figma 12030:2593 width 440 */
  padding: 24px;                        /* Figma 12030:2593 padding 24 */
  background-color: var(--color-white); /* Figma 12030:2593 fill #ffffff */
  display: flex;
  flex-direction: column;
  gap: 24px;                            /* Figma 12030:2593 itemSpacing 24 */
}

.course-key-info__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  cursor: default;
  pointer-events: none;                 /* desktop base — re-enabled at <=768 */
}

.course-key-info__summary::-webkit-details-marker {
  display: none;
}

.course-key-info__heading {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;                     /* Figma 12030:2594 FrutigerLTStd-Roman */
  font-size: var(--h5-size);            /* 24px — Figma 12030:2594 */
  line-height: var(--h5-lh);            /* Figma 12030:2594 LH 31.2 / 24 */
  letter-spacing: -0.01em;              /* Figma 12030:2594 LS -0.24 */
  color: var(--color-navy);             /* Figma 12030:2594 fill #0b1628 */
}

.course-key-info__content {
  display: flex;
  flex-direction: column;
  gap: 24px;                            /* Figma 12030:2595 itemSpacing 24 */
}

.course-key-info__divider {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-tangerine); /* Figma 12030:2603 stroke #ff6600 */
}

.course-key-info__row {
  display: flex;
  flex-direction: column;
  gap: 16px;                            /* Figma 12030:2604 itemSpacing 16 */
}

.course-key-info__label {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 700;                     /* Figma 12030:2597 FrutigerLTStd-Bold */
  font-size: var(--h6-size);            /* 20px — Figma 12030:2597 */
  line-height: var(--h6-lh);            /* Figma 12030:2597 LH 26 / 20 */
  letter-spacing: -0.01em;              /* Figma 12030:2597 LS -0.2 */
  color: var(--color-tangerine);        /* Figma 12030:2597 fill #ff6600 */
}

.course-key-info__row p {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;                     /* Figma 12030:2601 FrutigerLTStd-Roman */
  font-size: 16px;                      /* Figma 12030:2601 16px */
  line-height: 1.4;                     /* Figma 12030:2601 LH 22.4 / 16 */
  color: var(--color-navy);             /* Figma 12030:2601 fill #0b1628 */
}

.course-key-info__row p + p,
.course-key-info__row p + .course-plain-list {
  margin-top: 8px;                      /* Figma 12030:2600 / 2629 itemSpacing 8 — body-content gap */
}

/* The Fees row's note sits 4px under its label, tighter than the 16px of every
   other row (Figma 12030:2596 itemSpacing 4). */
.course-key-info__note {
  margin-top: -12px;                    /* 16px row gap minus the Figma 4px */
  font-size: 12px !important;           /* Figma 12030:2599 12px */
  line-height: 1.3 !important;          /* Figma 12030:2599 LH 15.6 / 12 */
}

.course-key-info__row a {
  color: inherit;
  text-decoration: underline;
}

.course-key-info__logos {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 48px;                            /* Figma 12030:2583 itemSpacing 48 */
  padding: 36px 24px 24px;              /* Figma 12030:2583 padding 36 24 24 24 */
  background-color: var(--color-white); /* Figma 12030:2583 fill #ffffff */
}

.course-key-info__logo {
  display: block;
  object-fit: contain;                  /* never stretch a wordmark — Figma reports STRETCH on 12030:2585, whose aspect differs from its slot */
}

.course-key-info__logo--nrt {
  width: 133px;                         /* Figma 12030:2584 133x98 */
  height: 98px;
}

.course-key-info__logo--mba {
  width: 113px;                         /* Figma 12030:2585 113x126 */
  height: 126px;
}

/* ---- sticky box (dev-note rule 3) ---- */

/* Pastel 2026-08-19 #3 — "(Desktop) This box should be sticky inside the orange strip
   when the user scrolls through … keeping an Enquire Now button in their view".
   The box below already declared `position: sticky` (dev-note rule 3) but never pinned.
   Cause: base.css:34 sets `html, body { overflow-x: hidden }`, and `overflow-x: hidden`
   forces body's used `overflow-y` to `auto` — which makes BODY a scroll container. The
   sticky box's nearest scrollport is then body, and body never scrolls (the viewport
   does), so the offset could never engage: measured at 1440, the box's document-space
   top stayed 3104.1px at scrollY 0 / 3604 / 4406 / 5685 / 6796 — it simply scrolled
   away with the page.
   `overflow-x: clip` clips identically but is NOT scrollable, so it does not become a
   scrollport and the viewport stays the sticky scrollport. Scoped to this template's
   own body class, so base.css keeps its single site-wide declaration (css-architecture)
   and no other page is touched. An engine without `clip` support drops the declaration
   and simply keeps today's non-pinning behaviour.
   No `min-width` query here: the file is desktop-first (max-width only), and the
   declaration is inert on mobile because .course-sidebar__sticky-spacer is display:none
   below 1200px. The header does not need clearing — .site-header is position:relative
   (measured 184px tall at 1440, scrolls away: its viewport bottom reads -2900 at
   scrollY 3084), so the 24px offset below never hides the box under it. */
body.single-mba_course {
  overflow-x: clip;
}

.course-sidebar__sticky-spacer {
  flex: 1 1 auto;                       /* Figma 12319:2200 sizingV=FILL — absorbs the rail's remaining height */
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.course-sidebar__sticky-box {
  position: sticky;
  top: 24px;                            /* implementation parameter — Figma has no CSS position; clears the header gap */
  width: 100%;
  max-width: 420px;                     /* Figma 11792:4412 width 420 — 20px narrower than the boxes above it, as drawn */
  padding: 53px 30px;                   /* Figma 11792:4412 padding 53 30 — untokenized, single-use */
  display: flex;
  flex-direction: column;
  gap: 24px;                            /* Figma 11792:4412 itemSpacing 24 */
}

.course-sidebar__back-to-top {
  align-self: flex-start;
  color: var(--color-white);            /* Figma I11792:4414;10215:112374 fill #ffffff */
  text-decoration: none;                /* Figma 11792:4414 Style=Link renders without a rule here, unlike the .btn--link base */
  /* The .btn base contributes 10px block padding, which stacked on the sticky box's
     24px itemSpacing and read as a 34px gap. Figma 11792:4414 declares no padding. */
  padding: 0;
  gap: 8px;                             /* Figma 11792:4414 itemSpacing 8 */
}

/* The .btn--link base hovers to tangerine, which is this rail's own background —
   the label vanished on hover. Navy-darkest is what .scheme-tangerine already uses
   as ink on tangerine, so the hover borrows that rather than inventing a colour. */
.course-sidebar__back-to-top:hover,
.course-sidebar__back-to-top:focus-visible {
  color: var(--color-navy-darkest);
}

.course-sidebar__back-to-top .material-symbols-outlined {
  font-size: 24px;                      /* Figma I11792:4414;10215:112375 arrow_upward 24x24 */
  /* Figma sits a 24px icon box on a 24px text line box (11792:4414 — both h=24), so
     the arrow reads as centred on the label. A Material Symbols glyph is NOT centred
     in its own em box: measured at 4x on the built page it sat 1.75px below the
     label's cap-height centre. Matching the label's line box and lifting 2px closes
     it to 0.25px. QA 2026-08-10 #9. */
  line-height: 19.2px;                  /* the .btn label line box — 16 x 1.2 */
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Block 6 — Section_Form

   The band itself is the shared `.form-band` / `.help-card` component in
   assets/css/form-section.css (moved there 2026-08-10 when Career pathways turned
   out to use the same band). Only the background is page-specific, so only the
   background lives here.
   -------------------------------------------------------------------------- */

.form-band--course {
  background-color: rgba(203, 218, 230, 0.5); /* Figma 12030:2637 fill #cbdae6 opacity 0.5 — untokenized composite */
}

/* ==========================================================================
   Mobile — derived per roadmap/mobile-derivation-catalog.md (no B4 mobile frame)
   ========================================================================== */

/* --------------------------------------------------------------------------
   One transition for this page, at 1200 rather than 768: between those two widths
   the two-column layout, the About band's text/image row and the rail's desktop
   padding all broke. 1200 also matches nav.css, which swaps the header for the
   hamburger at `min-width: 1200px`, so page and chrome change shape together.

   Cert III only — the other pages keep their own breakpoints, already reviewed.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .course-body {
    flex-direction: column;
  }

  /* Dev-note rule 1: rail above body content. */
  .course-sidebar {
    order: -1;
    flex: 0 0 auto;
  }

  .course-body__left {
    flex: 0 0 auto;
  }

  .course-sidebar__cta,
  .course-key-info {
    max-width: none;
  }

  /* Sticky-on-scroll is a desktop affordance. Stacked, the rail already sits at the
     top of the page, so the duplicate CTA below the body has nothing left to do. */
  .course-sidebar__sticky-spacer {
    display: none;
  }

  /* --- Block 4 — About ------------------------------------------------------ */
  .course-about {
    padding: 50px 20px;                 /* Section Padding large 112 -> 50, gutter 20 */
  }

  .course-about__heading {
    font-size: 32px;                    /* Figma Variables mobile H2 44 -> 32 */
  }

  .course-about__intro {
    flex-direction: column;
    gap: 32px;
  }

  .course-about__image {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 555 / 361;            /* Figma 12030:2411 555x361 — keep the drawn ratio once the width is fluid */
  }

  .course-about__jump-label {
    font-size: 18px;                    /* Figma Variables mobile Text Large 20 -> 18 */
  }

  .course-about__jump-list {
    flex-direction: column;
  }

  .course-about__jump-list > li {
    flex: 0 0 auto;
  }

  /* --- Block 5 — body + rail ---------------------------------------------- */
  .course-sidebar {
    padding: 50px 20px;                 /* Section Padding large 112 -> 50, gutter 20 */
  }

  .course-body__left {
    padding: 50px 20px;
    gap: 48px;                          /* 80 is a desktop rhythm; tightened once the boxes are collapsible */
  }

  /* Dev-note rule 2: the body boxes and the Key-information panel become real
     accordions here — the summary regains its click target and grows a chevron.
     course-single.js collapses them on first load at this width. */
  .course-info-box__summary,
  .course-key-info__summary {
    cursor: pointer;
    pointer-events: auto;
  }

  .course-info-box__chevron,
  .course-key-info__chevron {
    display: block;
  }

  .course-info-box[open] .course-info-box__chevron,
  .course-key-info[open] .course-key-info__chevron {
    transform: rotate(180deg);
  }

  .course-info-box__heading {
    font-size: 28px;                    /* Figma Variables mobile H3 36 -> 28 */
  }

  .course-sidebar__cta-heading,
  .course-key-info__heading {
    font-size: 20px;                    /* Figma Variables mobile H5 24 -> 20 */
  }

  /* .help-card__title moved with the band — see form-section.css */
  .course-callout__heading,
  .course-key-info__label,
  .course-outcome-card__heading,
  .course-training-card__title {
    font-size: 18px;                    /* Figma Variables mobile H6 20 -> 18 */
  }

  /* Pastel 2026-08-19 #2 — "These logos seem to go off-screen on mobile, can we please
     fix?" The row was `nowrap` around two fixed-width images: 133 + 48 gap + 113 =
     294px of content inside a card whose content box is only 266px at 402 and 224px at
     360. Neither image could shrink either, because a flex item's automatic minimum
     size is its own specified width (`min-width: auto`) — so the MBA mark rendered 4px
     outside the white card at 402 (right edge 362 vs card 358) and 2px past the
     viewport at 360 (right edge 362, body.scrollWidth 362 vs innerWidth 360), where
     the site-wide overflow clip cut it off.
     Wrap rather than shrink or scroll, per .claude/rules/css-architecture.md
     (min-width:0 on the flex chain; no drag-scroll row at non-touch widths): each mark
     keeps its drawn size and drops to its own line only when the card is too narrow
     for both. Still side by side at 768 (632px of content available). */
  /* Pastel 2026-08-19 #4 — "These two logos again (sorry!) - can we have them sit side-by-side
     on mobile? They will need to be made smaller on mobile to fit, that's okay."
     So: nowrap, and let the pair shrink together instead of dropping to two lines (the previous
     round wrapped them, which is what the client is replying to).
     The card's content box measures 632px at 768, 266 at 402, 224 at 360 and 184 at 320, against
     133 + 113 = 246px of drawn logo. Each mark therefore takes its share of whatever is left
     after the gap — 133/246 and 113/246 — so the two scale by the SAME factor and keep their
     drawn size relationship. `width` stays as the cap, so nothing is ever enlarged: at 402 the
     sum plus gap is 262 <= 266 and neither logo shrinks at all; below that they shrink in step.
     `height: auto` lets each keep its own aspect: the MBA slot is drawn 113x126 while the file
     is 339x345, and object-fit:contain was already letterboxing it, so the ink does not change
     size — only the empty box height goes with it. */
  .course-key-info__logos {
    flex-wrap: nowrap;
    gap: 16px;                          /* 246 + 16 = 262, inside the 266 available at 402 */
    min-width: 0;                       /* css-architecture.md flex chain */
  }

  .course-key-info__logo--nrt,
  .course-key-info__logo--mba {
    min-width: 0;                       /* beats the automatic minimum size (= the img's own width) */
    flex: 0 1 auto;
    height: auto;                       /* width drives the height, so the ratio is preserved */
  }

  .course-key-info__logo--nrt {
    max-width: calc((100% - 16px) * 133 / 246);
  }

  .course-key-info__logo--mba {
    max-width: calc((100% - 16px) * 113 / 246);
  }

  /* 3-up wraps to 2-up, then 1-up — no drag-carousel above touch widths. A plain
     `flex-direction: column` sent every card full-width, and with a fluid
     aspect-ratio the photo grew to ~600px tall on a tablet. 240px is the readable
     floor for this card (heading + one line of copy). QA 2026-08-10 #12. */
  .course-outcome-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  .course-outcome-card__image {
    height: 149px;                      /* Figma 12030:2540 149 — the drawn height holds once the card is fluid */
  }

  .course-training-card {
    width: 100%;
  }

  /* Sticky-on-scroll is a desktop affordance; on mobile the primary CTA has
     already been reordered to the top of the page, so the duplicate is dropped.
     Flagged as a derivation, not a dev-note instruction (see spec Open questions). */
  .course-sidebar__sticky-spacer {
    display: none;
  }

  /* Block 6 — form: the whole band's mobile treatment moved to form-section.css,
     which carries the same 1199 cutoff. Nothing page-specific is left here. */
}

/* --------------------------------------------------------------------------
   Undesigned courses — the same template serves all 104 mba_course posts, but only
   CPC30220 has an approved design. The rest render title + synced meta + the
   enquiry form, with this defined empty state where the info boxes would be.
   -------------------------------------------------------------------------- */

.course-body__empty {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-navy);
}