/* ==========================================================================
   google-reviews-module — namespaced styles (.grv*). Installed at
   Assets/Modules/GoogleReviews/google-reviews.css. bluedigital.com changes (2026-10-13): weights
   400 (Questrial has no bold); .grv__link inline-block so "on Google" keeps its space.

   TOKENS: map every --grv-* property to the SITE's tokens in the site's own token block
   (Phase 2 names the mapping). Never edit colours here, and never ship the neutral fallbacks
   below. Example for a Blue Digital site (standard section S1):

     :root {
       --grv-surface:      #fff;                    --grv-surface-alt: var(--surface-soft);
       --grv-ink:          var(--ink);              --grv-ink-soft:    var(--ink-soft);
       --grv-accent:       var(--brand-1);          --grv-accent-ink:  #fff;
       --grv-accent-hover: var(--brand-2);          --grv-border:      var(--line);
       --grv-radius:       var(--bd-r-card);        --grv-shadow:      0 5px 30px rgba(0,0,0,.08);
       --grv-font:         var(--font-body);        --grv-font-head:   var(--font-head);
       --grv-star-on:      #F5B301;                 --grv-star-off:    var(--line);
       --grv-focus:        var(--brand-1);
     }

   The only fixed visual is the attribution text "Reviews from Google"; it keeps Google's
   requirements (sans-serif, normal weight, never translated, never wrapped) whatever the tokens.
   ========================================================================== */

.grv {
  --_surface: var(--grv-surface, #fff);
  --_surface-alt: var(--grv-surface-alt, #f4f4f4);
  --_ink: var(--grv-ink, #1f1f1f);
  --_ink-soft: var(--grv-ink-soft, #5e5e5e);
  --_accent: var(--grv-accent, #1f1f1f);
  --_accent-ink: var(--grv-accent-ink, #fff);
  --_accent-hover: var(--grv-accent-hover, #444);
  --_border: var(--grv-border, #dcdcdc);
  --_radius: var(--grv-radius, 12px);
  --_shadow: var(--grv-shadow, 0 4px 20px rgba(0, 0, 0, .08));
  --_font: var(--grv-font, inherit);
  --_font-head: var(--grv-font-head, inherit);
  --_star-on: var(--grv-star-on, #e8a400);
  --_star-off: var(--grv-star-off, #d0d0d0);
  --_focus: var(--grv-focus, currentColor);
  --_lines: 5;
  font-family: var(--_font);
  color: var(--_ink);
  overflow-x: clip;                       /* the page never scrolls sideways */
}
.grv[data-grv-lines="2"] { --_lines: 2; } .grv[data-grv-lines="3"] { --_lines: 3; }
.grv[data-grv-lines="4"] { --_lines: 4; } .grv[data-grv-lines="6"] { --_lines: 6; }
.grv[data-grv-lines="7"] { --_lines: 7; } .grv[data-grv-lines="8"] { --_lines: 8; }
.grv[data-grv-lines="9"] { --_lines: 9; } .grv[data-grv-lines="10"] { --_lines: 10; }
.grv[data-grv-lines="11"] { --_lines: 11; } .grv[data-grv-lines="12"] { --_lines: 12; }

/* The whole block is visibly set apart from the site's own content (Google: distinguish its content). */
.grv__panel {
  background: var(--_surface-alt);
  border: 1px solid var(--_border);
  border-radius: var(--_radius);
  padding: clamp(16px, 3vw, 28px);
}

.grv-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- summary ---------------------------------------------------------- */
.grv__summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 20px; }
.grv__score { display: flex; align-items: center; gap: 10px; margin: 0; }
.grv__score-num { font: 400 clamp(32px, 5vw, 44px)/1 var(--_font-head); }
.grv__count { margin: 0; color: var(--_ink-soft); }

/* ---- stars (drawn by CSS from a class; no inline style under CSP) ---- */
.grv-stars { position: relative; display: inline-block; font-size: 1.05em; line-height: 1; letter-spacing: 2px; white-space: nowrap; --_fill: 0%; }
.grv-stars::before { content: "\2605\2605\2605\2605\2605"; color: var(--_star-off); }
.grv-stars::after  { content: "\2605\2605\2605\2605\2605"; color: var(--_star-on); position: absolute; inset: 0 auto 0 0; width: var(--_fill); overflow: hidden; }
.grv-stars--0 { --_fill: 0%; }   .grv-stars--5 { --_fill: 10%; }  .grv-stars--10 { --_fill: 20%; }
.grv-stars--15 { --_fill: 30%; } .grv-stars--20 { --_fill: 40%; } .grv-stars--25 { --_fill: 50%; }
.grv-stars--30 { --_fill: 60%; } .grv-stars--35 { --_fill: 70%; } .grv-stars--40 { --_fill: 80%; }
.grv-stars--45 { --_fill: 90%; } .grv-stars--50 { --_fill: 100%; }
@media (forced-colors: active) { .grv-stars::before { color: GrayText; } .grv-stars::after { color: CanvasText; } }

/* ---- track (shared) --------------------------------------------------- */
.grv__track { list-style: none; margin: 0; padding: 0; }
.grv__track:focus-visible { outline: 3px solid var(--_focus); outline-offset: 4px; border-radius: var(--_radius); }
.grv__item { min-width: 0; }

/* ---- card ------------------------------------------------------------- */
.grv-card {
  position: relative; height: 100%; box-sizing: border-box;
  background: var(--_surface); border-radius: var(--_radius); box-shadow: var(--_shadow);
  padding: 22px; display: flex; flex-direction: column; gap: 8px;
}
.grv-card__author { display: flex; align-items: center; gap: 12px; }
.grv-card__avatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--_accent); color: var(--_accent-ink); }
.grv-card__photo { width: 40px; height: 40px; object-fit: cover; display: block; }
.grv-card__initials { font: 400 15px/1 var(--_font); }
.grv-card__initials[hidden], .grv-card__photo[hidden] { display: none; }
.grv-card__name { margin: 0; font-weight: 400; overflow-wrap: anywhere; }
.grv-card__rating, .grv-card__date { margin: 0; }
.grv-card__rating--none, .grv-card__date { color: var(--_ink-soft); font-size: .9em; }
.grv-card__text { overflow-wrap: anywhere; }
.grv-card__text p { margin: 0 0 .6em; }
.grv-card__text p:last-child { margin-bottom: 0; }
.grv-card__text--empty { margin: 0; color: var(--_ink-soft); font-style: italic; }
/* Clamp only once JS has run (no-JS visitors see the full text). The full text stays in the DOM. */
.grv--js .grv-card__text.is-clamped {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--_lines); line-clamp: var(--_lines); overflow: hidden;
}
.grv-card__more {
  align-self: flex-start; margin-top: auto; min-height: 44px; padding: 8px 2px; border: 0; background: none;
  font: inherit; font-weight: 400; color: var(--_ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.grv-card__more:focus-visible, .grv__link:focus-visible, .grv__policy:focus-visible, .grv__btn:focus-visible {
  outline: 3px solid var(--_focus); outline-offset: 3px;
}

/* ---- layout: scroller (side buttons always visible, no scrollbar — BD S4) ---- */
.grv__scroller { position: relative; padding: 0 60px; }
.grv--scroller .grv__track {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 6px 2px 24px; scrollbar-width: none; overscroll-behavior-x: contain;
}
.grv--scroller .grv__track::-webkit-scrollbar { display: none; }
.grv--scroller .grv__item { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; }
.grv__btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: var(--_accent); color: var(--_accent-ink); cursor: pointer; transition: background-color .2s ease, opacity .2s ease;
}
.grv__btn:hover { background: var(--_accent-hover); }
.grv__btn--prev { left: 0; } .grv__btn--next { right: 0; }
.grv__btn[aria-disabled="true"] { opacity: .35; cursor: default; }
@media (max-width: 980px) { .grv--scroller .grv__item { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 767px) {
  .grv__scroller { padding: 0 8px; }
  .grv--scroller .grv__item { flex-basis: 85%; }
  .grv__btn { width: 44px; height: 44px; }
  .grv__btn--prev { left: -6px; } .grv__btn--next { right: -6px; }
}

/* ---- layout: grid ------------------------------------------------------- */
.grv--grid .grv__track { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }

/* ---- layout: layered (design-pattern-library §9 card corner-badge overlap on a split band) ---- */
.grv--layered .grv__panel { background: linear-gradient(180deg, var(--_surface-alt) 0 55%, var(--_surface) 55% 100%); }
.grv--layered .grv__track { display: grid; gap: 40px 28px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); padding-top: 18px; }
.grv--layered .grv-card { padding-top: 30px; border: 1px solid var(--_border); }
.grv--layered .grv-card::before {           /* quote-mark badge overlapping the top-right corner */
  content: "\201C"; position: absolute; top: -18px; right: -12px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--_accent); color: var(--_accent-ink);
  font: 400 30px/1 var(--_font-head); box-shadow: var(--_shadow);
}
.grv--layered .grv-card__avatar { margin-top: -50px; flex-basis: 48px; width: 48px; height: 48px; border: 3px solid var(--_surface); }
.grv--layered .grv-card__photo { width: 48px; height: 48px; }
@media (max-width: 767px) { .grv--layered .grv-card::before { right: 8px; } }

/* ---- layout: marquee (full-width band that scrolls by itself; bluedigital.com home, 2026-10-15) ----
   No panel box: the cards run edge to edge and fade out at both sides. Two copies of the list loop
   seamlessly (-50%); hover, keyboard focus or the pause button stop it. Cards keep one width and one
   height (2026-10-15): every card stretches to the tallest in the band, so tops and bottoms line up
   at every breakpoint. Both copies of the list share the track's height, so the loop never jumps. */
.grv--marquee .grv__panel { background: none; border: 0; border-radius: 0; padding: 0; }
.grv--marquee .grv__summary, .grv--marquee .grv__links { justify-content: center; }
.grv__marquee {
  position: relative; overflow: hidden; padding-block: 8px 28px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.grv__marquee-track { display: flex; width: max-content; will-change: transform; animation: grv-marquee var(--grv-marquee-duration, 48.5s) linear infinite; }   /* speed in px/s (data-grv-speed): the JS sets the duration from the loop width; 48.5s without JS */
.grv--marquee .grv__track { display: flex; align-items: stretch; gap: 24px; padding: 0 24px 0 0; }
.grv--marquee .grv__item { flex: 0 0 clamp(270px, 24vw, 360px); display: flex; }
.grv--marquee .grv-card { flex: 1 1 auto; height: auto; }
.grv--marquee .grv-card__more { margin-top: auto; }   /* "Show full review" sits on the card's bottom edge (2026-10-16) */
.grv__marquee:hover .grv__marquee-track,
.grv__marquee:focus-within .grv__marquee-track,
.grv__marquee.is-paused .grv__marquee-track { animation-play-state: paused; }
@keyframes grv-marquee { to { transform: translate3d(-50%, 0, 0); } }
.grv__pause {
  display: none; position: absolute; left: 50%; bottom: 0; z-index: 2; translate: -50% 0;   /* centred: the corners hold the site's floating buttons */
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--_border);
  background: var(--_surface); color: var(--_ink); place-items: center; cursor: pointer;
}
.grv--js .grv__pause { display: grid; }               /* the button needs JS; without it hover and focus still pause */
.grv__pause:hover { border-color: var(--_accent-hover); color: var(--_accent-hover); }
.grv__pause:focus-visible { outline: 3px solid var(--_focus); outline-offset: 3px; }
.grv__pause .grv__i-play, .grv__pause[aria-pressed="true"] .grv__i-pause { display: none; }
.grv__pause[aria-pressed="true"] .grv__i-play { display: block; }
.grv--marquee .grv__marquee { padding-bottom: 56px; }   /* room for the pause button under the cards */

/* ---- notice, links, attribution --------------------------------------- */
.grv__notice { margin: 18px 0 0; font-size: .9em; color: var(--_ink-soft); }
.grv__policy { color: inherit; text-underline-offset: 3px; }
.grv__fallback { margin: 0 0 12px; }
.grv__links { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 0; }
.grv__link {
  /* inline-block, not inline-flex: a flex item would drop the space before <span translate="no">Google</span> */
  display: inline-block; line-height: 20px; padding: 10px 18px; border-radius: 999px;   /* 20 + 2×10 + 2×2 border = 44px */
  border: 2px solid var(--_accent); color: var(--_ink); text-decoration: none; font-weight: 400;   /* Questrial has no bold */
  transition: background-color .2s ease, color .2s ease;
}
.grv__link--all { background: var(--_accent); color: var(--_accent-ink); }
.grv__link:hover { background: var(--_accent-hover); border-color: var(--_accent-hover); color: var(--_accent-ink); }
.grv__attribution {                         /* fixed: Google's text-attribution style */
  margin: 14px 0 0; font: 400 12px/1.4 Roboto, Arial, sans-serif; letter-spacing: normal;
  white-space: nowrap; color: var(--grv-attribution-color, #5e5e5e);   /* only #5e5e5e, #1f1f1f or #fff, at 4.5:1 on the panel */
}

/* ---- reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .grv--scroller .grv__track { scroll-behavior: auto; }
  .grv__btn, .grv__link { transition: none; }
  /* The band stands still: one copy, scrolled sideways by the visitor; no pause button, no fade mask. */
  .grv__marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; padding-bottom: 16px; }
  .grv__marquee-track { animation: none; }
  .grv__marquee-track > .grv__track[aria-hidden="true"], .grv--js .grv__pause { display: none; }
}