/* ==========================================================================
   CTA banner
   Figma "CTA" (1121:165986), 1440 frame: 200px tall, 64px vertical padding,
   48px H3 headline and button in one row 48px apart; the Illustrations
   component 331px square, 12px past the right edge, top-aligned and cropped
   by the banner's bottom edge.

   The module is full-bleed (see _dnd.css), so 100% is the viewport width and
   the inner row re-creates the 1192px content box with the section gutters.
   Headline and button share a row while it clears the illustration (the
   module at least 1344px wide: 124px gutter + 877px row + 24px + 319px of
   illustration); below that they stack and the headline wraps short of it.
   ========================================================================== */

.cta-banner {
  --art-size: 331px;
  --art-right: -12px;
  container: cta-banner / inline-size;
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  min-height: 200px;
  padding-block: var(--space-3xl, 64px);
  overflow: hidden;
}

.cta-banner__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--space-xl, 48px);
  box-sizing: content-box;
  max-width: 1192px;
  margin-inline: auto;
  padding-inline: var(--section-padding-inline, 0px);
}

/* One line when it fits beside the button; a longer headline wraps (balanced)
   rather than pushing the button out of the banner */
.cta-banner .cta-banner__headline {
  flex: 0 1 auto;
  min-width: 0;
  text-wrap: balance;
}

.cta-banner .cta-banner__headline span:not(.gradient-text) {
  color: var(--text-inverted);
}

.cta-banner__cta {
  flex-shrink: 0;
}

/* Illustration: decorative, behind the text */
.cta-banner__art {
  position: absolute;
  top: 0;
  right: var(--art-right);
  width: var(--art-size);
  height: var(--art-size);
  pointer-events: none;
}

.cta-banner__art-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Parallax, like hero-split: once the banner is centred in the viewport,
   the illustration drifts down by 30% of its size as the banner scrolls up
   under the header, trailing the page into the cropped bottom edge.
   Browsers without scroll timelines, and reduced motion, keep it still. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cta-banner {
      view-timeline: --cta-banner block;
      view-timeline-inset: var(--header-height, 86px) 0px;
    }

    .cta-banner__art {
      animation: cta-banner-drift linear both;
      animation-timeline: --cta-banner;
      animation-range: cover 50% cover 100%;
    }
  }
}

@keyframes cta-banner-drift {
  to {
    translate: 0 30%;
  }
}

/* Stacked: headline over the button, wrapping before the illustration
   (the inner row's right edge sits one gutter inside the viewport)
   -------------------------------------------------------------------------- */
@container cta-banner (max-width: 1343px) {
  .cta-banner__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm, 24px);
  }

  .cta-banner .cta-banner__headline {
    text-wrap: wrap;
  }

  .cta-banner--has-art .cta-banner__headline {
    max-width: calc(100% + var(--section-padding-inline, 0px) - var(--art-size) - var(--art-right) - 24px);
  }
}

/* Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .cta-banner {
    --art-size: 240px;
    padding-block: var(--space-xl, 48px);
  }

  .cta-banner .cta-banner__headline {
    font-size: 38px;
    letter-spacing: -0.76px;
  }
}

/* Mobile: a smaller illustration peeks in at the bottom-right corner, under
   the button row, so the headline can use the full width
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .cta-banner {
    --art-size: 160px;
    --art-right: -16px;
    padding-block: var(--space-xl, 48px);
  }

  .cta-banner__art {
    top: auto;
    bottom: -32px;
  }

  .cta-banner .cta-banner__headline {
    font-size: var(--font-size-h4, 28px);
    letter-spacing: var(--letter-spacing-h4, -0.28px);
  }

  .cta-banner--has-art .cta-banner__headline {
    max-width: 100%;
  }
}