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

   Designed reusable: PDPs today, single posts / hub category pages later.
   ========================================================================== */

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

  /* Default: transparent (page bg shows through). Add the
     .wv-related-articles--surface modifier (caller passes
     `surface => true`) to paint the alternate "lighter cream"
     section bg. */
  background: transparent;

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

.wv-related-articles--surface {
  background: var(--wv-color-surface);
}

.wv-related-articles__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 related-products. */
  padding: 0 24px;
}

.wv-related-articles__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;
}

/* Optional eyebrow pill row above the heading (2026-06-02). Caller passes
   `pills` array; partial wraps the pills in .wv-related-articles__pill-wrap.
   Flex + center + gap so single-pill and multi-pill cases both look right. */
.wv-related-articles__pill-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

/* Optional "View All" link below the carousel (2026-06-02). Caller passes
   `view_all` arg in get_template_part. Mirrors the prior bespoke
   .wv-lh-recent-viewall__btn styling so the Learn Hub Recent section
   keeps its visual identity after migrating onto this partial. */
.wv-related-articles__view-all {
  text-align: center;
  margin-top: 32px;
}
.wv-related-articles__view-all-link {
  /* typography via .wv-label-reg in markup */
  display: inline-block;
  background: none;
  border: 1px solid var(--wv-color-border);
  border-radius: 10px;
  padding: 12px 32px;
  font-weight: 600;
  color: var(--wv-color-text-secondary);
  text-decoration: none;
  transition: all 0.15s;
}
.wv-related-articles__view-all-link:hover {
  border-color: var(--wv-color-text-primary);
  color: var(--wv-color-text-primary);
}

/* Article-card sizing inside the generic carousel — the card itself
   has no inherent width (relies on a context-specific rule). The Learn
   Hub provides its own version of this rule scoped to its bespoke
   carousel namespace (.wv-lh-recent-carousel__track); we mirror it
   locally scoped to .wv-related-articles. See PLAN-migration.md §27
   for the longer-term consolidation note. */
.wv-related-articles .wv-carousel__track > .wv-article-card {
  flex-shrink: 0;
  width: 80vw;
  max-width: 300px;
  scroll-snap-align: start;
}

/* ── Responsive tiers — match related-products inner padding cadence ── */

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

@media (min-width: 1280px) {
  .wv-related-articles__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.
   ========================================================================== */