/* ==========================================================================
   Hero: split
   Figma "Header" (1168:89217), 1440 x 717 including the 86px navbar, so the
   hero itself is 631px: 66px above the content, 94px below the image.
   Text column 580px: eyebrow 32px above a 64px H1 (516px wide, three lines),
   then body (up to 520px) and buttons 40px apart. The composite image
   (3012:95137) is 645 x 462 and sits 8px lower than the text, 32px after
   it (Figma: 16px, too close; Chris's review); its overlays reach 50px
   past the content box's right edge, into the gutter.

   Corner illustrations, converted from the Figma layers to the bundled 662px
   crops: key 370px, rotated 5.92deg, 115px past the left edge and 110px past
   the bottom; house 384px, 97px past the right edge and 145px past the
   bottom. Both blurred and cropped by the hero's edges.

   The module is full-bleed (see _dnd.css), so the illustrations anchor to the
   viewport edges and the inner row re-creates the 1192px content box with
   the section gutters. Breakpoints follow the Figma header frames (1121:161477
   1440, 161556 1024, 161634 768, 161714 390), measured on the content box:
   - 1000px and up: as above; the text column keeps 510px, the narrowest that
     holds the 64px H1 on three lines, and the image gives way first.
   - 800 to 999px (the 1024 frame, 896px of content): a 48px H1 and text and
     image sharing the row equally, 32px apart.
   - Under 800px (about 914px viewports): stacked, the text first and
     centred, the image below it up to 432px (times the Image size), 48px
     apart. On mobile the H1 is 38px and the body 18px/1.25.

   Image size (--image-scale, 0.5-1.2) scales the image's basis, overhang
   and stacked max-width. Smaller, it keeps to the right edge (space-between).
   Larger, the text column gets a huge flex-shrink so it gives way before the
   image does, down to its 510px minimum; that caps the image at about 1.12
   in a 1192px content box.

   Media "Video" (Figma "Buyer/seller/giftor support" header 3175:109496):
   a 542 x 305 (16:9) thumbnail with 8px corners and the ink play button 24px
   above its bottom edge, as in video-split; no overhang or 8px offset. The
   headline narrows to 474px and the body to 478px. Its section centres the
   text on the video. Same breakpoints; Media size scales the 542px basis.

   Media "None (centred text)" (Chris's review of the HMRC requirements
   hero, 2026-10-29): everything centred at every width, the headline
   balanced across the content box, the body up to 600px; the same
   spacing, type and breakpoints as the text column.
   ========================================================================== */

.hero-split {
  --art-scale: 1;
  --image-scale: 1;
  /* Figma's outlined button: ink 60 border, primary text */
  --ghost-border: var(--color-ink-60);
  --ghost-fg: var(--fg);
  position: relative;
  width: 100%;
  padding-block: 66px 94px;
  overflow: clip;
}

.hero-split__inner {
  container: hero-split / inline-size;
  position: relative;
  z-index: 1;
  box-sizing: content-box;
  max-width: 1192px;
  margin-inline: auto;
  padding-inline: var(--section-padding-inline, 0px);
}

.hero-split__layout {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md, 32px);
}

/* Vertical alignment "Centre": the text centres on the image. Side by
   side only; the stacked layout below has its own alignment */
@container hero-split (min-width: 800px) {
  .hero-split--align-center .hero-split__layout {
    align-items: center;
  }
}

/* Text
   -------------------------------------------------------------------------- */
.hero-split__text {
  display: flex;
  flex: 0 1 580px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg, 40px);
  min-width: 510px; /* "compliance, rebuilt" is 502px at 64px; the image gives way first */
}

.hero-split__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md, 32px);
}

.hero-split .hero-split__eyebrow {
  background-color: var(--color-lilac-15);
}

.hero-split .hero-split__headline {
  max-width: 516px;
}

.hero-split .hero-split__description {
  max-width: 520px;
}

/* Media
   -------------------------------------------------------------------------- */
.hero-split__media {
  flex: 0 1 calc(var(--media-width, 645px) * var(--image-scale));
  min-width: 0;
  margin: 8px calc(-50px * var(--image-scale)) 0 0;
}

/* Scaled up: the text column shrinks first (flex-shrink is weighted by
   basis, so the image's own factor of 1 is negligible next to 1000) */
.hero-split--scaled-up .hero-split__text {
  flex-shrink: 1000;
}

.hero-split__image {
  display: block;
  width: 100%;
  height: auto;
}

/* Video: a plain 16:9 frame, no overhang or offset */
.hero-split--video {
  --media-width: 542px;
}

.hero-split--video .hero-split__media {
  margin: 0;
}

/* Figma's narrower text: headline 474px, body 478px */
.hero-split--video .hero-split__headline {
  max-width: 474px;
}

.hero-split--video .hero-split__description {
  max-width: 478px;
}

.hero-split__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
}

/* Only without a thumbnail: behind a photo, the anti-aliased rounded corners
   let a dark fill show through as a thin rim */
.hero-split__frame--placeholder {
  background: linear-gradient(64deg, rgb(18, 70, 97) 0%, rgb(6, 53, 88) 37%, rgb(6, 53, 88) 54%, rgb(63, 76, 133) 100%);
}

.hero-split__thumbnail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.hero-split .hero-split__trigger {
  position: absolute;
  bottom: var(--space-sm, 24px);
  left: 50%;
  max-width: calc(100% - 32px);
  transform: translateX(-50%);
}

/* Centred text: no media, everything on the centre line
   -------------------------------------------------------------------------- */
.hero-split--centred .hero-split__layout {
  justify-content: center;
}

.hero-split--centred .hero-split__text {
  flex: 0 1 auto;
  align-items: center;
  min-width: 0;
  text-align: center;
}

.hero-split--centred .hero-split__header {
  align-items: center;
}

.hero-split--centred .hero-split__headline {
  max-width: none;
  text-wrap: balance;
}

.hero-split--centred .hero-split__description {
  max-width: 600px;
}

.hero-split--centred .cta-group {
  justify-content: center;
}

/* Illustrations: decorative, behind the content
   -------------------------------------------------------------------------- */
.hero-split__art {
  position: absolute;
  z-index: 0;
  height: auto;
  pointer-events: none;
}

.hero-split__art--left {
  bottom: calc(-110px * var(--art-scale));
  left: calc(-115px * var(--art-scale));
  width: calc(370px * var(--art-scale));
  transform: rotate(5.92deg);
  filter: blur(4.67px);
}

.hero-split__art--right {
  right: calc(-97px * var(--art-scale));
  bottom: calc(-145px * var(--art-scale));
  width: calc(384px * var(--art-scale));
  filter: blur(4.91px);
}

/* Parallax: as the hero scrolls up under the fixed header, the
   illustrations drift down, the house further than the key, so they trail
   the page like a background. Scroll-driven (no JS): the timeline is the
   hero crossing the bottom edge of the header, from its top reaching it to
   its bottom passing it. Uses translate, which adds to the key's rotate.
   Browsers without scroll timelines, and reduced motion, keep them still. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-split {
      view-timeline: --hero-split block;
      view-timeline-inset: var(--header-height, 86px) 0px;
    }

    .hero-split__art {
      animation: hero-split-drift linear both;
      animation-timeline: --hero-split;
      animation-range: exit-crossing 0% exit-crossing 100%;
    }

    .hero-split__art--left {
      --art-drift: calc(120px * var(--art-scale));
    }

    .hero-split__art--right {
      --art-drift: calc(200px * var(--art-scale));
    }
  }
}

@keyframes hero-split-drift {
  to {
    translate: 0 var(--art-drift, 0px);
  }
}

/* Tablet row: 48px H1, text and image share the row
   -------------------------------------------------------------------------- */
@container hero-split (max-width: 999px) {
  .hero-split__layout {
    gap: var(--space-md, 32px);
  }

  .hero-split .hero-split__headline {
    max-width: none;
    font-size: var(--font-size-h3, 48px);
    letter-spacing: var(--letter-spacing-h3, -0.96px);
  }

  .hero-split__text,
  .hero-split--scaled-up .hero-split__text {
    flex: 1 1 0;
    min-width: 0;
  }

  .hero-split__media {
    flex: 1 1 0;
  }
}

/* Stacked: text first and centred, the image below it
   -------------------------------------------------------------------------- */
@container hero-split (max-width: 799px) {
  .hero-split__layout {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xl, 48px);
  }

  .hero-split__text,
  .hero-split--scaled-up .hero-split__text {
    flex: none;
    align-items: center;
    text-align: center;
  }

  .hero-split__header {
    align-items: center;
  }

  .hero-split__text .cta-group {
    justify-content: center;
  }

  .hero-split .hero-split__description {
    max-width: 501px;
  }

  .hero-split__media {
    order: 1;
    flex: none;
    align-self: center;
    width: 100%;
    max-width: calc(432px * var(--image-scale));
    margin: 0;
  }
}

/* Tablet and mobile
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .hero-split {
    --art-scale: 0.6;
  }
}

@media (max-width: 767px) {
  .hero-split {
    padding-block: 40px 64px;
  }

  /* Stacked: 32px between the text and the image (48px above 767px) */
  .hero-split__layout {
    gap: var(--space-md, 32px);
  }

  .hero-split__text {
    gap: var(--space-md, 32px);
  }

  .hero-split__header {
    gap: var(--space-sm, 24px);
  }

  /* Figma 390 frame: H3.5 38px, Body/S 18px/1.25 */
  .hero-split .hero-split__headline {
    font-size: 38px;
    letter-spacing: -0.76px;
  }

  .hero-split .hero-split__description {
    font-size: var(--font-size-md, 18px);
    line-height: 1.25;
  }
}