/*
 * Griglia delle recensioni Google (plugin «Amazon & Google Reviews») vestita col
 * design system del tema. Caricato solo dove la griglia c'è: home e template
 * Recensioni (vedi recensioni.php).
 *
 * Colori di card, stelle e accento, raggio, colonne e corpo del testo NON stanno
 * qui: arrivano come custom properties dalle impostazioni del plugin, che le
 * stampa sul contenitore. Qui c'è solo ciò che il pannello non regola: bordi,
 * inchiostri, bottone «Carica altre».
 *
 * ⚠️ Le regole partono da `body .agr`: il foglio del plugin usa una classe sola,
 * quindi vinciamo per specificità e non per ordine di caricamento.
 */

body .agr {
  --agr-ink: var(--ink-900);
  --agr-ink-soft: var(--ink-500);
  --agr-star-empty: var(--ink-200);
}

body .agr .agr-card,
body .agr .agr-header {
  border: 1px solid var(--ink-100);
}

body .agr .agr-header-score {
  color: var(--teal-800);
}

body .agr .agr-text {
  color: var(--ink-700);
  line-height: 1.55;
}

body .agr .agr-reply {
  background: var(--paper-2);
}

/* Risposta del titolare chiusa a sei righe finché non la si apre. La classe la
   mette recensioni.js solo se il testo è davvero più lungo: senza JS resta intera. */
body .agr .agr-reply--chiusa .agr-reply-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}

body .agr .agr-reply-more {
  margin-top: 6px;
  font-size: 13px;
}

body .agr .agr-more {
  color: var(--teal-700);
  font-weight: 500;
}

body .agr .agr-load-more {
  padding: 12px 28px;
  border: 1px solid var(--ink-200);
  border-radius: 999px;
  background: white;
  color: var(--teal-800);
  font-size: 14px;
  font-weight: 600;
}

body .agr .agr-load-more:hover {
  border-color: var(--teal-700);
  background: white;
}