/* =========================================================================
   Alzati e Fattura — sezione 04b SPEAKER SCORSE EDIZIONI (schede grafiche)

   Le schede sono le immagini fornite dal cliente il 2026-08-04: quadrate, con
   foto, logo, nome e ruolo già dentro. Qui non c'è niente da comporre — solo
   da far scorrere bene.

   Convive con la sezione 04 senza toccarla: classi proprie, foglio proprio.
   ========================================================================= */

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

.aef-past2 {
  --ink: #030F0F;
  --green-bright: #00E27B;
  --orange: #FF5C1F;

  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-past2__title {
  margin: 0;
  max-width: 640px;
  padding: 0 24px;
  color: #FFFFFF;
  font-size: 26px;
  font-weight: 700;
  line-height: 32px;
  text-align: center;
  text-wrap: balance;
}

/* ---------- I due nastri ---------- */
.aef-past2__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). La dissolvenza ai lati è una maschera e non due
   riquadri in posizione assoluta — dentro un contenitore che scorre quelli
   scivolerebbero via insieme alle schede. */
.aef-past2__row {
  --aef-sfuma: 160px;

  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-past2__row::-webkit-scrollbar { display: none; }

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

.aef-past2__track {
  display: flex;
  gap: 20px;
  width: max-content;
  padding: 0 10px;
  animation: aef-past2-left var(--aef-past2-speed, 90s) linear infinite;
}

/* La seconda fila va nel verso opposto */
.aef-past2__row--rtl .aef-past2__track {
  animation-name: aef-past2-right;
}

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

@keyframes aef-past2-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-past2__row:hover .aef-past2__track { animation-play-state: paused; }
}

/* ---------- La scheda ----------
   Due classi nel selettore, non una: `.elementor img { height: auto }` batte
   qualunque selettore a classe singola, ed è la trappola che su questo
   progetto è già costata sei immagini con l'altezza sbagliata. */
.aef-past2 .aef-past2__card {
  display: block;
  /* 360 invece di 288: un quarto in più, chiesto dal cliente l'11 agosto —
     alla misura del Figma il nome e il ruolo stampati dentro l'immagine si
     leggevano a fatica. Cresce la scheda, non l'immagine: sono file quadrati
     e restano nitidi. */
  flex: 0 0 360px;
  width: 360px;
  height: 360px;
  border-radius: 18px;
  object-fit: cover;
  background: #0B1D16;
  transition: transform .3s cubic-bezier(.2,.8,.3,1);
}

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

/* ---------- Chiamata all'azione ---------- */
.aef-past2__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
}

.aef-past2__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 36px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  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;
  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-past2__btn,
.aef-past2__btn:link,
.aef-past2__btn:visited { color: #030F0F; }

.aef-past2__btn:hover,
.aef-past2__btn:focus,
.aef-past2__btn:active {
  transform: translateY(-2px);
  border-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);
}

.aef-past2__note {
  margin: 0;
  color: #7A8A82;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

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

/* =========================================================================
   MOBILE
   ========================================================================= */
@media (max-width: 767px) {
  .aef-past2 {
    gap: 20px;
    padding: 64px 0;
  }

  .aef-past2__title {
    font-size: 20px;
    line-height: 26px;
  }

  .aef-past2__rows { gap: 12px; }

  .aef-past2__track { gap: 12px; }

  .aef-past2 .aef-past2__card {
    /* Anche su telefono un quarto in più: 210 → 262 */
    flex-basis: 262px;
    width: 262px;
    height: 262px;
    border-radius: 14px;
  }

  .aef-past2__row { --aef-sfuma: 48px; }

  .aef-past2__btn {
    padding: 16px 30px;
    font-size: 16px;
    line-height: 20px;
  }
}

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

/* Nastro liberato: animazione spenta, comanda la mano (vedi nastri.js) */
.aef-nastro-libero {
  scroll-snap-type: x proximity;
}

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

/* =========================================================================
   TELEFONO — il nastro non si tocca più con il dito

   Chiesto dal cliente il 2026-08-15: su telefono deve restare **solo** lo
   scorrimento automatico. Il dito non lo muove e non lo ferma.

   Servono tutte e due le righe: `touch-action` impedisce al dito di trascinare,
   `overflow-x: hidden` toglie proprio la possibilità di scorrere — senza la
   seconda, un gesto molto ampio riuscirebbe ancora a spostarlo.

   Sul computer non cambia niente: il trascinamento col mouse e il gesto
   laterale del trackpad restano.
   ========================================================================= */
@media (max-width: 767px) {
  .aef-past2__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;
  }
}