/*Returns a CSS clamp function which resolves to $size-at-min-width when page width is
below $min-width,
$size-at-max-width when page width is above $max-width,
and linearly scales between the two between $min-width and $max-width*/
/*
 * "productCard" component (product listing grid, Partials/List/Item.html). Ported from
 * Scss/Content/_products.scss's ".productCard" block.
 *
 * The old ".card__inner" wrapper div (Bootstrap-flexbox construct that gave the card its
 * background/rounded corners/overflow-clip/vertical stacking) was removed from the markup --
 * the parent grid now uses native CSS Grid + gap instead of Bootstrap flex, so the padding trick
 * it existed for is no longer needed. Its remaining visual responsibilities (background,
 * border-radius, overflow-clip, vertical flex layout) are folded directly onto ".productCard"
 * below instead of being dropped.
 *
 * ".productCard" also carries the literal "card" class (see 6-molecules/card.css) for its base
 * position/width/height/margin/color -- card.css must be loaded wherever this component is used
 * (List.html/Accessories.html need their own <f:asset.css> tag for it, same as this file).
 *
 * The title moved from "<h2>" to "<p class="productCard__header">" in the markup, so it no
 * longer inherits card.css's ".card h2, h3" heading style (color/font-family/font-size) --
 * that styling is reproduced explicitly on ".productCard__header" below instead.
 *
 * Two selectors from the original SCSS were dropped as dead code: "img.virtualization_ready" and
 * "img.aready" never matched anything even before this migration -- VirtualizationReadyLogo.html/
 * aReadyLogo.html render inline <svg>, not <img>.
 */
@layer molecules {
  /* Product listing grid wrapper (Family/List.html): distance to the filter bar above. */
  .product-list {
    margin-top: var(--gap-xl);
  }
  .productCard {
    grid-row: span 4;
  }
  @media (prefers-reduced-motion: no-preference) {
    .productCard {
      transition: transform var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease);
    }
    .productCard:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 24px 0 rgba(162, 162, 165, 0.24);
    }
  }
  .productCard__image {
    container-type: inline-size;
    transition: 0.15s;
  }
  .productCard__image > a {
    display: block;
    padding-inline: var(--padding-m);
  }
  @container (max-width: 25rem) {
    .productCard__image img {
      width: auto;
      max-width: 100%;
      height: clamp(6.875rem, 6.875rem + (100cqw - 18.75rem) * 0.5, 10rem);
      object-fit: contain;
    }
  }
  .productCard__image:hover {
    transform: scale(1.05);
  }
  .productCard .card__head {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-bottom: calc(var(--text-gap-h3) - var(--gap-l));
  }
  .productCard__header {
    margin-bottom: 0;
  }
  .productCard__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-s);
    padding-inline: var(--padding-m);
  }
  .productCard .aReadyLogo {
    display: block;
    max-width: 100px;
  }
  .grid-3:has(> .productCard) {
    row-gap: var(--gap-xl);
  }
  @media (min-width: 40rem) and (max-width: 64rem) {
    .grid-3:has(> .productCard) {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .-withBgColor .productCard {
    background: var(--shade-grey-070);
  }
}