/* ═══════════════════════════════════════════
   WV Ingredient Card — Reusable Component
   ═══════════════════════════════════════════
   See COMPONENTS.md for usage docs.

   Two-card pattern:
     - Top card (288×377)
         - Image area      (288×324)
         - Name panel      (288×53)  ← line of copy at bottom
     - 8px gap
     - Bottom card — description only (height grows with content)

   Outer wrapper is a <button> for click-to-focus a11y inside a
   carousel (parts/carousel.php focus="left"). Carousel governs
   the muted/focused state on each slide via data-focused — the
   card itself has no internal hover or active state.

   Typography fully delegated to global classes applied in the
   template (.wv-body-bold on name, .wv-body on description). No
   local font-family / font-size / font-weight / line-height
   declarations.

   Mobile-first per CLAUDE.md v9. Image area aspect (288:324 ≈ 8:9)
   scales with the card width. Name panel stays a fixed 53px at all
   breakpoints (matches Product Tile #34 convention for the name
   strip). At tablet+ the card width fixes at 288px, so the top
   card lands at the locked 288×377.
   ═══════════════════════════════════════════ */

.wv-ingredient-card {
  /* Button reset — the card is a real <button> for keyboard / a11y. */
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;

  /* Layout — two stacked sub-cards with an 8px gap. */
  display: flex;
  flex-direction: column;
  gap: 8px;

  /* Width: viewport-relative at mobile (carousel slide), fixed 288 at tablet+. */
  width: 82vw;
  flex: 0 0 82vw;
}

.wv-ingredient-card:focus-visible {
  outline: 2px solid var(--wv-color-accent);
  outline-offset: 4px;
}

/* Focused card: no pointer affordance (clicking is a no-op). */
.wv-ingredient-card[data-focused="true"] {
  cursor: default;
}

/* ── Top card ─────────────────────────────────────────────────────── */

.wv-ingredient-card__top {
  width: 100%;
  border-radius: 15px;
  background: #fff;
  box-shadow: var(--wv-shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.wv-ingredient-card__image {
  width: 100%;
  /* Image area aspect (8.9:9 ≈ 8:9 portrait — matches designer's
     native ingredient image clustering at ~0.89). At desktop the
     card width is 288 so this resolves to 324h, giving 288×324
     image + 53 name panel = 288×377 top card total. */
  aspect-ratio: 288 / 324;
  overflow: hidden;
  position: relative;
}

.wv-ingredient-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wv-ingredient-card__name-panel {
  width: 100%;
  height: 53px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}

.wv-ingredient-card__name {
  margin: 0;
  color: var(--wv-color-text-primary);
  text-align: center;
}

/* ── Bottom card ──────────────────────────────────────────────────── */

.wv-ingredient-card__info {
  width: 100%;
  border-radius: 15px;
  background: #fff;
  box-shadow: var(--wv-shadow-card);
  padding: 20px 16px;
}

.wv-ingredient-card__description {
  margin: 0;
  color: var(--wv-color-text-primary);
}

/* ── Tablet+ (768) ────────────────────────────────────────────────── */

@media (min-width: 768px) {
  .wv-ingredient-card {
    width: 288px;
    flex: 0 0 288px;
  }
}