/* ==========================================================================
   About our Training — page-scoped styles
   Figma frame 12243:4038
   Spec: roadmap/phase-05-training-and-calendar/artifacts/page-about-our-training-spec.md
   Template: templates/template-about-our-training.php

   Covers only the three page-specific blocks:
     Block 4 .training-info        — Figma 12243:4058
     Block 6 .quals-teaser         — Figma 12243:4640
     Block 7 .training-categories  — Figma 12256:5405

   Not here, on purpose:
     Block 3 page banner        — template-parts/page-banner.php + banners.css
     Block 5 training advantage — training-advantage.css (shared layer; this page only
                                  adds the .training-advantage--green modifier in markup)
     Block 8 ready-to-book CTA  — ready-to-book-cta.css (shared layer)
     Block 9 footer CTA         — global
   Card/badge/button/tagline atoms come from cards.css, badges.css, buttons.css and
   typography.css; only page-scoped deltas live below.

   Desktop-first. Media queries are ordered 1024 then 768, both AFTER every desktop
   rule (.claude/rules/css-architecture.md).
   ========================================================================== */

/* ==========================================================================
   Block 4 — Invest in your skills  (Figma 12243:4058)
   ========================================================================== */

.training-info {
  padding: 112px 80px;                    /* Figma 12243:4059 pad T112 R80 B112 L80 */
  background-color: var(--color-white);   /* Figma 12243:4058 SOLID #ffffff */
}

.training-info__inner {
  max-width: 1280px;                      /* Figma 12243:4060 w=1280 */
  margin: 0 auto;
  display: flex;
  /* Figma 12243:4060 counter=MIN, but the Image Wrapper is sizingV=FILL, which in
     auto-layout stretches it to the row height regardless of the counter setting.
     stretch reproduces both facts; the text column's own children stay top-aligned
     because .training-info__content is primary=MIN. */
  align-items: stretch;
  gap: var(--space-16);                   /* Figma 12243:4060 HORIZONTAL gap=64 */
}

.training-info__content {
  flex: 1 1 598px;                        /* Figma 12243:4061 w=598 sizingH=FILL */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-9);                    /* Figma 12243:4061 VERTICAL gap=36 */
}

.training-info__heading-wrap {
  display: flex;
  flex-direction: column;
  gap: 22px;                              /* Figma 12243:4062 VERTICAL gap=22 */
}

/* Tagline decoration (line + hook) comes from .section-tagline in typography.css:316 —
   Figma 12243:4064 is that same 1px tangerine rule, drawn as an absolute vector. */

.training-info__heading {
  margin: 0;
  font-family: var(--font-family);
  font-size: 48px;                        /* Figma 12243:4066 size=48 */
  font-weight: var(--font-weight-regular); /* Figma 12243:4066 FrutigerLTStd-Roman 400 */
  line-height: 1.2;                       /* Figma 12243:4066 LH=57.6 */
  letter-spacing: -0.01em;                /* Figma 12243:4066 LS=-0.48 */
  color: var(--color-navy-darkest);       /* Figma 12243:4066 run 1 #03060c */
}

/* Figma 12243:4066 is ONE text node with two character runs; the second is repainted
   #ff6600 via characterStyleOverrides, so the node's base fill is not the whole colour. */
.training-info__heading-accent {
  color: var(--color-tangerine);          /* Figma 12243:4066 run 2 #ff6600 */
}

.training-info__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);                    /* Figma 12243:4068 VERTICAL gap=24 */
}

.training-info__body {
  margin: 0;
  font-family: var(--font-family);
  font-size: 18px;                        /* Figma 12243:4070 size=18 */
  font-weight: var(--font-weight-regular); /* Figma 12243:4070 FrutigerLTStd-Roman 400 */
  line-height: 1.5;                       /* Figma 12243:4070 LH=27 */
  color: #000000;                         /* Figma 12243:4070 SOLID #000000 — untokenized */
}

/* Link list. Figma 12243:4417 is FIXED 439 inside a 598 FILL column, and this used to be
   transcribed as `max-width: 439px`. As a cap it left the rules short of their own column —
   159px at 1440, 68.5 at 1256, 425 at 1024, where the row is already stacked and the column
   is 864 wide; the ≤768 `max-width: none` override started one breakpoint too late to catch
   that. Client call 2026-09-13: the list fills its column, so there is no cap at all.
   (.tmp/aot-links-probe.mjs) */
.training-info__links {
  margin: 0;
  padding: 3px 1px;                       /* Figma 12243:4417 pad T3 R1 B3 L1 */
  list-style: none;
}

.training-info__links-row {
  border-bottom: 1px solid var(--color-tangerine); /* Figma 12243:4420 strokes SOLID #ff6600 sides(bottom=1.0) */
}

/* Pastel R9 opj85l5o #5 — the award logo under the links, no Figma frame. Left-aligned
   with the column's text. R10 #6 asked for more space above it: 24 on top of the column's
   24px gap = 48 (Padding large; 36 on mobile). */
.training-info__award {
  justify-content: flex-start;
  margin-top: var(--space-6);
}

.training-info__link {
  display: flex;
  flex-direction: row;
  align-items: center;                    /* Figma 12243:4420 counter=CENTER */
  justify-content: space-between;         /* Figma 12243:4420 primary=SPACE_BETWEEN */
  gap: var(--space-4);                    /* floor for the resolved 178px space-between distance */
  padding: var(--space-4) 0;              /* Figma 12243:4420 pad T16 R0 B16 L0 */
  color: var(--color-navy);               /* Figma 12243:4421 SOLID #0b1628 */
  text-decoration: none;
}

.training-info__link-label {
  font-family: var(--font-family);
  font-size: 20px;                        /* Figma 12243:4421 size=20 */
  font-weight: var(--font-weight-bold);   /* Figma 12243:4421 FrutigerLTStd-Bold 700 */
  line-height: 1.3;                       /* Figma 12243:4421 LH=26 */
}

.training-info__link-icon {
  flex: 0 0 auto;
  font-size: 24px;                        /* Figma 12243:4422 w=24 h=24 */
  color: var(--color-navy);               /* Figma I12243:4422;7044:3737 SOLID #0b1628 */
}

/* Not in the frame: a full-width row link with no state change is unusable. Derived
   affordance, tangerine to match the rule underneath it. */
.training-info__link:hover,
.training-info__link:focus-visible {
  color: var(--color-tangerine);
}

.training-info__link:hover .training-info__link-icon,
.training-info__link:focus-visible .training-info__link-icon {
  color: var(--color-tangerine);
}

.training-info__image {
  flex: 0 1 618px;                        /* Figma 12243:4083 w=618 FIXED */
  align-self: stretch;                    /* QA 2026-09-13 #1 — declared explicitly per the sitewide convention (about.css:290, careers.css:59) even though .training-info__inner already says align-items:stretch; Figma 12243:4083 sizingV=FILL */
  min-width: 0;
  display: flex;                          /* so the <img> below can stretch inside the frame (career-pathways.css:178) */
  overflow: hidden;
  /* Figma 12243:4085 draws an 82×82 white wedge over the image's top-right corner.
     Sitewide that notch is a clip-path, not an overlay element (find-an-apprentice.css:75). */
  clip-path: var(--corner-cut-clip);
}

/* The figure is the Figma Image FRAME and the <img> is its fill, so the frame's STRETCH lands
   on the figure above and the photo has to stretch inside it too — which is where a
   Figma-vs-DevTools property diff actually looks (career-pathways.css:188). The client's
   wording asks for the "image container", but every pin they placed resolves to `figure > img`
   (roadmap/phase-08-content-pages/artifacts/pastel-qa-2026-06-19.txt), so declare both and the
   selector they inspect is covered either way. */
.training-info__image img {
  align-self: stretch;                    /* Figma 12243:4084 layoutAlign STRETCH */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                      /* Figma 12243:4084 fills IMAGE scaleMode=FILL */
}

/* ==========================================================================
   Block 6 — Qualifications teaser  (Figma 12243:4640)
   ========================================================================== */

.quals-teaser {
  padding: 112px 80px;                    /* Figma 12243:4640 pad T112 R80 B112 L80 */
  background-color: var(--color-navy-lightest-50); /* Figma 12243:4640 SOLID #e6e7e9 opacity=0.5 */
}

.quals-teaser__inner {
  max-width: 1280px;                      /* Figma 12243:4641 w=1280 */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);                   /* Figma 12243:4641 VERTICAL gap=48 */
}

.quals-teaser__intro {
  display: flex;
  flex-direction: row;
  align-items: flex-start;                /* Figma 12256:5243 counter=MIN */
  justify-content: space-between;         /* Figma 12256:5243 primary=SPACE_BETWEEN */
  gap: 96px;                              /* Figma 12256:5243 HORIZONTAL gap=96 */
}

.quals-teaser__intro-content {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 768px;                       /* Figma 12243:4643 w=768 */
  display: flex;
  flex-direction: column;
  gap: 22px;                              /* Figma 12243:4643 VERTICAL gap=22 */
}

.quals-teaser__heading {
  margin: 0;
  font-family: var(--font-family);
  font-size: 48px;                        /* Figma 12243:4649 size=48 */
  font-weight: var(--font-weight-regular); /* Figma 12243:4649 FrutigerLTStd-Roman 400 */
  line-height: 1.2;                       /* Figma 12243:4649 LH=57.6 */
  letter-spacing: -0.01em;                /* Figma 12243:4649 LS=-0.48 */
  color: var(--color-navy);               /* Figma 12243:4649 SOLID #0b1628 */
}

.quals-teaser__copy {
  margin: 0;
  font-family: var(--font-family);
  font-size: 20px;                        /* Figma 12243:4651 size=20 */
  font-weight: var(--font-weight-bold);   /* Figma 12243:4651 FrutigerLTStd-Bold 700 */
  line-height: 1.3;                       /* Figma 12243:4651 LH=26 */
  color: var(--color-navy);               /* Figma 12243:4651 SOLID #0b1628 */
}

.quals-teaser__cta {
  flex: 0 0 auto;                         /* Figma 12256:5243 counter=MIN — button stays top-right */
}

.quals-teaser__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* Figma 12256:5024 GRID, 3 × w=400 across 1280 */
  column-gap: var(--space-9);             /* Figma 12256:5024 derived: card rel x = 0 / 439 / 877 */
  row-gap: var(--space-9);                /* Figma 12256:5024 derived: 1220 - 2×592 */
  min-width: 0;
}

/* Deltas vs the .card base in cards.css. */
.quals-teaser-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);                    /* Figma 12256:5111 VERTICAL gap=24 */
  padding: var(--space-4);                /* Figma 12256:5111 pad 16 all sides */
  background-color: var(--color-white);   /* Figma 12256:5111 SOLID #ffffff */
  border: 1px solid var(--color-navy-lightest); /* Figma 12256:5111 strokes SOLID #e6e7e9 weight=1 */
  border-radius: var(--radius-sm);        /* Figma 12256:5111 cornerRadius 4 */
  box-shadow: var(--shadow-md);           /* Figma 12256:5111 DROP_SHADOW 0 3 16 -4 rgba(0,0,0,0.09) */
  min-width: 0;
}

.quals-teaser-card__image {
  flex: 0 0 auto;
  aspect-ratio: 368 / 212;                /* Figma 12256:5112 w=368 h=212 */
  overflow: hidden;
  border-radius: var(--radius-sm);        /* Figma 12256:5113 cornerRadius 4 */
}

.quals-teaser-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                      /* Figma 12256:5113 fills IMAGE scaleMode=FILL */
}

.quals-teaser-card__content {
  flex: 1 1 auto;                         /* Figma 12256:5114 sizingV=FILL */
  display: flex;
  flex-direction: column;
  gap: var(--space-4);                    /* Figma 12256:5114 VERTICAL gap=16 */
  padding: 0;                             /* base .card__content pads; the Figma card pads once, on the card */
  min-width: 0;
}

.quals-teaser-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);                    /* Figma 12256:5116 VERTICAL gap=16 */
}

.quals-teaser-card__titles {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);                    /* Figma 12256:5121 VERTICAL gap=8 */
}

/* .course-badge base (flex, gap 8, 29px icon) is badges.css:19. Two deltas here. */
.quals-teaser-card__badge .course-badge__icon {
  width: 28px;                            /* Figma 12256:5119 w=28 */
  height: 28px;                           /* Figma 12256:5119 h=28 */
}

.quals-teaser-card__badge .course-badge__text {
  font-size: 12px;                        /* Figma 12256:5120 size=12 */
  line-height: 1.2;                       /* Figma 12256:5120 LH=14.4 */
  letter-spacing: 0.04em;                 /* Figma 12256:5120 LS=0.48 */
  color: var(--color-navy);               /* Figma 12256:5120 SOLID #0b1628 — base atom is tangerine */
  text-transform: uppercase;              /* Client Pastel R6 #2 (2026-09-16) — match the course page's all-caps lockup (single-mba_course.php:285); Figma draws this instance title-case */
}

.quals-teaser-card__code {
  margin: 0;
  font-family: var(--font-family);
  font-size: 16px;                        /* Figma 12256:5122 size=16 */
  font-weight: var(--font-weight-bold);   /* Figma 12256:5122 FrutigerLTStd-Bold 700 */
  line-height: 1.3;                       /* Figma 12256:5122 LH=20.8 */
  letter-spacing: 0.03em;                 /* Figma 12256:5122 LS=0.48 */
  color: var(--color-tangerine);          /* Figma 12256:5122 SOLID #ff6600 */
}

.quals-teaser-card__title {
  margin: 0;
  font-family: var(--font-family);
  font-size: 20px;                        /* Figma 12256:5123 size=20 */
  font-weight: var(--font-weight-bold);   /* Figma 12256:5123 FrutigerLTStd-Bold 700 */
  line-height: 1.3;                       /* Figma 12256:5123 LH=26 */
  letter-spacing: -0.01em;                /* Figma 12256:5123 LS=-0.2 */
  color: var(--color-navy);               /* Figma 12256:5123 SOLID #0b1628 */
}

.quals-teaser-card__bottom {
  flex: 1 1 auto;                         /* Figma 12256:5124 sizingV=FILL */
  display: flex;
  flex-direction: column;
  gap: var(--space-6);                    /* Figma 12256:5124 VERTICAL gap=24 */
  min-width: 0;
}

.quals-teaser-card__rule {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-tangerine); /* Figma 12256:5125 strokes SOLID #ff6600 weight=1 */
}

/* Figma 12256:5129 is primary=SPACE_BETWEEN sizingV=FILL — that is what pins every card's
   CTA to the same baseline when the blurbs run to different line counts. */
.quals-teaser-card__copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;         /* Figma 12256:5129 primary=SPACE_BETWEEN */
  gap: var(--space-4);                    /* Figma 12256:5129 VERTICAL gap=16 */
}

.quals-teaser-card__text {
  margin: 0;
  font-family: var(--font-family);
  font-size: 16px;                        /* Figma 12256:5131 size=16 */
  font-weight: var(--font-weight-regular); /* Figma 12256:5131 FrutigerLTStd-Roman 400 */
  line-height: 1.4;                       /* Figma 12256:5131 LH=22.4 */
  color: var(--color-navy-darkest);       /* Figma 12256:5131 SOLID #03060c */
}

.quals-teaser-card__actions {
  margin: 0;
  display: flex;
  gap: var(--space-6);                    /* Figma 12256:5132 HORIZONTAL gap=24 */
}

/* Figma 12256:5133 is a bare 24px-tall text link (pad 0); .btn contributes 10px block
   padding + a 2px transparent border, so both are zeroed. white-space:normal because a
   qualification title inside the sr-only suffix must be free to wrap in a 336px column. */
.quals-teaser-card__cta {
  padding-block: 0;                       /* Figma 12256:5133 pad T0 B0, h=24 */
  border-block-width: 0;
  gap: var(--space-2);                    /* Figma 12256:5133 itemSpacing 8 */
  font-size: 14px;                        /* Figma I12256:5133;10343:75218 size=14 */
  line-height: 1.4;                       /* Figma I12256:5133;10343:75218 LH=19.6 */
  text-align: left;
  white-space: normal;
  text-decoration: none;                  /* Figma I12256:5133;10343:75218 decoration=NONE — the .btn--link base underlines */
}

.quals-teaser-card__cta .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: 24px;                        /* Figma I12256:5133;10343:75219 w=24 h=24 */
}

/* ==========================================================================
   Block 7 — Short course categories  (Figma 12256:5405)
   ========================================================================== */

.training-categories {
  padding: 112px 80px;                    /* Figma 12256:5406 pad T112 R80 B112 L80 */
  background-color: var(--color-navy-lightest-50); /* Figma 12256:5405 SOLID #e6e7e9 opacity=0.5 */
}

.training-categories__inner {
  max-width: 1280px;                      /* Figma 12256:5407 w=1280 */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-9);                    /* Figma 12256:5408 VERTICAL gap=36 */
}

.training-categories__intro {
  display: flex;
  flex-direction: row;
  align-items: flex-start;                /* Figma 12260:5533 counter=MIN */
  justify-content: space-between;         /* Figma 12260:5533 primary=SPACE_BETWEEN */
  gap: 96px;                              /* Figma 12260:5533 HORIZONTAL gap=96 */
}

.training-categories__intro-content {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 768px;                       /* Figma 12260:5534 w=768 */
  display: flex;
  flex-direction: column;
  gap: 22px;                              /* Figma 12260:5534 VERTICAL gap=22 */
}

.training-categories__heading {
  margin: 0;
  font-family: var(--font-family);
  font-size: 48px;                        /* Figma 12260:5539 size=48 */
  font-weight: var(--font-weight-regular); /* Figma 12260:5539 FrutigerLTStd-Roman 400 */
  line-height: 1.2;                       /* Figma 12260:5539 LH=57.6 */
  letter-spacing: -0.01em;                /* Figma 12260:5539 LS=-0.48 */
  color: var(--color-navy);               /* Figma 12260:5539 SOLID #0b1628 */
}

.training-categories__copy {
  margin: 0;
  font-family: var(--font-family);
  font-size: 20px;                        /* Figma 12260:5541 size=20 */
  font-weight: var(--font-weight-bold);   /* Figma 12260:5541 FrutigerLTStd-Bold 700 */
  line-height: 1.3;                       /* Figma 12260:5541 LH=26 */
  color: #000000;                         /* Figma 12260:5541 runs 1-3 #000000 — untokenized */
}

/* The "all short courses" link is run 2 of the same text node: same fill, UNDERLINE is
   the only thing that marks it. The node's base fill (#ffffff) is never on canvas. */
.training-categories__copy a {
  color: inherit;
  text-decoration: underline;             /* Figma 12260:5541 run 2 decoration=UNDERLINE */
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.training-categories__copy a:hover,
.training-categories__copy a:focus-visible {
  color: var(--color-tangerine);
}

.training-categories__cta {
  flex: 0 0 auto;                         /* Figma 12260:5533 counter=MIN — button stays top-right */
}

/* Figma 12256:5418 GRID: List 616 sizingH=FILL + Image Wrapper 618 sizingH=FIXED.
   The 618 is written as a ratio, not as a literal px column. A fixed track keeps its full
   width below the 1440 frame, so the flexible list absorbs every lost pixel on its own — a
   rigid image column beside a shrinking text column is the one thing no accepted page does.
   At QA's 1256 viewport that resolved to 430 / 618: the image took 56% of the row including
   the gap (59% of the two columns alone) against Figma's 50%, and the list reflowed 98px
   taller than its frame (QA 2026-09-13 "Short courses, Image is too large").
   fr holds the Figma proportion at every width and still resolves to exactly 614 / 618 at
   1440, since 1280 - 48 gap = 1232 = 614 + 618. The list still grows as it narrows — 78px at
   1256, down from 98px — because the rows wrap; the fix is to the proportion, not to reflow. */
.training-categories__content {
  display: grid;
  grid-template-columns: minmax(0, 614fr) minmax(0, 618fr);
  column-gap: var(--space-12);            /* Figma 12256:5418 derived: image rel x=664 - list w=616 */
  align-items: stretch;                   /* Figma 12260:5529 sizingV=FILL */
}

.training-categories__list-wrap {
  min-width: 0;
}

.training-categories__list {
  margin: 0;
  padding: 3px 1px;                       /* Figma 12256:5419 pad T3 R1 B3 L1 */
  list-style: none;
}

.training-categories__row {
  border-bottom: 1px solid var(--color-tangerine); /* Figma 12256:5441 strokes SOLID #ff6600 sides(bottom=1.0) */
}

.training-categories__row-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);                    /* Figma 12256:5441 VERTICAL gap=8 */
  padding: var(--space-6) 0;              /* Figma 12256:5441 pad T24 R0 B24 L0 */
  color: var(--color-navy);               /* Figma 12256:5443 SOLID #0b1628 */
  text-decoration: none;
}

/* Figma 12256:5442 is primary=MIN, not SPACE_BETWEEN: the arrow sits 16px after the
   label, it does not fly to the right edge of the 616px list. */
.training-categories__row-heading {
  display: flex;
  flex-direction: row;
  align-items: center;                    /* Figma 12256:5442 counter=CENTER */
  gap: var(--space-4);                    /* Figma 12256:5442 HORIZONTAL gap=16 */
}

.training-categories__row-label {
  font-family: var(--font-family);
  font-size: 20px;                        /* Figma 12256:5443 size=20 */
  font-weight: var(--font-weight-bold);   /* Figma 12256:5443 FrutigerLTStd-Bold 700 */
  line-height: 1.3;                       /* Figma 12256:5443 LH=26 */
}

.training-categories__row-icon {
  flex: 0 0 auto;
  font-size: 24px;                        /* Figma 12256:5444 w=24 h=24 */
  color: var(--color-navy);               /* Figma I12256:5444;7044:3737 SOLID #0b1628 */
}

.training-categories__row-copy {
  font-family: var(--font-family);
  font-size: 14px;                        /* Figma 12256:5445 size=14 */
  font-weight: var(--font-weight-regular); /* Figma 12256:5445 FrutigerLTStd-Roman 400 */
  line-height: 1.4;                       /* Figma 12256:5445 LH=19.6 */
  color: #000000;                         /* Figma 12256:5445 SOLID #000000 — untokenized */
}

/* Derived affordance, as in Block 4: the frame has no hover state for a full-width
   row link. Only the heading recolours, so the 14px blurb keeps its contrast. */
.training-categories__row-link:hover .training-categories__row-label,
.training-categories__row-link:focus-visible .training-categories__row-label,
.training-categories__row-link:hover .training-categories__row-icon,
.training-categories__row-link:focus-visible .training-categories__row-icon {
  color: var(--color-tangerine);
}

/* The frame runs the full height of the category list — `sizingV=FILL` on Figma 12260:5529,
   and the design intent confirmed on 2026-09-16 when pinning it to the drawn 618x740 ratio
   left the photo ending mid-list. Above 1024 the height therefore comes from the sibling
   column, not from a declared proportion; the 618/740 ratio applies only in the single-column
   collapse below, where there is no sibling to match. Known and accepted consequence: the
   source is landscape 1600x1066, so the taller the list grows the more `cover` crops off its
   sides — 56% of the photo's width visible at seven rows, 43% at nine. Diffed against the
   Figma render at 1440 on 2026-09-16: forklift fully in frame, no distortion, just less
   racking at the edges. Do not "fix" this with a ratio; that is exactly what was tried. */
.training-categories__image {
  align-self: stretch;                    /* QA 2026-09-13 #1 — explicit per the sitewide convention; inert here twice over (grid items stretch by default, and the parent declares align-items:stretch). Figma 12260:5529 sizingV=FILL */
  min-width: 0;
  display: flex;                          /* so the <img> below can stretch inside the frame (career-pathways.css:178) */
  overflow: hidden;
  /* Figma 12260:5531 is an 82×82 wedge in the section's own tint. Rendered as a notch so
     whatever the band colour is shows through, rather than a hardcoded opaque overlay. */
  clip-path: var(--corner-cut-clip);
}

.training-categories__image img {
  align-self: stretch;                    /* Figma 12260:5530 layoutAlign STRETCH — see the note on .training-info__image img */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                      /* Figma 12260:5530 fills IMAGE scaleMode=FILL */
}

/* ==========================================================================
   ≤1024 — large-grid collapse. No Figma frame at this width; the breakpoint is
   the catalog's, not a measurement of this page: "Multi-column rows collapse at
   1024 (large grids) or 768 (2-col content rows)" —
   roadmap/mobile-derivation-catalog.md:51, matching home / newsroom / advice /
   training-calendar (:14). Both rows here are full-width text+image rows, so
   they take the 1024 arm.
   Nothing measured on this page forces 1024 on its own: at 1025 the link labels
   still sit at 2 lines and the row labels at 1, unchanged from 1440
   (.tmp/aot-bp-probe.mjs, 2026-09-13). An earlier version of this comment
   claimed they wrap to three lines — that was never measured and is false.
   Keep the breakpoint because 768 and 402 are QA-passed at 1024-stacking;
   moving it needs a fresh QA pass, not a new rationale.
   ========================================================================== */
@media (max-width: 1024px) {
  .training-info__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-9);
  }

  /* The row is a column at this width, so flex-basis is read as a HEIGHT — the 598 that
     Figma 12243:4061 gives as a WIDTH was holding the text block 598px tall. Measured dead
     space under the last link: 159.6px at 1024, 205.8px at 768, 71.4px at 402; 0 after
     (.tmp/qa/about-our-training/final-verify.json, 2026-09-13). */
  .training-info__content {
    flex: 0 0 auto;
  }

  .training-info__image {
    flex: 0 0 auto;
    aspect-ratio: 618 / 548;              /* Figma 12243:4083 w=618 h=548 — the stretch source is gone once stacked */
  }

  .quals-teaser__cards {
    grid-template-columns: repeat(2, 1fr); /* matches the .card-grid--3 ladder, cards.css:376 */
  }

  .training-categories__content {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-9);
  }

  /* Single column: nothing left to stretch against, so the frame states the drawn
     proportion itself. */
  .training-categories__image {
    aspect-ratio: 618 / 740;              /* Figma 12260:5529 w=618 h=740 */
  }
}

/* ==========================================================================
   ≤768 — mobile. Section Padding large 112→50 and gutter 80→20; type per the
   client's Figma Variables scale (H2 44→32 is the nearest row to the page's
   48px section headings; Text Large 20→18; Text Medium 18→16; Text Small 14
   and Tagline 16 unchanged).
   ========================================================================== */
@media (max-width: 768px) {
  /* 82px is over a fifth of a 362px content width; 60 is the sitewide mobile
     value (careers.css:671). */
  .training-info__image,
  .training-categories__image {
    --corner-cut: 60px;
    clip-path: var(--corner-cut-clip);
  }

  .training-info__award {
    margin-top: 12px;                   /* 24 gap + 12 = 36, Padding large 48->36 */
  }

  .training-info__award .award-badge__logo {
    width: 120px;                       /* same mobile size as the course rail badge */
  }

  /* ---- Block 4 ---- */
  .training-info {
    padding: 50px 20px;
  }

  .training-info__content {
    gap: var(--space-6);
  }

  .training-info__heading {
    font-size: 32px;
  }

  .training-info__body {
    font-size: 16px;
  }

  .training-info__link-label {
    font-size: 18px;
  }

  /* ---- Block 6 ---- */
  .quals-teaser {
    padding: 50px 20px;
  }

  .quals-teaser__inner {
    gap: var(--space-9);
  }

  .quals-teaser__intro {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
  }

  .quals-teaser__heading {
    font-size: 32px;
  }

  .quals-teaser__copy {
    font-size: 18px;
  }

  .quals-teaser__cards {
    grid-template-columns: minmax(0, 1fr); /* matches the .card-grid--3 ladder, cards.css:364 */
    row-gap: var(--space-6);
  }

  .quals-teaser-card__title {
    font-size: 18px;
  }

  /* ---- Block 7 ---- */
  .training-categories {
    padding: 50px 20px;
  }

  .training-categories__intro {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
  }

  .training-categories__heading {
    font-size: 32px;
  }

  .training-categories__copy {
    font-size: 18px;
  }

  .training-categories__row-label {
    font-size: 18px;
  }
}