/* products.css — the home page Products section: one card per tool, in the
   site's reveal/stagger style (site.css owns .reveal and --d). Token-driven
   (tokens.css); accent motif per card via [data-accent]. Artwork and its
   keyframes live in products-art.css. All motion is gated by
   prefers-reduced-motion (here and in base.css). */

.products .product-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5);
}
@media (max-width: 920px) { .products .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .products .product-grid { grid-template-columns: minmax(0, 1fr); } }

.product-card {
  position: relative; height: 100%; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-6); border-radius: 18px;
  background: var(--surface-1); border: 1px solid var(--border);
  transition: transform var(--ease-out) .35s, border-color var(--ease-out) .35s, box-shadow var(--ease-out) .35s;
}
.product-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 90% at 100% 0%, var(--accent-wash) 0%, transparent 60%);
  transition: opacity var(--ease-out) .35s;
}
@media (prefers-reduced-motion: no-preference) {
  .product-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 18px 40px -24px var(--accent-glow); }
  .product-card:hover::before { opacity: 1; }
}
.product-card:focus-within { border-color: var(--accent); }

/* accent motifs (default fizz) */
.product-card { --accent: var(--fizz); --accent-wash: var(--fizz-wash, color-mix(in srgb, var(--fizz) 14%, transparent)); --accent-glow: var(--glow-fizz); }
.product-card[data-accent="grape"] { --accent: var(--grape); --accent-wash: color-mix(in srgb, var(--grape) 14%, transparent); --accent-glow: var(--glow-grape); }
.product-card[data-accent="lime"]  { --accent: var(--lime, #7bc62d); --accent-wash: color-mix(in srgb, var(--lime, #7bc62d) 14%, transparent); --accent-glow: color-mix(in srgb, var(--lime, #7bc62d) 34%, transparent); }
.product-card[data-accent="amber"] { --accent: var(--amber, #f0a132); --accent-wash: color-mix(in srgb, var(--amber, #f0a132) 14%, transparent); --accent-glow: color-mix(in srgb, var(--amber, #f0a132) 34%, transparent); }
.product-card[data-accent="sky"]   { --accent: var(--sky, #37a9e0); --accent-wash: color-mix(in srgb, var(--sky, #37a9e0) 14%, transparent); --accent-glow: color-mix(in srgb, var(--sky, #37a9e0) 34%, transparent); }

.product-card__art { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.product-card > :not(.product-card__art) { position: relative; z-index: 1; }

.product-card__icon {
  display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--accent-wash); color: var(--accent); font-size: 18px; margin-bottom: var(--space-2);
}
.product-card__title { font: 700 20px/26px var(--font-display); margin: 0; }
.product-card__tagline { color: var(--ink-muted); margin: 0; font-size: 15px; line-height: 22px; }
.product-card__points { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: 6px; }
.product-card__points li { position: relative; padding-left: 20px; font-size: 14px; line-height: 20px; color: var(--ink); }
.product-card__points li::before {
  content: ""; position: absolute; left: 2px; top: 7px; width: 8px; height: 8px; border-radius: 3px;
  background: var(--accent); opacity: .9;
}

/* ---- polish & responsive ---- */
/* Appended by the products-polish pass. Refines the base grid/cards above
   without rewriting them: fixes the undefined --space-5 gap, tightens the
   responsive breakpoints (no horizontal scroll at 320px; a comfortable 2-up
   at tablet, 3-up at desktop), aligns ragged `points` lists, and adds
   focus-visible outlines. All motion stays gated by prefers-reduced-motion. */

/* The base rule sets `gap: var(--space-5)`, but --space-5 is undefined in
   tokens.css, so the grid gap silently collapses. Restore a spacious,
   token-aligned gutter (matches site.css card grids). */
.products .product-grid {
  gap: var(--space-6);
  align-items: stretch; /* equal-height cards within a row */
}
@media (min-width: 1040px) {
  /* a touch more air at desktop for the aikido-style spaciousness */
  .products .product-grid { gap: var(--space-8); }
}

/* Breakpoints: the base file goes 3-up → 2-up (<=920px) → 1-up (<=600px).
   Keep that, but guarantee the card never forces overflow on a 320px phone
   (the single column already uses minmax(0,1fr); belt-and-braces here). */
.products .product-grid > li { min-width: 0; }
@media (max-width: 600px) {
  .product-card { padding: var(--space-5, 20px); }
}
@media (max-width: 360px) {
  /* tiny phones: trim padding so content keeps its breathing room */
  .product-card { padding: var(--space-4); border-radius: var(--radius-md); }
}

/* Align ragged content: reserve space for the (1–2 line) tagline so each
   card's points list starts on the same baseline across a row, and give the
   card a gentle floor so a lone trailing card doesn't look starved. */
.product-card { min-height: 220px; }
.product-card__tagline { min-height: 44px; } /* ~2 lines at 15/22 */
.product-card__points { margin-top: var(--space-3); }
@media (max-width: 600px) {
  .product-card { min-height: 0; }
  .product-card__tagline { min-height: 0; }
}

/* Keyboard focus: a clear, token-driven focus ring for anything focusable
   inside a card (links/buttons a catalog card may grow), plus a stronger
   focus-within cue than the base border tint alone. */
.product-card :focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.product-card:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
/* the section is programmatically focusable (tabindex=-1); don't flash a ring
   when it receives focus via skip-link/scroll, matching site.css conventions. */
.products:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  /* nothing new to animate here, but keep the focus-within cue static */
  .product-card:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
}