/* =========================================================================
   Alzati e Fattura — sezione 10 RECENSIONI
   Desktop 1440×1031 · mobile 390×2264.
   Nastro di testimonianze su schede bianche.
   ========================================================================= */

.aef-rec,
.aef-rec *,
.aef-rec *::before,
.aef-rec *::after { box-sizing: border-box; }

.aef-rec {
  --ink: #030F0F;
  --surface: #0B1D16;
  --deep: #0A3B26;
  --green-bright: #00E27B;
  --card-text: #22312B;
  --star: #00B865;

  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 96px 0;
  background: var(--ink);
  overflow: hidden;
  font-family: 'Switzer', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* L'intestazione sta al centro, non appoggiata al bordo sinistro */
.aef-rec__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.aef-rec__eyebrow {
  margin: 0;
  color: var(--green-bright);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 2.5px;
}

.aef-rec__title {
  margin: 0;
  color: #FFFFFF;
  font-size: 42px;
  font-weight: 800;
  line-height: 48px;
  letter-spacing: -0.5px;
}

.aef-rec__badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.aef-rec__badges img { height: 36px; width: auto; display: block; }

/* ---------- Nastro ----------
   Scorrevole a mano fin da subito, su qualunque dispositivo: col dito, col
   trackpad e trascinandolo col mouse (vedi nastri.js). Prima era scorrevole
   solo dopo il primo tocco e solo sui telefoni — su computer non c'era proprio
   modo di raggiungere una scheda, e sul telefono il primo swipe andava perso.

   Le sfumature ai bordi sono una **maschera** e non due riquadri sfumati in
   posizione assoluta: dentro un contenitore che scorre, quelli scorrerebbero
   via insieme alle schede. È lo stesso rimedio già usato nel nastro della
   stampa. */
.aef-rec__row {
  --aef-sfuma: 100px;

  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--aef-sfuma), #000 calc(100% - var(--aef-sfuma)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--aef-sfuma), #000 calc(100% - var(--aef-sfuma)), transparent);
}

.aef-rec__row::-webkit-scrollbar { display: none; }

/* Mentre si trascina: la mano si chiude e il testo non si seleziona */
.aef-rec__row.aef-nastro-preso {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

.aef-rec__track {
  display: flex;
  gap: 24px;
  width: max-content;
  padding: 0 12px;
  animation: aef-rec-scroll var(--aef-rec-speed, 55s) linear infinite;
}

@keyframes aef-rec-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Al passaggio del mouse il nastro si **ferma**, e riparte quando il mouse se
   ne va. Il 2026-08-09 era stato provato il rallentamento al 25%: Matteo l'ha
   respinto due volte — un nastro che rallenta e basta si legge come un difetto,
   e chi si ferma su una scheda la vuole ferma. Il vero motivo per cui i nastri
   «non scorrevano» era un altro: dopo un trascinamento restavano morti per
   sempre. Sistemato in nastri.js. */
/*
 * La pausa al passaggio del mouse vale **solo dove un mouse esiste davvero**.
 *
 * Sul computer non cambia niente: ci si ferma sopra e il nastro si ferma, come
 * ha sempre fatto. Su telefono invece un tocco fa scattare lo stato «hover» e
 * ce lo lascia appiccicato: il nastro si fermava e restava fermo, perché dal
 * 2026-08-15 il dito non può più trascinarlo — la via d'uscita che c'era prima.
 *
 * `hover: hover` e `pointer: fine` insieme vogliono dire mouse o trackpad: più
 * affidabile della larghezza dello schermo, perché un tablet grande col dito
 * resta fuori e un portatile stretto resta dentro.
 */
@media (hover: hover) and (pointer: fine) {
  .aef-rec__row:hover .aef-rec__track { animation-play-state: paused; }
}

/* ---------- Scheda ---------- */
.aef-rec__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 0 0 384px;
  width: 384px;
  padding: 26px 28px;
  border-radius: 4px;
  background: #FFFFFF;
}

.aef-rec__author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.aef-rec__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--deep);
  color: var(--green-bright);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .5px;
}

/* La foto del profilo prende il posto delle iniziali: stessa misura, stesso
   cerchio.

   Due classi nel selettore, non una — e qui vanno ripetute **anche le
   proprietà che il blocco `.aef-rec__avatar` già dichiara**. Elementor applica
   alle immagini regole che battono qualunque selettore a classe singola: la
   foto perdeva il cerchio e usciva quadrata mentre le iniziali restavano tonde
   (visto da Matteo il 2026-08-07). È la stessa trappola che era già costata sei
   immagini con l'altezza sbagliata, questa volta sugli angoli. */
.aef-rec .aef-rec__avatar--foto {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--deep);
}

/* Nome e data incolonnati: la data è di servizio e non deve rubare la riga */
.aef-rec__who {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.aef-rec__name {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.aef-rec__date {
  color: #6B7671;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
}

/* Il marchio si appoggia al bordo destro della scheda */
.aef-rec .aef-rec__brand {
  flex: 0 0 auto;
  margin-left: auto;
  height: 20px;
  width: auto;
  display: block;
}

/* Le stelle sono SVG, non caratteri: gap e misura le comanda il CSS */
.aef-rec__stars {
  display: flex;
  gap: 3px;
  line-height: 0;
}

.aef-rec__star {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

/* Il titolo che la persona ha dato alla recensione, quando c'è */
.aef-rec__cardtitle {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.aef-rec__text {
  margin: 0;
  color: var(--card-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  /* I testi veri vanno a capo dove li ha mandati chi li ha scritti */
  white-space: pre-line;
}

/*
 * Testo tagliato a un numero di righe fisso.
 *
 * Le recensioni vere vanno da 156 a 706 caratteri, e in un nastro tutte le
 * schede sono alte quanto la più alta: senza taglio, per far leggere quattro
 * righe se ne tengono in piedi diciassette. Il testo resta **tutto** nella
 * pagina — Google lo legge per intero, è solo la vista a fermarsi — e chi
 * vuole il resto apre «Leggi tutto».
 */
.aef-rec__text--taglia {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--aef-righe, 7);
  line-clamp: var(--aef-righe, 7);
  overflow: hidden;
}

/* Aperta: il taglio si toglie e si legge tutto */
.aef-rec__card:has(.aef-rec__oltre[open]) .aef-rec__text--taglia,
.aef-rec__card.is-aperta .aef-rec__text--taglia {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

/* Il comando è un <details> senza corpo: serve solo il suo interruttore,
   che così funziona anche a JavaScript spento. */
.aef-rec__oltre {
  margin-top: -4px;
}

.aef-rec__oltre summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 2px 0;
  color: #0A7C4A;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.aef-rec__oltre summary::-webkit-details-marker { display: none; }

.aef-rec__oltre summary::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}

.aef-rec__oltre[open] summary::after {
  transform: translateY(1px) rotate(-135deg);
}

.aef-rec__oltre summary:hover { text-decoration: underline; }

.aef-rec__oltre summary:focus-visible {
  outline: 2px solid var(--star);
  outline-offset: 2px;
  border-radius: 2px;
}

.aef-rec__chiudi { display: none; }
.aef-rec__oltre[open] .aef-rec__apri  { display: none; }
.aef-rec__oltre[open] .aef-rec__chiudi { display: inline; }

/* Mentre si legge una recensione aperta il nastro sta fermo, altrimenti
   scappa via proprio nel momento in cui interessa. */
.aef-rec__row:has(.aef-rec__oltre[open]) .aef-rec__track,
.aef-rec__row.ha-aperta .aef-rec__track {
  animation-play-state: paused;
}

/*
 * «Non scritta su invito» sta in fondo alla scheda, non attaccato al testo:
 * le recensioni hanno lunghezze molto diverse e il badge, ancorato in basso,
 * dà a tutte le schede la stessa riga di chiusura.
 */
.aef-rec__verified {
  margin: auto 0 0;
  align-self: flex-start;
  padding: 4px 8px;
  border-radius: 3px;
  background: #F2F3F5;
  color: #56605C;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}

/* ---------- Tablet ---------- */
@media (max-width: 1180px) {
  .aef-rec__title { font-size: 32px; line-height: 38px; }
  .aef-rec__row { --aef-sfuma: 60px; }
}

/* =========================================================================
   MOBILE — frame 390×2264
   ========================================================================= */
@media (max-width: 767px) {
  .aef-rec {
    gap: 20px;
    padding: 64px 0;
  }

  .aef-rec__eyebrow {
    font-size: 11px;
    line-height: 15px;
    letter-spacing: 1px;
  }

  .aef-rec__title { font-size: 26px; line-height: 32px; }

  .aef-rec__badges img { height: 30px; }

  .aef-rec__track { gap: 14px; }

  .aef-rec__card {
    flex-basis: 290px;
    width: 290px;
    padding: 20px 22px;
  }

  .aef-rec__text { font-size: 13px; }

  .aef-rec__cardtitle { font-size: 14px; }

  .aef-rec__star { width: 17px; height: 17px; }

  .aef-rec__avatar { flex-basis: 44px; width: 44px; height: 44px; font-size: 15px; }
  .aef-rec .aef-rec__avatar--foto { flex-basis: 44px; width: 44px; height: 44px; }

  .aef-rec .aef-rec__brand { height: 17px; }

  .aef-rec__date { font-size: 11px; }

  .aef-rec__row { --aef-sfuma: 32px; }
}

/* A nastro fermo le schede si impilano invece di restare tagliate */
@media (prefers-reduced-motion: reduce) {
  .aef-rec__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    padding: 0 24px;
  }
  .aef-rec__track [data-clone="true"] { display: none; }
  .aef-rec__row {
    overflow-x: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* =========================================================================
   Griglia dei video-recensione
   Si carica l'anteprima e il video vero solo al clic: otto riquadri YouTube
   in pagina la appesantirebbero moltissimo, e quasi nessuno li guarda tutti.
   ========================================================================= */
.aef-rec__videos {
  display: grid;
  /* Tre per riga, non quattro: chiesto dal cliente l'11 agosto perché a
     quattro le anteprime erano troppo piccole per leggere le frasi stampate
     dentro. Con nove interviste vengono tre file da tre. */
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  /* Rientro come tutte le altre sezioni: nel Figma la griglia è larga 1200 e
     parte a 120, esattamente come il resto del contenuto.
     Il 2026-08-03 era stata portata da bordo a bordo su richiesta di Matteo;
     il 2026-08-08 il cliente ha chiesto di rispettare i margini, quindi torna
     dentro la colonna. Il nastro delle testimonianze, che invece esce di
     proposito, non cambia. */
  padding: 0 max(120px, (100% - 1200px) / 2);
  margin-top: 4px;
}

.aef-rec__video {
  position: relative;
  display: block;
  aspect-ratio: 285 / 160;
  border: 0;
  padding: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
}

.aef-rec .aef-rec__video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s cubic-bezier(.2,.8,.3,1), filter .3s ease;
}

.aef-rec__video:hover img { transform: scale(1.04); filter: brightness(1.08); }

/* Il pulsante play lo disegniamo solo sopra le copertine che non ce l'hanno
   già (quelle prese da YouTube). Le anteprime disegnate per il progetto lo
   hanno stampato dentro: sovrapporne un altro ne farebbe vedere due. */
.aef-rec__video--play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 54px;
  height: 38px;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  background: rgba(0, 0, 0, .72);
  transition: background-color .25s ease;
}

.aef-rec__video--play::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 0;
  height: 0;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #FFFFFF;
}

.aef-rec__video--play:hover::after { background: #FF0000; }

.aef-rec__video:focus-visible {
  outline: 3px solid var(--green-bright);
  outline-offset: 3px;
}

/* Il video sostituisce l'anteprima */
.aef-rec__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Le regole della finestra del filmato sono in `video.css`: la finestra la
   costruisce `video.js` e la usano due sezioni, quindi non appartiene a
   questo foglio. Vedi il commento in cima a quel file. */

@media (max-width: 1180px) {
  /* 40px per lato: lo stesso rientro che prendono le altre sezioni sotto i
     1180 (vedi speaker.css, mercato.css). */
  .aef-rec__videos { gap: 14px; padding: 0 40px; }
}

@media (max-width: 900px) {
  .aef-rec__videos { grid-template-columns: repeat(2, 1fr); }

  /*
   * L'11 agosto qui la nona intervista (Fradiavolo) veniva nascosta: il
   * cliente aveva chiesto di aggiungerla solo su computer. Il 12 ha cambiato
   * idea — la vuole anche su telefono. La regola è stata tolta, non
   * commentata: se serve di nuovo si riscrive in una riga.
   */
}

/*
 * Fra i 768 e i 900 le colonne sono due e le interviste nove: l'ultima
 * resterebbe da sola sulla sinistra, con mezza riga vuota accanto. Occupa
 * tutta la riga ma tiene la larghezza di una colonna e sta al centro — il
 * meno 7 è metà dei 14px di distanza fra le schede.
 */
@media (min-width: 768px) and (max-width: 900px) {
  .aef-rec__video:nth-child(9) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 7px);
  }
}

@media (max-width: 767px) {
  .aef-rec__videos {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 24px;   /* su telefono a tutta larghezza sarebbero soffocanti */
  }
}

/* Nastro liberato: l'animazione è spenta e da qui comanda la mano di chi
   guarda (vedi nastri.js). Lo scorrimento vero e proprio è già possibile
   sul contenitore fin dall'inizio; qui si aggiunge solo l'aggancio delle
   schede, che senza sarebbero lasciate a metà. */
.aef-nastro-libero {
  scroll-snap-type: x proximity;
}

.aef-nastro-libero .aef-rec__card { scroll-snap-align: center; }

/* =========================================================================
   TELEFONO — il dito torna a scorrere questo nastro

   Il 15 agosto lo avevamo bloccato: era un'estensione mia di una richiesta che
   riguardava **solo le card degli speaker**. Il cliente l'ha segnalato il 16:
   qui il dito deve funzionare come ha sempre funzionato.

   Resta solo la selezione del testo disattivata, quella sì chiesta apposta:
   con il dito che trascina, una pressione un po' lunga tirava su le maniglie
   di selezione sopra le recensioni.
   ========================================================================= */
@media (max-width: 767px) {
  .aef-rec__row {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
}