/* ===================================================================
   reviews-widget.css — Phase 2
   =================================================================== */

/* ── Custom Properties ──────────────────────────────────────────── */

.grw-widget {
  --grw-accent: #1a73e8;
  --grw-star: #fbbc04;
  --grw-text: #202124;
  --grw-muted: #5f6368;
  --grw-card-bg: #ffffff;
  --grw-radius: 12px;
  --grw-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

/* ── Layout ─────────────────────────────────────────────────────── */

.grw-widget {
  display: flex;
  flex-direction: row;
  gap: 24px;
  background: #f8f9fa;
  padding: 24px;
  box-sizing: border-box;
}

.grw-panel {
  flex: none;
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.grw-track-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.grw-track-wrap.is-continuous-wrap {
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
}

/* ── Left Panel ─────────────────────────────────────────────────── */

.grw-logo {
  max-width: 160px;
  max-height: 48px;
  height: auto;
  width: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

.grw-score {
  font-size: 44px;
  font-weight: 700;
  color: var(--grw-text);
  margin: 0;
  line-height: 1;
}

.grw-stars {
  display: flex;
  gap: 4px;
  position: relative;
  width: fit-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

.grw-stars .grw-star-bg {
  color: #dadce0;
  font-size: 24px;
  line-height: 1;
}

.grw-stars .grw-star-fg {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--grw-star);
  font-size: 24px;
  line-height: 1;
  overflow: hidden;
}

.grw-count {
  font-size: 13px;
  color: var(--grw-muted);
  margin: 0;
  text-align: center;
}

.grw-google {
  font-size: 11px;
  color: var(--grw-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  text-decoration: none;
}

.grw-powered {
  height: 16px;
  width: auto;
  display: block;
}

.grw-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--grw-accent);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  line-height: 1;
  gap: 8px;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

.grw-cta:hover {
  background: var(--grw-accent-hover, #1557b0);
}

.grw-cta:focus-visible {
  outline: 2px solid var(--grw-accent);
  outline-offset: 2px;
}

/* ── Review Cards ───────────────────────────────────────────────── */

.grw-card {
  background: var(--grw-card-bg);
  border-radius: var(--grw-radius);
  box-shadow: var(--grw-shadow);
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 200px;
  width: 100%;
  height: 100%;
}

.grw-card-head {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
}

.grw-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.grw-name {
  color: var(--grw-accent);
  font-size: 15px;
  font-weight: 500;
  margin: 0;
  line-height: 1.3;
}

.grw-date {
  font-size: 12px;
  color: var(--grw-muted);
  margin: 0;
}

.grw-card-stars {
  display: flex;
  gap: 2px;
  position: relative;
  width: fit-content;
  margin: 8px 0 0 0;
  padding: 0;
  list-style: none;
}

.grw-card-stars .grw-star-bg {
  color: #dadce0;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
}

.grw-card-stars .grw-star-fg {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--grw-star);
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}

.grw-text {
  margin: 12px 0 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--grw-text);
  max-height: 140px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #dadce0 transparent;
  flex: 1 1 auto;
  min-height: 96px;
}

.grw-text::-webkit-scrollbar {
  width: 6px;
}

.grw-text::-webkit-scrollbar-track {
  background: transparent;
}

.grw-text::-webkit-scrollbar-thumb {
  background: #dadce0;
  border-radius: 3px;
}

/* ── Carousel ───────────────────────────────────────────────────── */

.grw-track {
  display: flex;
  flex-direction: row;
  gap: 20px;
  transition: transform 400ms ease;
  will-change: transform;
  align-items: stretch;
}

.grw-slide {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  max-width: none;
}

/* ── Continuous (marquee) mode ────────────────────────────────────── */

@keyframes grw-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.grw-track.is-continuous {
  animation: grw-marquee var(--grw-duration, 40s) linear infinite;
  will-change: transform;
  transition: none;
  width: max-content;
}

.grw-track-wrap:hover .grw-track.is-continuous {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .grw-track.is-continuous { animation: none; }
}

.grw-dots {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0 0;
  padding: 0;
  list-style: none;
}

.grw-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dadce0;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.grw-dot.is-active {
  background: var(--grw-accent);
}

.grw-dot:focus-visible {
  outline: 2px solid var(--grw-accent);
  outline-offset: 2px;
}

/* ── Arrows ─────────────────────────────────────────────────────── */

.grw-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: var(--grw-shadow);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: var(--grw-accent);
  transition: background-color 200ms ease, opacity 200ms ease;
  padding: 0;
}

.grw-arrow--prev {
  left: -18px;
}

.grw-arrow--next {
  right: -18px;
}

.grw-arrow:hover:not(.is-disabled) {
  background: #f1f3f4;
}

.grw-arrow:focus-visible {
  outline: 2px solid var(--grw-accent);
  outline-offset: 2px;
}

.grw-arrow.is-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* Hide arrows on mobile (< 768px) where swipe is the interaction */
@media (max-width: 768px) {
  .grw-arrow {
    display: none;
  }
}

/* ── Grid Layout ────────────────────────────────────────────────── */

.grw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .grw-widget {
    flex-direction: column;
  }

  .grw-panel {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ── Reduced Motion ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .grw-track {
    transition: none;
  }
}

/* ===================================================================
   HCBI SITE INTEGRATION
   Everything above this line is the widget as built. Everything below
   adapts it to this site: the shared container, the site's type and
   colour tokens, a reserved height so the section does not shift the
   quote CTA while reviews load, and two fixes to the widget defaults.

   Note on colour: --grw-accent is set from data-accent (green) by the
   script, and stars are a separate token (--grw-star, gold). Green
   therefore lands on the CTA, the reviewer names, the dots and the
   arrows, and never on the stars.
   =================================================================== */

.reviews {
  padding: var(--space-xl) 0;
}

/* The mount reserves the widget's rendered height at each breakpoint.
   Reviews arrive after first paint, so without this the section grows
   under the reader and pushes the quote CTA down the page. Measured
   from the rendered widget, with headroom for a longer review. */
.reviews__mount {
  display: block;
  min-height: 360px;
}

.reviews__mount .grw-widget {
  /* Tracks the site's accessibility-tuned link green rather than a
     hand-picked hex, so a future contrast pass moves this too. */
  --grw-accent-hover: var(--green-dark, #4E7024);

  font-family: var(--font-body);
  background: var(--light-gray);
  border: 1px solid var(--border-gray);
  border-radius: var(--radius-card);
  color: var(--text-dark);
}

.reviews__mount .grw-score,
.reviews__mount .grw-name {
  font-family: var(--font-heading);
}

.reviews__mount .grw-score {
  color: var(--navy);
}

.reviews__mount .grw-cta {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--white);
}

.reviews__mount .grw-cta:hover {
  color: var(--white);
}

.reviews__mount .grw-card {
  box-shadow: var(--shadow-card);
}

/* Fix: the arrows ship at left/right -18px, which puts them outside
   .grw-track-wrap. That element needs overflow:hidden to clip the
   carousel, so the arrows were clipped away entirely. Pulling them
   inside the track instead lands them on top of the first and last
   card and covers the review text, and a 36px control does not fit in
   the 20px gap between cards. So they move down to the dots row, which
   is empty space either side of the dots and belongs to the carousel
   already. */
.reviews__mount .grw-dots {
  align-items: center;
  min-height: 32px;
  margin-top: 12px;
}

.reviews__mount .grw-arrow {
  top: auto;
  bottom: 0;
  transform: none;
  width: 32px;
  height: 32px;
  font-size: 18px;
}

.reviews__mount .grw-arrow--prev {
  left: calc(50% - 58px);
  right: auto;
}

.reviews__mount .grw-arrow--next {
  left: calc(50% + 26px);
  right: auto;
}

/* Under 768px the widget stacks and its left panel wraps, so the
   rendered height climbs as the viewport narrows. These steps track the
   heights measured on this tree with Montserrat/Inter loaded
   (768:424  560:458  520:467  390:533  360:539  320:606). The reserve
   is never short, which is the thing that would actually shift the
   page; where it is long the cost is a little whitespace under the
   widget, which is the right side to err on. */
@media (max-width: 768px) {
  .reviews__mount {
    min-height: 480px;
  }
}

@media (max-width: 520px) {
  .reviews__mount {
    min-height: 550px;
  }
}

@media (max-width: 380px) {
  .reviews__mount {
    min-height: 610px;
  }
}