/* ==========================================================================
   Qualifications — page CSS
   Figma frame 11671:8538 "QUALIFICATIONS // DESKTOP" (1440x6850)
   Spec: roadmap/phase-05-training-and-calendar/artifacts/page-qualifications-spec.md

   Reuses (base elsewhere, only overrides here):
     Block 3 .page-banner            — banners.css (global)
     Block 4 .about-feature-intro    — about.css (enqueued as a dependency, same as the
                                       seven other templates that reuse this band)
     Block 5 .course-badge           — badges.css (global; extracted from course-single.css
                                       when this page became the second consumer)
     Block 5/6 .btn, .btn--link,
               .btn--primary         — buttons.css (global)
     Block 7 .form-band, .help-card  — form-section.css (global)

   New here: .qual-body / .qual-card (Block 5) and .qual-help (Block 6).

   Desktop-first: every @media in this file is max-width and they all sit at the foot,
   after the desktop rules (.claude/rules/css-architecture.md). One cutoff — 1199 —
   matching the two sibling B4 pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Block 4 — Feature Intro: one override.
   The shared base caps the lead at 900px; this frame's TEXT node carries
   maxWidth 1024, and at 900 the copy wraps onto a third line.
   -------------------------------------------------------------------------- */
.about-feature-intro--qualifications .about-feature-intro__lead {
  max-width: 1024px;                    /* Figma 11671:8547 maxWidth 1024 */
}

/* --------------------------------------------------------------------------
   Block 5 — Qualifications body: five identical cards.
   Figma 11671:8548 (section) + 11694:4711 (the Training Card component).
   -------------------------------------------------------------------------- */
.qual-body {
  padding: 112px 80px;                  /* Figma 11671:8548 padding 112 80 */
  background-color: rgba(230, 231, 233, 0.5); /* Figma 11671:8548 fill #e6e7e9 opacity 0.5 — untokenized composite, one use */
}

.qual-body__inner {
  max-width: 1280px;                    /* Figma 11694:4603 width 1280 FIXED */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;                            /* Figma 11671:8548 itemSpacing 64 */
  min-width: 0;
}

.qual-card {
  display: flex;
  flex-direction: column;
  gap: 24px;                            /* Figma 11694:4603 itemSpacing 24 */
  padding: 36px;                        /* Figma 11694:4603 padding 36 */
  min-width: 0;
  background-color: var(--color-white); /* Figma 11694:4603 fill #ffffff */
  border: 1px solid var(--color-navy-lightest); /* Figma 11694:4603 stroke #e6e7e9 */
  border-radius: var(--radius-sm);      /* Figma 11694:4603 cornerRadius 4 */
  box-shadow: var(--shadow-md);         /* Figma 11694:4603 DROP_SHADOW 0 3 16 -4 rgba(0,0,0,0.09) */
}

/* ---- card head ---------------------------------------------------------- */

.qual-card__head {
  display: flex;
  flex-direction: column;
  gap: 16px;                            /* Figma I11694:4603;11694:4713 itemSpacing 16 */
  min-width: 0;
}

.qual-card__top {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 36px;                            /* Figma I11694:4603;11694:4761 itemSpacing 36 */
  min-width: 0;
}

.qual-card__code {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 700;                     /* Figma I11694:4603;11694:4746 FrutigerLTStd-Bold */
  font-size: 20px;                      /* Figma I11694:4603;11694:4746 20px */
  line-height: 1.3;                     /* LH 26 / 20 */
  letter-spacing: 0.03em;               /* Figma I11694:4603;11694:4746 LS 0.6 */
  color: var(--color-tangerine);        /* Figma I11694:4603;11694:4746 fill #ff6600 */
  white-space: nowrap;
}

/* The badge glyph is 28px here, not the 29px course-single slot, and the label is navy
   rather than tangerine — this card sits on white. Base: badges.css. */
.qual-card__badge .course-badge__icon {
  width: 28px;                          /* Figma I11694:4603;11694:4743 box 28x28 */
  height: 28px;
}

.qual-card__badge .course-badge__text {
  color: var(--color-navy);             /* Figma I11694:4603;11694:4714 fill #0b1628 */
  text-transform: uppercase;
}

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

/* ---- card body ---------------------------------------------------------- */

.qual-card__bottom {
  display: flex;
  flex-direction: column;
  gap: 36px;                            /* Figma I11694:4603;11694:5010 itemSpacing 36 */
  min-width: 0;
}

.qual-card__rule {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-tangerine); /* Figma I11694:4603;11694:4716 LINE stroke #ff6600 weight 1 */
}

.qual-card__cols {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 64px;                            /* Figma I11694:4603;11694:4717 itemSpacing 64 */
  min-width: 0;
}

.qual-card__col {
  flex: 1 1 560px;                      /* Figma I11694:4603;11694:4718 width 560 FILL */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;                            /* Figma I11694:4603;11694:4718 itemSpacing 24 */
}

.qual-card__body {
  display: flex;
  flex-direction: column;
  gap: 36px;                            /* Figma I11694:4603;11694:4720 itemSpacing 36 */
  min-width: 0;
}

/* ---- benefit list ------------------------------------------------------- */

.qual-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;                             /* Figma I11694:4603;11694:4898;11694:4934 itemSpacing 4 */
  min-width: 0;
}

/* Bottom-only rule: the row FRAME carries individualStrokeWeights
   {top:0,right:0,bottom:1,left:0} with strokeAlign INSIDE. A full border is wrong. */
.qual-card__item {
  display: flex;
  flex-direction: row;
  align-items: center;                  /* Figma I11694:4603;…;11694:4763 counter=CENTER */
  gap: 4px;                             /* Figma I11694:4603;…;11694:4763 itemSpacing 4 */
  padding: 4px 0;                       /* Figma I11694:4603;…;11694:4763 padding T4 B4 */
  min-width: 0;
  border-bottom: 1px solid var(--color-tangerine-lighter); /* Figma I11694:4603;…;11694:4763 stroke #ffe0cc bottom only */
  font-family: var(--font-family);
  font-weight: 700;                     /* Figma I11694:4603;…;11694:4765 FrutigerLTStd-Bold */
  font-size: 16px;                      /* Figma I11694:4603;…;11694:4765 16px */
  line-height: 1.4;                     /* LH 22.4 / 16 */
  color: var(--color-tangerine);        /* Figma I11694:4603;…;11694:4765 fill #ff6600 */
}

.qual-card__check {
  flex: 0 0 auto;
  align-self: flex-start;
  font-size: 24px;                      /* Figma I11694:4603;…;11694:4764 instance box 24x24 */
  line-height: 22.4px;                  /* align the glyph box with the first text line */
  color: var(--color-tangerine);        /* Figma I11694:4603;…;11694:4764 fill #ff6600 */
}

/* ---- copy + CTA --------------------------------------------------------- */

.qual-card__copy-wrap {
  display: flex;
  flex-direction: column;
  gap: 22.4px;                          /* one blank line at the copy's line-height — Figma I11694:4603;11694:4731 is a single TEXT node split on \n\n */
  min-width: 0;
}

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

.qual-card__actions {
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;                            /* Figma I11694:4603;11694:4732 itemSpacing 24 */
}

/* Pastel 2026-08-19 #2 (1) — client: "change this button to be our standard Tangerine colour
   one". The markup class went btn--link -> btn--primary (buttons.css:78), so the design
   system now supplies the tangerine fill, the white label and the 10px/24px padding. The
   three declarations that made the LINK variant work had to be deleted, not restated: this
   file loads after buttons.css at equal (0,1,0) specificity, so `padding: 0`,
   `color: var(--color-tangerine)` and `text-decoration: none` would each have beaten
   .btn--primary and left a zero-padding tangerine-on-tangerine button.
   Kept from the Figma link instance because none of it conflicts with the filled variant:
   the 8px icon gap, the 14px label (the client asked about the colour, not the type size),
   and the two wrapping rules.
   `white-space: normal` matters at every width, not just mobile: the label is a full
   sentence ("Learn more about CPC20220 Certificate II in Construction Pathways") and the
   .btn base is `white-space: nowrap`, so its min-content width blew 144px past the card at
   402. `html { overflow-x: hidden }` hides the scrollbar but the text is still clipped.
   Same correction .pathway-card__link needed (career-pathways.css:350). */
.qual-card__cta {
  align-self: flex-start;
  gap: 8px;                             /* Figma I11694:4603;11694:4733 itemSpacing 8 */
  font-size: 14px;                      /* Figma I11694:4603;11694:4733;10343:75218 14px */
  line-height: 1.4;                     /* LH 19.6 / 14 */
  text-align: left;
  white-space: normal;
}

/* Pastel 2026-08-19 #2 (1) — deliberately no :hover rule here. The old one darkened the TEXT
   because .btn--link hovers TO tangerine, this CTA's former resting colour. On the filled
   variant that same declaration would paint tangerine-dark text on .btn--primary:hover's
   tangerine-dark fill — an invisible label. buttons.css:86 already darkens the fill and keeps
   the label white, which is the standard behaviour the client asked for. */

.qual-card__cta .material-symbols-outlined {
  font-size: 24px;                      /* Figma I11694:4603;11694:4733;10343:75219 box 24x24 */
  flex: 0 0 auto;
}

.qual-card__nrt {
  display: block;
  width: 107px;                         /* Figma I11694:4603;12030:5039 box 107x78 */
  height: 78px;
  object-fit: contain;
}

/* ---- card photo --------------------------------------------------------- */

.qual-card__media {
  flex: 0 0 584px;                      /* Figma I11694:4603;11694:4734 width 584 */
  margin: 0;
  min-width: 0;
  display: flex;                        /* Figma I11694:4603;11694:4734 layout VERTICAL */
  flex-direction: column;
}

/* The mixed FILL/STRETCH across the five frames is NOT designer drift, which is how it was
   first read. STRETCH is REST's name for the UI's "Crop": cards 2 and 4 carry an
   imageTransform that takes a band well off centre, and `object-fit: cover` centres it —
   card 4 sat ~10% of the photo height below the drawn framing (QA 2026-08-12, "image is
   truncated"). The crop is baked into the asset rather than expressed here, so all five
   files are already the drawn 584x403 region and cover is a no-op. If the photos are ever
   refreshed, re-cut them with each node's imageTransform band, never the centre crop. */
.qual-card__media img {
  display: block;
  align-self: stretch;                  /* Figma I11694:4603;11694:4735 sizingH FILL */
  width: 100%;
  height: 403px;                        /* Figma I11694:4603;11694:4735 height 403 FIXED */
  object-fit: cover;
  border-radius: var(--radius-sm);      /* Figma I11694:4603;11694:4735 cornerRadius 4 */
}

/* --------------------------------------------------------------------------
   Block 6 — "Not sure which qualification is right for you?"
   Figma 11694:5549.
   -------------------------------------------------------------------------- */
.qual-help {
  padding: 112px 80px;                  /* Figma 11694:5549 padding 112 80 */
  background-color: var(--color-accent-light-blue); /* Figma 11694:5549 fill #cbdae6 */
}

.qual-help__inner {
  max-width: 1280px;                    /* Figma 11694:5550 width 1280 */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 46px;                            /* Figma 11694:5554 itemSpacing 46 */
  min-width: 0;
}

.qual-help__logo {
  display: block;
  width: 82px;                          /* Figma 12260:10754 frame 102x117 less its 10px padding */
  height: 97px;
  object-fit: contain;
}

.qual-help__content {
  display: flex;
  flex-direction: column;
  gap: 22px;                            /* Figma 11694:5556 itemSpacing 22 */
  min-width: 0;
}

/* 48px is off the Figma Variables scale (H1 54 / H2 44) — implemented verbatim per Figma
   and flagged to the designer; the mobile counterpart derives from the nearest step. */
.qual-help__heading {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;                     /* Figma 11694:5562 FrutigerLTStd-Roman */
  font-size: 48px;                      /* Figma 11694:5562 48px */
  line-height: 1.2;                     /* LH 57.6 / 48 */
  letter-spacing: -0.01em;              /* Figma 11694:5562 LS -0.48 */
  color: var(--color-navy);             /* Figma 11694:5562 fill #0b1628 */
}

.qual-help__copy {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;                     /* Figma 11694:5564 FrutigerLTStd-Roman */
  font-size: 18px;                      /* Figma 11694:5564 18px */
  line-height: 1.5;                     /* LH 27 / 18 */
  color: var(--color-navy-darkest);     /* Figma 11694:5564 fill #03060c */
}

.qual-help__actions {
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;                            /* Figma 11694:5565 itemSpacing 24 */
}

/* --------------------------------------------------------------------------
   Block 7 — Section_Form: three overrides on the shared band.
   -------------------------------------------------------------------------- */
.form-band--qualifications {
  background-color: var(--color-white); /* Figma 11694:5389 fill #ffffff */
}

/* Figma 11694:5400 is pad T=0 R=36 B=36 L=36 — the shared base and Cert III's equivalent
   (12030:2648) are 36 all round. Implemented as drawn; flagged to the designer as a likely
   oversight rather than silently normalised. */
.form-band--qualifications .form-band__form {
  padding-top: 0;
}

/* The wrapped choice group is counterAxisSpacing 16 here; forms.css sets the shared
   12px row-gap from Career pathways' frame.

   The `max-width` is the 2-per-row grouping the design renders. Figma lays this group out as
   plain WRAP in a 668px box, and its five item widths (185/264/172/295/279 + 24px gaps) make
   the break land after two: a third on row 1 would need 185+24+264+24+172 = 669px, one pixel
   more than the box. Our items measure 184/263/172/294/278 — within 1px of each item, but
   2px less in total, so that same third item fits by 1px and we wrapped 3+2 instead of 2+2+1.
   Capping the box 2px below Figma's restores the design's grouping while every x-position
   stays within 1px of the frame. It is also the stable direction: widening text can only
   wrap earlier, never merge rows back. Not on `.form-band` — Career pathways' four radios sit
   on ONE row in its frame (11671:8493, row 515px wide), which a 2-column rule would break. */
.form-band--qualifications .gform_wrapper.gform-theme--framework .gfield--type-choice .gfield_checkbox {
  row-gap: 16px;                        /* Figma 11694:5416 counterAxisSpacing 16 */
  max-width: 666px;                     /* Figma 11694:5416 668 less the 2px our metrics save */
}

/* ==========================================================================
   Mobile — single cutoff at 1199, derived per roadmap/mobile-derivation-catalog.md
   (desktop-only Figma batch). Section padding uses the Section Padding scale
   (large 112 -> 50); inner padding uses the Padding scale (medium 36 -> 24).

   Gaps follow the same inner Padding ladder as padding — QA 2026-08-12 stated it
   for this page in both directions: no itemSpacing may still read 24 or 36 at mobile
   (24 -> 16, 36 -> 24). Applied to every flex container on the page, including the
   three shared bands it reuses, which are overridden through their page modifier so
   the seven other templates that share them keep their current spacing.
   ========================================================================== */
@media (max-width: 1199px) {

  /* ---- Block 4 (shared band, page-scoped) ------------------------------ */
  .about-feature-intro--qualifications .about-feature-intro__inner {
    gap: 24px;                          /* Padding medium 36 -> 24 (QA 2026-08-12) */
  }

  /* ---- Block 5 --------------------------------------------------------- */
  .qual-body {
    padding: 50px 20px;                 /* Section Padding large 112 -> 50, gutter 20 */
  }

  /* Card-to-card, not an inner gap: it derives from the section's desktop 64 by the
     x-large step (64 -> 48), so it is the one container on the page the 36 -> 24 rule
     does not govern. QA 2026-08-12 round 3b asked for 48 here by number. */
  .qual-body__inner {
    gap: 48px;                          /* inner Padding x-large 64 -> 48 */
  }

  .qual-card {
    padding: 24px;                      /* inner Padding medium 36 -> 24 */
    gap: 16px;                          /* Padding small 24 -> 16 (QA 2026-08-12) */
  }

  .qual-card__bottom,
  .qual-card__body {
    gap: 24px;                          /* Padding medium 36 -> 24 (QA 2026-08-12) */
  }

  .qual-card__col,
  .qual-card__actions {
    gap: 16px;                          /* Padding small 24 -> 16 (QA 2026-08-12) */
  }

  /* 560 + 584 + 64 needs 1208px of content box; below that the photo column starves.
     DOM order is text-then-photo, so a plain column already reads text-above/image-below
     (mobile-derivation-catalog.md#column-collapse). */
  .qual-card__cols {
    flex-direction: column;
    gap: 24px;                          /* QA 2026-08-12: no 36px gap at mobile */
  }

  .qual-card__col,
  .qual-card__media {
    flex: 0 0 auto;
    width: 100%;
  }

  .qual-card__media img {
    height: auto;
    aspect-ratio: 584 / 403;            /* keep the Figma crop once the fixed height goes */
  }

  /* The code and the 257px badge do not share a line at narrow widths. */
  .qual-card__top {
    flex-wrap: wrap;
    gap: 12px 16px;
  }

  .qual-card__code {
    font-size: 18px;                    /* Figma Variables mobile H6 20 -> 18 */
  }

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

  /* Pastel 2026-08-19 #1 — client: "Mobile: Can we make this orange text 14px?" The pin
     targets `.qual-card__item > span`, but the 16px that span renders at is inherited: it is
     declared on the row (.qual-card__item, above), so the override belongs there — equal
     (0,1,0) specificity and later in source order, which is the only way it wins
     (.claude/rules/css-architecture.md). `line-height: 1.4` is unitless and follows to
     19.6px. Desktop is untouched: this rule lives inside the max-width block. */
  .qual-card__item {
    font-size: 14px;                    /* was 16px (Figma I11694:4603;…;11694:4765) */
  }

  /* Pastel 2026-08-19 #1 — realign the check glyph to the 14px text line box. The desktop rule
     pins the glyph's line box to 22.4px, a px value derived from the 16px text; once the text
     drops to 14px its line box is 19.6px and the glyph sat ~1.5px low against the FIRST line of
     a wrapped bullet (measured: glyph-centre minus first-line-centre went 0.20px -> 1.70px on
     the 4 wrapping rows at 402 and the 1 at 768). Single-line rows hid it because the row is
     align-items:center. Same (0,1,0) specificity as the desktop rule, later in source. */
  .qual-card__check {
    line-height: 19.6px;                /* 1.4 x the 14px text above, matching its line box */
  }

  /* ---- Block 6 --------------------------------------------------------- */
  .qual-help {
    padding: 50px 20px;                 /* Section Padding large 112 -> 50, gutter 20 */
  }

  .qual-help__inner {
    gap: 24px;                          /* QA 2026-08-12: no 36px gap at mobile */
  }

  .qual-help__actions {
    gap: 16px;                          /* Padding small 24 -> 16 (QA 2026-08-12) */
  }

  .qual-help__heading {
    font-size: 32px;                    /* nearest scale step: H2 44 -> 32 (48 is off-scale) */
  }

  .qual-help__copy {
    font-size: 16px;                    /* Figma Variables mobile Text Medium 18 -> 16 */
  }

  /* ---- Block 7 --------------------------------------------------------- */
  /* The desktop `padding-top: 0` above is body-independent but scoped to the modifier,
     so it survives the shared band's own mobile rule (which sets all four sides). Re-assert
     it here at equal specificity — see [[feedback-scoped-desktop-rule-beats-mobile]]. */
  .form-band--qualifications .form-band__form {
    padding-top: 0;
  }

  .form-band--qualifications .form-band__heading-wrap {
    gap: 24px;                          /* Padding medium 36 -> 24 (QA 2026-08-12) */
  }
}

/* --------------------------------------------------------------------------
   Short viewports — the photo is drawn 584x403 inside a 584 column, so once the card
   stacks it takes the card's full width: 806x556 on a 896x414 landscape phone, taller
   than the whole viewport (QA 2026-08-12, "images too large for some mobile views").
   Bound its HEIGHT and let the ratio drive the width so it shrinks rather than crops —
   the same treatment, and the same 45vh, as .pathway-card__image on Career pathways
   (career-pathways.css). Keyed on height, not width: a 896-wide portrait tablet is fine.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) and (max-height: 560px) {
  .qual-card__media img {
    /* stretch is the desktop cross-axis rule; it would override the width below */
    align-self: center;
    height: 45vh;
    width: auto;
    max-width: 100%;
  }
}