/* ==========================================================================
   WV Bundle Card — reusable product-card for promoting a bundle
   --------------------------------------------------------------------------
   Image (top) + body (bottom) with title, optional pills, add-to-cart.
   Used on Shop Benefit pages for per-benefit Foundation Bundle + shared
   First5 Bundle placements. Component bails when no WC product is linked,
   so future-product placements stay inert until the linked product ships.

   Typography fully delegated to global classes applied in the template
   (.wv-h5 on title, .wv-label-reg on pills, .wv-label-btn on CTA). No
   local font-family / font-size / font-weight / line-height declarations.
   ========================================================================== */

.wv-bundle-card {
  background: var(--wv-color-card-bg);
  border-radius: var(--wv-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.wv-bundle-card__media {
  /* NEEDS DESIGNER REVIEW: bundle image aspect ratio (starter 16/9). */
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

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

.wv-bundle-card__body {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* NEEDS DESIGNER REVIEW: gap between title / pills / CTA. */
  gap: 16px;
  /* NEEDS DESIGNER REVIEW: body padding. */
  padding: 20px 24px;
}

.wv-bundle-card__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.wv-bundle-card__pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  /* NEEDS DESIGNER REVIEW: pill row gap. */
  gap: 8px;
}

.wv-bundle-card__pill {
  background: var(--wv-color-background);
  border-radius: var(--wv-radius-pill);
  /* NEEDS DESIGNER REVIEW: pill padding. */
  padding: 6px 12px;
}

.wv-bundle-card__cta {
  background: var(--wv-color-accent);
  color: var(--wv-color-text-inverse);
  border-radius: var(--wv-radius-pill);
  /* NEEDS DESIGNER REVIEW: CTA padding. */
  padding: 12px 24px;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--wv-transition-base);
  flex-shrink: 0;
}

.wv-bundle-card__cta:hover,
.wv-bundle-card__cta:focus {
  background: var(--wv-color-olive-dark);
  color: var(--wv-color-text-inverse);
}

/* Mobile-first: body stacks + CTA full-width centered. Restored ≥768px. */
.wv-bundle-card__body {
  flex-direction: column;
  align-items: stretch;
}
.wv-bundle-card__cta {
  text-align: center;
}

@media (min-width: 768px) {
  .wv-bundle-card__body {
    flex-direction: row;
    align-items: center;
  }
  .wv-bundle-card__cta {
    text-align: revert;
  }
}