/* ================================
   Google Reviews — Stylesheet
   ================================ */

/* ---- Base tokens (default light grays) ---- */
:root{
  --gr-bg:   #f3f4f6;  /* section background */
  --gr-card: #f9fafb;  /* card background    */
  --gr-bdr:  #e5e7eb;
  --gr-text: #374151;  /* primary text       */
  --gr-muted:#6b7280;  /* secondary text     */
  --gr-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* ---- Optional themes (swap class on <section>) ---- */
.gr-theme-slate{
  --gr-bg:#eef2f7; --gr-card:#f7f9fc; --gr-bdr:#e1e7ef;
  --gr-text:#243447; --gr-muted:#51606f; --gr-shadow:0 1px 2px rgba(0,0,0,.06);
}
.gr-theme-stone{
  --gr-bg:#f5f3f0; --gr-card:#fbfaf8; --gr-bdr:#e7e3dd;
  --gr-text:#3a312a; --gr-muted:#6a5e55; --gr-shadow:0 1px 2px rgba(0,0,0,.06);
}
/* Dark-ish */
.gr-theme-ink{
  --gr-bg:#0f172a; --gr-card:#111827; --gr-bdr:#1f2937;
  --gr-text:#e5e7eb; --gr-muted:#9ca3af; --gr-shadow:0 1px 2px rgba(0,0,0,.3);
}
/* Soft green */
.gr-theme-olive{
  --gr-bg:#eef3ec; --gr-card:#f7faf5; --gr-bdr:#dfe6da;
  --gr-text:#2f3a2c; --gr-muted:#5d6b55; --gr-shadow:0 1px 2px rgba(0,0,0,.06);
}
/* Warm neutral */
.gr-theme-sand{
  --gr-bg:#f6f3ee; --gr-card:#fbfaf8; --gr-bdr:#e8e1d7;
  --gr-text:#3a312a; --gr-muted:#6a5e55; --gr-shadow:0 1px 2px rgba(0,0,0,.06);
}

/* ---- Layout wrappers ---- */
.gr-section{
  background:var(--gr-bg);
  padding:.75rem 0;
  overflow:hidden;
  margin-top: 30%;
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  clip:rect(0,0,0,0); border:0; overflow:hidden;
}

/* problem  */
/* .gr-bleed{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
} */

/* AFTER (safe full-bleed; no 100vw width) */
.gr-bleed{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: auto;                /* let it grow naturally */
  overflow-x: clip;           /* modern 'hidden' that won't create scrollbars */
}

/* keep any inner padding on children, not on .gr-bleed itself */
.gr-bleed .gr-track{ padding-inline: clamp(8px, 2vw, 16px); }

/* Edge padding so first/last card aren’t glued to the sides */
.gr-bleed .gr-track{
  padding-inline:clamp(8px, 2vw, 16px);
}

/* ---- Ticker row ---- */
.gr-ticker{ position:relative; overflow:hidden; }
.gr-track{
  display:flex;
  gap:.75rem;
  will-change:transform;
  align-items:flex-end; /* bottom align for staggered heights */
}

/* ---- Card ---- */
.gr-card{
  flex:0 0 auto;
  min-width:280px; max-width:480px;
  background:var(--gr-card);
  border:1px solid var(--gr-bdr);
  border-radius:14px;
  padding:14px 16px;
  box-shadow:var(--gr-shadow);
}
.gr-text{
  color:var(--gr-text);
  line-height:1.45;
  margin:0 0 .5rem 0;
}
.gr-name{
  color:var(--gr-muted);
  font-weight:600;
}

.gr-empty{ color:var(--gr-muted); padding:.5rem 0; }

/* Hover lift */
.gr-ticker:hover .gr-card{ box-shadow:0 2px 6px rgba(0,0,0,.05); }

/* ---- Compact size (use .gr-compact on <section>) ---- */
.gr-compact .gr-card{ min-width:220px; max-width:400px; padding:10px 12px; }
.gr-compact .gr-text{ font-size:.95rem; line-height:1.4; }
.gr-compact .gr-name{ font-size:.85rem; }

/* ---- Optional: staggered heights (JS adds .gr-h-s/m/l) ---- */
.gr-card{ min-height:var(--gr-minh, auto); }
.gr-h-s { --gr-minh: clamp(120px, 18vh, 160px); }
.gr-h-m { --gr-minh: clamp(150px, 22vh, 200px); }
.gr-h-l { --gr-minh: clamp(180px, 26vh, 240px); }

/* ---- Clamp preview lines (set data-clamp="2|3|4" on .gr-ticker) ---- */
.gr-ticker[data-clamp] .gr-text{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.gr-ticker[data-clamp="2"] .gr-text{ line-clamp:2; -webkit-line-clamp:2; }
.gr-ticker[data-clamp="3"] .gr-text{ line-clamp:3; -webkit-line-clamp:3; }
.gr-ticker[data-clamp="4"] .gr-text{ line-clamp:4; -webkit-line-clamp:4; }

/* ---- Hover popover (enabled via data-popover="1") ---- */
.gr-pop{
  position:fixed; z-index:9999;
  max-width:min(92vw, 580px);
  background:var(--gr-card); color:var(--gr-text);
  border:1px solid var(--gr-bdr); border-radius:12px;
  padding:12px 14px; box-shadow:0 8px 24px rgba(0,0,0,.12);
  pointer-events:none; opacity:0; transform:translateY(4px);
  transition:opacity .12s ease, transform .12s ease;
}
.gr-pop[data-show="1"]{ opacity:1; transform:translateY(0); }
.gr-pop .gr-pop-name{
  display:block; margin-top:.5rem; color:var(--gr-muted);
  font-weight:600; font-size:.9rem;
}

/* ---- Mobile niceties ---- */
@media (max-width:480px){
  .gr-card{ min-width:260px; }
  .gr-h-s { --gr-minh: clamp(120px, 22vh, 150px); }
  .gr-h-m { --gr-minh: clamp(130px, 24vh, 170px); }
  .gr-h-l { --gr-minh: clamp(150px, 26vh, 190px); }
}