/*
 * Homepage "reviews" section (Omri, 2026-09-27) — a SEPARATE stylesheet
 * (not appended to style.css / style-pages.css) because another builder is
 * editing those files concurrently; every selector here is namespaced
 * `.hr-*` / `.home-reviews` so it can never collide with their work. Linked
 * once from layout.tsx, cache-busted via ASSET_VERSIONS like the other two.
 *
 * Mobile-first: `.hr-track` is a horizontal scroll-snap row (the product's
 * own "swipe through what people are saying" moment); ≥900px it becomes a
 * 3-column grid. Brand tokens (--navy, --amber, --gray-*) come from
 * style.css's :root, already loaded on every page this renders on.
 */

.home-reviews { background: var(--gray-50); }
.hr-subtitle { margin: 0.4rem auto 0; max-width: 34rem; color: var(--gray-500); font-size: 0.95rem; }
.hr-aggregate { margin: 0.6rem 0 0; font-weight: 700; color: var(--navy); font-size: 0.95rem; }

/* `width: 100%; min-width: 0; max-width: 100%;` are the belt-and-suspenders
 * half of the fix (2026-09-27, visual QA at 390px): `width: 100%` pins the
 * track to its containing block INSTEAD OF a content-based (shrink-to-fit)
 * size, and `min-width: 0` overrides the flex/grid default of
 * `min-width: auto` (= content size) for whichever ancestor this ever ends
 * up nested inside — the classic "flex child won't shrink below its
 * content" trap. `max-width: 100%` (not just var(--max-w)) caps it to
 * whichever is smaller. None of this changes `overflow-x: auto`, which was
 * already correct — it's insurance against the row's INTRINSIC width ever
 * winning over its CONTAINER's width on a future edit. */
.hr-track {
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  margin: 2.25rem auto 0;
  padding: 0.25rem 1rem 1rem;
  width: 100%;
  min-width: 0;
  max-width: min(100%, var(--max-w));
  box-sizing: border-box;
}

.hr-card {
  flex: 0 0 82%;
  min-width: 0;
  max-width: 320px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-top: 3px solid var(--amber);
  border-radius: 4px 14px 14px 14px;
  box-shadow: 0 1px 3px rgba(30, 41, 59, 0.12);
  padding: 1.1rem 1.15rem 0.95rem;
}

.hr-quote,
.hr-reviewer,
.hr-context {
  overflow-wrap: anywhere;
}

.hr-card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.hr-stars { color: var(--amber); font-size: 0.9rem; letter-spacing: 0.06em; white-space: nowrap; }
.hr-stars-empty { color: var(--gray-300); }
.hr-verified-badge {
  font-size: 0.68rem; font-weight: 700; white-space: nowrap;
  color: #1A7A4C; background: rgba(26, 122, 76, 0.1);
  padding: 0.18rem 0.55rem; border-radius: 999px;
}

.hr-quote { margin: 0.55rem 0 0.7rem; font-size: 1rem; line-height: 1.55; color: var(--navy); flex-grow: 1; }
.hr-quote::before { content: "\201C"; }
.hr-quote::after { content: "\201D"; }

.hr-meta { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.82rem; }
.hr-reviewer { font-family: 'Outfit', sans-serif; font-weight: 700; color: var(--amber-dark); }
.hr-context { color: var(--gray-500); }
.hr-provider { color: var(--navy); font-weight: 600; text-decoration: none; }
.hr-provider:hover, .hr-provider:focus-visible { text-decoration: underline; }
.hr-date { color: var(--gray-400); }

@media (min-width: 900px) {
  .hr-track {
    display: grid;
    /* minmax(0, 1fr), NOT bare 1fr — a bare `1fr` track is `minmax(auto, 1fr)`,
     * so a column can still grow past its fair share to fit a long word.
     * Same fix as the flex row's `min-width: 0`, grid's version of it. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow-x: visible;
  }
  .hr-card { flex: none; max-width: none; }
}