/* =========================================================================
   Module · Hero / Primary — Figma 5495:947 (page Global: Modules)
   420 5508:2677 · 1024 5495:896 · 1440 5495:845 · 1920 5492:17569
   Home: 420 7021:54682 · 1024 7021:54671 · 1440 7021:54660 · 1920 7021:54617

   The section frame (.l-section): Copy (stack-xl apart: the headline,
   Body/Lead, the Button / CTA pair stack-s apart), section-gap, then the
   announcements — a list up to 1391 (inline-xs apart; each a row: the
   Eyebrow over the title, stack-m apart, beside a Button / Round 32,
   stack-l apart, 16 above and below), three columns from 1392 (grid-gutter
   apart; each a column stack-s apart). The ring ornament (a looping video,
   module.js) sits behind it from 1024.

   The header floats over the page, so the top padding adds room for it
   (--nav-clear) on top of Figma's section padding.

   Raw in Figma (no variable): the ground's gradients (#E6F7FB, #F9FDFE,
   #E2F4F9); the fixed widths of the copy (480 at 1024; 925 / 794 / 713 at
   1440; 763 at 1920), of the announcement list (408 at 1024) and columns
   (258 · 273 · 257 at 1440, 256 · 274 · 256 at 1920), of the Vera Rubin
   title at 1024 (284); the headline's line height at 1440 (94 — the text
   has no style there: Display/Hero's size, 104, with 94 instead of 98);
   the announcements' 16 above and below on the list (space/16); the 420
   frame's fixed 854 height. The round arrow is a Size=44 instance drawn
   at 32 × 32: here Size 32.
   ========================================================================= */

.m-hero-primary {
  --nav-clear: 80px;                       /* styles.css: 16 inset + 64 bar, ≤1180 */
  padding-top: calc(var(--nav-clear) + var(--spacing-section-padding));
  overflow: clip;                          /* the ornament's box runs off the right */
  /* phone: white from 25.48% to #E6F7FB at the right edge (raw colours) */
  background: linear-gradient(to right, var(--color-white) 25.48%, #e6f7fb);
}
@media (min-width: 1181px) { .m-hero-primary { --nav-clear: 84px; } }   /* 24 inset + 60 bar */

.m-hero-primary > :not(.m-hero-primary__ornament) { position: relative; z-index: 1; }

/* ── Copy ─────────────────────────────────────────────────────────── */
.m-hero-primary__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-stack-xl);
  width: 100%;
}
.m-hero-primary__title,
.m-hero-primary__lede { width: 100%; }
.m-hero-primary__brand { color: var(--color-blue); }
.m-hero-primary__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-stack-s);
}

/* ── announcements: a list ─────────────────────────────────────────── */
.m-hero-primary__announcements {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-inline-xs);
  width: 100%;
}
.m-hero-primary__announcement {
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-l);
  padding: var(--space-16) 0;
  color: inherit;
  text-decoration: none;
}
.m-hero-primary__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-m);
}
.m-hero-primary__arrow { flex: none; display: flex; }
.m-hero-primary__br-desktop { display: none; }

/* phone: a window-tall hero (the 420 frame is 854 tall), copy at the top,
   the list at its foot */
@media (max-width: 1023px) {
  .m-hero-primary { min-height: calc(854px + var(--nav-clear)); justify-content: space-between; }
}

/* ── the ornament ───────────────────────────────────────────────────── */
.m-hero-primary__ornament { display: none; }
.m-hero-primary__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;          /* the rings sit on the right */
}

/* ── 1024 up ───────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .m-hero-primary { background: linear-gradient(to right, var(--color-white), #f9fdfe 50%, #e2f4f9); }
  .m-hero-primary__title,
  .m-hero-primary__lede { width: 480px; }
  .m-hero-primary__announcements { width: 408px; }
  .m-hero-primary__announcement:nth-child(2) .m-hero-primary__headline { width: 284px; max-width: 100%; }

  /* The video is the whole 1920 frame (1920 × 1094): the rings round a
     centre on its right edge, their outermost diamonds 890 video-px in from
     it. It covers a box as tall as the section (header room included) that
     runs --orn-over past the section's right edge, anchored right, so the
     rings' left reach lands where Figma's ornament starts (its leftmost
     diamond: x 531 at 1024, 866 at 1440).
     1024: 809 + 80 tall → ×0.813, 890 → 723; 1024 + 230 − 723 = 531. */
  .m-hero-primary__ornament {
    --orn-over: 230px;
    display: block;
    position: absolute;
    z-index: 0;
    inset: 0 calc(-1 * var(--orn-over)) 0 0;
    max-width: none;                      /* .l-section caps children at 100% */
    pointer-events: none;                 /* no mouse interaction */
  }
}

/* ── 1392 up (the 1440 frame): three columns ───────────────────────── */
@media (min-width: 1392px) {
  .m-hero-primary__copy { width: 925px; }
  .m-hero-primary__title { width: 794px; line-height: 94px; }   /* Figma 1440: 104 / 94, no text style */
  .m-hero-primary__lede { width: 713px; }

  .m-hero-primary__announcements {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-grid-gutter);
    width: auto;
  }
  .m-hero-primary__announcement {
    flex: none;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-stack-s);
    width: 258px;
    padding: 0;
  }
  .m-hero-primary__announcement:nth-child(2) { width: 273px; }
  .m-hero-primary__announcement:nth-child(3) { width: 257px; }
  .m-hero-primary__text { flex: none; width: 100%; gap: var(--spacing-stack-s); }
  .m-hero-primary__announcement:nth-child(2) .m-hero-primary__headline { width: auto; }
  .m-hero-primary__br-desktop { display: inline; }

  /* 1440: 916 + 84 tall → ×0.914, 890 → 814; 1440 + 240 − 814 = 866 */
  .m-hero-primary__ornament { --orn-over: 240px; }
}

/* ── 1920 up ───────────────────────────────────────────────────────── */
@media (min-width: 1920px) {
  .m-hero-primary__title { line-height: var(--display-hero-line-height); }
  .m-hero-primary__lede { width: 763px; }
  .m-hero-primary__announcements { align-items: flex-start; }
  .m-hero-primary__announcement,
  .m-hero-primary__announcement:nth-child(3) { width: 256px; }
  .m-hero-primary__announcement:nth-child(2) { width: 274px; }
  .m-hero-primary__br-desktop { display: none; }

  /* Wide screens (owner, 2026-09-28): the video keeps its height-fitted
     size instead of growing with the window, and its outermost rings start
     at 71% of the width (1030 video-px in from its left edge). 1115 + 84
     tall → ×1.096: box 2104 wide, rings 1129 in. Its left edge fades into
     the ground. */
  .m-hero-primary__ornament {
    inset: 0 auto 0 calc(71% - 1129px);
    width: 2104px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 22%);
            mask-image: linear-gradient(to right, transparent, #000 22%);
  }
}

/* ── the announcement's hover: title and arrow answer together ────────
   The whole announcement is the link: its title goes Blue and the round
   arrow grows (the arrow's own hover — ring to ink, glyph ×1.3 — plus the
   circle itself scaling up, as the old hero did). */
.m-hero-primary__headline { transition: color var(--ds-title-duration) var(--ds-hover-ease); }
.m-hero-primary__arrow { transition: scale var(--ds-title-duration) var(--ds-hover-ease); }
@media (any-hover: hover) {
  .m-hero-primary__announcement:is(:hover, :focus-visible) .m-hero-primary__headline { color: var(--color-blue); }
  .m-hero-primary__announcement:is(:hover, :focus-visible) .m-hero-primary__arrow { scale: 1.2; }
}
@media (prefers-reduced-motion: reduce) {
  .m-hero-primary__headline, .m-hero-primary__arrow { transition: none; }
}