/* ═══════════════════════════════════════════
   WV Learn Hub — page-specific styles (v2)
   Template: page-learn.php
   Mobile-first: base = 375px+, tablet = 768px+, desktop = 1280px+

   CHANGELOG
   ─────────
   v2 — 2026-06-02: Full rewrite alongside the page-learn.php rebuild.
        Eliminated: dead .wv-lh-pill / .wv-lh-three-col / .wv-lh-recent-*
        / .wv-lh-feat-grid / .wv-lh-cluster-* / .wv-lh-section-*
        rule blocks. The "section of article cards" surfaces all
        migrated onto parts/related-articles.php — styling lives in
        wv-related-articles.css. Surviving learn-hub rules now cover
        only: page wrap, breadcrumb wrapper, hero (2-col grid + left
        eyebrow + h1 + body + Browse-by-Topic tpills + mini-cards),
        Browse-by-Goal grid, and the .wv-lh-f5-pill family used by
        the first5-products cluster section. Every typography
        redeclaration removed (rule 3 compliance); every hardcoded
        magic max-width replaced with --wv-container-max +
        --wv-page-gutter; every inline style in markup moved here.
   v1 — earlier 2026 build; see git history.
   ═══════════════════════════════════════════ */

/* ────────────────────────────────────────────
   0. PAGE WRAPPER + BREADCRUMB CONTAINER
   ──────────────────────────────────────────── */

.wv-lh-wrap {
  max-width: var(--wv-container-max);
  margin: 0 auto;
  padding: 0 var(--wv-page-gutter);
}

/* Breadcrumb container above the hero. Uses the canonical clamp
   padding-block-start so the breadcrumb's top/bottom symmetry matches
   shop / learn-archive / single article. */
.wv-lh-top {
  background: var(--wv-color-background);
  padding-block-start: clamp(16px, 2vw, 24px);
}


/* ────────────────────────────────────────────
   1. HERO
   ──────────────────────────────────────────── */

.wv-lh-hero {
  background: var(--wv-color-background);
  padding: 0 0 40px;
  border-bottom: 1px solid var(--wv-color-border);
}

.wv-lh-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
  max-width: var(--wv-page-content-tight);
  margin: 0 auto;
}

.wv-lh-hero__col-left,
.wv-lh-hero__col-right {
  min-width: 0;
}

/* Hero left column ─────────────────────────── */

.wv-lh-hero__title {
  /* typography via .wv-h2 in markup */
  color: var(--wv-color-text-primary);
  margin-bottom: 18px;
}

.wv-lh-hero__body {
  /* typography via .wv-body-lg in markup */
  color: var(--wv-color-text-secondary);
  margin-bottom: 28px;
}

.wv-lh-hero__pills-label {
  /* typography via .wv-label-small in markup */
  text-transform: uppercase;
  color: var(--wv-color-text-secondary);
  margin-bottom: 12px;
}

.wv-lh-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Topic pill — small, outlined, slow-scrolls to its cluster section. */
.wv-lh-tpill {
  /* typography via .wv-label-reg in markup */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 9px 18px 8px;
  border-radius: var(--wv-radius-pill);
  border: 1px solid var(--wv-color-text-secondary);
  background: transparent;
  color: var(--wv-color-text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--wv-transition-fast),
              color var(--wv-transition-fast),
              background var(--wv-transition-fast);
}
.wv-lh-tpill:hover {
  border-color: var(--wv-color-text-primary);
  color: var(--wv-color-text-primary);
}

/* Variant modifiers all share the same baseline today; reserved for
   per-cluster color hooks if the designer ever wants them. */
.wv-lh-tpill--brand,
.wv-lh-tpill--neutral,
.wv-lh-tpill--f5 {
  /* same as base — no override yet */
}

/* Hero right column — "Our most-read articles" ─ */

.wv-lh-top-reads__label {
  /* typography via .wv-label-small in markup */
  text-transform: uppercase;
  color: var(--wv-color-text-secondary);
  margin-bottom: 4px;
}

.wv-lh-mini-card {
  display: block;
  background: var(--wv-color-surface);
  border: 1px solid var(--wv-color-border);
  border-radius: var(--wv-radius-md);
  padding: 16px 18px;
  margin-bottom: 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--wv-transition-fast),
              transform var(--wv-transition-fast);
}
.wv-lh-mini-card:last-child { margin-bottom: 0; }
.wv-lh-mini-card:hover {
  border-color: var(--wv-color-text-secondary);
  transform: translateY(-2px);
}

.wv-lh-mini-card__inner {
  display: flex;
  align-items: center;
  gap: 16px;
}

.wv-lh-mini-card__rank {
  /* typography via .wv-h2 in markup — rank number, large numeral */
  flex-shrink: 0;
  min-width: 32px;
  text-align: center;
  color: var(--wv-color-text-secondary);
}

.wv-lh-mini-card__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wv-lh-mini-card__title {
  /* typography via .wv-h5 in markup */
  color: var(--wv-color-text-primary);
}

.wv-lh-mini-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}

.wv-lh-mini-card__read {
  /* typography via .wv-label-legal in markup */
  color: var(--wv-color-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Cluster pill inside the mini-card foot matches .wv-lh-tpill sizing
   (designer call 2026-06-02 — tpill is the canonical small-pill design).
   Scoped override; .wv-article-card__pill elsewhere is unchanged. */
.wv-lh-mini-card__foot .wv-article-card__pill {
  padding: 9px 18px 8px;
  background: transparent;
  border-color: var(--wv-color-text-secondary);
  color: var(--wv-color-text-secondary);
}


/* ────────────────────────────────────────────
   2. BROWSE BY GOAL — bespoke section (icon grid)
   ──────────────────────────────────────────── */

.wv-lh-goals {
  background: var(--wv-color-surface);
  border-top: 1px solid var(--wv-color-border);
  border-bottom: 1px solid var(--wv-color-border);
  padding: 64px 0;
}

.wv-lh-goals__inner {
  max-width: var(--wv-page-content-tight);
  margin: 0 auto;
  padding: 0 var(--wv-page-gutter);
}

.wv-lh-goals__intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
  text-align: center;
  align-items: center;
}

.wv-lh-goals__heading {
  /* typography via .wv-h2 in markup */
  color: var(--wv-color-text-primary);
}

.wv-lh-goals__sub {
  /* typography via .wv-body-lg in markup */
  color: var(--wv-color-text-secondary);
  max-width: 540px;
}

.wv-lh-goal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.wv-lh-goal-card {
  background: var(--wv-color-background);
  border: 1px solid var(--wv-color-border);
  border-radius: var(--wv-radius-md);
  padding: 24px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color var(--wv-transition-fast),
              transform var(--wv-transition-fast);
}
.wv-lh-goal-card:hover {
  border-color: var(--wv-color-text-secondary);
  transform: translateY(-2px);
}

.wv-lh-goal-card__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wv-color-surface);
  border-radius: var(--wv-radius-sm);
  color: var(--wv-color-text-secondary);
}

.wv-lh-goal-card__label {
  /* typography via .wv-body in markup */
  color: var(--wv-color-text-primary);
}

.wv-lh-goal-card__desc {
  /* typography via .wv-body-sm in markup */
  color: var(--wv-color-text-secondary);
}

.wv-lh-goal-card__link {
  /* typography via .wv-label-legal in markup */
  color: var(--wv-color-text-secondary);
  margin-top: auto;
}


/* ────────────────────────────────────────────
   3. CLUSTER SECTIONS — single unique section
   wrapping all 5 cluster blocks. Surface ("lighter
   cream") bg, left-justified head (pill row +
   heading + view-all link), carousel below.
   ──────────────────────────────────────────── */

.wv-lh-clusters {
  background: var(--wv-color-background);
  padding: 64px 0;
}

.wv-lh-clusters__inner {
  max-width: var(--wv-page-content-tight);
  margin: 0 auto;
  padding: 0 var(--wv-page-gutter);
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* ────────────────────────────────────────────
   X. SHARED-PART OVERRIDES (Learn Hub scope only)

   The Foundational Articles and Recent Articles sections both render
   via parts/related-articles, which sits OUTSIDE .wv-lh-wrap in
   page-learn.php and whose __inner caps at --wv-container-max (1440).
   Scope a cap to --wv-page-content-tight only on the Learn Hub
   template (body.page-template-page-learn) so it aligns visually
   with the hero / goals / clusters. Other pages using the partial
   are untouched.
   ──────────────────────────────────────────── */
body.page-template-page-learn .wv-related-articles__inner {
  max-width: var(--wv-page-content-tight);
}

/* CSS-only suppression of empty cluster-pill chips on cards whose
   underlying article has no post_cluster term. parts/article-card.php
   falls back to slug='brand' / name='' and unconditionally renders the
   span — touching that frozen partial is off-limits, so hide it here
   instead. :empty matches only when the span has zero children + zero
   text content, so legit pills aren't affected. */
body.page-template-page-learn .wv-article-card__pill:empty {
  display: none;
}

/* Card cadence: 1 mobile / 2 tablet / 3 desktop, fitting cleanly in the
   1024 tight container at each tier so customers see whole cards, not
   2.5 + arrow. Overrides wv-related-articles.css:99's 300px cap on
   Learn Hub only — other consumers (PDPs, F5 LP) keep the 300px cap. */
body.page-template-page-learn .wv-related-articles .wv-carousel__track > .wv-article-card {
  width: 100%;
  max-width: none;
}
@media (min-width: 768px) {
  body.page-template-page-learn .wv-related-articles .wv-carousel__track > .wv-article-card {
    width: calc((100% - 20px) / 2);
  }
}
@media (min-width: 1280px) {
  body.page-template-page-learn .wv-related-articles .wv-carousel__track > .wv-article-card {
    width: calc((100% - 40px) / 3);
  }
}

.wv-lh-cluster {
  scroll-margin-top: var(--wv-header-height);
}

.wv-lh-cluster__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  text-align: left;
}

.wv-lh-cluster__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.wv-lh-cluster__head-row2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.wv-lh-cluster__heading {
  /* typography via .wv-h5 in markup */
  color: var(--wv-color-text-primary);
}

.wv-lh-cluster__viewall {
  /* typography via .wv-body-sm in markup */
  color: var(--wv-color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--wv-transition-fast);
}
.wv-lh-cluster__viewall:hover {
  color: var(--wv-color-text-primary);
}


/* ────────────────────────────────────────────
   4. F5 PILLS — used by the first5-products cluster
   header in the cluster section above.
   ──────────────────────────────────────────── */

.wv-lh-f5-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px 8px;
  border-radius: var(--wv-radius-pill);
  border: 1px solid var(--wv-color-text-secondary);
  background: transparent;
  font-family: var(--wv-font-primary);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--wv-color-text-secondary);
  white-space: nowrap;
}

/* Per-product color variants. Border + text take the product accent. */
.wv-lh-f5-pill--omega     { border-color: var(--wv-color-omega-main);     color: var(--wv-color-omega-main); }
.wv-lh-f5-pill--probiotic { border-color: var(--wv-color-probiotic-main); color: var(--wv-color-probiotic-main); }
.wv-lh-f5-pill--calciumd  { border-color: var(--wv-color-calcium-main);   color: var(--wv-color-calcium-main); }
.wv-lh-f5-pill--collagen  { border-color: var(--wv-color-collagen-main);  color: var(--wv-color-collagen-main); }
.wv-lh-f5-pill--multi     { border-color: var(--wv-color-multi-main);     color: var(--wv-color-multi-main); }


/* ────────────────────────────────────────────
   RESPONSIVE — Tablet (768px+)
   ──────────────────────────────────────────── */
@media (min-width: 768px) {

  .wv-lh-hero {
    padding-bottom: 64px;
  }

  .wv-lh-hero__grid {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
  }

  .wv-lh-goal-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}


/* ────────────────────────────────────────────
   RESPONSIVE — Desktop (1280px+)
   ──────────────────────────────────────────── */
@media (min-width: 1280px) {

  .wv-lh-hero__grid {
    gap: 72px;
  }

  .wv-lh-goals {
    padding: 96px 0;
  }

  .wv-lh-goal-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

}