/* Super 8 Trends — shared Google Reviews styles v2.
   .gr-badge  — compact glass badge for INSIDE the hero (above the fold):
                G logo + 4.9 + gold stars with a glint sweep + review count.
   .gr-cards  — full white review cards for BELOW the fold. */
.gr-badge {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem .95rem .5rem .7rem;
  border-radius: 999px;
  background: rgba(10, 12, 16, .42);
  border: 1px solid rgba(255, 255, 255,.32);
  box-shadow: 0 6px 22px -8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14);
  color: #fff; text-decoration: none; cursor: pointer;
  -webkit-backdrop-filter: blur(10px) saturate(1.25); backdrop-filter: blur(10px) saturate(1.25);
  width: fit-content; max-width: 100%;
  transition: transform .25s ease, background .25s ease;
  /* air between the badge and the CTA row that follows it in the hero copy */
  margin-bottom: 1.1rem;
}
.gr-badge:hover { transform: translateY(-2px); background: rgba(10, 12, 16, .55); }
.gr-badge .gr-glogo { width: 19px; height: 19px; flex: 0 0 auto; }
.gr-badge-num { font-weight: 800; font-size: 1.06rem; line-height: 1; letter-spacing: -.01em;
  text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.gr-badge-stars { position: relative; display: inline-flex; gap: .06em; font-size: .8rem;
  line-height: 1; overflow: hidden; padding: .1em .05em; }
.gr-bstar { color: rgba(255,255,255,.34); }
.gr-bstar.on { color: #FBBC05; text-shadow: 0 0 10px rgba(251,188,5,.65), 0 1px 3px rgba(0,0,0,.5); }
/* the glint — a light band sweeping across the gold stars every few seconds */
.gr-badge-glint {
  position: absolute; top: -40%; bottom: -40%; left: -80%; width: 45%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255,244,214,.95), transparent);
  animation: gr-glint 4.6s ease-in-out infinite; pointer-events: none;
}
@keyframes gr-glint { 0%,70% { left: -80%; opacity: 0; } 74% { opacity: .95; } 92%,100% { left: 135%; opacity: 0; } }
.gr-badge-count { font-size: .74rem; font-weight: 600; letter-spacing: .02em; opacity: .92;
  text-shadow: 0 1px 8px rgba(0,0,0,.55); white-space: nowrap; }
.gr-badge:focus-visible { outline: 3px solid #FBBC05; outline-offset: 2px; }

/* ---- full cards (below the fold) ---- */
.gr-cards { margin-top: 1.8rem; }
.gr-cards-head { display: flex; align-items: center; gap: .5rem; font-size: .82rem;
  color: var(--gr-cap, #5f6368); margin-bottom: .9rem; }
.gr-cards-head .gr-glogo { width: 17px; height: 17px; }
.gr-cards-head strong { font-weight: 700; }
.gr-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem; width: 100%; }
.gr-card { background: var(--gr-card, rgba(255,255,255,.94)); color: #202124;
  border-radius: 14px; padding: .95rem 1.1rem; box-shadow: 0 10px 28px -14px rgba(0,0,0,.5);
  border: 1px solid rgba(0,0,0,.05); }
.gr-top { display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem; }
.gr-ava { width: 34px; height: 34px; border-radius: 50%; color: #fff; font-weight: 700; font-size: .8rem;
  display: grid; place-items: center; flex: 0 0 auto; box-shadow: inset 0 -1px 2px rgba(0,0,0,.2); }
.gr-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gr-who strong { font-size: .86rem; line-height: 1.2; }
.gr-meta { font-size: .7rem; color: #5f6368; display: flex; align-items: center; gap: .35rem; }
.gr-meta em { font-style: normal; }
.gr-s { font-size: .72rem; color: #dadce0; letter-spacing: .08em; }
.gr-s.on { color: #FBBC05; }
.gr-glogo { width: 17px; height: 17px; flex: 0 0 auto; align-self: flex-start; margin-left: .3rem; }
.gr-text { font-size: .84rem; line-height: 1.5; color: #3c4043; display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 760px) {
  .gr-badge { padding: .42rem .8rem .42rem .6rem; gap: .45rem; }
  .gr-badge-num { font-size: .98rem; }
  .gr-badge-stars { font-size: .72rem; }
  .gr-badge-count { font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) { .gr-badge-glint { animation: none; opacity: 0; } }