/* ═══════════════════════════════════════════
   WV Hero — homepage hero component
   ───────────────────────────────────────────
   Extracted 2026-06-08 from wv-components.css (formerly frozen;
   promoted to a standalone, editable component per the
   one-component-one-file convention). Rendered by parts/hero.php on
   the homepage and the style guide.

   Mobile-first; the cascade is preserved verbatim from the original
   so this extraction is a no-visual-change refactor:
     base → mobile re-statement → @768 (tablet) → @1280 (desktop).
   ═══════════════════════════════════════════ */

.wv-hero {
  position: relative; /* anchor for the absolutely-positioned bleed image (tablet+) */
  background: var(--wv-color-background);
  overflow: hidden;
}

.wv-hero__inner {
  display: flex;
  align-items: center;
  max-width: var(--wv-container-max);
  margin: 0 auto;
  padding: 120px 80px;
  gap: 0;
}

/* ── Hero Content (Left) ── */
.wv-hero__content {
  position: relative; /* keep text above the absolute bleed image */
  z-index: 1;
  flex: 0 0 50%;
  padding-right: 100px;
  display: flex;
  flex-direction: column;
  gap: 62px;
}

.wv-hero__heading {
  font-family: var(--wv-font-primary);
  font-weight: 300;
  font-size: 70px;
  line-height: 70px;
  letter-spacing: -2.1px;
  color: var(--wv-color-text-primary);
  margin: 0;
}

/* Olive accent for the "Start with the Right Five." portion of the H1.
   Color-only — inherits typography from the parent heading. */
.wv-hero__heading-accent {
  color: var(--wv-color-accent);
}

.wv-hero__body {
  font-family: var(--wv-font-primary);
  font-weight: 400;
  font-size: 18px;
  line-height: 27.3px;
  letter-spacing: -0.54px;
  color: var(--wv-color-text-primary);
  margin: 0;
  max-width: 542px;
}

.wv-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  height: 44px;
  padding: 0 32px;
  /* Dark fill (text-primary) + cream text — certified inverse pair.
     (Was coral; switched per designer 2026-06-08.) */
  background: var(--wv-color-text-primary);
  color: var(--wv-color-text-inverse);
  font-family: var(--wv-font-primary);
  font-weight: 400;
  font-size: 15.6px;
  line-height: 19.8px;
  letter-spacing: -0.47px;
  text-transform: uppercase;
  border-radius: 0;
  border: 0;
  transition: background var(--wv-transition-base);
}

.wv-hero__cta:hover {
  background: var(--wv-color-accent);
}

/* CTA + note grouped as one flex child of the content column so the note
   hugs the CTA, independent of the column's larger inter-element gap. */
.wv-hero__cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Muted annotation under the CTA — custom typography (no .wv-* class)
   because the existing scales didn't fit the muted-secondary read. */
.wv-hero__cta-note {
  font-family: var(--wv-font-primary);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--wv-color-text-secondary);
  margin: 8px 0 0; /* hugs the CTA */
}

/* ── Hero Image (Right) ── */
.wv-hero__image {
  flex: 0 0 50%;
  position: relative;
}

.wv-hero__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* full-bleed fill (was contain) */
  object-position: left center; /* pin the image's left; let the right bleed/crop */
}

/* ── Mobile base overrides (restated after base, as in the original) ── */
.wv-hero__inner {
  flex-direction: column;
  padding: 40px 16px 0; /* reduced vertical; image bleeds to bottom edge */
}

/* Mobile: image spans full width, flush to the section's side + bottom edges. */
.wv-hero__image {
  align-self: stretch;
  margin: 32px -16px 0;
}

.wv-hero__content {
  flex: none;
  padding-right: 0;
  gap: 32px;
}

.wv-hero__heading {
  font-size: 36px;
  line-height: 38px;
  letter-spacing: -1px;
}

.wv-hero__body {
  font-size: 16px;
  line-height: 24px;
}

.wv-hero__image {
  flex: none;
  margin-top: 32px;
}

/* ── Tablet ── */
@media (min-width: 768px) {
  .wv-hero__inner {
    flex-direction: row;
    padding: 56px 40px; /* reduced vertical (was 96) */
  }

  .wv-hero__content {
    flex: 0 0 50%;
    padding-right: 40px;
    gap: 40px;
  }

  .wv-hero__heading {
    font-size: 50px;
    line-height: 50px;
    letter-spacing: -2.1px;
  }

  .wv-hero__body {
    font-size: 18px;
    line-height: 27.3px;
  }

  /* Pin the image's left at the column split (= viewport midpoint, since
     the inner is centered) and bleed it off the RIGHT edge of the page,
     escaping the container max. Absolute within the full-width section. */
  .wv-hero__image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%;
    margin: 0;
  }
}

/* ── Desktop ── */
@media (min-width: 1280px) {
  .wv-hero__inner {
    padding: 80px 80px; /* reduced vertical (was 120) */
  }

  .wv-hero__content {
    padding-right: 100px;
    gap: 62px;
  }

  .wv-hero__heading {
    font-size: 70px;
    line-height: 70px;
  }
}