/* ==========================================================================
   Training advantage band — MBA ACT
   Shared component with TWO consumers, hence a globally-enqueued layer rather
   than a page CSS (see .claude/rules/css-architecture.md):
     - White Card / short-course pages  — Figma 12401:13043, band tint light-blue-50
     - About our Training               — Figma 12243:4441, band tint soft-green-50
   Everything inside the navy card is byte-identical between the two nodes; only
   the band tint, the paragraph copy and the presence of the CTA row differ.

   Card internals reuse .card--icon-strip + .card__content-top / .card__body
   from cards.css — the Figma card is the same component as the Why Join
   benefit card (content gap 18, content-top gap 12, body gap 16, padding 24,
   icon 30px tangerine). Only the four deltas at the bottom of this file differ.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Band + navy card
   -------------------------------------------------------------------------- */
.training-advantage {
  padding: 112px 80px;                    /* Figma 12401:13043 pad T112 R80 B112 L80 */
  /* Band tint is a custom property so a consumer can retint without a new rule.
     Default is the White Card value; About our Training sets soft-green-50. */
  background-color: var(--advantage-band, var(--color-accent-light-blue-50)); /* Figma 12401:13043 SOLID #cbdae6 opacity=0.5 */
}

.training-advantage--green {
  --advantage-band: var(--color-accent-soft-green-50); /* Figma 12243:4441 SOLID #81b9a2 opacity=0.5 */
}

.training-advantage__inner {
  max-width: 1280px;                      /* Figma 12401:13044 w=1280 */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  /* Gap between the content box and the CTA row. Inert when the consumer omits
     the actions slot (single flex child), which is exactly how About our
     Training renders — no modifier class needed to drop the row. */
  gap: 64px;                              /* Figma 12401:13044 VERTICAL gap=64 */
  padding: 64px 48px;                     /* Figma 12401:13044 pad T64 R48 B64 L48 */
  background-color: var(--color-navy);    /* Figma 12401:13044 SOLID #0b1628 */
  border-radius: var(--radius-sm);        /* Figma 12401:13044 cornerRadius 4 */
}

.training-advantage__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);                    /* Figma 12401:13046 VERTICAL gap=24 */
}

.training-advantage__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);                    /* Figma 12401:13047 VERTICAL gap=24 */
}

/* Two-tone: Figma 12401:13054 carries base fill #03060c but repaints every
   character via characterStyleOverrides — "The MBA Training " #ffffff and
   "advantage" #ff6600. The base is never on canvas; do not read it as the
   colour. Same on About our Training 12243:4452. */
.training-advantage__heading {
  margin: 0;
  font-size: 44px;                        /* Figma 12401:13054 size=44 */
  font-weight: 400;                       /* Figma 12401:13054 FrutigerLTStd-Roman — sitewide h2 is 700 */
  line-height: 1.1;                       /* Figma 12401:13054 LH=48.4 */
  letter-spacing: -0.01em;                /* Figma 12401:13054 LS=-0.44 */
  text-align: center;                     /* Figma 12401:13054 align=CENTER */
  color: var(--color-white);              /* Figma 12401:13054 run 1 #ffffff */
}

.training-advantage__heading-accent {
  color: var(--color-tangerine);          /* Figma 12401:13054 run 2 #ff6600 */
}

.training-advantage__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;                    /* Figma 12401:13055 counter=CENTER */
  gap: 48px;                              /* Figma 12401:13055 VERTICAL gap=48 */
}

.training-advantage__text {
  margin: 0;
  max-width: 1024px;                      /* Figma 12401:13056 w=1024 inside the 1184 content */
  font-size: 18px;                        /* Figma 12401:13056 size=18 */
  font-weight: 700;                       /* Figma 12401:13056 FrutigerLTStd-Bold */
  line-height: 1.3;                       /* Figma 12401:13056 LH=23.4 */
  text-align: center;                     /* Figma 12401:13056 align=CENTER */
  color: var(--color-white);              /* Figma 12401:13056 SOLID #ffffff */
}

/* --------------------------------------------------------------------------
   Card row — 3-up desktop. Card count is NOT fixed at three: the client copy
   supplies four bullets against Figma's three cards (open with the designer),
   so this is an auto-fit grid, not a 3-column template.
   -------------------------------------------------------------------------- */
.training-advantage__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 36px;                              /* Figma 12401:13057 HORIZONTAL gap=36 */
  width: 100%;
  max-width: 1024px;                      /* Figma 12401:13057 w=1024 */
  min-width: 0;
}

/* Deltas vs the .card--icon-strip base in cards.css. Everything not listed here
   (border, shadow, radius, white fill, 24px content padding, 30px tangerine
   icon, 20/700/1.3 title, 14/400/1.4 excerpt) already matches Figma. */
.training-advantage-card .card__content {
  gap: 18px;                              /* Figma 12401:13059 VERTICAL gap=18 — base icon-strip is 12 */
  justify-content: center;                /* Figma 12401:13059 primary=CENTER */
}

.training-advantage-card .card__title,
.training-advantage-card .card__excerpt {
  color: var(--color-navy-darker);        /* Figma 12401:13063 / 13064 SOLID #040810 — base is --color-navy */
}

/* All three ticks are the same outlined glyph — one 2px orange ring, card white
   inside. The REST cache disagrees: it reports `fills: SOLID #ff6600` on the
   vectors of cards 1 and 2 and a stroke only on card 3, which is what shipped
   here as a filled/outlined asymmetry. The node render of the card row
   (12401:13057) shows no solid disc on any of the three, and all three are
   instances of the same component 7044:4126 — the render wins per
   .claude/rules/figma-spec.md. icons.css imports the FILL axis, so this is one
   declaration and no second icon asset. */
.training-advantage-card .card__icon {
  font-variation-settings: 'FILL' 0;      /* Figma 12401:13057 render — 2px ring #ff6600, no fill */
}

/* --------------------------------------------------------------------------
   CTA row — White Card only; About our Training omits the whole slot.
   -------------------------------------------------------------------------- */
.training-advantage__actions {
  display: flex;
  flex-direction: column;
  align-items: center;                    /* Figma 12573:975 counter=CENTER */
  justify-content: center;                /* Figma 12573:975 primary=CENTER */
  gap: var(--space-6);                    /* Figma 12573:975 VERTICAL gap=24 */
}

.training-advantage__actions-top {
  display: flex;
  flex-wrap: wrap;
  /* Figma 12573:991 is counter=CENTER, and there it reads the same as stretch
     because both its buttons are 40 tall. Ours were not — see the icon rule
     below — and stretch also covers the case where one label wraps to two lines
     while the other does not. */
  align-items: stretch;
  justify-content: center;
  gap: var(--space-6);                    /* Figma 12573:991 HORIZONTAL gap=24 */
}

/* Figma 12573:976 and 12573:977 are both 40 tall: pad 8 + a 24px line box + pad
   8, fill only, NO stroke. Two things pushed ours off that. The base .btn adds a
   2px border on all sides — invisible on the primary because border-color equals
   the fill, but it still paints, so the orange block read 44 while the white one
   read 40 with its navy border swallowed by the navy card. And the base line
   height is 1.2 (19.2px, pinned by Pastel 2026-08-07 #5) against Figma's 24, so
   the text-only button was shorter than the one carrying arrow_outward, whose
   glyph is a 24px flex item. Dropping the border and taking Figma's line height
   makes both exactly 40 at every breakpoint, including 768/402 where the row
   turns into a column and align-items no longer governs height. Scoped here —
   the border and the 1.2 are deliberate elsewhere. */
.training-advantage__actions-top .btn {
  border-width: 0;                        /* Figma 12573:976 / 977 — fills only, no strokes */
  line-height: 1.5;                       /* Figma 12573:976 LH=24 / size=16 */
}

/* The secondary CTA is white-filled with navy text on this navy card, i.e. the
   light-bg .btn--secondary. Do NOT put .scheme-navy on the card: buttons.css
   flips .scheme-navy .btn--secondary to transparent/white-outline, which is not
   what Figma 12573:977 draws. */
.training-advantage__actions .btn {
  padding: 8px 20px;                      /* Figma 12573:976 / 12573:977 pad T8 R20 B8 L20 */
}

.training-advantage__actions .btn--link {
  padding: 0;                             /* Figma 12573:988 pad 0 */
  gap: var(--space-2);                    /* Figma 12573:988 HORIZONTAL gap=8 */
  /* The .btn--link base underlines every instance, but this one is drawn without
     a rule: I12573:988;10215:112356 carries no `textDecoration` in the raw node,
     unlike e.g. 12030:2525 run ts3 which does. Same call already made for
     .course-training-card__link and .course-sidebar__back-to-top.
     QA 2026-09-11 #8. */
  text-decoration: none;                  /* Figma I12573:988;10215:112356 — no textDecoration */
}

/* The arrow is a 24px flex item and the label's line box is 24px (the 1.5 above),
   so Figma puts both at the same y=8 inside the 40px button — 12573:976 draws the
   text at rel(20,8) and arrow_outward at rel(214,8). The .btn base translates
   every icon up by --btn-optical-shift to compensate for the asymmetric block
   padding it normally applies; the rule above replaces that padding with a flat
   8/8, so the compensation had nothing left to compensate and simply lifted the
   arrow 2px above the label. QA 2026-09-11 #10. */
.training-advantage__actions .btn .material-symbols-outlined {
  transform: none;                        /* Figma 12573:976 — icon shares the label's y */
}

/* Figma draws no hover for 12573:977, and the .btn--secondary base inverts to a
   navy fill with white text — which is this card's own background, so the button
   vanished under the pointer (measured: button bg rgb(11,22,40) == card bg
   rgb(11,22,40)). Lightening instead of inverting keeps the white-on-navy card
   contrast and borrows the shade the dark-bg secondary already uses for :active,
   rather than inventing a colour. .btn--secondary.btn--alt is NOT the answer
   here: it is transparent-with-white-outline, which is not what Figma draws at
   rest. QA 2026-09-11 #9. */
.training-advantage__actions-top .btn--secondary:hover {
  background-color: var(--color-neutral-lightest);
  border-color: var(--color-neutral-lightest);
  color: var(--color-navy);
}

.training-advantage__actions-top .btn--secondary:active {
  background-color: var(--color-navy-lightest);
  border-color: var(--color-navy-lightest);
  color: var(--color-navy);
}

/* --------------------------------------------------------------------------
   Mobile — no Figma frame exists for this block at 768 or 402. Values derived
   per roadmap/mobile-derivation-catalog.md: section padding from the Section
   Padding scale (112 -> 50), inner padding and gaps from the inner Padding
   ladder (64 -> 48, 48 -> 36, 36 -> 24), type from the Figma Variables scale.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .training-advantage {
    padding: 50px 20px;                   /* Section Padding large 112 -> 50 */
  }

  .training-advantage__inner {
    gap: 48px;                            /* inner ladder x-large 64 -> 48 */
    padding: 48px 36px;                   /* inner ladder x-large 64 -> 48 (T/B), large 48 -> 36 (L/R) */
  }

  .training-advantage__heading {
    font-size: 32px;                      /* Figma Variables H2 44 -> 32 */
  }

  .training-advantage__text {
    font-size: 16px;                      /* Figma Variables Text Medium 18 -> 16 */
  }

  .training-advantage__bottom {
    gap: 36px;                            /* inner ladder large 48 -> 36 */
  }

  .training-advantage__cards {
    gap: 24px;                            /* inner ladder medium 36 -> 24 */
  }

  .training-advantage-card .card__title {
    font-size: 18px;                      /* Figma Variables H6 20 -> 18 */
  }

  /* The two top CTAs measure 258 + 24 + 205 = 487px, wider than the card's
     inner width once mobile padding applies, so they stack full-width rather
     than wrapping to two ragged rows. */
  .training-advantage__actions-top {
    flex-direction: column;
    align-self: stretch;
  }

  .training-advantage__actions-top .btn {
    width: 100%;
    white-space: normal;                  /* base .btn is nowrap; "Enrol in this course now" needs to wrap at 402 */
  }
}