/* =========================================================================
   Heading + text split section (Figma 203:1487)
   Optional green-slash eyebrow above a 2-column row: large left heading
   (with [bracketed] accent word in SemiBold + green) on the left,
   body paragraph(s) on the right. No CTA, no media — pure text intro /
   mid-page statement block. Reusable across pages.
   ========================================================================= */

.heading-and-text-cta-split {
  padding-block: var(--section-padding-block);
  padding-inline: var(--space-inline);
}

.heading-and-text-cta-split__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Eyebrow — slash-led label, matches the project pattern. */
.heading-and-text-cta-split__eyebrow {
  margin: 0;
  font-family: var(--font-family-sans);
  font-weight: 500;
  font-size: var(--font-size-eyebrow);
  line-height: 0.93;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-body-copy);
}

.heading-and-text-cta-split__eyebrow-slash {
  color: var(--color-green-2);
}

/* Layout — single column stack on mobile, 2-col split at desktop.
   Switches at 1100px to match the project's wide-layout breakpoint
   (same as video-cta / media-highlight). */
.heading-and-text-cta-split__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

@media (min-width: 1100px) {
  .heading-and-text-cta-split__layout {
    /* Figma columns: 596 heading + 259 gap + 585 body = 1440. The Figma
       gap reads as too wide on the live render at 1100–1600px, so the
       gap is reined in here — columns proportionally grow into the
       freed space via their fr ratios. */
    grid-template-columns: minmax(0, 596fr) minmax(0, 585fr);
    column-gap: clamp(48px, 6vw, 96px);
  }
}

/* Heading — large display, navy, mobile-first scale up to Figma's 60px.
   text-wrap: balance evens out line lengths so a long display heading
   doesn't end with a lone short word on the last line. */
.heading-and-text-cta-split__heading {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.2;
  color: var(--color-navy-blue);
  text-wrap: balance;
}

/* Accent word inside the heading — green AND heavier (SemiBold). The
   weight bump is the design's own emphasis on the accent term, separate
   from the green color, so both come from the modifier class. */
.heading-and-text-cta-split__heading-accent {
  font-weight: 600;
  color: var(--color-green-2);
}

/* Right column wrapper — holds body + an optional CTA stacked. */
.heading-and-text-cta-split__col-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* keeps the CTA pill from stretching full-width */
  gap: 24px;
}

/* Body — grey body copy, 18px / 28px line. */
.heading-and-text-cta-split__body {
  margin: 0;
  font-family: var(--font-family-sans);
  font-weight: 400;
  font-size: var(--font-size-body-lg);  /* 18px */
  line-height: 28px;
  color: var(--color-body-copy);
}

.heading-and-text-cta-split__body p {
  margin: 0;
}

.heading-and-text-cta-split__body p + p {
  margin-top: 16px;
}

/* Slight extra gap above the CTA so it doesn't crowd the body. */
.heading-and-text-cta-split__cta {
  margin-top: 8px;
}

/* Descender fix for labels with "g/y/p/q/j" — global .btn__label clips
   them against the height: 1lh + line-height: 1 baseline. Scoped here so
   existing buttons keep their established sizing. Matches the override
   we apply on video-cta and media-highlight-with-stats. */
.heading-and-text-cta-split__cta .btn__label,
.heading-and-text-cta-split__cta .btn__label > span {
  line-height: 1.3;
}

/* Slight reveal stagger — heading first, right column a tick later. */
.heading-and-text-cta-split__heading   { --reveal-delay: 0s; }
.heading-and-text-cta-split__col-right { --reveal-delay: 0.08s; }