/* Eredita font e colori dal tema: il riquadro deve somigliare al sito. */
.az-rec{ font-family:inherit; color:inherit;
	--az-scheda:340px;   /* larghezza di riferimento, usata solo sul telefono */
	--az-spazio:14px;    /* spazio fra due schede  */

	/* Il limite e' ancorato alla **finestra**, non al contenitore.
	
	   Senza, il riquadro non veniva contenuto: veniva *dilatato*. La pista
	   e' una fila che non va a capo, e in questa pagina il blocco che la
	   ospita si allarga con il contenuto invece di imporgli una misura —
	   risultato, contenitore da 4238px su una finestra da 1690, niente da
	   scorrere perche' ci stava tutto, e il logo finito 1274px fuori
	   centro. `overflow-x` entra in gioco solo quando l'elemento ha una
	   larghezza propria, e qui non ce l'aveva.
	
	   Con `100vw` la larghezza c'e' sempre, e non dipende da cosa fa il
	   tema: il riquadro e' largo quanto la pagina, il carosello torna a
	   scorrere e il logo cade sull'asse. I 48px sono i margini laterali. */
	max-width:calc(100vw - 48px);
	margin-left:auto; margin-right:auto;
}

/* I conti sulle larghezze devono comprendere padding e bordo.
   Senza questo, `flex-basis: calc((100% - 36px)/3)` fissa la larghezza
   del **contenuto** e i 20px di padding per lato si sommano sopra: le
   schede vengono 779px invece di 740, tre non ci stanno piu' e la terza
   resta tagliata a meta'. Il tema non lo impone su tutto, quindi lo
   diciamo qui, per il nostro riquadro soltanto. */
.az-rec, .az-rec *, .az-rec *::before, .az-rec *::after{ box-sizing:border-box; }
/* Il logo sopra, non accanto.
   Affiancato al testo la **coppia** risultava centrata, ma il logo cadeva
   a sinistra della mezzeria e il testo a destra: nessuno dei due era al
   centro della pagina. In colonna il logo sta esattamente sull'asse. */
.az-rec-testa{ display:flex; flex-direction:column; align-items:center; gap:8px;
	justify-content:center; margin-bottom:26px; text-align:center; }
.az-rec-logo{ width:38px; height:38px; flex:none; }
/* Il voto in cifre: e' il dato che si legge per primo da lontano, e in una
   riga di stelle tutte piene non si distingue un 4,8 da un 5,0. */
.az-rec-voto{ font-size:1.9rem; font-weight:800; line-height:1; letter-spacing:-.5px; }
.az-rec-voto-riga{ display:flex; align-items:center; justify-content:center; gap:10px; }
.az-rec-testa-dati{ text-align:center; }
.az-rec-giudizio{ font-weight:800; letter-spacing:1.2px; font-size:1rem; text-transform:uppercase; }
.az-rec-conteggio{ font-size:.88rem; opacity:.7; margin-top:1px; }
.az-rec-stelle{ color:#fbbc04; display:inline-flex; gap:3px; margin:2px 0; }
.az-rec-stella{ width:20px; height:20px; }
.az-rec-stelle-piccole .az-rec-stella{ width:14px; height:14px; }

/* ---- il carosello ---- */

/* La pista occupa tutta la larghezza disponibile: se ne vedono tante
   quante ce ne stanno, poche su un portatile e parecchie su uno schermo
   grande.

   Attenzione al legame che non si vede: **e' il numero di schede mostrate
   a decidere se il carosello scorre**. A piena pagina ce ne stanno anche
   sei o sette, quindi mostrandone dodici resta da scorrere; se un domani
   si abbassa "quante mostrarne" sotto quel numero, le frecce si spengono
   da sole e il riquadro diventa una fila ferma. Non e' un guasto, ma
   conviene saperlo prima di cambiare quel campo. */
.az-rec-carosello{ position:relative; min-width:0; }
.az-rec-pista{
	display:flex; gap:var(--az-spazio); min-width:0; overflow-x:auto; overscroll-behavior-x:contain;
	scroll-snap-type:x mandatory;
	padding:6px 2px 8px; /* spazio per l'ombra delle schede e per il focus */

	/* Barra di scorrimento nascosta.
	   Nascosta, non tolta: si continua a scorrere con il dito, con la
	   rotellina e con la tastiera, esattamente come prima. Sparisce solo
	   il disegno della barra, che sotto una fila di schede fa rumore.
	   Servono tre righe perche' ogni motore la chiama a modo suo. */
	scrollbar-width:none;        /* Firefox */
	-ms-overflow-style:none;     /* Edge di una volta */
}
.az-rec-pista::-webkit-scrollbar{ display:none; }   /* Chrome, Safari */
.az-rec-pista:focus-visible{ outline:2px solid currentColor; outline-offset:3px; border-radius:20px; }

/* Le schede hanno una larghezza **fissa**, non una frazione del
   contenitore.

   Prima erano `calc((100% - 36px) / 3)`, cioe' sempre tre per volta
   qualunque fosse lo spazio: in un contenitore largo diventavano schede da
   740px, enormi e mezze vuote. A larghezza fissa se ne vedono tante quante
   ce ne stanno — poche su un portatile, di piu' su uno schermo grande — ed
   e' il comportamento che aveva il widget di prima.

   Su schermo stretto si passa a quasi tutta la larghezza: una scheda da
   340px su un telefono da 360 lascerebbe due margini ridicoli. */
/* Quattro per volta, sempre.
   A larghezza fissa il numero visibile dipendeva dallo schermo: quattro
   qui, sei su un monitor grande. Legandole a un quarto della pista sono
   sempre quattro, e la misura si adatta invece di essere subita.
   Il calcolo funziona perche' la pista **una larghezza ce l'ha** (il tetto
   di 100vw sulla radice): senza quello la percentuale non avrebbe nulla
   contro cui risolversi e il riquadro tornerebbe a dilatarsi. */
.az-rec-scheda{
	flex:0 0 calc((100% - var(--az-spazio) * 3) / 4); max-width:100%; scroll-snap-align:start;
	background:#fff; border-radius:16px; padding:18px 16px;
	border:1px solid rgba(0,0,0,.06);
	/* Due strati invece di uno: il primo stacca la scheda dal fondo, il
	   secondo le da' profondita'. Un'ombra sola o e' troppo dura o non si
	   vede. */
	box-shadow:0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.06);
	display:flex; flex-direction:column; gap:7px;
	align-items:center; text-align:center;
	transition:transform .2s ease, box-shadow .2s ease; }
.az-rec-scheda:hover{
	transform:translateY(-3px);
	box-shadow:0 2px 4px rgba(0,0,0,.06), 0 12px 28px rgba(0,0,0,.10); }
.az-rec[data-colonne="1"] .az-rec-scheda{ flex-basis:100%; }
.az-rec[data-colonne="2"] .az-rec-scheda{ flex-basis:calc((100% - var(--az-spazio)) / 2); }
.az-rec[data-colonne="3"] .az-rec-scheda{ flex-basis:calc((100% - var(--az-spazio) * 2) / 3); }
/* Sotto una certa larghezza quattro schede sarebbero francobolli: si
   scende a due e poi a una, che sul telefono e' l'unico modo leggibile. */
@media (max-width:1200px){ .az-rec .az-rec-scheda{ flex-basis:calc((100% - var(--az-spazio) * 2) / 3); } }
@media (max-width:900px){  .az-rec .az-rec-scheda{ flex-basis:calc((100% - var(--az-spazio)) / 2); } }
@media (max-width:700px){  .az-rec .az-rec-scheda{ flex-basis:86%; } }

.az-rec-freccia{
	position:absolute; top:calc(50% - 22px); z-index:2;
	width:44px; height:44px; border-radius:50%; cursor:pointer;
	background:#fff; border:1px solid rgba(0,0,0,.08); color:inherit;
	box-shadow:0 2px 6px rgba(0,0,0,.08), 0 8px 20px rgba(0,0,0,.10);
	display:flex; align-items:center; justify-content:center; padding:0;
	transition:opacity .2s ease, transform .15s ease, box-shadow .2s ease; }
.az-rec-freccia:hover{
	transform:scale(1.06);
	box-shadow:0 3px 8px rgba(0,0,0,.10), 0 12px 26px rgba(0,0,0,.14); }
.az-rec-freccia:active{ transform:scale(.97); }
.az-rec-prec{ left:-14px; }
.az-rec-succ{ right:-14px; }
.az-rec-freccia svg{ width:20px; height:20px; }
.az-rec-freccia[disabled]{ opacity:0; pointer-events:none; }

/* Le frecce compaiono al passaggio del mouse.
   
   `@media (hover: hover)` non e' pignoleria: su un telefono o un tablet
   il passaggio del mouse **non esiste**, quindi nasconderle li' vorrebbe
   dire toglierle e basta. Dove non c'e' il mouse restano visibili.
   
   E compaiono anche con `:focus-within`, cioe' quando il fuoco da
   tastiera entra nel carosello: chi naviga con il TAB non ha un mouse da
   far passare, e una freccia che si vede solo col mouse per lui non c'e'. */
@media (hover: hover) {
	.az-rec-freccia{ opacity:0; }
	.az-rec-carosello:hover .az-rec-freccia,
	.az-rec-carosello:focus-within .az-rec-freccia{ opacity:1; }
	/* agli estremi restano spente anche sotto il mouse: una freccia che
	   non porta da nessuna parte non va accesa */
	.az-rec-carosello:hover .az-rec-freccia[disabled],
	.az-rec-carosello:focus-within .az-rec-freccia[disabled]{ opacity:0; }
}
/* Su schermo stretto le frecce coprirebbero le schede: li' si scorre
   con il dito, che e' il gesto naturale, e le frecce non servono. */
@media (max-width:700px){ .az-rec-freccia{ display:none; } }

.az-rec-foto{ object-fit:cover; display:block; }
/* Nome e data restano allineati a sinistra dentro la loro colonna:
   affiancati a un tondo, centrarli li farebbe ballare rispetto alla
   foto. E' il blocco intero a stare al centro della scheda. */
.az-rec-riga{ display:flex; align-items:center; justify-content:center; gap:12px; text-align:left; }
.az-rec-tondo{ width:40px; height:40px; border-radius:50%; flex:none; color:#fff;
	box-shadow:0 0 0 3px rgba(0,0,0,.04);
	display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; }
.az-rec-nome{ font-weight:700; line-height:1.2; font-size:.95rem; }
.az-rec-data{ font-size:.78rem; opacity:.6; }
.az-rec-testo{ font-size:.88rem; line-height:1.6; margin-top:2px; }
.az-rec-altro{ display:block; margin:6px auto 0; background:none; border:0; padding:0;
	font:inherit; font-size:.88rem; color:inherit; opacity:.7; text-decoration:underline; cursor:pointer; }
.az-rec-altro:hover{ opacity:1; }

/* ---- il telefono ---- */

/* LE SCHEDE NON SI ALLUNGANO PIU' TUTTE QUANTO LA PIU' ALTA.

   In una fila flex le schede si stirano all'altezza della piu' alta: e'
   quello che tiene in riga le quattro del desktop, e li' e' un pregio.
   Sul telefono pero' se ne vede UNA per volta, e quel pregio diventa
   spreco: misurate il 29/08/2026, tutte e diciotto alte 275px identici,
   con i testi che vanno da 0 a 801 caratteri. La recensione senza testo
   occupava lo stesso spazio di quella lunga, quasi tutto vuoto.

   Sotto i 700px ogni scheda torna alta quanto le serve. Non si vede
   nessun disallineamento, perche' non ce n'e' due accanto da allineare. */
@media (max-width:700px){
	.az-rec-pista{ align-items:flex-start; }
}

/* Telefono in verticale: si recupera larghezza.

   Il riquadro lasciava 48px di margine ai lati, che su uno schermo da 390
   sono il 12% buttato via proprio dove il testo serve. A 24px la scheda
   cresce, e restando all'88% resta comunque a vista un pezzo della scheda
   dopo: e' quel pezzo a dire che il carosello scorre, senza bisogno di
   frecce - che sotto i 700px sono gia' nascoste apposta, perche' li' si
   scorre col dito. */
@media (max-width:480px){
	.az-rec{ max-width:calc(100vw - 24px); --az-spazio:10px; }
	/* UNA RECENSIONE ALLA VOLTA, piena.
	   Con l'88% restava a vista uno spicchio della successiva - utile come
	   invito a scorrere, ma in verticale toglie larghezza proprio al testo,
	   che e' la ragione per cui uno legge una recensione. Al 100% la scheda
	   prende tutto, e l'aggancio obbligatorio fa fermare il dito esattamente
	   su una: mai due mezze. */
	.az-rec .az-rec-scheda{ flex-basis:100%; padding:16px 14px; }
	.az-rec-testa{ margin-bottom:18px; }
	.az-rec-voto{ font-size:1.7rem; }
	.az-rec-testo{ font-size:.9rem; }   /* piu' leggibile: lo spazio adesso c'e' */
}

/* Chi ha chiesto di ridurre le animazioni non deve vedere transizioni. */
@media (prefers-reduced-motion: reduce){ .az-rec *{ transition:none !important; } }