/* ============================================================
   HOSTIFY PALERMO — Recensioni
   Pagina /recensioni e blocco nella scheda camera. Eredita i token.
   Tutto funziona senza JavaScript (filtri e paginazione sono link).
   ============================================================ */

.rec-head {
  padding-top: clamp(7.5rem, 16vw, 10rem);
  padding-bottom: clamp(1rem, 3vw, 2rem);
}
.rec-head h1 {
  font-size: clamp(2.2rem, 1.4rem + 3.6vw, 3.6rem);
  line-height: var(--lh-tight); letter-spacing: var(--track-display);
  margin-block: var(--sp-4);
}
.rec-head .lead { font-size: var(--t-lead); color: color-mix(in srgb, var(--ombra) 80%, transparent); max-width: 56ch; }

/* Riepilogo per piattaforma: ogni punteggio nella sua scala, mai sommati */
.rec-fonti {
  list-style: none; padding: 0; margin: var(--sp-6) 0 0;
  display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.rec-fonte-card {
  background: var(--gesso); border: 1px solid var(--linea); border-radius: var(--r-md);
  padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); height: 100%;
}
.rec-fonte-nome { font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--maiolica); font-weight: 700; }
.rec-fonte-punteggio { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; letter-spacing: var(--track-display); }
.rec-fonte-punteggio small { font-family: var(--font-body); font-size: 1rem; color: color-mix(in srgb, var(--ombra) 62%, transparent); letter-spacing: 0; }
.rec-fonte-n { font-size: var(--t-small); color: color-mix(in srgb, var(--ombra) 70%, transparent); margin: 0; }
.rec-fonte-link { margin-top: auto; padding-top: var(--sp-2); font-size: var(--t-small); font-weight: 600; color: var(--maiolica); }

/* Filtri (link con parametri GET) */
.rec-filtri { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }
.rec-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.rec-filtro-label { font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--maiolica); margin-right: var(--sp-2); }
.rec-filtro a {
  display: inline-flex; border: 1px solid var(--linea-forte); border-radius: var(--r-pill);
  padding: 0.45em 1em; font-size: var(--t-small); font-weight: 600;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.rec-filtro a:hover { background: rgba(21,48,43,0.05); border-color: var(--ombra); }
.rec-filtro a[aria-current="true"] { background: var(--ombra); border-color: var(--ombra); color: var(--gesso); }
.rec-filtro a:focus-visible { outline: 2px solid var(--maiolica); outline-offset: 2px; }

/* Elenco */
.rec-body { padding-bottom: clamp(3rem, 8vw, 6rem); }
.rec-conto { margin: var(--sp-6) 0 var(--sp-4); font-size: var(--t-small); color: color-mix(in srgb, var(--ombra) 70%, transparent); }
.rec-lista { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 760px) { .rec-lista { grid-template-columns: 1fr 1fr; } }
.rec-vuoto { padding: var(--sp-6) 0; color: color-mix(in srgb, var(--ombra) 75%, transparent); }

.rec-card {
  background: var(--gesso); border: 1px solid var(--linea); border-radius: var(--r-md);
  padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3);
}
.rec-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.rec-fonte { font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--maiolica); font-weight: 700; }
.rec-voto { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; white-space: nowrap; }
.rec-scala { font-family: var(--font-body); font-size: var(--t-small); color: color-mix(in srgb, var(--ombra) 62%, transparent); }
.rec-testo { margin: 0; line-height: var(--lh-body); overflow-wrap: anywhere; }
.rec-autore { margin: 0; font-size: var(--t-small); color: color-mix(in srgb, var(--ombra) 70%, transparent); max-width: none; }
.rec-autore strong { color: var(--ombra); }
.rec-risposta {
  margin-top: var(--sp-1); padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--maiolica); background: var(--gesso-2); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.rec-risposta p { margin: 0; font-size: var(--t-small); line-height: 1.6; max-width: none; overflow-wrap: anywhere; }
.rec-risposta .rec-risposta-t { font-weight: 700; color: var(--maiolica); margin-bottom: var(--sp-1); }

.rec-verificata { margin: 0; font-size: var(--t-small); font-weight: 600; color: var(--alloro); max-width: none; }

/* Paginazione */
.rec-pag { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-6); }
.rec-pag a, .rec-pag span.rec-pag-corrente {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding-inline: 0.9em;
  border: 1px solid var(--linea-forte); border-radius: var(--r-pill); font-size: var(--t-small); font-weight: 600;
}
.rec-pag a:hover { background: rgba(21,48,43,0.05); border-color: var(--ombra); }
.rec-pag span.rec-pag-corrente { background: var(--ombra); border-color: var(--ombra); color: var(--gesso); }
.rec-pag a:focus-visible { outline: 2px solid var(--maiolica); outline-offset: 2px; }

/* Trasparenza (Codice del Consumo / Omnibus) */
.rec-nota {
  margin-top: var(--sp-7); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--linea);
  border-radius: var(--r-md); font-size: var(--t-small); line-height: 1.65;
  color: color-mix(in srgb, var(--ombra) 80%, transparent);
}
.rec-nota p { margin: 0; max-width: 72ch; }
.rec-nota p + p { margin-top: var(--sp-2); }

.rec-cta { margin-top: clamp(2rem, 5vw, 3.5rem); }

/* Blocco nella scheda camera */
.rec-camera-lista { display: grid; gap: var(--sp-4); }
.rec-camera-tutte { margin-top: var(--sp-4); }

/* Briciole di pane (stessi valori della scheda camera) */
.breadcrumb { display: flex; align-items: center; gap: 0.5em; font-size: var(--t-small); color: color-mix(in srgb, var(--ombra) 58%, transparent); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.breadcrumb a { color: var(--maiolica); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb svg { width: 12px; height: 12px; opacity: 0.6; }