/* Google review rail (base/components/review-rail). Override the custom
   properties on .rv to fit a site's palette; everything else is scoped. */
.rv {
  --rv-card: #f4f4f4;
  --rv-ink: #1f1f1f;
  --rv-muted: #6b6b6b;
  --rv-star: #fbbc04;
  --rv-star-off: #dadce0;
  --rv-nav-bg: #ffffff;
  --rv-nav-ink: #3c4043;
  --rv-gap: 20px;
  padding-block: clamp(48px, 8vw, 96px);
  color: var(--rv-ink);
}
.rv-h {
  text-align: center;
  font-size: clamp(28px, 4.2vw, 52px);
  line-height: 1.1;
  margin: 0 auto clamp(28px, 4vw, 56px);
  max-width: 22ch;
  padding-inline: 16px;
}
.rv-in {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  max-width: 1200px;
  margin-inline: auto;
  /* Wide enough that the arrows, which straddle the rail edge by 22px, never
     push the page sideways: 4vw is 31px at 768px. */
  padding-inline: clamp(16px, 4vw, 40px);
}

/* Summary column */
.rv-sum { display: grid; justify-items: center; gap: 6px; text-align: center; }
.rv-label { margin: 0; font-weight: 800; font-size: 22px; letter-spacing: .02em; text-transform: uppercase; }
.rv-stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.rv-star { width: 18px; height: 18px; fill: var(--rv-star); }
.rv-star--empty, .rv-star .rv-star-bg { fill: var(--rv-star-off); }
.rv-stars--lg .rv-star { width: 30px; height: 30px; }
.rv-google { margin: 2px 0 0; }
.rv-wordmark { font: 500 34px/1 "Product Sans", "Google Sans", Arial, sans-serif; letter-spacing: -.02em; }
.rv-wb { color: #4285f4; } .rv-wr { color: #ea4335; } .rv-wy { color: #fbbc05; } .rv-wg { color: #34a853; }
.rv-count { margin: 4px 0 0; font-size: 14px; color: var(--rv-muted); }
.rv-count strong { color: var(--rv-ink); }
.rv-all { font-size: 14px; color: var(--rv-muted); text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }

/* Rail */
.rv-rail-wrap { position: relative; min-width: 0; }
.rv-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--rv-gap)) / 3);
  gap: var(--rv-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  align-items: stretch; /* equal cards, as in the owner's reference */
  padding: 4px 2px 8px;
}
.rv-rail::-webkit-scrollbar { display: none; }
.rv-rail--static { overflow-x: visible; grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-auto-columns: auto; }
.rv-rail:focus-visible { outline: 2px solid var(--rv-nav-ink); outline-offset: 4px; }
/* No scroll-behavior: smooth here: it animated the snap on page load, which Chrome counts as a scroll and then
   never reports the page's LCP (Ableddin, 2026-10-15). review-rail.js glides on an arrow press instead. */

.rv-card {
  /* Positioned so the visually hidden labels inside stay in the scrolled rail:
     unpositioned, they escaped it and widened the page by 521px (demo, 1366). */
  position: relative;
  scroll-snap-align: start;
  background: var(--rv-card);
  border-radius: 12px;
  padding: 20px;
  display: grid;
  grid-template-rows: auto auto 1fr auto; /* head, stars, text, Read more at the foot */
  gap: 10px;
  align-content: start;
}
.rv-rail--static .rv-card { grid-template-rows: auto auto 1fr; }
/* A translated review: the translation sits right under the original, the spare height goes below it. */
.rv-card:has(.rv-tr) { grid-template-rows: auto auto auto 1fr auto; }
.rv-rail--static .rv-card:has(.rv-tr) { grid-template-rows: auto auto auto 1fr; }
.rv-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.rv-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.rv-av--i { display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 18px; }
.rv-av--c1 { background: #5c6bc0; } .rv-av--c2 { background: #7e57c2; } .rv-av--c3 { background: #00897b; }
.rv-av--c4 { background: #ef6c00; } .rv-av--c5 { background: #c2185b; } .rv-av--c6 { background: #546e7a; }
.rv-who { min-width: 0; }
.rv-name { margin: 0; font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.rv-date { margin: 2px 0 0; font-size: 13px; color: var(--rv-muted); }
.rv-src { display: grid; place-items: center; width: 44px; height: 44px; margin: -10px -10px -10px 0; border-radius: 50%; }
.rv-src:focus-visible { outline: 2px solid var(--rv-nav-ink); }
.rv-g { width: 22px; height: 22px; }
.rv-text { margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.rv-tr { margin: 0; font-size: 14px; line-height: 1.5; color: var(--rv-muted); overflow-wrap: anywhere; }
.rv-js .rv-card:not(.is-open) .rv-rest { display: none; }
.rv-more {
  justify-self: start;
  background: none; border: 0; padding: 0; min-height: 44px;
  font: inherit; font-size: 14px; color: var(--rv-muted); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.rv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rv-sum, .rv-src { position: relative; }

/* Previous / next */
.rv-nav {
  position: absolute; top: 50%; z-index: 1;
  width: 44px; height: 44px; margin-top: -22px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--rv-nav-bg); color: var(--rv-nav-ink);
  box-shadow: 0 2px 8px rgb(0 0 0 / .18);
  cursor: pointer;
}
.rv-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rv-nav--prev { left: -22px; }
.rv-nav--next { right: -22px; }
.rv-nav[disabled] { opacity: .35; cursor: default; }
.rv-nav:focus-visible { outline: 2px solid var(--rv-nav-ink); outline-offset: 2px; }

@media (max-width: 1023px) {
  .rv-rail { grid-auto-columns: calc((100% - var(--rv-gap)) / 2); }
}
@media (max-width: 759px) {
  .rv-in { grid-template-columns: minmax(0, 1fr); }
  .rv-rail { grid-auto-columns: 84%; }
  /* On a phone the arrows sit under the rail, side by side, instead of over
     the review text; the next card's edge shows it scrolls. */
  .rv-rail-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .rv-rail { flex: 1 0 100%; order: 0; }
  .rv-nav { position: static; margin-top: 0; order: 1; }
}