/* ==========================================================================
   Ready to book — shared navy CTA card
   Figma 12260:5547 (About our Training); the same band is instance 12870:1977
   on the short-course listing frames.
   Markup: template-parts/ready-to-book-cta.php
   Spec: roadmap/phase-05-training-and-calendar/artifacts/page-about-our-training-spec.md

   Globally-enqueued layer (functions.php), NOT a page CSS: the partial renders on
   About our Training and the three short-course listing pages, and a shared
   component's base must not live in a page-scoped file
   (.claude/rules/css-architecture.md#reusing-components-across-pages).

   Deliberately no `.scheme-navy` on the card. That class would pull in
   `.scheme-navy .btn--link { color: var(--color-white) }` (buttons.css:198), which sits
   after and matches the specificity of `.btn--link.btn--tangerine` (buttons.css:189) and
   would repaint "View all courses" white — the Figma fill is #ff6600. The navy fill is
   applied directly instead, exactly as .home-content-card__card does (home.css:563).

   Desktop-first: mobile @media blocks are at the bottom of this file.
   ========================================================================== */

.ready-to-book {
  padding: 112px 80px;                  /* Figma 12260:5547 pad 112/80 — Section Padding large */
  background-color: var(--color-white); /* Figma 12260:5547 fill #ffffff */
}

.ready-to-book__card {
  position: relative;
  /* Figma 12260:5563 places the 540×540 watermark at card-rel x=780, i.e. 780+540=1320
     against a 1280 card — it bleeds 40px past the right edge, so the card must crop it. */
  overflow: hidden;
  display: flex;
  align-items: center;                  /* Figma 12260:5548 counter=CENTER */
  gap: 143px;                           /* Figma 12260:5548 itemSpacing 143 */
  padding: var(--space-16);             /* Figma 12260:5548 pad 64 all sides */
  max-width: 1280px;                    /* Figma 12260:5548 w=1280 */
  margin: 0 auto;
  background-color: var(--color-navy);  /* Figma 12260:5548 fill #0b1628 */
  border-radius: var(--radius-sm);      /* Figma 12260:5548 cornerRadius 4 */
  color: var(--color-white);
}

/* Watermark. Anchored to the card's right edge so it tracks the corner as the card
   shrinks; same pre-rotated SVG the banners use, so no CSS rotate. */
.ready-to-book__card::after {
  content: "";
  position: absolute;
  top: 90px;                            /* measured against the 12260:5563 node render — the rel y=31 / right -40 derivation sat too high and too far in */
  right: -100px;
  width: 540px;                         /* Figma 12260:5563 w=540 */
  height: 540px;                        /* Figma 12260:5563 h=540 */
  background-image: url('../images/mba-logo-stacked-white.svg'); /* Figma 12260:5563 props Colour=White */
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}

.ready-to-book__content {
  position: relative;
  z-index: 1;                           /* above the watermark */
  display: flex;
  flex-direction: column;
  justify-content: center;              /* Figma 12260:5549 primary=CENTER */
  gap: 46px;                            /* Figma 12260:5549 itemSpacing 46 */
  width: 100%;
  max-width: 659px;                     /* Figma 12260:5549 w=659 FIXED */
  min-width: 0;
}

.ready-to-book__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);                  /* Figma 12262:10798 itemSpacing 24 */
  min-width: 0;
}

.ready-to-book__text {
  display: flex;
  flex-direction: column;
  gap: 22px;                            /* Figma 12260:5555 itemSpacing 22 */
  min-width: 0;
}

.ready-to-book__heading {
  margin: 0;
  font-family: var(--font-family);
  font-size: 48px;                      /* Figma 12260:5558 48px */
  font-weight: var(--font-weight-regular); /* Figma 12260:5558 FrutigerLTStd-Roman 400 */
  line-height: 1.2;                     /* LH 57.6 / 48 */
  letter-spacing: -0.01em;              /* Figma 12260:5558 LS -0.48 */
  color: var(--color-white);            /* Figma 12260:5558 fill #ffffff */
}

.ready-to-book__copy {
  margin: 0;
  max-width: 493px;                     /* Figma 12260:5559 w=493 */
  font-family: var(--font-family);
  font-size: 20px;                      /* Figma 12260:5560 20px */
  font-weight: var(--font-weight-bold); /* Figma 12260:5560 FrutigerLTStd-Bold 700 */
  line-height: 1.3;                     /* LH 26 / 20 */
  color: var(--color-white);            /* Figma 12260:5560 fill #ffffff */
}

/* The inline Training Calendar link and the tel: number are both runs of one Figma text
   node, so they carry the paragraph's colour; only the underline distinguishes them. */
.ready-to-book__copy a {
  color: inherit;
  text-decoration: underline;           /* Figma 12260:5560 run 2 decoration=UNDERLINE */
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.ready-to-book__copy a:hover,
.ready-to-book__copy a:focus-visible {
  color: var(--color-tangerine-light);
}

/* The number carries no hyperlink and no decoration in Figma — the tel: anchor is ours,
   so it must not read as an inline link. Figma also keeps it whole on line 2 (node box
   493x52 = 2 lines at LH 26); nowrap reproduces that without a hard <br> that would
   misfire once the copy reflows on mobile. */
.ready-to-book__copy .ready-to-book__phone {
  text-decoration: none;                /* Figma 12260:5560 run 3 decoration=NONE */
  white-space: nowrap;
}

.ready-to-book__actions {
  display: flex;
  flex-direction: row;
  align-items: center;                  /* Figma 12262:10757 counter=CENTER */
  gap: var(--space-6);                  /* Figma 12262:10757 itemSpacing 24 */
  flex-wrap: wrap;
}

/* Figma 12260:5562 draws this CTA as bare 24px-tall text (pad 0), but `.btn` contributes
   10px block padding + a 2px transparent border. Zero both here rather than dropping
   `.btn`, which still supplies the font, the icon gap and :focus-visible. */
.ready-to-book__btn--link {
  padding-block: 0;                     /* Figma 12260:5562 pad T0 B0, h=24 */
  border-block-width: 0;
  gap: var(--space-2);                  /* Figma 12260:5562 itemSpacing 8 */
  white-space: normal;
  text-align: left;
  text-decoration: none;                /* Figma I12260:5562;10343:75218 decoration=NONE — the .btn--link base underlines */
}

.ready-to-book__team {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);                  /* Figma 12262:10794 itemSpacing 8 */
  width: 100%;
  max-width: 429px;                     /* Figma 12262:10794 w=429 FIXED */
  padding: var(--space-6);              /* Figma 12262:10794 pad 24 all sides */
  background-color: var(--color-navy-light); /* Figma 12262:10794 fill #545b68 */
  border-radius: var(--radius-sm);      /* Figma 12262:10794 cornerRadius 4 */
}

.ready-to-book__team-heading {
  margin: 0;
  font-family: var(--font-family);
  font-size: 20px;                      /* Figma 12262:10795 20px */
  font-weight: var(--font-weight-bold); /* Figma 12262:10795 FrutigerLTStd-Bold 700 */
  line-height: 1.3;                     /* LH 26 / 20 */
  color: var(--color-white);            /* Figma 12262:10795 fill #ffffff */
}

.ready-to-book__team-copy {
  margin: 0;
  font-family: var(--font-family);
  font-size: 16px;                      /* Figma 12262:10796 16px */
  font-weight: var(--font-weight-regular); /* Figma 12262:10796 FrutigerLTStd-Roman 400 */
  line-height: 1.4;                     /* LH 22.4 / 16 */
  color: var(--color-white);            /* Figma 12262:10796 fill #ffffff */
}

/* --------------------------------------------------------------------------
   Watermark ladder — no Figma frame below 1440. The 540px mark is placed
   against a 1280 card; once the card narrows the mark reaches the 659px text
   column, so it shrinks and drops toward the corner it is meant to accent.
   Same progressive treatment .home-content-card__card::after uses
   (home.css:597-620). Confirm at /qa-visual.
   -------------------------------------------------------------------------- */
@media (max-width: 1300px) {
  .ready-to-book__card::after {
    width: 460px;
    height: 460px;
    top: 130px;                         /* holds the 1440 mark's centre (y=360); bleed scales with width */
    right: -85px;
  }
}

@media (max-width: 1100px) {
  .ready-to-book__card::after {
    width: 380px;
    height: 380px;
    top: 215px;                         /* measured against the render — the mark keeps dropping as the card narrows */
    right: -70px;
  }
}

/* --------------------------------------------------------------------------
   Mobile — no Figma mobile frame for this block. Derived per
   roadmap/mobile-derivation-catalog.md and the closest in-repo precedent,
   .home-content-card (home.css:769-776): the card chrome lifts to the section,
   so the whole band reads as flat navy instead of a card inside a white strip.

   Breakpoint deviation: 920, not the project's dominant 768. The card carries
   64px of inner padding inside an 80px gutter, so by ~920 the 659px text column
   is already squeezed against the chrome; the band reads better flat well before
   phone widths. The watermark is dropped rather than scaled here — at this width
   it has nowhere to bleed without crossing the copy.
   -------------------------------------------------------------------------- */
@media (max-width: 920px) {
  .ready-to-book {
    /* Client Pastel R7 #5 (2026-09-18) — "On tablet+mobile: could this Ready to book frame
       have some more padding on the left and right sides? Maybe going from 20px to 40px?".
       A deliberate departure from the derived mobile gutter (Section Padding large 112->50,
       gutter 80->20), and only on this band: once the card chrome lifts below 920 the copy
       sits directly on the navy with nothing to inset it, which is what reads as cramped.
       Vertical padding keeps the derived 50. */
    padding: 50px 40px;
    background-color: var(--color-navy);
  }

  .ready-to-book__card {
    flex-direction: column;
    align-items: stretch;
    gap: 46px;
    padding: 0;                         /* chrome lifted to the section above */
    background: transparent;
    border-radius: 0;
  }

  .ready-to-book__card::after {
    display: none;                      /* no card chrome to bleed against once the band goes flat */
  }

  .ready-to-book__content {
    max-width: none;
  }

  .ready-to-book__heading {
    font-size: 32px;                    /* Figma Variables mobile: nearest row H2 44->32 */
  }

  .ready-to-book__copy {
    max-width: none;
    font-size: 18px;                    /* Figma Variables mobile: Text Large 20->18 */
  }

  /* No mobile override of `align-items`. `flex-start` was a cross-axis rule on a row that
     never becomes a column, so it top-aligned a 24px text CTA against a 44px button and
     the "View all courses" label sat 13px above "Enquire now" (QA 2026-09-17). The
     desktop `center` is what the two CTAs need at every width. */

  .ready-to-book__team {
    max-width: none;
  }

  .ready-to-book__team-heading {
    font-size: 18px;                    /* Figma Variables mobile: H6 20->18 */
  }
}