/* ============================================================
   Google Reviews — google_reviews_css.css
   Horizontal scrolling carousel with Prev/Next buttons.
   Uses site vars: --gold2, --text, --bg, --surface.
   Font: Lato (already loaded on site).
   ============================================================ */

/* Section wrapper */
.gr-section { margin:2rem 0; position:relative; }

/* Carousel track — horizontal scroll, snapping */
.gr-grid { display:flex; flex-direction:row; gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:0.5rem 0.25rem 1rem; -ms-overflow-style:none; scrollbar-width:none; }
.gr-grid::-webkit-scrollbar { display:none; }

/* Individual card — fixed width so they don't shrink */
.gr-card { flex:0 0 300px; scroll-snap-align:start; background:var(--surface,#1e2a3a); border:1px solid rgba(240,176,74,.2); border-radius:8px; padding:1.1rem 1.25rem; display:flex; flex-direction:column; gap:.6rem; }

/* Reviewer row */
.gr-reviewer { display:flex; align-items:center; gap:.65rem; }

/* Avatar image */
.gr-avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; }

/* Fallback initial circle */
.gr-avatar--initial { width:40px; height:40px; border-radius:50%; background:var(--gold2,#f0b04a); color:#1a1a2e; font-family:Lato,sans-serif; font-weight:700; font-size:1.1rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* Name + relative time */
.gr-reviewer-info { display:flex; flex-direction:column; min-width:0; }
.gr-name { color:var(--text,#e8ddd0); font-family:Lato,sans-serif; font-weight:700; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gr-time { color:var(--gold2,#f0b04a); font-family:Lato,sans-serif; font-size:.75rem; opacity:.8; }

/* Star row */
.gr-stars { display:inline-flex; gap:1px; line-height:1; }
.gr-star { font-size:1rem; }
.gr-star--on  { color:var(--gold2,#f0b04a); }
.gr-star--off { color:rgba(240,176,74,.25); }

/* Review body text */
.gr-text { color:var(--text,#e8ddd0); font-family:Lato,sans-serif; font-size:.88rem; line-height:1.55; margin:0; flex-grow:1; }

/* Google attribution link (required by ToS) */
.gr-attribution { color:var(--gold2,#f0b04a); font-family:Lato,sans-serif; font-size:.75rem; text-decoration:none; opacity:.7; align-self:flex-end; margin-top:auto; }
.gr-attribution:hover { opacity:1; text-decoration:underline; }

/* Error state */
.gr-error { color:var(--text,#e8ddd0); font-family:Lato,sans-serif; font-size:.85rem; opacity:.6; }

/* Prev/Next buttons */
.gr-prev, .gr-next { position:absolute; top:50%; transform:translateY(-50%); background:var(--gold2,#f0b04a); color:#1a1a2e; border:none; border-radius:50%; width:32px; height:32px; font-size:1rem; line-height:1; cursor:pointer; z-index:2; display:flex; align-items:center; justify-content:center; opacity:.85; }
.gr-prev:hover, .gr-next:hover { opacity:1; }
.gr-prev { left:-16px; }
.gr-next { right:-16px; }

/* Mobile */
@media(max-width:600px) {
  .gr-card { flex:0 0 85vw; padding:.9rem 1rem; }
  .gr-prev { left:0; }
  .gr-next { right:0; }
}

/* Last updated line */
.gr-updated{text-align:center;font-family:Lato,sans-serif;font-size:.75rem;color:var(--text,#e8ddd0);opacity:.8;margin-top:.75rem;}
.gr-updated-label{color:var(--gold2,#f0b04a);}