/* ============ Wadicos - Components (Product cards) ============ *
 * product-card · product-card--horizontal ·
 * collection-card · mosaic · testimonial-card.
 *
 * Sibling files:
 *  - components.css           - core (header, btn, pill, section)
 *  - components/content.css   - tabs, carousel, feature-row,
 *                                subscribe-card, footer.
 * =============================================================== */

@layer components {
  /* ---- Product card (vertical) ------------------- */
  /* V2 (audit §2.4 C8): card-level lift on hover. The image scale
     already shipped pre-V1; V2 adds a small translateY on the card
     itself so the whole composition rises together. Transitions
     bound to --dur-base + --ease-out so the gesture matches the
     editorial cadence of other components. */
  .product-card {
    container-type: inline-size;
    background-color: transparent;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: transform var(--dur-base) var(--ease-out);
  }
  @media (hover: hover) {
    .product-card:hover {  transform: translateY(-2px);  }
  }
  .product-card[hidden] { display: none; }

  .product-card__media {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--color-bg-elev);
    box-shadow: var(--shadow-card);
  }
  .product-card__image {
    inline-size: 100%; block-size: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
  }
  @media (hover: hover) {
    .product-card:hover .product-card__image {  transform: scale(1.04);  }
  }
  .product-card__badge {
    position: absolute;
    inset-block-start: var(--space-3); inset-inline-start: var(--space-3);
    z-index: 2;
    border-radius: var(--radius-md);
    padding-block: 0.375rem;
    padding-inline: var(--space-3);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    line-height: 1.2;
  }

  .product-card__bookmark,
  .product-card__heart {
    /* WCAG 2.5.5: 2.75rem = 44px minimum touch target. */
    --size: 2.75rem;
    inline-size: var(--size); block-size: var(--size);
    border-radius: var(--radius-pill);
    background-color: var(--color-cream);
    color: var(--color-cta-soft-ink);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
  }
  .product-card__bookmark {
    position: absolute;
    inset-block-start: var(--space-3); inset-inline-end: var(--space-3);
    z-index: 2;
  }
  @media (hover: hover) {
    .product-card__bookmark:hover,
    .product-card__heart:hover { transform: scale(1.08); }
  }
  .product-card__bookmark[aria-pressed="true"],
  .product-card__heart[aria-pressed="true"] {
    background-color: var(--color-red); color: var(--color-cta-ink);
  }

  .product-card__overlay {
    position: absolute;
    inset-inline: var(--space-3);
    inset-block-end: var(--space-3);
    z-index: 2;
    /* Self-contained dark glass plate over the product
       photo. The dark fill is intentional - it gives
       cream-family text legible contrast across photos
       that may themselves be either light or dark. Like
       .pill--dark, this is a fixed-theme surface: we
       re-scope --color-ink and --color-ink-soft locally
       so the .product-card__title and .product-card__family
       spans read in cream-on-dark regardless of the page
       theme. (Without this scope they inherit the light
       theme's mocha and vanish into the dark glass.)
       Border + shadow are tokenised so the surrounding
       lift adapts subtly per theme. */
    --color-ink:      var(--color-cream);
    --color-ink-soft: var(--color-cream-soft);
    background-color: color-mix(in srgb, var(--color-glass-ink) 55%, transparent);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid color-mix(in srgb, var(--color-cream) 18%, transparent);
    color: var(--color-ink);
    border-radius: var(--radius-lg);
    padding-block: var(--space-2);
    padding-inline: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    box-shadow: var(--shadow-card);
  }
  .product-card__overlay-text { flex: 1 1 auto; min-inline-size: 0; }

  .product-card__title {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    color: var(--color-ink);
    line-height: var(--lh-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .product-card__family {
    display: block;
    font-size: var(--fs-eyebrow);
    color: var(--color-ink-soft);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
  }

  .product-card__actions { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
  .product-card__cta {
    inline-size: 100%; --pad-block: 0.75rem; --pad-inline: 1.25rem;
    font-size: var(--fs-small);
  }

  /* ---- Product card (horizontal - best-sellers) -- */
  .product-card--horizontal {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-4);
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    transition:
      box-shadow var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out),
      transform var(--dur-fast) var(--ease-out);
  }
  /* V2 (audit §2.4 C8): the prior red border-color flash on hover
     read as a generic web-link "active" state. Replaced with a
     softer lift via shadow + translate while the border holds its
     editorial cream hairline. */
  @media (hover: hover) {
    .product-card--horizontal:hover { 
    box-shadow: var(--shadow-lifted);
    transform: translateY(-2px);
   }
  }
  .product-card--horizontal .product-card__media {
    inline-size: 4rem;
    block-size: 4rem;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    flex: none;
    box-shadow: none;
  }
  .product-card--horizontal .product-card__body {
    flex: 1 1 auto;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  .product-card--horizontal .product-card__title {
    font-size: var(--fs-h4);
    color: var(--color-ink);
    white-space: normal;
  }
  .product-card--horizontal .product-card__family { color: var(--color-ink-muted); }
  .product-card--horizontal .product-card__price-inline {
    font-size: var(--fs-small);
    color: var(--color-ink-soft);
  }
  .product-card--horizontal .product-card__more {
    --size: 2.5rem;
    inline-size: var(--size); block-size: var(--size);
    border-radius: var(--radius-pill);
    background-color: var(--color-cream); color: var(--color-cta-soft-ink);
    display: inline-flex; align-items: center; justify-content: center;
    align-self: center; flex: none;
  }
  @media (hover: hover) {
    .product-card--horizontal .product-card__more:hover {  background-color: var(--color-cream-hover);  }
  }

  /* ---- Testimonial card -------------------------- */
  .testimonial-card {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .testimonial-card__quote-mark {
    color: var(--color-red);
    inline-size: 1.75rem; block-size: 1.75rem;
    stroke-width: 2;
  }
  /* V2 C9: testimonial quote — opted into Fraunces italic at
     weight 400 (intentional italic-thin display per the spec
     exception). The body-sans previous render read as "form-field
     copy"; Fraunces italic reads as the maison voice. */
  .testimonial-card__quote {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    color: var(--color-ink-soft);
    font-size: var(--fs-body-lead);
    line-height: var(--lh-body);
    margin-block: 0;
  }
}