/* ==========================================================================
   WV PDP — Feature Spotlight (F5 only)
   --------------------------------------------------------------------------
   Full-bleed section: ACF-driven background image (cover), serif headline
   left, transparent foreground PNG centered, 4 bullets right anchored to
   the container edge. Bullet 1 is default-active (full opacity); bullets
   2–4 muted on desktop and brighten on hover (CSS-only).

   Typography fully delegated to global classes applied in the template
   (.wv-h-serif on headline — designer-specified serif exception per
   CLAUDE.md v5 serif rule; .wv-body-bold on bullet labels). No local
   font-family / font-size / font-weight / line-height declarations.
   ========================================================================== */

.wv-pdp-feat-spot {
  /* Full-bleed breakout — same pattern as Buzzword Bar (#18), Comparison
     Table (#19), Buy Bar (#21). */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  /* ACF-driven background. The --wv-feat-spot-bg custom property is set
     inline on the section element by the partial.

     Mobile-first base adds a 35% black overlay via multi-background so
     the cream headline + bullets read clearly against the photo at
     narrow widths (where text overlaps the image). Tablet+ removes the
     overlay (the desktop layout has the foreground PNG carrying the
     visual weight, so the photo can show full strength). */
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
    var(--wv-feat-spot-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Cream text on the dark background image. Inherits to all children
     including leader-line and dot pseudo-elements. */
  color: var(--wv-color-text-inverse);

  /* NEEDS DESIGNER REVIEW: section min-height (starter 600px). */
  min-height: 600px;

  /* NEEDS DESIGNER REVIEW: vertical padding. */
  padding: 80px 0;

  display: flex;
  align-items: center;
}

.wv-pdp-feat-spot__inner {
  width: 100%;
  /* Section-content-inner-width per CLAUDE.md governing CSS RULES —
     1060 (--wv-page-content-max), NOT 1440 (--wv-container-max). The
     1440 outer is the full-bleed bg image's frame; the inner content
     (headline + bullets + optional foreground) reads as the article
     column and stays inside the 1060 cap. */
  max-width: var(--wv-page-content-max);
  margin: 0 auto;
  /* Mobile-first padding cadence: 24 (base) → 50 (min-width: 768) →
     80 (min-width: 1280). Matches other PDP sections. */
  padding: 0 24px;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  /* Column gap: 32 (mobile) → 24 (tablet) → 40 (desktop, at min-width: 1280). */
  gap: 40px;
}

.wv-pdp-feat-spot__headline {
  margin: 0;
  /* Inverse cream via inheritance from section root — defeats
     .wv-h-serif's default color: var(--wv-color-text-primary).
     Per CLAUDE.md v9 Rule 3 (color-inherit exception). */
  color: inherit;
}

.wv-pdp-feat-spot__foreground {
  display: block;
  max-width: 100%;
  height: auto;
  /* NEEDS DESIGNER REVIEW: foreground PNG max-height as % of section
     (starter 65% of viewport-relative height). */
  max-height: 65vh;
  margin: 0 auto;
  object-fit: contain;
}

.wv-pdp-feat-spot__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* NEEDS DESIGNER REVIEW: gap between bullets (starter 24px). */
  gap: 24px;
  align-self: center;
  justify-self: end;
  /* Inverse cream via inheritance — bullet labels' .wv-body-bold
     defaults to text-secondary. Inheritance to the <li> + <span>. */
  color: inherit;
}

.wv-pdp-feat-spot__bullet-label {
  /* Defeats .wv-body-bold's default color: var(--wv-color-text-secondary).
     See CLAUDE.md v9 Rule 3 (color-inherit exception). */
  color: inherit;
}

.wv-pdp-feat-spot__bullet {
  position: relative;
  /* Leader line (100px) + dot (6px) sit absolutely on the left; padding
     reserves the space + 12px gap before the label. */
  /* NEEDS DESIGNER REVIEW: leader line length, dot size, label gap. */
  padding-left: 118px;

  /* Muted by default; --active modifier or :hover brightens. */
  /* NEEDS DESIGNER REVIEW: muted bullet opacity (starter 0.4). */
  opacity: 0.4;
  transition: opacity var(--wv-transition-base);
}

/* JS (assets/js/wv-pdp-feat-spot.js) manages --active via mouseenter
   so the last-hovered bullet stays at full opacity after the cursor
   leaves. :hover removed from this rule to make JS the single source
   of truth — without that removal, hover would briefly defeat the
   sticky behaviour. */
.wv-pdp-feat-spot__bullet--active {
  opacity: 1;
}

.wv-pdp-feat-spot__bullet::before {
  /* Leader line — extends leftward from the dot position. */
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  /* NEEDS DESIGNER REVIEW: leader line length (starter 100px). */
  width: 100px;
  /* NEEDS DESIGNER REVIEW: leader line weight (starter 1px). */
  height: 1px;
  background: var(--wv-color-text-inverse);
  transform: translateY(-50%);
}

.wv-pdp-feat-spot__bullet::after {
  /* Dot — sits at the inner end of the leader line. */
  content: "";
  position: absolute;
  left: 100px;
  top: 50%;
  /* NEEDS DESIGNER REVIEW: bullet dot size (starter 6px). */
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wv-color-text-inverse);
  transform: translate(-50%, -50%);
}

/* ── Responsive tiers ── */

/* ── Mobile-first base (was a max-width: 768 block pre-2026-06-01) ── */

.wv-pdp-feat-spot {
  /* NEEDS DESIGNER REVIEW: mobile section min-height + vertical padding. */
  min-height: auto;
  padding: 48px 0;
}

.wv-pdp-feat-spot__inner {
  grid-template-columns: 1fr;
  /* NEEDS DESIGNER REVIEW: mobile stacked spacing. */
  gap: 32px;
}

.wv-pdp-feat-spot__foreground {
  /* NEEDS DESIGNER REVIEW: mobile foreground PNG max-height (starter 240px). */
  max-height: 240px;
}

.wv-pdp-feat-spot__bullets {
  justify-self: stretch;
  /* NEEDS DESIGNER REVIEW: mobile bullet gap. */
  gap: 16px;
}

.wv-pdp-feat-spot__bullet {
  /* NEEDS DESIGNER REVIEW: hide leader lines on mobile per spec.
     Padding collapses; all bullets render at full opacity (no hover
     state on touch). */
  padding-left: 0;
  opacity: 1;
}

.wv-pdp-feat-spot__bullet::before,
.wv-pdp-feat-spot__bullet::after {
  display: none;
}

/* ── Tablet+ (768) restores multi-col grid + tablet gap ── */
@media (min-width: 768px) {
  .wv-pdp-feat-spot {
    /* Remove the mobile dark overlay — the desktop layout's foreground
       PNG carries the visual weight, so the photo can show full strength. */
    background-image: var(--wv-feat-spot-bg);
    min-height: 600px;
    padding: 80px 0;
  }

  .wv-pdp-feat-spot__inner {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    padding: 0 50px;
  }

  /* Force fixed column placement so the grid layout doesn't shift
     when the optional foreground <img> is omitted (bg-only mode). */
  .wv-pdp-feat-spot__headline {
    grid-column-start: 1;
  }

  .wv-pdp-feat-spot__foreground {
    grid-column-start: 2;
    max-height: 65vh;
  }

  .wv-pdp-feat-spot__bullets {
    grid-column-start: 3;
    justify-self: end;
    gap: 24px;
  }

  .wv-pdp-feat-spot__bullet {
    padding-left: 118px;
    opacity: 0.4;
  }

  /* Re-declare inside the desktop @media so source order beats the
     `.wv-pdp-feat-spot__bullet { opacity: 0.4 }` above — both have the
     same specificity (single class), and without re-declaration the
     muted state was winning across all bullets including --active. */
  .wv-pdp-feat-spot__bullet--active {
    opacity: 1;
  }

  .wv-pdp-feat-spot__bullet::before,
  .wv-pdp-feat-spot__bullet::after {
    display: revert;
  }
}

/* ── Desktop+ (1280) restores wider padding + gap ── */
@media (min-width: 1280px) {
  .wv-pdp-feat-spot__inner {
    padding: 0 80px;
    gap: 40px;
  }
}