/* Sezione 10 — le testimonianze degli ospiti, una per volta in un carosello.
   Misure prese dagli stili calcolati a 1440px (sec10-testimonial.spec.md,
   sec10_db2bdc5.spec.md, design_tokens.json, post-96.css del sito vivo).
   Il blocco si chiama .testimonianze; il file resta testimonial.css. */

.testimonianze{
  padding:190px 0 30px;
  background-image:linear-gradient(180deg,#fff9f7 0%,#fff7f5 100%);
}

/* il tracciato della stella sta qui una volta sola: non si deve vedere */
.testimonianze__simboli{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}

/* --------------------------------------------------------------- carosello */
/* il carosello e' il riferimento delle frecce, che cadono fuori dai suoi bordi */
.testimonianze__carosello{position:relative}
.testimonianze__vetrina{overflow:hidden}

.testimonianze__pista{
  display:flex;
  align-items:flex-start;  /* ogni voce tiene la sua altezza, come nell'originale */
  gap:30px;                /* lo stacco fra le slide dello slider originale */
  transition:transform 800ms ease;
}
/* usata dal JS per il salto muto di fine giro */
.testimonianze__pista--fermo-immagine{transition:none}

.testimonianze__voce{flex:0 0 100%}

/* il blocco di testo e' centrato e non supera i 1024px dentro la pista da 1100 */
.testimonianze__citazione{
  max-width:1024px;
  margin:0 auto;
  text-align:center;
}

/* ------------------------------------------------------------------- voto */
/* riga alta 29.92px: nell'originale era l'interlinea del corpo, che le stelle
   da 24px non superavano. I 12px a destra sono il letter-spacing di .5em del
   font di icone: restano anche dopo l'ultima stella, e spostano la fila di 6px
   a sinistra rispetto al centro esatto. */
.testimonianze__voto{
  display:flex;
  justify-content:center;
  align-items:center;
  height:29.92px;
  margin:0 0 29px;
  color:var(--accento);
}
.testimonianze__stella{
  display:block;
  width:21px;
  height:24px;
  margin-right:12px;
  fill:currentColor;
}

/* --------------------------------------------------------------- citazione */
.testimonianze__testo{
  margin:0 0 30px;
  font-family:var(--display);
  font-size:34px;
  font-weight:400;
  line-height:43.86px;
  letter-spacing:-0.68px;
  color:var(--nero);
}

.testimonianze__autore{
  display:block;
  font-family:var(--corpo);
  font-size:14px;
  font-weight:500;
  font-style:normal;      /* cite di suo sarebbe corsivo */
  line-height:26.18px;
  letter-spacing:1.96px;
  text-transform:uppercase;
  color:var(--accento);
}

/* ----------------------------------------------------------------- frecce */
/* 50x50 a meta' altezza, 50px oltre i due bordi della pista: sull'originale
   erano left/right 30px piu' una traslazione di 80px verso l'esterno. */
.testimonianze__freccia{
  position:absolute;
  top:50%;
  z-index:10;
  display:block;
  width:50px;
  height:50px;
  transform:translateY(-50%);
  color:var(--linea);
  transition:color .2s ease-out;
}
.testimonianze__freccia--indietro{left:-50px}
.testimonianze__freccia--avanti{right:-50px}
.testimonianze__freccia:hover{color:var(--accento)}
.testimonianze__freccia svg{
  display:block;
  width:50px;
  height:50px;
}

/* ------------------------------------------------------------ schermi stretti */
/* i punti di rottura sono quelli dell'originale: 1440 e 768 per il testo,
   1024 e 767 per i margini della sezione */
@media (max-width:1440px){
  .testimonianze__citazione{max-width:860px}
}

@media (max-width:1024px){
  .testimonianze{padding:115px 0 0}
}

@media (max-width:768px){
  .testimonianze__citazione{max-width:550px}
  /* sotto i 768px l'originale nascondeva le frecce: si scorre col dito */
  .testimonianze__freccia{display:none}
}

@media (max-width:767px){
  .testimonianze{padding:100px 0 50px}
}