/* ==========================================================================
   WV Signs You Need — Static Draft
   --------------------------------------------------------------------------
   Full-bleed surface section with centered heading + 2×2 benefit grid.
   Content hardcoded in the PHP for this pass. ACF integration (heading
   parts, product name, 4 sign items per product) is a follow-up pass.
   ========================================================================== */

.wv-signs-section {
  /* Full-bleed breakout — same pattern as buzzword-bar / buy-bar /
     related-products. */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

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

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

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

/* ── Heading ─────────────────────────────────────────────────────── */

.wv-signs-section__heading {
  color: var(--wv-color-text-primary);
  text-align: center;
  /* Mobile-first: tighter heading→grid gap. Tablet+ uses 64px (see @media below). */
  margin: 0 0 40px;
}

.wv-signs-section__product {
  /* NEEDS DESIGNER REVIEW: product name span styling. Currently
     inherits heading class (same weight, size, color). Designer may
     want bold / accent color / italics — confirm. */
}

/* ── Grid ───────────────────────────────────────────────────────────
   Mobile-first: 1 column (4 items stack vertically), 32px gap.
   Tablet+ (≥768) restores the 2×2 grid + 40px gap.
   Desktop (≥1280) bumps to 48/80px gap (see below). */

.wv-signs-section__grid {
  /* Centered within the inner — constrained narrower than the full
     container so items don't spread too wide at desktop. */
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}

.wv-signs-section__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* NEEDS DESIGNER REVIEW: gap between icon / subtitle / body */
  gap: 16px;
}

.wv-signs-section__icon {
  /* NEEDS DESIGNER REVIEW: icon size (56px starting) */
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}

.wv-signs-section__subtitle {
  color: var(--wv-color-text-primary);
  margin: 0;
}

.wv-signs-section__body {
  color: var(--wv-color-text-secondary);
  margin: 0;
  /* NEEDS DESIGNER REVIEW: body max-width keeps copy from running too
     wide per item. */
  max-width: 320px;
}

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

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

  .wv-signs-section__heading {
    margin-bottom: 64px;
  }

  .wv-signs-section__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

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

  .wv-signs-section__grid {
    gap: 48px 80px;
  }
}

/* ==========================================================================
   MOBILE — 1-column stack (handled mobile-first above)
   --------------------------------------------------------------------------
   Refactored 2026-06-05 from a max-width: 599 collapse to canonical
   mobile-first. Base = 1 column; @media (min-width: 768px) restores
   2 columns + larger gap; 1280 block bumps gap further. Removes the
   sole max-width query in this file (MOBILE-DESIGN-RULES.md compliance).
   ========================================================================== */