/* ============================================================
   COMPONENT: Hero
   FILE: assets/css/hero.css
   Depends on: hero.html, hero.js
   Loaded after header.css, before <home-section>.css (Phase 1.0 §6).
   Revision: correction pass.

   Reuses the Foundation exactly as required: colors, type,
   spacing, radius, shadow, z-index and motion all come from
   tokens.css; the section background is the existing
   .surface--gradient utility; both CTAs are the unmodified global
   .btn / .btn--primary / .btn--secondary system; the eyebrow badge
   and the visual card both reuse .surface--glass (+ .surface--
   elevated on the visual card). No global selector is redefined —
   every rule below is scoped under .hero.

   No :root block is added in this revision — every dimension this
   file needs either already exists as a Foundation token or as an
   existing Header token (--header-height, read not redeclared —
   see §1), or is a true one-off (the visual frame's aspect-ratio)
   scoped locally under .hero per Section 19 of the correction brief
   ("prefer `.hero { --hero-x: ...; }` over new :root variables").
------------------------------------------------------------ */

.hero {
  --hero-visual-max-width: 460px;
  --hero-content-max-width: 620px;

  position: relative;
  overflow: hidden;
}

/* ------------------------------------------------------------
   1. HEADER OFFSET
   .site-header is `position: fixed; top: 0` (header.css) and is
   therefore NOT part of normal document flow — nothing pushes
   Hero down for it automatically. Hero's own background still
   needs to paint all the way up behind the fixed header (for the
   "one continuous dark viewport" requirement), so the offset is
   applied as padding on .hero__inner, not as a top margin/padding
   on .hero itself.

   --header-height is read directly from header.css's own :root
   (88px desktop / 68px scrolled) — not redeclared here, per the
   same reasoning header.css itself documents for why Foundation-
   adjacent tokens must only ever be declared once. The base
   (unscrolled) height is the correct one to pad against: Hero's
   first viewport is what a visitor sees before any scroll has
   happened, and the Announcement Bar (already --color-navy,
   dismissible) sits above Hero in flow, so this padding is a safe
   upper bound whether or not it's still open.
------------------------------------------------------------ */
.hero__inner {
  position: relative;
  z-index: var(--z-content);

  padding-top: calc(var(--header-height, 88px) + var(--space-6));
  padding-bottom: var(--space-10);

  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

/* ------------------------------------------------------------
   2. CONTENT COLUMN
   Single DOM/reading order at every breakpoint: eyebrow (the
   immediate credibility/trust signal) -> H1 -> supporting copy ->
   primary CTA -> secondary CTA -> trust strip. Nothing here is
   visually reordered per breakpoint.
------------------------------------------------------------ */
.hero__content {
  max-width: var(--hero-content-max-width);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);

  margin-bottom: var(--space-3);
  padding: 6px var(--space-2) 6px 6px;

  color: var(--color-gold);
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Hero-only refinement of the shared .surface--glass card: a pill
   shape instead of the default card radius. The base surface
   (background/border/blur/shadow) is untouched. */
.hero__eyebrow.surface--glass {
  border-radius: var(--radius-pill);
}

.hero__eyebrow-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;

  border-radius: var(--radius-pill);
  background-color: rgba(var(--color-gold-rgb), 0.16);
  color: var(--color-gold);
}

.hero__eyebrow-icon svg {
  width: 15px;
  height: 15px;
}

.hero__heading {
  margin: 0;
  color: var(--color-white);
  font-size: var(--text-h1);
  /* font-family/line-height/weight inherited from base.css h1 rule */
}

.hero__subtext {
  margin: var(--space-3) 0 0;
  max-width: 54ch;

  color: rgba(255, 255, 255, 0.78);
  font-size: var(--text-body);
  line-height: var(--line-height-body);
}

/* ------------------------------------------------------------
   3. ACTIONS
   Hero CTA layout + premium micro-interactions.
   Colors, sizing and button shape remain controlled by
   the global .btn system.
------------------------------------------------------------ */

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

/* Premium depth without changing the global button design */
.hero__cta {
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.14);

  transform: translateY(0);

  transition:
    transform 300ms var(--ease-premium),
    box-shadow 300ms var(--ease-premium);
}

/* Subtle lift + deeper shadow */
.hero__cta:hover {
  transform: translateY(-2px);

  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.22);
}

/* Keyboard accessibility */
.hero__cta:focus-visible {
  transform: translateY(-2px);

  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.22);
}

/* Keep the existing arrow micro-interaction */
.hero__cta svg {
  width: 18px;
  height: 18px;
  transition:
    transform var(--duration-fast) var(--ease-premium);
}

.hero__cta:hover svg,
.hero__cta:focus-visible svg {
  transform: translateX(3px);
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .hero__cta {
    transition: none;
    transform: none;
  }

  .hero__cta:hover,
  .hero__cta:focus-visible {
    transform: none;
  }

  .hero__cta svg {
    transition: none;
  }
}

/* ------------------------------------------------------------
   4. TRUST STRIP
   Short strip only (three items) — not the full Statistics
   section.
------------------------------------------------------------ */
.hero__trust-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);

  margin-top: var(--space-5);
  list-style: none;
}

.hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);

  color: rgba(255, 255, 255, 0.76);
  font-size: var(--text-small);
  font-weight: 600;
}

.hero__trust-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;

  border: 1px solid rgba(var(--color-gold-rgb), 0.6);
  border-radius: var(--radius-pill);
  background-color: rgba(var(--color-gold-rgb), 0.08);
  color: var(--color-gold);
}

.hero__trust-icon svg {
  width: 13px;
  height: 13px;
}

/* ------------------------------------------------------------
   5. VISUAL / MEDIA SLOT
   One .hero__visual-frame is the only visual container. The
   frame may contain the existing image or one local video; the
   JavaScript switcher toggles the media inside this same frame.
   The surrounding sizing, glass treatment and responsive behavior
   stay unchanged.
------------------------------------------------------------ */
.hero__visual {
  display: flex;
  justify-content: center;
}
.hero__visual-frame {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 5 / 4;

  overflow: hidden;

  display: block;
  padding: 0;

  color: var(--color-gold);
}
.hero__visual-motif {
  width: 100%;
  height: 100%;
}

.hero__visual-frame > img,
.hero__visual-frame > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__visual-frame > [hidden] {
  display: none;
}
/* ------------------------------------------------------------
   6. ENTRANCE MOTION HOOKS
   Resting state (no classes) is fully visible: the visual card and
   each trust item render at opacity: 1 / no transform by default,
   so a slow or failed hero.js load never hides content.
   `.js-motion-ready` is added by hero.js itself, synchronously,
   immediately before it calls AppMotion.revealOnScroll()/
   staggerChildren() — only once that marker is present does the
   pre-reveal offset apply, and `.is-visible` (added by those same
   utilities) always removes it again. prefers-reduced-motion is
   handled globally by base.css and additionally by AppMotion
   itself (is-visible applied immediately, without observing, when
   reduced motion is set). Duration is within the 200–400ms range.
------------------------------------------------------------ */
.hero__trust-item {
  opacity: 1;
  transform: none;
}

.hero__visual {
  opacity: 1;
  transform: none;
}

.hero__visual.js-motion-ready,
.hero__trust-item.js-motion-ready {
  transition:
    opacity var(--duration-slow) var(--ease-premium),
    transform var(--duration-slow) var(--ease-premium);
  transition-delay: var(--stagger-delay, 0ms);
}

/* ------------------------------------------------------------
   7. RESPONSIVE
   Fluid type/spacing (clamp()-based tokens, %/ch-based widths)
   covers the fine-grained sizes in the target device list (320,
   375, 480, 1366, 1920 etc.) without a dedicated breakpoint each;
   the three rules below handle the structural layout shifts.
   Mobile is a deliberate single-column stack in source order, not
   a shrunk desktop layout. Breakpoint values are copied from
   tokens.css's documented reference values (custom properties
   cannot be used inside @media queries).
------------------------------------------------------------ */

/* Tablet: more breathing room, still single column */
@media (min-width: 768px) {
  .hero__inner {
    padding-top: calc(var(--header-height, 88px) + var(--space-8));
    padding-bottom: var(--space-12);
    gap: var(--space-10);
  }

  .hero__visual-frame {
  max-width: 560px;
}
}

/* Desktop and up: two-column layout, content left / visual right */
@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-8);
  }

  .hero__visual {
    justify-content: flex-end;
  }
}

/* Wide desktop: extra room for both columns */
@media (min-width: 1441px) {
  .hero__inner {
    gap: var(--space-12);
  }

  .hero__content {
    max-width: 680px;
  }
}

/* Small mobile: tighten spacing, keep both CTAs full-width and
   fully visible/uncropped */
@media (max-width: 479px) {
  .hero__inner {
    padding-top: calc(var(--header-height, 88px) + var(--space-4));
    padding-bottom: var(--space-6);
    gap: var(--space-3);
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__trust-list {
    gap: var(--space-2) var(--space-3);
  }

.hero__visual {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  justify-content: stretch;
}

.hero__visual-frame {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
 aspect-ratio: 4 / 5;
  border-radius: 0;
}
}