/* ═══════════════════════════════════════════
   WV Product Tile — Reusable Component
   ═══════════════════════════════════════════
   See COMPONENTS.md entry #34 for usage docs.

   The tile is a clickable element (<button> or <a>)
   showing a product's color identity, photo, and name.

   *** NON-COMMERCE component. ***
   Distinct from Product Card (#2) which is the COMMERCE
   component (price, rating, ATC). Use Product Tile where
   identity matters more than purchase action — e.g. the
   F5 Orientation "Our First5 Are" carousel.

   Designer-set dimensions (fixed at all breakpoints):
     - Card total       : 221w × 318h
     - Image (media)    : 221w × 265h
     - Name panel       : 221w ×  53h (derived: 318 − 265)
     - Border-radius    : 30px
   Exposed as component-scoped custom properties below so
   consumers can override per-instance if a different variant
   ever ships.

   Consumers control:
   - Accent color via --wv-product-tile-accent (inline style
     pointing at a CSS variable or raw value)
   - Tag (button vs a) for focus-target vs navigation contexts

   Mobile-first per MOBILE-DESIGN-RULES.md. Dimensions stay
   fixed at all breakpoints (cards don't stretch); carousel
   consumers just show fewer slides at narrow viewports.

   CHANGELOG
   ─────────
   2026-05-25: Initial build.
   2026-06-01: Locked dimensions per designer (221×318, 30r,
               image area 221×265). Switched media zone from
               1:1 square aspect to fixed 265h. Image fills
               edge-to-edge (object-fit: cover, no padding).
   2026-06-02: Removed the accent color background from
               .wv-product-tile__media. Design pivots: tiles
               are now just the bottle photo filling the media
               area, no colored panel behind it. The
               --wv-product-tile-accent token + the consumer's
               inline-style accent injection are kept as
               accepted-but-inert (no breakage at call sites);
               sweep later. Pairs with a designer brief for
               re-exported tight-cropped bottle-only assets
               with transparent backgrounds — until those
               assets land, current .webp files still display
               their baked-in colored panels (asset content,
               not CSS).
   ═══════════════════════════════════════════ */

.wv-product-tile {
  /* Component-scoped sizing tokens — per designer 2026-06-01.
     Override per-instance if a variant ever ships. */
  --wv-product-tile-width:        221px;
  --wv-product-tile-height:       318px;
  --wv-product-tile-media-height: 265px;
  --wv-product-tile-radius:       30px;

  /* Reset button/a defaults so the tile looks identical regardless of root tag. */
  display: flex;
  flex-direction: column;
  width:  var(--wv-product-tile-width);
  height: var(--wv-product-tile-height);
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  border-radius: var(--wv-product-tile-radius);
  overflow: hidden;
  box-shadow: var(--wv-shadow-md);
  transition: var(--wv-transition-base);
}

.wv-product-tile:hover {
  box-shadow: var(--wv-shadow-lifted); /* NEEDS DESIGNER REVIEW — hover lift */
  transform: translateY(-2px); /* NEEDS DESIGNER REVIEW — hover translate */
}

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

.wv-product-tile__media {
  display: block;
  width: 100%;
  height: var(--wv-product-tile-media-height); /* 265px */
  /* No background color — design pivot 2026-06-02. Tiles render
     the bottle photo only; if a future asset has transparent
     regions, the consuming surface (carousel section bg, etc.)
     shows through. --wv-product-tile-accent inline style from
     consumers (see parts/f5-orientation-showcase.php) is still
     accepted-but-inert so existing call sites don't error. */
  overflow: hidden;
}

.wv-product-tile__image {
  /* Fill the 221×265 image area edge-to-edge. Designer exports
     product images to match this aspect ratio so no crop is needed.
     object-fit: cover is defensive — if a future image is slightly
     off-ratio, it crops cleanly instead of letterboxing. */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wv-product-tile__name-panel {
  /* Takes the remaining card height = 318 − 265 = 53px via flex.
     No explicit height — flex layout in .wv-product-tile distributes
     the leftover space here. */
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: var(--wv-color-card-bg);
  padding: 0 12px; /* NEEDS DESIGNER REVIEW — horizontal label padding */
}

.wv-product-tile__name {
  /* Override .wv-body-bold's default text color on this surface. */
  color: var(--wv-color-text-primary);
  text-align: center;
}