/* ==========================================================================
   WV Related Products — carousel wrapper section
   --------------------------------------------------------------------------
   Thin framing section (full-bleed, surface bg, centered heading) around
   the reusable carousel component (COMPONENTS.md #15) rendering product
   cards (COMPONENTS.md #2). No internal layout logic — delegates carousel
   behavior + slide styling to those components.
   ========================================================================== */

.wv-related-products {
  /* Full-bleed breakout — escapes any centered container so the surface
     bg hits actual viewport edges. Same pattern as buzzword-bar. */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  background: var(--wv-color-surface);

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

.wv-related-products__inner {
  max-width: var(--wv-container-max);
  margin: 0 auto;
  /* Mobile-first padding cadence: 24 (base) → 50 (min-width: 768) →
     80 (min-width: 1280). */
  padding: 0 24px;
}

.wv-related-products__heading {
  /* NEEDS DESIGNER REVIEW: heading class (.wv-h2 = Reg 40 sans) — confirm
     via Figma. Could need a larger class if mockup reads bigger. */
  text-align: center;
  /* NEEDS DESIGNER REVIEW: gap below heading before carousel */
  margin-bottom: 48px;
}

/* ── Responsive tiers — match comparison-table inner padding cadence ── */

@media (min-width: 768px) {
  .wv-related-products__inner {
    padding: 0 50px;
  }
}

@media (min-width: 1280px) {
  .wv-related-products__inner {
    padding: 0 80px;
  }
}

/* ==========================================================================
   MOBILE — NOT YET BUILT
   --------------------------------------------------------------------------
   Carousel owns its own mobile bleed and arrow-hide behavior per its
   component spec. This section's inner padding already tightens via the
   899 tier above. Mobile-specific tuning (vertical padding, heading size)
   deferred until designer provides mobile spec.
   ========================================================================== */