/* Van Thats Quick — homepage live Google reviews (js/google-reviews.js).
   Scoped to #reviews. The cards themselves reuse the static cards' Tailwind
   classes, so only what output.css lacks lives here — no Tailwind rebuild. */

/* Author row sits on the card's floor, whatever the review's length. */
.gr-card { display: flex; flex-direction: column; animation: gr-in .35s ease-out both; }
.gr-text {
  flex: 1 1 auto;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  overflow: hidden;
}
.gr-who { margin-top: auto; }
.gr-avatar { flex: 0 0 auto; object-fit: cover; }
.gr-author { text-decoration: none; }
.gr-author:hover, .gr-source:hover { text-decoration: underline; }
.gr-source { color: inherit; text-decoration: none; }

/* Fewer than three qualifying reviews: keep cards card-width, centred. */
@media (min-width: 768px) {
  .gr-list--n1 { grid-template-columns: minmax(0, 28rem); justify-content: center; }
  .gr-list--n2 { grid-template-columns: repeat(2, minmax(0, 28rem)); justify-content: center; }
}

.gr-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  text-align: center;
}
.gr-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #ffffff;
  color: #111827;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.gr-all:hover { border-color: #84cc16; box-shadow: 0 4px 16px rgba(163, 230, 53, 0.25); }
.gr-all svg { width: 18px; height: 18px; flex: 0 0 auto; }
.dark .gr-all { background: #1f2937; border-color: rgba(255, 255, 255, 0.14); color: #ffffff; }

.gr-notice { margin: 0; font-size: 0.8125rem; color: #6b7280; }
.dark .gr-notice { color: #9ca3af; }
.gr-notice[hidden] { display: none; }
/* Google's text attribution: one line, untranslated, Roboto 400, #5E5E5E
   on light and white on dark. */
.gr-attrib {
  white-space: nowrap;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #5e5e5e;
}
.dark .gr-attrib { color: #ffffff; }

@keyframes gr-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gr-card { animation: none; } }

/* Static fallback (no named reviews): one panel across the whole grid. Not a
   .fade-up, so it shows even when JS is off. */
.gr-fallback { grid-column: 1 / -1; max-width: 40rem; width: 100%; justify-self: center; }
.gr-avatar--g { border: 1px solid rgba(0,0,0,.08); }