/* ==========================================================================
   product.css — WECORE /product overview (hub) page
   --------------------------------------------------------------------------
   The /product page reuses the global hd-* / overview_* / cs-* design-system
   classes (all loaded site-wide in head.html). This file adds only what's
   net-new to the hub: the 5-up product card grid and a couple of tweaks to
   the reused compare-table when it acts as the product selector.
   Tokens come from hd-tokens.css; nothing here is page-specific colour.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Product card grid — the centrepiece. Built on the cs-family-card look
   (accent top-border, hover lift) but laid out 3-up and wrapping the odd
   5th card onto a new row on its own.
   -------------------------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hd-space-lg);
}
.product-card {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.5rem;
  border-radius: var(--hd-radius);
  background: var(--hd-color-white);
  border: var(--hd-button-border) solid var(--hd-color-neutral-300);
  border-block-start: 3px solid var(--hd-color-accent);
  transition: box-shadow var(--hd-transition), border-color var(--hd-transition),
    transform var(--hd-transition);
}
.product-card:hover {
  box-shadow: var(--hd-shadow-md);
  transform: translateY(-2px);
}
.product-card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.product-card-icon {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  object-fit: contain;
}
.product-card-tag {
  margin-inline-start: auto;
  font-family: var(--hd-font-badge);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hd-color-accent);
  background: color-mix(in srgb, var(--hd-color-accent) 8%, transparent);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  white-space: nowrap;
}
.product-card h3,
.product-card p {
  margin: 0;
}

/* "What you get" bullet list */
.product-card-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.product-card-point {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}
.product-card-check {
  width: 0.9rem;
  height: 0.9rem;
  flex: none;
  margin-block-start: 0.2rem;
}

/* Foot — pinned to the bottom so cards of unequal copy align */
.product-card-foot {
  margin-block-start: auto;
  padding-block-start: 1.25rem;
}
.product-card-link {
  white-space: nowrap;
  text-decoration: none;
  font-size: var(--hd-text-sm);
  font-weight: var(--hd-weight-medium);
  color: var(--hd-color-accent);
  transition: color var(--hd-transition);
}
.product-card-link:hover {
  color: var(--hd-color-accent-hover);
}

/* --------------------------------------------------------------------------
   Product selector — reuses .cs-compare-table; here the trailing column is a
   bare "→" link into each product page, kept tight and end-aligned.
   -------------------------------------------------------------------------- */
.product-selector-cta {
  width: 1%;
  white-space: nowrap;
  text-align: end;
}
.product-selector-cta .product-card-link {
  font-size: var(--hd-text-lg);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media screen and (max-width: 991px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 767px) {
  .product-grid {
    grid-template-columns: 1fr;
    max-width: 32rem;
    margin-inline: auto;
  }
  /* The selector's trailing arrow cell is redundant once the table collapses
     to stacked cards (the product name is already a heading). Hide it; the
     whole card still links via the product name's own page context. */
  .product-selector-scroll .product-selector-cta {
    display: none;
  }
}