/* =============================================================================
 * Self-hosted Google Reviews widget — styles.
 * -----------------------------------------------------------------------------
 * DESIGN-AGNOSTIC: every colour, font, radius and size is a --gr-* custom
 * property with a neutral default. To match the host site, override any of them
 * on .gr-widget (or :root). You normally do NOT need to touch the rules below.
 *
 * Quick theming example (put this in the host site's own CSS):
 *   .gr-widget{
 *     --gr-font: "Inter", sans-serif;
 *     --gr-card-bg: #faf7f1;
 *     --gr-heading: #2c3e50;
 *     --gr-text: #54616f;
 *     --gr-accent: #9c7a2e;          // CTA + arrow hover
 *     --gr-star: #b8893e;
 *     --gr-radius: 18px;
 *   }
 * ========================================================================== */

.gr-widget{
  /* ---- THEME TOKENS (override these) ---- */
  --gr-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --gr-card-bg: #ffffff;          /* review card background */
  --gr-heading: #1f2937;          /* names, score, "Reviews" word */
  --gr-text: #4b5563;             /* review body text */
  --gr-muted: #6b7280;            /* dates, count */
  --gr-star: #fbbc04;             /* star colour (Google gold) */
  --gr-accent: #1a73e8;           /* "Write a review" button + arrow hover */
  --gr-accent-hover: #1765cc;
  --gr-on-accent: #ffffff;        /* text/icon colour on the accent */
  --gr-border: rgba(0,0,0,.12);   /* card + arrow borders */
  --gr-name-hover: var(--gr-accent);
  --gr-radius: 16px;

  /* ---- LAYOUT TOKENS ---- */
  --gr-gap: 16px;                 /* gap between cards */
  --gr-per-view: 3;               /* cards visible at once (desktop) */
  /* Height reserved BEFORE the JS renders, so the async insertion never shifts
     the page (prevents a large, timing-dependent CLS). Tune to your card height
     after first render — see docs/05-design-customization.md. */
  --gr-reserve: 480px;
  --gr-reserve-mobile: 540px;

  font-family: var(--gr-font);
  margin: clamp(28px, 3vw, 40px) auto 0;
  min-height: var(--gr-reserve);
  -webkit-font-smoothing: antialiased;
}

/* ---------- header: "Google Reviews 5.0 ★★★★★ (n)" + CTA ---------- */
.gr__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-bottom:26px}
.gr__head-l{display:flex;flex-direction:column;gap:7px}
.gr__brand{display:flex;align-items:baseline;gap:7px;letter-spacing:-.5px}
.gr__wm{font-size:1.55rem;font-weight:500}
.gr__wm b{font-weight:500}
.gr__rev{font-size:1.55rem;font-weight:500;color:var(--gr-heading)}
.gr__score-row{display:flex;align-items:center;gap:9px}
.gr__score{font-size:1.35rem;font-weight:600;color:var(--gr-heading);line-height:1}
.gr__stars{color:var(--gr-star);font-size:1.1rem;letter-spacing:2px;line-height:1}
.gr__total{font-size:.95rem;color:var(--gr-muted)}
.gr__cta{display:inline-flex;align-items:center;gap:8px;background:var(--gr-accent);color:var(--gr-on-accent);
  text-decoration:none;border-radius:999px;padding:11px 22px;font-size:.92rem;font-weight:600;
  transition:background-color .3s,transform .3s}
.gr__cta:hover{background:var(--gr-accent-hover);transform:translateY(-2px);color:var(--gr-on-accent)}

/* ---------- carousel viewport + track ---------- */
.gr__viewport{overflow:hidden}
.gr__track{display:flex;gap:var(--gr-gap);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:6px;scrollbar-width:none;-ms-overflow-style:none}
.gr__track::-webkit-scrollbar{display:none}

/* ---------- review card ---------- */
.gr-card{
  flex:0 0 calc((100% - (var(--gr-per-view) - 1) * var(--gr-gap)) / var(--gr-per-view));
  scroll-snap-align:start;background:var(--gr-card-bg);border:1px solid var(--gr-border);
  border-radius:var(--gr-radius);padding:20px 20px 18px;display:flex;flex-direction:column}
.gr-card__head{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.gr-card__avatar{width:42px;height:42px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;color:#fff;font-weight:600;font-size:1rem;position:relative;overflow:hidden}
.gr-card__avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.gr-card__who{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.gr-card__name{font-weight:600;color:var(--gr-heading);font-size:.96rem;line-height:1.2;text-decoration:none}
.gr-card__name:hover{color:var(--gr-name-hover);text-decoration:underline}
.gr-card__date{font-size:.8rem;color:var(--gr-muted)}
.gr-card__g{width:18px;height:18px;flex:none}
.gr-card__stars{color:var(--gr-star);font-size:1rem;letter-spacing:1.5px;margin-bottom:9px;line-height:1}
.gr-card__text{color:var(--gr-text);font-size:.92rem;line-height:1.6;margin:0;
  display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.gr-card.is-open .gr-card__text{-webkit-line-clamp:unset;overflow:visible}
.gr-card__more{align-self:flex-start;margin-top:9px;font-size:.82rem;font-weight:600;color:var(--gr-accent);
  background:none;border:0;padding:0;cursor:pointer}
.gr-card__more:hover{text-decoration:underline}

/* ---------- nav arrows ---------- */
.gr__nav{display:flex;justify-content:center;gap:12px;margin-top:18px}
.gr__arrow{width:42px;height:42px;border-radius:50%;border:1px solid var(--gr-border);background:var(--gr-card-bg);
  color:var(--gr-heading);display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background-color .3s,color .3s,border-color .3s}
.gr__arrow:hover{background:var(--gr-accent);color:var(--gr-on-accent);border-color:var(--gr-accent)}
.gr__arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- responsive: cards-per-view + height reserve ---------- */
@media (max-width:920px){ .gr-widget{ --gr-per-view:2 } }
@media (max-width:600px){ .gr-widget{ --gr-per-view:1; min-height:var(--gr-reserve-mobile) } }