/* ===== Google Reviews page — real patient reviews (LINE OA landing) ===== */

.gr-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px 96px; }

/* ---- Summary card (rating overview) ---- */
.gr-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 36px;
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-xl);
  padding: 24px 28px;
  margin-bottom: 40px;
  box-shadow: 0 1px 3px rgba(20,20,19,0.05);
}
.gr-summary__score { display: flex; align-items: baseline; gap: 4px; }
.gr-summary__num { font-family: var(--font-display); font-size: 52px; font-weight: 700; line-height: 1; color: var(--color-ink); letter-spacing: -0.02em; }
.gr-summary__max { font-size: 18px; color: var(--color-muted); }
.gr-summary__meta { display: flex; flex-direction: column; gap: 4px; }
.gr-summary__stars { color: #F5A623; font-size: 20px; letter-spacing: 2px; }
.gr-summary__count { font-size: 14.5px; color: var(--color-body); }
.gr-summary__count strong { color: var(--color-ink); }
.gr-summary__brand { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-muted); }
.gr-summary__cta {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--radius-pill);
  background: var(--color-primary); color: var(--color-on-primary);
  font-weight: 600; font-size: 14.5px; text-decoration: none;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.gr-summary__cta:hover { background: var(--color-primary-active); transform: translateY(-1px); }

/* ---- Masonry grid of review cards ---- */
.gr-grid {
  column-count: 3;
  column-gap: 20px;
}
@media (max-width: 900px) { .gr-grid { column-count: 2; } }
@media (max-width: 600px) { .gr-grid { column-count: 1; } }

.gr-card {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: inline-block;
  width: 100%;
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(20,20,19,0.04);
}
.gr-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.gr-card__avatar {
  position: relative;
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-surface-card); color: var(--color-primary);
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  overflow: hidden;
}
/* real Google photo layers over the initial; if it fails to load it's removed → initial shows */
.gr-card__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.gr-card__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gr-card__name { font-weight: 600; font-size: 15px; color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-card__stars { color: #F5A623; font-size: 14px; letter-spacing: 1px; }
.gr-card__g { flex: 0 0 auto; margin-left: auto; }
.gr-card__date { font-size: 12.5px; color: var(--color-muted); margin-left: 6px; }
.gr-card__text {
  font-size: 14.5px; line-height: 1.7; color: var(--color-body);
  margin: 0; white-space: pre-line;
}
/* clamp long reviews until expanded */
.gr-card__text.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gr-card__more {
  margin-top: 8px; padding: 0; border: 0; background: none;
  color: var(--color-primary); font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer;
}
.gr-card__more:hover { text-decoration: underline; }

/* ---- Load more ---- */
.gr-more-wrap { text-align: center; margin-top: 24px; }
.gr-loading { text-align: center; color: var(--color-muted); font-size: 14px; padding: 20px 0; }

@media (max-width: 600px) {
  .gr-wrap { padding: 0 16px 72px; }
  .gr-summary { padding: 20px; gap: 16px 24px; }
  .gr-summary__cta { margin-left: 0; width: 100%; justify-content: center; }
  .gr-summary__num { font-size: 44px; }
}

/* ===== Source filter chips ===== */
.gr-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.gr-chip {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 8px 18px; border-radius: 9999px;
  border: 1px solid var(--color-hairline); background: var(--color-canvas); color: var(--color-body);
  transition: background .15s, color .15s, border-color .15s;
}
.gr-chip:hover { border-color: var(--color-primary); }
.gr-chip.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ===== Facebook review variant ===== */
.gr-card__avatar--fb { background: #E7F0FF; color: #1877F2; }
.gr-card__fb { flex: 0 0 auto; margin-left: auto; }
.gr-card__recommend {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 600; color: #1877F2;
}
.gr-card--fb { border-top: 2px solid rgba(24,119,242,.35); }