/* ==========================================================================
   parts/join-cta.css — "Join Monarch Racing Today" section (parts/join-cta.php; live section#join,
   Bricks component mtyjzn). Global because the section is a site-wide component (block pages place it with
   the join-cta block, other templates call the part). Spec: docs/scout/SECTIONS-B.md §6.1, §6.3;
   live rules: docs/scout/form-live.html §3. The form's own skin is in forms.css.

   Layout (1440 / 768 / 390, live): section height 1168.9 / 1039.9 / 1202.4 = --section-space-m padding
   + container (intro 414.2 / 341.1 / 363.6, --content-gap, form 544.8 / 542.3 / 716.1).
   The section box itself (flex column, gap, padding, overflow-x clip) is base.css .section.
   The horse single's section#enquiry (.horse-enquiry, parts/horse/enquiry.php; SINGLE §8) is the same section with
   no crest or eyebrow and form 3: 971.41 / 904.81 / 962.77 = padding + title, --content-gap, text, --content-gap,
   form 652.75 / 650.55 / 749.17. Its submit keeps live's 140 x 44, centred (no .join-cta--submit-full).
   ========================================================================== */

.join-cta {
  background-image: var(--wfx-join-grad);            /* live .brxe-mtyjzn: linear-gradient(#042e4a, #9bacb7) */
}

/* live .brxe-container.text--white.width--m: 546.4px, capped at the section's content box (347.6 at 390) */
.join-cta__container {
  width: var(--width-m);
  color: var(--white);
}

/* live .brxe-block.center--all */
.join-cta__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--content-gap);
  width: 100%;
  text-align: center;
}

/* live .wlp-logo__1 (svg.brxe-svg: height auto) — 200 × 128.7 */
.join-cta__crest {
  height: auto;
}

/* live .wlp-highlighted-text.text--uppercase: Inter 700, 1em line box, 4px tracking */
.join-cta__eyebrow {
  font-size: var(--text-xxl);
  font-weight: 700;
  line-height: 1em;
  letter-spacing: 4px;                               /* measured one-off (live inline Bricks CSS) */
  text-transform: uppercase;
}

/* live .text--xxl.text--bold: ACSS text classes render in the text font (Nimbus), line-height calc(10px + 2ex) */
.join-cta__title {
  font-family: var(--text-font-family);
  font-size: var(--text-xxl);
  font-weight: 700;
  line-height: var(--text-line-height);
}

/* live .text--l (+ its direct <strong>/<p>, which ACSS gives the same font and ex-based line height;
   a block override's wysiwyg text arrives wrapped in <p>) */
.join-cta__text,
.join-cta__text > :is(p, strong) {
  font-family: var(--text-font-family);
  font-size: var(--text-l);
  line-height: var(--text-line-height);
}
.join-cta__text {
  width: 100%;
  max-width: 40rem;
}

/* live .brxe-razgna.brxe-shortcode.form--light */
.join-cta__form {
  width: 100%;
}
/* live .brxe-razgna button: #join's form only (form 3's wrapper #brxe-nxmpqb has no such rule that matches, so its
   submit stays 140px and centred). The phone flag button stays 42px: its box shrinks to fit. */
.join-cta--submit-full .join-cta__form button {
  width: 100%;
}