/* Google reviews widget — self-contained so the component can be dropped onto
   any page (homepage today, a /reviews page later). Relies only on the sitewide
   design tokens (--navy, --ink, --muted, --blue, --yellow, --star, --line,
   --serif, --sans, --mono); every one has a fallback. */

.gr{--gr-gap:22px}

/* ---------- Summary ---------- */
.gr-summary{align-items:center;gap:26px;flex-wrap:wrap;background:var(--surface,#fff);border:1px solid var(--line,#E1E8F2);border-radius:10px;padding:22px 26px;margin-bottom:var(--gr-gap)}
.gr-score{display:flex;align-items:baseline;gap:10px}
.gr-score b{font-family:var(--serif,Georgia,serif);font-size:40px;font-weight:500;line-height:1;color:var(--navy,#0A1A36);letter-spacing:-.02em}
.gr-summary-meta{display:flex;flex-direction:column;gap:4px}
.gr-total{font-size:14.5px;color:var(--muted,#56688A)}
.gr-brand{display:flex;align-items:center;gap:8px;margin-left:auto;font-family:var(--mono,monospace);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2,#8593A8)}
.gr-brand svg{width:17px;height:17px;flex:0 0 auto}

/* ---------- Stars ---------- */
.gr-stars{display:inline-flex;gap:2px;color:var(--star,#E0A100);font-size:14px;letter-spacing:1px;line-height:1}
.gr-stars .gr-star-off{color:var(--line-2,#D2DEEC)}

/* ---------- Cards ---------- */
.gr-cards{grid-template-columns:repeat(3,1fr);gap:var(--gr-gap)}
@media (max-width:900px){.gr-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.gr-cards{grid-template-columns:1fr}}

.gr-card{display:flex;flex-direction:column;background:var(--surface,#fff);border:1px solid var(--line,#E1E8F2);border-radius:8px;padding:26px;transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}
.gr-card:hover{border-color:var(--line-blue,rgba(3,62,140,.16));transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(10,26,54,.25)}

.gr-who{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.gr-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--surface-2,#EAF0F8)}
.gr-initial{width:40px;height:40px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--blue-soft,rgba(3,62,140,.06));border:1px solid var(--line-blue,rgba(3,62,140,.16));color:var(--blue,#033E8C);font-family:var(--serif,Georgia,serif);font-size:18px;line-height:1}
.gr-name{font-weight:600;font-size:15px;color:var(--navy,#0A1A36);line-height:1.3}
.gr-name a{color:inherit;text-decoration:none}
.gr-name a:hover{color:var(--blue,#033E8C)}
.gr-when{font-family:var(--mono,monospace);font-size:11px;letter-spacing:.04em;color:var(--muted-2,#8593A8);margin-top:3px}

.gr-text{font-size:15.5px;color:var(--ink,#13233D);line-height:1.65;margin-top:12px;white-space:pre-line;overflow-wrap:anywhere}
/* Long reviews are clamped visually — the text itself is never altered. */
.gr-text.is-clamped{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.gr-more{align-self:flex-start;margin-top:12px;padding:0;border:0;background:none;cursor:pointer;font-family:var(--sans,sans-serif);font-size:13.5px;font-weight:600;color:var(--blue,#033E8C)}
.gr-more:hover{color:var(--blue-bright,#0B57C2);text-decoration:underline}
.gr-src{margin-top:auto;padding-top:18px;font-family:var(--mono,monospace);font-size:11px;letter-spacing:.06em;color:var(--muted-2,#8593A8);display:flex;align-items:center;gap:7px}
.gr-src svg{width:13px;height:13px;flex:0 0 auto}

/* ---------- CTAs + states ---------- */
.gr-cta{margin-top:30px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.gr-note{font-family:var(--mono,monospace);font-size:11.5px;letter-spacing:.04em;color:var(--muted-2,#8593A8)}

/* Skeleton shown only while the fetch is in flight. */
.gr-skeleton{grid-template-columns:repeat(3,1fr);gap:var(--gr-gap)}
@media (max-width:900px){.gr-skeleton{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.gr-skeleton{grid-template-columns:1fr}}
.gr-skeleton div{height:196px;border:1px solid var(--line,#E1E8F2);border-radius:8px;background:linear-gradient(100deg,var(--surface,#fff) 30%,var(--surface-2,#EAF0F8) 50%,var(--surface,#fff) 70%);background-size:220% 100%;animation:gr-shimmer 1.5s linear infinite}
@keyframes gr-shimmer{from{background-position:180% 0}to{background-position:-40% 0}}
@media (prefers-reduced-motion:reduce){.gr-skeleton div{animation:none}}

/* Everything data-dependent is hidden until the script proves it has data, so
   the no-JavaScript and failed-fetch cases both degrade to the Google links
   below rather than to a stuck skeleton or an empty card grid. */
.gr-summary,.gr-cards,.gr-skeleton{display:none}
.gr[data-state="loading"] .gr-skeleton{display:grid}
.gr[data-state="ready"] .gr-summary,
.gr[data-state="summary"] .gr-summary{display:flex}
.gr[data-state="ready"] .gr-cards{display:grid}