/* ==========================================================================
   Career pathways — templates/template-career-pathways.php
   Figma frame 11650:578 "CAREER PATHWAYS // DESKTOP" (desktop-only batch; the
   responsive treatment is derived per roadmap/mobile-derivation-catalog.md).
   Spec: roadmap/phase-05-training-and-calendar/artifacts/page-career-pathways-spec.md

   Blocks here: 4 Section_Your future (.career-future), 5 Section_Your pathway
                (.pathway*), 6 Career Guide (.career-guide).
   Block 3 reuses .page-banner (banners.css, global); block 7 reuses .form-band
   (form-section.css, global) and only sets its background below; 1/2/8 are globals.

   One transition, at 1200, matching Cert III and nav.css's own hamburger threshold:
   every column row here pairs a fluid text column with a fixed-width sibling, so the
   text column falls below a readable width well before 768. Desktop-first — the only
   @media is max-width and sits after the desktop rules.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Action buttons — every button on this page keeps the default 10/24 padding and
   44px height. Figma draws the labels at 14 (11653:2858, 11654:2882, 11654:2897,
   11654:2898, 11671:7214 — all `size=14`, box 44 tall), which is what this page
   shipped; the client has since asked for 16 on every button here, so these rules
   now only exist to hold the drawn 44px box, not to resize the label.

   Pastel 2026-08-19 #1 — "For all buttons on this page, please update the text to
   be 16px." Page-scoped on purpose: the .btn base in buttons.css is already 16px and
   five other pages depend on it, so this is a removal of this page's 14px override
   rather than a change to the shared component. Every `.btn` in the page content is
   covered — this rule (the two Block 4 buttons, the Block 5 intro button, the Block 6
   guide button), `.pathway-card__link` below (2 per card x 5 cards), and the Block 7
   Gravity Forms submit at the foot of this file.
   -------------------------------------------------------------------------- */

.career-future__actions .btn,
.pathway-intro__actions .btn,
.career-guide__actions .btn {
  font-size: 16px;                      /* Pastel 2026-08-19 #1 — all buttons on this page to 16px; was 14px per Figma 11653:2858 */
  /* Figma pins these buttons at 44 tall while carrying a 24px icon, which the base
     10px block padding cannot reach (24 + 20 + 4 border = 48). 8px lands the icon
     variants on 44 exactly; min-height holds the icon-less ones at the same 44 — a
     16px label at LH 1.2 is 19.2, so the box is still driven by min-height, not text. */
  --btn-pad-block: 8px;                 /* Pastel 2026-08-19 #5 — set the knob, not `padding-block`, so the optical shift survives */
  min-height: 44px;                     /* Figma 11653:2858 box height 44 */
}

/* --------------------------------------------------------------------------
   Block 4 — Section_Your future (navy band with a 10% photo wash)
   -------------------------------------------------------------------------- */

.career-future {
  position: relative;
  padding: 112px 80px;                  /* Figma 11650:2827 padding 112 80 */
  background-color: var(--color-navy);  /* Figma 11650:2827 fills[0] SOLID #0b1628 */
  overflow: hidden;
}

/* The band's second fill is the same photo as the content image, laid over the navy at
   10% — NOT the 5% Cert III uses (Figma 11650:2827 fills[1] IMAGE opacity 0.1, read from
   the raw JSON; the block transcription dropped the field). A pseudo-element keeps the
   content itself at full opacity. */
.career-future::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--career-future-texture, none);
  background-size: cover;
  background-position: center;
  opacity: 0.1;                         /* Figma 11650:2827 fills[1] opacity 0.1 */
  pointer-events: none;
}

.career-future__wrapper {
  position: relative;                   /* above ::before */
  max-width: 1280px;                    /* Figma 11650:2828 width 1280 */
  margin: 0 auto;
  min-width: 0;
}

.career-future__intro {
  display: flex;
  flex-direction: row;
  align-items: flex-start;              /* Figma 11650:2829 counter=MIN */
  gap: 64px;                            /* Figma 11650:2829 itemSpacing 64 */
  min-width: 0;
}

.career-future__box {
  flex: 1 1 auto;                       /* Figma 11650:2832 sizingH=FILL -> 661 at 1280 */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;                            /* Figma 11650:2832 itemSpacing 24 */
}

.career-future__content {
  display: flex;
  flex-direction: column;
  gap: 36px;                            /* Figma 11650:2835 itemSpacing 36 */
}

.career-future__title {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;                     /* Figma 11650:2838 FrutigerLTStd-Roman */
  font-size: 44px;                      /* Figma 11650:2838 44px */
  line-height: 1.1;                     /* Figma 11650:2838 LH 48.4 / 44 */
  letter-spacing: -0.01em;              /* Figma 11650:2838 LS -0.44 */
  color: var(--color-white);            /* Figma 11650:2838 fill #ffffff */
  max-width: 486px;                     /* Figma 11650:2837 heading container w486 FIXED */
}

.career-future__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;                            /* Figma 11650:2839 itemSpacing 36 — text block to logo */
}

/* The two paragraphs are one Figma TEXT node split on its internal blank line, so the
   gap between them is that node's own line-height, not the frame's itemSpacing. */
.career-future__copy-text {
  display: flex;
  flex-direction: column;
  gap: 22px;                            /* Figma 11650:2840 LH 22.4 — the blank line inside the node */
}

/* Only the FIRST paragraph is bold. The node's base style is Bold 700, but it carries a
   per-character override across characters 173-380 — the whole second paragraph — switching
   to FrutigerLTStd-Roman 400 (Figma 11650:2840 styleOverrideTable entry 9). The simplified
   spec cache drops characterStyleOverrides entirely, so the build could only see the bold
   base; QA round 2 caught it. `.tmp/qa-cp-round2/sweep-overrides.py` lists every text node on
   a page that carries such an override — run it before trusting a weight from the cache. */
.career-future__copy-text p + p {
  font-weight: 400;                     /* Figma 11650:2840 override 9 FrutigerLTStd-Roman */
}

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

.career-future__logo {
  width: 113px;                         /* Figma 12320:2202 box 113x126 */
  height: 126px;
  display: block;
  object-fit: contain;
}

.career-future__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;                  /* Figma 11653:2857 counter=CENTER */
  gap: 24px;                            /* Figma 11653:2857 itemSpacing 24 */
}

/* Pastel 2026-08-19 #2 — "Could we just check the hover on this button? The text seems to
   fade out?" It did: this band is `.scheme-navy` and the button is an `<a>`, so base.css's
   `.scheme-navy a:hover` (0,2,1) out-ranked `.btn--primary:hover` (0,2,0) and the label went
   #ff934c on the button's own #cc5100 hover fill — 2.01:1, dissolved. No rule here: the scheme
   rules in base.css now carry `:not(.btn)`, so a button keeps its own colours in any band. Fixed
   there rather than on this page because the same trap waits for the next `.btn--primary` put
   into a navy band, and because buttons.css already guards `--secondary` and `--link` that way. */

.career-future__image {
  flex: 0 0 555px;                      /* Figma 11650:2830 width 555 FIXED */
  min-width: 0;
  margin: 0;
  /* Figma 11650:2830 is layoutAlign=STRETCH with sizingV=FILL, which overrides the row's own
     counter=MIN for this child: the image matches the text column's height rather than a fixed
     one. 565 was that height in the design, so a hard height looked identical at 1440 and
     stopped tracking as soon as the copy reflowed. QA round 2 #5. */
  align-self: stretch;                  /* Figma 11650:2830 layoutAlign STRETCH */
  display: flex;                        /* so the <img> below can stretch inside the frame */
  min-height: 565px;                    /* Figma 11650:2830 height 565 — a floor, not a cap */
  border-radius: var(--radius-sm);      /* Figma 11650:2830 cornerRadius 4 */
  /* 82x82 top-right corner cut — Figma 11650:2831, an absolutely-positioned navy vector
     at x=473 (473 + 82 = the frame's 555 width). The band behind is the same navy, so the
     shared clip does the job, exactly as on .course-about__image and six other pages. */
  clip-path: var(--corner-cut-clip);
  overflow: hidden;
}

/* The figure is the Figma Image FRAME and the <img> is its fill, so the frame's own
   STRETCH lands on the figure above; the photo then has to stretch inside it too, which is
   what a Figma-vs-DevTools property diff looks for on the <img> itself. Flex here rather
   than a bare `width/height: 100%` so `align-self` is a real declaration, not an inert one. */
.career-future__image img {
  align-self: stretch;                  /* Figma 11650:2830 layoutAlign STRETCH */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------------------------------
   Block 5 — Section_Your pathway (intro, quotes, five career cards)
   -------------------------------------------------------------------------- */

.pathway {
  padding: 112px 80px;                  /* Figma 11654:2867 padding 112 80 */
  background-color: var(--color-white); /* Figma 11654:2867 fill #ffffff */
}

.pathway__wrapper {
  max-width: 1280px;                    /* Figma 11654:2868 width 1280 */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;                            /* Figma 11654:2867 itemSpacing 64 */
  min-width: 0;
}

/* Three nested stacks in Figma, three different gaps — flattening them put 46 everywhere:
     11654:2868 intro -> first quote   46   (.pathway__intro-group)
     11654:2872 tagline -> content     24   (.pathway-intro)
     11654:2875 heading -> copy        36   (.pathway-intro__content)
   QA round 2 #2 and #3. */
.pathway__intro-group {
  display: flex;
  flex-direction: column;
  gap: 46px;                            /* Figma 11654:2868 itemSpacing 46 — untokenized, single use */
  min-width: 0;
}

.pathway-intro {
  display: flex;
  flex-direction: column;
  gap: 24px;                            /* Figma 11654:2872 itemSpacing 24 */
}

.pathway-intro__content {
  display: flex;
  flex-direction: column;
  gap: 36px;                            /* Figma 11654:2875 itemSpacing 36 */
  min-width: 0;
}

.pathway-intro__heading {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;                     /* Figma 11654:2878 FrutigerLTStd-Roman */
  font-size: 44px;                      /* Figma 11654:2878 44px */
  line-height: 1.1;                     /* Figma 11654:2878 LH 48.4 / 44 */
  letter-spacing: -0.01em;              /* Figma 11654:2878 LS -0.44 */
  color: var(--color-navy);             /* Figma 11654:2878 fill #0b1628 */
}

.pathway-intro__copy-block {
  display: flex;
  flex-direction: column;
  gap: 36px;                            /* Figma 11654:2879 itemSpacing 36 */
}

.pathway-intro__copy {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 700;                     /* Figma 11654:2880 FrutigerLTStd-Bold */
  font-size: 20px;                      /* Figma 11654:2880 20px */
  line-height: 1.3;                     /* Figma 11654:2880 LH 26 / 20 */
  color: var(--color-navy-darkest);     /* Figma 11654:2880 fill #03060c */
}

.pathway-intro__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;                            /* Figma 11654:2896 itemSpacing 24 */
}

/* ---- pull quote ---- */

.pathway-quote {
  margin: 0;
  padding: 36px;                        /* Figma 11654:2904 padding 36 */
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 48px;                            /* Figma 11654:4833 itemSpacing 48 */
  min-width: 0;
}

/* Figma 11654:4838 — a 92x92 vector of two quote marks (paths filled #CED0D4), served as
   an asset. It was first faked with a `&ldquo;` glyph, which the 92px box cropped to its
   top half. */
.pathway-quote__mark {
  flex: 0 0 auto;
  width: 92px;                          /* Figma 11654:4838 designedWidth 92 */
  height: 92px;                         /* Figma 11654:4838 designedHeight 92 */
  display: block;
}

.pathway-quote__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;                            /* Figma 11654:4834 itemSpacing 10 — untokenized */
}

.pathway-quote__text {
  margin: 0;
  font-family: var(--font-family);
  font-style: italic;                   /* Figma 11654:4835 FrutigerLTStd-BoldItalic */
  font-weight: 700;
  font-size: 20px;                      /* Figma 11654:4835 20px */
  line-height: 1.4;                     /* Figma 11654:4835 LH 28 / 20 */
  color: var(--color-navy);             /* Figma 11654:4835 fill #0b1628 */
}

.pathway-quote__cite {
  font-family: var(--font-family);
  font-style: normal;
  font-weight: 700;                     /* Figma 11654:4836 FrutigerLTStd-Bold */
  font-size: 16px;                      /* Figma 11654:4836 16px */
  line-height: 1.3;                     /* Figma 11654:4836 LH 20.8 / 16 */
  color: var(--color-tangerine);        /* Figma 11654:4836 fill #ff6600 */
}

/* ---- career card ---- */

.pathway-card {
  padding: 36px;                        /* Figma 11654:4843 padding 36 */
  background-color: var(--color-tangerine-lightest); /* Figma 11654:4843 fill #ffefe5 */
  border-radius: var(--radius-sm);      /* Figma 11654:4843 cornerRadius 4 */
  display: flex;
  flex-direction: column;
  gap: 36px;                            /* Figma 11654:4843 itemSpacing 36 */
  min-width: 0;
}

.pathway-card__heading {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;                            /* Figma 11654:4849 itemSpacing 24 */
  min-width: 0;
}

.pathway-card__icon {
  flex: 0 0 auto;
  width: 56px;                          /* Figma 11654:4871 wrapper 56x56, pad 10 */
  height: 56px;
  padding: 10px;
  box-sizing: border-box;
  background-color: var(--color-tangerine); /* Figma 11654:4871 fill #ff6600 */
  border-radius: var(--radius-sm);      /* Figma 11654:4871 cornerRadius 4 */
}

.pathway-card__title {
  margin: 0;
  min-width: 0;
  font-family: var(--font-family);
  font-weight: 400;                     /* Figma 11654:4851 FrutigerLTStd-Roman */
  font-size: 36px;                      /* Figma 11654:4851 36px */
  line-height: 1.2;                     /* Figma 11654:4851 LH 43.2 / 36 */
  letter-spacing: -0.01em;              /* Figma 11654:4851 LS -0.36 */
  color: var(--color-navy);             /* Figma 11654:4851 fill #0b1628 */
}

.pathway-card__divider {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-tangerine); /* Figma 11654:4983 stroke #ff6600 weight 1 */
}

.pathway-card__content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 64px;                            /* Figma 11654:4844 itemSpacing 64 */
  min-width: 0;
}

.pathway-card__main {
  flex: 1 1 auto;                       /* Figma 11654:4845 sizingH=FILL -> 708 at 1280 */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;                            /* Figma 11654:4848 itemSpacing 36 */
}

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

/* Figma 10343:75217 Style=Link carries no rule, and the .btn base contributes block
   padding the design does not have — same two corrections the Cert III card link needed. */
.pathway-card__link {
  align-self: flex-start;
  padding: 0;
  gap: 8px;                             /* Figma 11654:4934 itemSpacing 8 */
  font-size: 16px;                      /* Pastel 2026-08-19 #1 — all buttons on this page to 16px; was 14px per Figma 11654:4934 */
  line-height: 1.4;                     /* Figma 11654:4934 LH 19.6 / 14 — the ratio, so 22.4 at the 16px above */
  text-decoration: none;
  text-align: left;
  white-space: normal;                  /* the labels are a full sentence — they must wrap */
}

.pathway-card__link .material-symbols-outlined {
  font-size: 24px;                      /* Figma I11654:4934;10343:75219 arrow_outward 24x24 */
}

.pathway-card__image {
  width: 100%;                          /* Figma 11654:4899 708x403 — fluid, ratio kept below */
  align-self: stretch;                  /* Figma 11654:4899 layoutAlign STRETCH */
  aspect-ratio: 708 / 403;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-sm);      /* Figma 11654:4899 cornerRadius 4 */
  display: block;
}

/* Four of the five fills are scaleMode=FILL, which is `object-fit: cover` centred and needs
   nothing. The WHS one is scaleMode=STRETCH — REST's name for the UI's "Crop" — carrying an
   imageTransform that takes the source's BOTTOM band (11661:5040, y 0.147→1.0, i.e. the last
   806 of its 944 rows). Centring that crop lifted the framing ~70px off the design. Read the
   fill's scaleMode before assuming a photo needs no object-position. QA 2026-08-12. */
.pathway-card__image--focal-bottom {
  object-position: 50% 100%;            /* Figma 11661:5040 imageTransform ty 0.147 h 0.854 */
}

.pathway-card__aside {
  flex: 0 0 436px;                      /* Figma 11654:4931 width 436 FIXED */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
}

.pathway-card__boxes {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 16px;                            /* Figma 11654:4912 itemSpacing 16 */
}

.pathway-card__box {
  padding: 16px;                        /* Figma 11654:4906 padding 16 */
  border-radius: var(--radius-xs);      /* Figma 11654:4906 cornerRadius 2 */
  display: flex;
  flex-direction: column;
  gap: 8px;                             /* Figma 11654:4906 itemSpacing 8 */
}

.pathway-card__box--ideal {
  background-color: var(--color-tangerine-lighter); /* Figma 11654:4906 fill #ffe0cc */
}

.pathway-card__box--outcomes {
  background-color: rgba(203, 218, 230, 0.5); /* Figma 11654:4907 fill #cbdae6 opacity 0.5 — untokenized composite */
}

.pathway-card__box--further {
  background-color: rgba(129, 185, 162, 0.25); /* Figma 11654:4922 fill #81b9a2 opacity 0.25 — untokenized composite */
}

.pathway-card__box-title {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 700;                     /* Figma 11654:4902 FrutigerLTStd-Bold */
  font-size: 16px;                      /* Figma 11654:4902 16px */
  line-height: 1.4;                     /* Figma 11654:4902 LH 22.4 / 16 */
  color: var(--color-navy-darkest);     /* Figma 11654:4902 fill #03060c */
}

.pathway-card__box-text,
.pathway-card__box-list {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;                     /* Figma 11654:4904 FrutigerLTStd-Roman */
  font-size: 14px;                      /* Figma 11654:4904 14px */
  line-height: 1.4;                     /* Figma 11654:4904 LH 19.6 / 14 */
  color: var(--color-navy-darkest);     /* Figma 11654:4904 fill #03060c */
}

/* Bulleted, not a plain line list: the source TEXT nodes carry `lineTypes: UNORDERED`
   on every line plus `listSpacing: 4` (Figma 11654:4909 / 11654:4924 and siblings). The
   simplified REST cache drops both fields — read from the raw node tree. */
.pathway-card__box-list {
  list-style: disc;
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: 4px;                             /* Figma 11654:4909 listSpacing 4 */
}

.pathway-card__box-list li::marker {
  color: currentColor;
}

/* One list item per card is underlined in Figma — it links to that qualification. */
.pathway-card__box-link {
  color: inherit;
  text-decoration: underline;           /* Figma 11654:4924 styleOverrideTable textDecoration UNDERLINE */
}

/* --------------------------------------------------------------------------
   Block 6 — Career Guide (light-blue band)
   -------------------------------------------------------------------------- */

.career-guide {
  padding: 112px 80px;                  /* Figma 11670:7145 padding 112 80 */
  background-color: var(--color-accent-light-blue); /* Figma 11670:7145 fill #cbdae6 */
}

.career-guide__inner {
  max-width: 1280px;                    /* Figma 11670:7146 width 1280 */
  margin: 0 auto;
  min-width: 0;
}

.career-guide__row {
  display: flex;
  flex-direction: row;
  align-items: center;                  /* Figma 11671:7199 counter=CENTER */
  gap: 48px;                            /* Figma 11670:7149 itemSpacing 48 */
  min-width: 0;
}

.career-guide__content {
  flex: 1 1 616px;                      /* Figma 11670:7150 width 616 */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 46px;                            /* Figma 11670:7150 itemSpacing 46 — untokenized, single use */
}

.career-guide__intro {
  display: flex;
  flex-direction: column;
  gap: 22px;                            /* Figma 11670:7152 itemSpacing 22 — untokenized */
}

/* Figma draws this on ONE line: its text node is 623 wide inside a nominally 616 column,
   i.e. the designer let it run 7px past the column edge, and the 48px gap to the image
   absorbs that. Our own single-line measurement is 622, so the metrics agree and only the
   container was forcing a wrap. `max-content` plus a small allowance reproduces the design
   at full width and still wraps once the column genuinely narrows — a plain `nowrap` would
   overflow the page between 1200 and 1279, where this column shrinks to ~376px. */
.career-guide__heading {
  margin: 0;
  width: max-content;
  max-width: calc(100% + 8px);
  font-family: var(--font-family);
  font-weight: 400;                     /* Figma 11670:7158 FrutigerLTStd-Roman */
  font-size: 48px;                      /* Figma 11670:7158 48px */
  line-height: 1.2;                     /* Figma 11670:7158 LH 57.6 / 48 */
  letter-spacing: -0.01em;              /* Figma 11670:7158 LS -0.48 */
  color: var(--color-navy);             /* Figma 11670:7158 fill #0b1628 */
}

.career-guide__body {
  display: flex;
  flex-direction: column;
  gap: 18px;                            /* Figma 11670:7159 itemSpacing 18 — untokenized */
}

.career-guide__body p {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;                     /* Figma 11670:7160 FrutigerLTStd-Roman */
  font-size: 18px;                      /* Figma 11670:7160 18px */
  line-height: 1.5;                     /* Figma 11670:7160 LH 27 / 18 */
  color: var(--color-navy-darkest);     /* Figma 11670:7160 fill #03060c */
}

.career-guide__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 24px;                            /* Figma 11671:7213 itemSpacing 24 */
}

.career-guide__image {
  flex: 0 0 616px;                      /* Figma 11671:7199 width 616 */
  min-width: 0;
  display: flex;
  justify-content: center;              /* Figma 11671:7199 counter=CENTER */
}

.career-guide__image-frame {
  margin: 0;
  width: 522px;                         /* Figma 11671:7211 522x385 */
  max-width: 100%;
  /* Figma 11671:7212 rotation 0.0625 rad = 3.58deg. The sign was wrong first time round:
     in the design the top-LEFT corner sits higher, i.e. the card leans clockwise, which is
     a positive CSS angle. */
  transform: rotate(3.58deg);
  box-shadow: 0 3px 16px 2px rgba(0, 0, 0, 0.2); /* Figma 11671:7212 DROP_SHADOW — untokenized, spread/alpha differ from --shadow-md */
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* The cover is a document, so it must not be cropped: 167/118 is the supplied asset's own
   ratio (career-guide-cover.jpg is 1044x737 = 1.4166), while the Figma frame is 522x384 with a
   scaleMode=FILL fill, i.e. the design crops it slightly. QA round 2 #8 asked for the asset's
   ratio by number; the frame's width still governs the element's size. */
.career-guide__image-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 167 / 118;              /* QA round 2 #8 — career-guide-cover.jpg 1044x737 */
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------------------------------
   Block 7 — Section_Form. The band is the shared .form-band component
   (form-section.css); only its background belongs to this page.
   -------------------------------------------------------------------------- */

.form-band--career-pathways {
  background-color: var(--color-white); /* Figma 11671:8457 fill #ffffff */
}

/* Pastel 2026-08-19 #1 — "all buttons on this page" includes the enquiry form's Submit: it
   is a filled tangerine button (white on #ff6600) that Gravity Forms' own orbital theme
   renders at 14px. Scoped through the page's own band class so the shared form-section.css
   and the four other pages that embed a `.form-band` are untouched. The `.help-card__cta`
   in the same band is deliberately NOT included — it is a Figma Link component (Style=Link,
   Colour=Dark), a full sentence with no button chrome, not a button.

   The selector is this long because the framework theme's own submit rule is
   `.gform-theme--framework.gform-theme.gform_wrapper input[type="submit"].button.gform_button:where(…)`
   — 0-6-1, and its value is `var(--gf-local-font-size)`. Measured: overriding the variable
   (`--gf-ctrl-btn-font-size` on the wrapper, `--gf-local-font-size` on the button) and a
   0-5-2 `font-size` both left it at 14px; 0-7-1 lands it. GF's own height/padding are
   untouched, so the box stays as drawn. */
.form-band--career-pathways .gform_wrapper.gform-theme.gform-theme--framework input[type="submit"].gform_button.button {
  font-size: 16px;                      /* Pastel 2026-08-19 #1 — was 14px (Gravity Forms framework --gf-ctrl-btn-font-size) */
}

/* --------------------------------------------------------------------------
   One transition at 1200 — see the file header for why this page does not use
   the project's dominant 768 cutoff.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {

  /* ---- Block 4 ---- */
  .career-future {
    padding: 50px 20px;                 /* Section Padding large 112 -> 50, gutter 20 */
  }

  .career-future__intro {
    flex-direction: column;
    gap: 32px;
  }

  /* Every 36px here is the Padding scale's `medium` step, which is 24 on mobile. These two
     had no mobile rule at all, which is what QA round 2 #10 pinned in DevTools. */
  .career-future__content,
  .career-future__copy {
    gap: 24px;                          /* inner Padding medium 36 -> 24 */
  }

  .career-future__title {
    font-size: 32px;                    /* Figma Variables mobile H2 44 -> 32 */
    max-width: none;
  }

  .career-future__image {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 0;                      /* the desktop 565 floor would fight the fluid ratio */
    aspect-ratio: 555 / 565;            /* keep the drawn ratio once the width is fluid */
  }

  .career-future__actions .btn {
    flex: 1 1 260px;                     /* the brochure label is long; let the pair share the row */
  }

  /* ---- Block 5 ---- */
  .pathway {
    padding: 50px 20px;                 /* Section Padding large 112 -> 50 */
  }

  .pathway__wrapper {
    gap: 48px;
  }

  /* .pathway-intro's own gap is 24 on desktop already (Figma 11654:2872) — the mobile value of
     the medium step — so it needs no override. Its two 36px children do. */
  .pathway-intro__content,
  .pathway-intro__copy-block {
    gap: 24px;                          /* inner Padding medium 36 -> 24 */
  }

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

  .pathway-intro__copy {
    font-size: 18px;                    /* Figma Variables mobile Text Large 20 -> 18 */
  }

  /* Pastel 2026-08-19 #3 — "Mobile: let's stack this so that the quote icon sits above the
     text (otherwise the text is a bit too narrow on mobile)". The pin is on the intro quote
     (`.pathway__intro-group > .pathway-quote`); the second quote, between cards 4 and 5, is
     the same component rendered by the same `$render_quote()` closure, so it stacks too —
     leaving one of two identical quotes side-by-side would read as a bug at the same width.
     Below 1200 is this page's single "mobile" transition (see the file header): the mark
     shrinks to 56 and the mobile type scale lands here already. */
  .pathway-quote {
    padding: 24px;                      /* inner Padding medium 36 -> 24 */
    gap: 24px;
    flex-direction: column;             /* Pastel 2026-08-19 #3 — mark above the text, was row */
    align-items: flex-start;            /* Pastel 2026-08-19 #3 — mark stays flush left once stacked */
  }

  .pathway-quote__mark {
    width: 56px;
    height: 56px;
  }

  .pathway-quote__text {
    font-size: 18px;                    /* Figma Variables mobile Text Large 20 -> 18 */
  }

  .pathway-card {
    padding: 24px;                      /* inner Padding medium 36 -> 24 */
    gap: 24px;
  }

  /* Pastel 2026-08-19 #4 — "on mobile, let's set this header for each card to be column
     direction and left-aligned, so it appears like the attached." The client's mockup shows
     the orange icon tile at the top-left with the title flush-left underneath it. Applies to
     all five cards (one rule, the shared class); the desktop rule above stays row/centre.
     Same selector as the desktop rule and later in source order, so it wins on order rather
     than relying on specificity. The existing 16px gap is the "modest gap" the mockup shows,
     so it is kept as-is. */
  .pathway-card__heading {
    gap: 16px;
    flex-direction: column;             /* Pastel 2026-08-19 #4 — icon above the title, was row */
    align-items: flex-start;            /* Pastel 2026-08-19 #4 — left-aligned, was centre */
    text-align: left;                   /* Pastel 2026-08-19 #4 — left-aligned */
  }

  .pathway-card__title {
    font-size: 28px;                    /* Figma Variables mobile H3 36 -> 28 */
  }

  /* The aside is a FIXED 436 beside a fluid column: at 1024 the main column would be
     ~460 and at 768 it would go negative. Stacking is the only thing that fixes it. */
  .pathway-card__content {
    flex-direction: column;
    gap: 36px;
  }

  .pathway-card__main,
  .pathway-card__aside {
    flex: 0 0 auto;
    align-self: stretch;
  }

  .pathway-card__main {
    gap: 24px;                          /* inner Padding medium 36 -> 24 (Figma 11654:4848) */
  }

  /* The photo is drawn 708 wide (11654:4899) inside a 708 column. Once the card stacks, its
     column is the full card width — 1111px at 1199 — and the photo grew past anything the
     design ever shows, which is the width half of QA round 2 #11. It never needs to exceed
     the drawn size; below that it stays fluid. The height half is handled by the short-
     viewport query at the foot of this file. */
  .pathway-card__image {
    max-width: 708px;                   /* Figma 11654:4899 width 708 — never larger than drawn */
  }

  /* ---- Block 6 ---- */
  .career-guide {
    padding: 50px 20px;                 /* Section Padding large 112 -> 50 */
  }

  .career-guide__row {
    flex-direction: column;
    align-items: stretch;
    gap: 36px;
  }

  .career-guide__content,
  .career-guide__image {
    flex: 0 0 auto;
  }

  .career-guide__heading {
    font-size: 34px;                    /* Figma Variables scale: 48 sits between H2 44->32 and H1 54->38 */
    /* Drop the desktop 8px overhang: here the gutter is 20px, not a 48px column gap. */
    max-width: 100%;
  }

  .career-guide__body p {
    font-size: 16px;                    /* Figma Variables mobile Text Medium 18 -> 16 */
  }
}

/* The action-row labels are sentences ("Download the Build Your Future brochure"), and
   the .btn base is `white-space: nowrap` — so below roughly 500px the button's min-content
   width exceeds its column and it pushes past the gutter. `html { overflow-x: hidden }`
   hides the scrollbar but the button is still clipped, so let these labels wrap. */
@media (max-width: 640px) {
  .career-future__actions .btn,
  .pathway-intro__actions .btn,
  .career-guide__actions .btn {
    flex: 1 1 100%;
    white-space: normal;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   Short viewports — QA round 2 #11 was captured on a landscape phone (896x414).
   The card photo is drawn 708x403 inside a 708 column, so once the card goes full
   width the photo grows with it: 460px tall at 896, more than the whole viewport
   height allows alongside the copy. Bound its HEIGHT to the viewport and let the
   width follow the drawn ratio, so the photo gets smaller rather than cropped —
   a plain max-height cropped it to a 3.5:1 letterbox on 1024-1199 tablets, where
   nothing was wrong. Keyed on height, not width, because that is the real
   constraint: a 896-wide portrait tablet is fine and stays untouched.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) and (max-height: 560px) {
  .pathway-card__image {
    height: 45vh;
    width: auto;                        /* aspect-ratio then drives the width — no crop */
    max-width: 100%;
    align-self: center;
  }

  /* Block 4's photo has the same problem round 2 only fixed for the card: at 896x414 it
     went full-band width and stood 871px tall, twice the viewport. Same 45vh budget. */
  .career-future__image {
    height: 45vh;
    width: auto;
    max-width: 100%;
    align-self: center;
  }
}