/* ═══════════════════════════════════════════
   Reusable Article Card Component (v3)
   Used by: learn hub, learn archive, article
   related sections, and any future card grids.

   v3: tile-shape default — fixed 288×377 single card, 30px radius,
       shadow (no border). All variants use 16:9 image aspect.
       Matches Product Tile #34's shape (single rounded card, shadow)
       at a larger size (288×377). Carousel-first consumption.
   v2: Global typography audit, hardcoded hex → token variables
   v1: Initial build

   CHANGELOG
   ─────────
   2026-06-02 (v3): Tile-shape — fixed 288×377, 30px radius, shadow
                    (drop border). 16:9 image aspect across all
                    variants. --related still available but no longer
                    used by parts/related-articles.php (designer call).
                    Hover lift swaps to box-shadow elevation instead
                    of border-color shift.
   2026-04-16 (v2): Global typography audit, hardcoded hex → tokens.
   ═══════════════════════════════════════════ */

.wv-article-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--wv-color-card-bg);
  /* Designer revision 2026-06-02: radius back to 10px (v2 value).
     Previous v3 experiment used 30px to mirror Product Tile; designer
     preferred 10px for the article context. */
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  /* Fixed dimensions per designer call 2026-06-02 — matches Product
     Tile's "single card" pattern at 288×377 (tile is 221×318). */
  width: 288px;
  height: 377px;
  flex-shrink: 0;
  box-shadow: var(--wv-shadow-md);
  transition: box-shadow var(--wv-transition-fast), transform var(--wv-transition-fast);
}
.wv-article-card:hover {
  /* Designer revision 2026-06-02: hover shadow reduced to ~20% of
     --wv-shadow-lifted (which is 9px 10px 8px 4px rgba(0,0,0,0.18)).
     The full token was getting clipped by the carousel's overflow.
     Local literal value here instead of a new token — this is a
     consumer-specific tuning, not a palette-wide change. */
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.18);
  transform: translateY(-2px);
}

/* ── Image ── */
.wv-article-card__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--wv-color-surface);
  flex-shrink: 0;
}
.wv-article-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wv-article-card__img--placeholder {
  /* typography via .wv-label-legal in markup */
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: italic;
  color: var(--wv-color-text-secondary); /* closest token — visual review needed */
  background: var(--wv-color-background); /* closest token — visual review needed */
}
.wv-article-card:nth-child(even) .wv-article-card__img--placeholder {
  background: var(--wv-color-surface); /* closest token — visual review needed */
}

/* ── Body ──
   Grid layout reorders DOM children visually so byline + foot land on
   the same bottom row. DOM order is meta / title / byline / excerpt /
   foot — grid-template-areas overrides to:
     row 1: meta
     row 2: title
     row 3: excerpt
     row 4: empty spacer (1fr) — pushes the bottom row down so
                                 "byline | foot" pins to body bottom
                                 regardless of excerpt length.
     row 5: byline left  |  foot right
   parts/article-card.php is frozen; this restructure is CSS-only. */
.wv-article-card__body {
  padding: 14px 16px 16px;
  /* Body fills the card's remaining height below the fixed-aspect
     image. Without this, the body collapses to natural content
     height and the grid's 1fr spacer row collapses to 0, putting
     the byline+foot row right under the excerpt instead of at the
     card bottom. */
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto 1fr auto;
  grid-template-areas:
    "meta    meta"
    "title   title"
    "excerpt excerpt"
    ".       ."
    "byline  foot";
}
.wv-article-card__body > .wv-article-card__meta    { grid-area: meta; }
.wv-article-card__body > .wv-article-card__title   { grid-area: title; }
.wv-article-card__body > .wv-article-card__excerpt { grid-area: excerpt; }
.wv-article-card__body > .wv-article-card__byline {
  grid-area: byline;
  align-self: end;
  justify-self: start;
  margin: 0; /* clear the natural-flow margin-bottom that no longer applies */
}
.wv-article-card__body > .wv-article-card__foot {
  grid-area: foot;
  align-self: end;
  justify-self: end;
}

/* ── Meta (cluster pill) ── */
.wv-article-card__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  flex-wrap: wrap;
}

/* ── Cluster pill — neutral style for all clusters ── */
.wv-article-card__pill {
  /* typography via .wv-label-reg in markup — flag: was 10px, now 12px */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 9px 3px;
  border-radius: var(--wv-radius-pill);
  border: 1px solid var(--wv-color-text-secondary);
  background: var(--wv-color-background);
  color: var(--wv-color-text-secondary);
  white-space: nowrap;
}

/* ── Title ── */
.wv-article-card__title {
  /* typography via .wv-body in markup — flag: was serif 15px, now General Grotesque 14px */
  line-height: 1.25;
  color: var(--wv-color-text-primary);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Excerpt ── */
.wv-article-card__excerpt {
  /* typography via .wv-body-sm in markup */
  line-height: 1.7;
  color: var(--wv-color-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 12px;
}

/* ── Footer ── */
.wv-article-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wv-article-card__byline {
  /* typography via .wv-label-legal in markup */
  color: var(--wv-color-text-secondary); /* closest token — visual review needed */
}
.wv-article-card__arrow {
  /* typography via .wv-label-legal in markup + local weight override */
  font-weight: 600;
  color: var(--wv-color-accent);
}

/* ── Large variant ──
   v3 (2026-06-02): image aspect unified to 16:9 across all variants.
   Larger title + excerpt clamps preserved. */
.wv-article-card--lg .wv-article-card__title {
  /* no global match at 22px — keep locally, flag for visual review */
  font-size: 22px;
  -webkit-line-clamp: 4;
}
.wv-article-card--lg .wv-article-card__excerpt {
  -webkit-line-clamp: 5;
}

/* ── Related variant (compact) ──
   v3 (2026-06-02): image aspect unified to 16:9 (was height: 120px
   fixed). Variant kept available but no longer used by
   parts/related-articles.php (designer dropped it 2026-06-02). */
.wv-article-card--related .wv-article-card__body {
  padding: 16px;
}
.wv-article-card--related .wv-article-card__title {
  /* typography via .wv-body in markup + local weight override */
  font-family: var(--wv-font-primary);
  font-weight: 600;
  -webkit-line-clamp: 2;
}
.wv-article-card--related .wv-article-card__pill {
  font-size: 9px;
}

/* ── First5 product pills — accent colors ── */
.wv-lh-f5-pill--omega     { color: var(--wv-color-omega-main);     border-color: var(--wv-color-omega-main);     background: color-mix(in srgb, var(--wv-color-omega-main) 10%, var(--wv-color-background)); }
.wv-lh-f5-pill--probiotic { color: var(--wv-color-probiotic-main); border-color: var(--wv-color-probiotic-main); background: color-mix(in srgb, var(--wv-color-probiotic-main) 10%, var(--wv-color-background)); }
.wv-lh-f5-pill--calciumd  { color: var(--wv-color-calcium-main);   border-color: var(--wv-color-calcium-main);   background: color-mix(in srgb, var(--wv-color-calcium-main) 10%, var(--wv-color-background)); }
.wv-lh-f5-pill--collagen  { color: var(--wv-color-collagen-main);  border-color: var(--wv-color-collagen-main);  background: color-mix(in srgb, var(--wv-color-collagen-main) 10%, var(--wv-color-background)); }
.wv-lh-f5-pill--multi     { color: var(--wv-color-multi-main);     border-color: var(--wv-color-multi-main);     background: color-mix(in srgb, var(--wv-color-multi-main) 10%, var(--wv-color-background)); }

/* ── Responsive — tablet+ ── */
@media (min-width: 768px) {
  .wv-article-card__body {
    padding: 18px 20px 20px;
  }

  .wv-article-card__title {
    font-size: 17px;
  }
}