/* ============ Wadicos · Components · Product card hover ============ *
 * Hover refinements layered on top of /assets/assets/css/components/product.css.
 * Kept in a separate file so the base product card module stays under
 * the 300-line cap (it sits at ~283 lines without these additions).
 *
 * All effects gated by `@media (hover: hover)`. Touch devices keep the
 * resting card. Existing rules in components/product.css already define
 * the base `.product-card__image` scale on hover; this file adds two
 * complementary gestures:
 *   • Gradient overlay fade on hover  — warm peach wash, 8% opacity peak
 *   • CTA pill underline animation    — scaleX(0 → 1) inset-start
 *
 * Reduced motion is honored via the global override in base.css.
 * =================================================================== */

@layer components {
  @media (hover: hover) {
    /* Gradient overlay — lives inside .product-card__media as a
       ::after pseudo-element. Fades in on hover, fades out on leave. */
    .product-card__media::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(
        to top,
        color-mix(in srgb, var(--color-accent-peach) 12%, transparent) 0%,
        transparent 55%
      );
      opacity: 0;
      transition: opacity var(--dur-base) var(--ease-out);
      z-index: 1;
    }
    @media (hover: hover) {
      .product-card:hover .product-card__media::after {  opacity: 1;  }
    }

    /* CTA pill underline — animates from the inline-start edge on hover.
       Sits inside the .btn--cream pill on .product-card__cta. The
       pseudo-element is absolutely positioned at the bottom of the pill
       inside its rounded shape (transform-origin: 0 — inset-start). */
    .product-card__cta {
      position: relative;
      overflow: hidden;
    }
    .product-card__cta::after {
      content: "";
      position: absolute;
      inset-block-end: 0;
      inset-inline-start: var(--space-5);
      inset-inline-end: var(--space-5);
      block-size: 1px;
      background-color: currentColor;
      transform: scaleX(0);
      transform-origin: 0% 50%;
      transition: transform var(--dur-fast) var(--ease-out);
    }
    @media (hover: hover) {
      .product-card:hover .product-card__cta::after {  transform: scaleX(1);  }
    }
  }
}