/* =========================================================================
   Alzati e Fattura — sezione 04 SPEAKER DELLE SCORSE EDIZIONI
   Desktop 1440×1047 · mobile 390×823.
   Due nastri che scorrono in direzioni opposte, con dissolvenza ai lati.
   ========================================================================= */

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

.aef-past {
  --ink: #030F0F;
  --surface: #0B1D16;
  --green-bright: #00E27B;
  --orange: #FF5C1F;
  --card-text: #22312B;
  --fade: #050F0C;

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

.aef-past__title {
  margin: 0;
  /* Il titolo si stringe sul suo testo, come nel Figma (nodo HUG, 596×32): in
     Switzer 26/700 la frase misura 595.9, ed è quella misura a decidere la
     larghezza. Questo `max-width` non è la larghezza voluta, è solo il tetto
     perché su schermi larghi una frase più lunga non si stenda per 1440px, e
     va tenuto **abbondante**: a 640 il tetto arrivava sotto la frase, al testo
     restavano 592 pixel invece di 596 e la frase andava a capo per quattro
     pixel, portandosi dietro 32px di altezza su tutta la sezione. */
  max-width: 680px;
  padding: 0 24px;
  color: #FFFFFF;
  font-size: 26px;
  font-weight: 700;
  line-height: 32px;
  text-align: center;
  text-wrap: balance;
}

/* ---------- I due nastri ---------- */
.aef-past__rows {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

/* Scorrevole a mano fin da subito — col dito, col trackpad e trascinandolo
   col mouse (vedi nastri.js).

   Dissolvenza ai lati: nel Figma sono due rettangoli con gradiente, qui è una
   **maschera**. Erano due riquadri in posizione assoluta, ma dentro un
   contenitore che scorre sarebbero scivolati via insieme alle schede. */
.aef-past__row {
  --aef-sfuma: 160px;

  position: relative;
  width: 100%;
  /* Nel frame la cornice della fila è 354 e il binario dentro 320, appoggiato
     a 7px dal bordo alto: 7 sopra e 27 sotto. Quei 34px di aria sono quelli
     che fanno diventare 52px lo stacco visibile fra le due file (27+18+7);
     senza, la fila si stringe sul binario e lo stacco resta 18. */
  padding: 7px 0 27px;
  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-past__row::-webkit-scrollbar { display: none; }

.aef-past__row.aef-nastro-preso {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

.aef-past__track {
  display: flex;
  gap: 26px;
  width: max-content;
  padding: 0 13px;
  animation: aef-past-left var(--aef-past-speed, 60s) linear infinite;
}

/* La fila marcata `--rtl` va nel verso opposto: le schede scorrono verso
   **destra**.
   Quale delle due la porti lo decide il template, e nel Figma è la **prima**:
   i due riquadri si chiamano «Slider / Speaker riga 1 →» e «riga 2 ←». Fino al
   2026-09-01 in pagina era il contrario — la prima andava a sinistra e la
   seconda a destra — e nessuno se n'era accorto perché il misuratore
   controllava solo che i due nomi di animazione fossero *diversi*, non da che
   parte andassero. Ora il verso vero è misurato.
   Attenzione a non invertire questa regola: `unSensoSolo()` in nastri.js legge
   proprio la classe `--rtl` per sapere in che verso il dito può spingere il
   nastro, e la vuole concorde con l'animazione. */
.aef-past__row--rtl .aef-past__track {
  animation-name: aef-past-right;
}

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

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

/* 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 vale **solo dove esiste davvero un puntatore**.
 *
 * Sui telefoni un tocco fa scattare lo stato «hover» e ce lo lascia
 * appiccicato: il nastro si fermava e non ripartiva più finché non si toccava
 * da un'altra parte. Il cliente l'ha segnalato il 2026-08-15: su telefono deve
 * scorrere sempre, senza modo di fermarlo.
 *
 * `hover: hover` e `pointer: fine` insieme vogliono dire mouse o trackpad. È
 * più affidabile della larghezza dello schermo: un tablet grande con il dito
 * resta fuori, un portatile stretto resta dentro.
 */
@media (hover: hover) and (pointer: fine) {
  .aef-past__row:hover .aef-past__track { animation-play-state: paused; }
}

/* ---------- Scheda ---------- */
.aef-past__card {
  display: flex;
  flex-direction: column;
  flex: 0 0 288px;
  width: 288px;
  border-radius: 23px;
  background: #FFFFFF;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.8,.3,1);
}

.aef-past__card:hover { transform: translateY(-4px); }

/* Due classi, non una: `.elementor img { height: auto }` batte un selettore
   a classe singola e la foto tornava all'altezza naturale — 222 px invece di
   230. È la stessa trappola già costata cinque immagini sbagliate. */
.aef-past .aef-past__photo {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: cover;
  object-position: center top;
  background: var(--surface);
}

/* Senza foto resta il riquadro scuro del Figma, con le iniziali al centro */
.aef-past__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 230px;
  background: var(--surface);
  color: rgba(255, 255, 255, .18);
  font-size: 46px;
  font-weight: 800;
  letter-spacing: 2px;
  user-select: none;
}

.aef-past__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px 16px;
  text-align: center;
}

.aef-past__name {
  margin: 0;
  color: var(--green-bright);
  font-size: 15px;
  font-weight: 700;
  /* Interlinee in pixel, non relative: il frame dichiara 20/18/18 e con
     1.3/1.35 la scheda restava 318.6 invece di 320. */
  line-height: 20px;
}

.aef-past__role {
  margin: 0;
  color: var(--card-text);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
}

.aef-past__company {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
}

/* ---------- Chiamata all'azione ---------- */
.aef-past__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  /* Nel frame il blocco è HUG: largo quanto il pulsante (340), senza respiro
     ai lati. I 24px che c'erano qui lo allargavano a 390 e spostavano la sua
     x da 550 a 525. Il respiro sui telefoni lo dà il margine del blocco
     telefono, più sotto. */
}

/* Due classi, non una: `.elementor a { box-shadow: none }` è (0,1,1) e batteva
   `.aef-past__btn`, che è (0,1,0). Risultato: il pulsante arrivava in pagina
   **spento**, senza nessuno dei tre aloni che il frame dichiara — la differenza
   che più si vedeva nel confronto col PNG. `.aef-past .aef-past__btn` è (0,2,0)
   e vince senza bisogno di `!important`. */
.aef-past .aef-past__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 36px;
  /* Il bordo nel Figma è INSIDE: reso con `border` toglierebbe due pixel allo
     spazio interno (l'etichetta ne vuole 268 e ne resterebbero 266, andrebbe a
     capo) e ne aggiungerebbe due fuori, 342 invece di 340. `outline` con
     `outline-offset: -1px` lo disegna dentro senza rubare spazio. */
  border: 0;
  outline: 1px solid rgba(255, 255, 255, 0.4);
  outline-offset: -1px;
  border-radius: 10px;
  background: var(--orange);
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 25px;
  letter-spacing: 0.3px;
  text-decoration: none;
  /* Le tre ombre del frame: due aloni arancioni e un lume interno bianco. */
  box-shadow:
    0 0 18px 1px rgba(255, 92, 31, 0.65),
    0 0 44px 6px rgba(255, 92, 31, 0.35),
    inset 0 1px 2px rgba(255, 255, 255, 0.28);
  transition: transform .18s cubic-bezier(.2,.8,.3,1), background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* ---------- Hover del pulsante ----------
   I valori sono quelli del componente «Button / CTA» del Figma, che lo stato
   Hover ce l'ha dichiarato: sfondo #FF5C1F → #FF7A45, bordo bianco dal 40 al
   55%, i due aloni più ampi, luce interna dal 28 al 40%. Prima qui c'era un
   generico `brightness(1.05)`.

   Il colore del testo **non cambia in hover: resta nero**. Chiuso così il
   2026-08-12 dal cliente. Il 10 agosto era stato messo il blu notte #333366,
   letto dallo screenshot del designer; era un equivoco, e le due fonti che
   dicevano il contrario avevano ragione — la didascalia dello screenshot
   («hover dei pulsanti non deve essere blue») e il componente «Button / CTA»
   del Figma, che nello stato Hover ha il testo nero come nello stato normale.

   Il colore va comunque **dichiarato in ogni stato**: senza, quello che si
   vedeva era il #333366 di Elementor per i link, cioè lo stesso colore ma per
   caso e non per scelta — e su :visited restava anche a mouse fermo. */
.aef-past__btn,
.aef-past__btn:link,
.aef-past__btn:visited { color: #030F0F; }

.aef-past .aef-past__btn:hover,
.aef-past .aef-past__btn:focus,
.aef-past .aef-past__btn:active {
  transform: translateY(-2px);
  outline-color: rgba(255, 255, 255, 0.55);
  background: #FF7A45;
  color: #030F0F;
  box-shadow:
    0 0 26px 3px rgba(255, 122, 69, 0.75),
    0 0 60px 10px rgba(255, 122, 69, 0.45),
    inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

/* ---------- L'ANELLO DI FUOCO DA TASTIERA ----------
   Il prezzo del bordo INSIDE, e va pagato qui.

   Il tratto del Figma occupa `outline`, che è **la stessa proprietà** con cui
   il browser disegna l'anello di chi naviga col tasto Tab: dichiarandola noi,
   quell'anello sparisce. Misurato il 2026-09-01: al fuoco restava soltanto
   l'opacità del filo che passa da 0,40 a 0,55 su una riga da un pixel dentro un
   pieno arancione — cioè niente. Era una regressione di accessibilità vera,
   introdotta insieme alla tecnica.

   La via d'uscita è disegnare l'anello con `box-shadow`, che a differenza di
   `outline` si **somma** a quello che c'è già invece di sostituirlo: le tre
   ombre del frame restano tutte, davanti a loro si aggiungono un cerchio bianco
   da 3px e altri 3px del fondo scuro, che lo staccano dall'alone arancione e lo
   rendono leggibile anche sopra il pulsante acceso.

   `:focus-visible` e non `:focus`: l'anello deve comparire per chi arriva da
   tastiera, non attorno al pulsante appena cliccato col mouse. La riga
   `:hover, :focus, :active` qui sopra ha la stessa specificità (0,3,0), quindi
   è l'ordine a decidere: questa regola va **dopo**, o l'anello non si vede.
   Vale anche sul telefono: le regole del blocco mobile sono (0,2,0) e non la
   battono — un pulsante raggiunto con una tastiera collegata resta segnato. */
.aef-past .aef-past__btn:focus-visible {
  box-shadow:
    0 0 0 3px #FFFFFF,
    0 0 0 6px #030F0F,
    0 0 26px 3px rgba(255, 122, 69, 0.75),
    0 0 60px 10px rgba(255, 122, 69, 0.45),
    inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

.aef-past__note {
  margin: 0;
  /* #C7D2CC, non #7A8A82: il frame la vuole chiara, non spenta. E 14/22, non
     13/1.5 — è anche quello che le dà i 256px di larghezza del frame. */
  color: #C7D2CC;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
}

/* ---------- Tablet ---------- */
@media (max-width: 1180px) {
  .aef-past__row { --aef-sfuma: 90px; }
}

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

  .aef-past__title {
    font-size: 20px;
    line-height: 27px;
    letter-spacing: -0.2px;
  }

  .aef-past__rows { gap: 20px; }

  /* Il respiro ai lati del binario è **mezzo stacco**: serve a far combaciare
     il punto in cui il giro si richiude. Con lo stacco a 10 vale 5, non i 13
     del desktop, che erano rimasti lì dal blocco di sopra e allargavano il
     binario di sedici pixel. */
  .aef-past__track {
    gap: 10px;
    padding: 0 5px;
  }

  .aef-past__card {
    flex-basis: 200px;
    width: 200px;
    border-radius: 14px;
  }

  .aef-past .aef-past__photo,
  .aef-past__placeholder { height: 150px; }

  .aef-past__placeholder { font-size: 34px; }

  /* Il riquadro dei nomi ha un respiro suo sul telefono: 12/12/16/12. */
  .aef-past__info { padding: 12px 12px 16px; }

  .aef-past__name {
    font-size: 12px;
    line-height: 16px;
  }
  .aef-past__role,
  .aef-past__company {
    font-size: 11px;
    line-height: 14px;
  }

  /* Sul telefono la fila è alta quanto il binario (226) e l'aria sta tutta
     sotto la seconda: 28px che allontanano la chiamata all'azione. */
  .aef-past__row {
    --aef-sfuma: 48px;
    padding: 0;
  }

  .aef-past__row + .aef-past__row { padding-bottom: 28px; }

  /* Nel frame telefono il blocco è a piena colonna fra i margini di 24 — 390−48
     = 342 — con 4px di stacco in più dalla seconda fila (il «cta-wrap» ha
     padding-top 4).
     **Il tetto di 342 non è un di più: senza, questo blocco era il difetto più
     grosso della sezione.** Prima qui c'era `align-self: stretch` più margini
     laterali di 24: a 390 dà esattamente i 342 del frame, ma cresce senza
     fermarsi. Misurato il 2026-09-01: a 480 il pulsante era largo 432, a 600
     552, a 767 **719** — una barra arancione da un bordo all'altro dove il
     disegno vuole una pillola. Nessuno l'aveva visto perché i frame sono due,
     390 e 1440, e fra 391 e 767 non guardava nessuno.
     `min()` tiene tutte e due le cose: sotto i 390 il blocco continua a
     respirare coi suoi 24 per lato, da 390 in su si ferma alla misura del
     frame. Tolto `align-self: stretch`, l'`align-items: center` della sezione
     lo rimette in mezzo. */
  .aef-past__cta {
    width: min(100% - 48px, 342px);
    margin-top: 4px;
  }

  .aef-past .aef-past__btn {
    align-self: stretch;
    padding: 16px 24px;
    font-size: 16px;
    line-height: 20px;
    /* Gli aloni del frame telefono sono più stretti: 16/1 e 36/5. */
    box-shadow:
      0 0 16px 1px rgba(255, 92, 31, 0.65),
      0 0 36px 5px rgba(255, 92, 31, 0.35),
      inset 0 1px 2px rgba(255, 255, 255, 0.28);
  }

  /* Anche la nota è a piena colonna, e la sua interlinea è 21 invece di 22. */
  .aef-past__note {
    align-self: stretch;
    line-height: 21px;
  }
}

/* A nastro fermo le schede vanno a capo, invece di restare tagliate */
@media (prefers-reduced-motion: reduce) {
  .aef-past__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 16px;
    padding: 0 24px;
  }
  .aef-past__track [data-clone="true"] { display: none; }
  .aef-past__row {
    overflow-x: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .aef-past__card { transition: none; }
}

/* Nastro liberato: animazione spenta, comanda la mano. Lo scorrimento è già
   possibile sul contenitore; qui si aggiunge solo l'aggancio delle schede. */
.aef-nastro-libero {
  scroll-snap-type: x proximity;
}

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

/* =========================================================================
   TELEFONO — lo scorrimento del browser resta spento

   ⚠️ LEGGERE PRIMA DI CITARE QUESTE RIGHE COME «IL DITO NON DEVE MUOVERE IL
   NASTRO». Non è più così, e il commento che stava qui lo faceva credere: il
   2026-09-01 un verificatore ci si è appoggiato per archiviare come «requisito
   del cliente» un difetto vero. Le due date, in ordine:

   - 2026-08-15, guardando le recensioni: su telefono i nastri devono scorrere
     sempre e il dito non li deve toccare. È la richiesta che ha messo qui
     queste due righe.
   - 2026-08-16, **il giorno dopo e solo per le file degli speaker** — cioè
     questa sezione e la gemella `.aef-past2`: il dito torna a muoverle, ma in
     **un verso solo**, quello in cui il nastro già va, e l'animazione **non si
     spegne mai**. Sta scritta in testa a nastri.js, e la scrive `unSensoSolo()`.

   Le due righe qui sotto restano identiche perché la richiesta del 16 ha
   bisogno esattamente di loro: `unSensoSolo()` funziona **soltanto** con lo
   scorrimento del browser spento — `touch-action: pan-y` lascia passare solo il
   gesto verticale della pagina, `overflow-x: hidden` toglie del tutto quello
   laterale — perché è l'unico modo di consentire un verso e negare l'altro. Il
   movimento poi lo scrive il codice, e un contenitore con `overflow: hidden` si
   sposta lo stesso quando glielo si ordina da `scrollLeft`.

   Quindi: il foglio di stile è a posto e non va toccato. Quello che oggi manca
   è l'aggancio, e sta altrove — nastri.js riga 332 chiama `unSensoSolo()` solo
   su `.aef-past2__row`, e questa fila finisce nel ramo generico della riga 342,
   che al tocco spegne l'animazione. Risultato in pagina: il dito non muove
   niente **e** il nastro si ferma per un secondo e mezzo, che è il contrario di
   tutte e due le richieste. Il misuratore lo segna, con la riga esatta.

   Sul computer non cambia niente: il trascinamento col mouse e il gesto
   laterale del trackpad restano.
   ========================================================================= */
@media (max-width: 767px) {
  .aef-past__row {
    overflow-x: hidden;
    touch-action: pan-y;
    cursor: default;

    /* Niente selezione del testo: il nastro non si può più toccare, quindi una
       pressione lunga non farebbe altro che tirare su le maniglie di selezione
       o il menu «Copia» sopra le schede. Chiesto dal cliente il 2026-08-15
       guardando le recensioni; vale per tutti e quattro i nastri, che su
       telefono si comportano ormai allo stesso modo.
       `touch-callout` è la riga che serve su iPhone: senza, la pressione lunga
       apre lo stesso il menu di sistema sulle immagini.
       Bastano qui: tutte e due si ereditano dai figli. Erano state scritte
       anche con `*`, ma così ci finiva pure `overflow-x: hidden`, che su ogni
       figlio taglia quello che sporge — ombre comprese. */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
}

/* L'anello di fuoco verde anche qui.
   Col Tab, le due file degli speaker mostravano l'anello azzurro di serie del browser mentre tutto
   il resto della pagina ne ha uno verde: otto fermate su cinquantaquattro
   stonavano. */
.aef-past__row, .aef-past__row2 {
}
.aef-past__row:focus-visible {
  outline: 3px solid #00E27B;
  outline-offset: 3px;
}