/* =========================================================================
   Alzati e Fattura — sezione 03 SPEAKER
   Desktop 1440×1637 · mobile 390×3283.
   Cinque schede: tre in alto, due centrate sotto. Su telefono una per riga.
   ========================================================================= */

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

.aef-speaker {
  --ink: #030F0F;
  --surface: #0B1D16;
  --deep: #0A3B26;
  --green: #00B865;
  --green-bright: #00E27B;
  --muted: #C7D2CC;

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  /* Contenuto tenuto a 1200px al centro: vedi mercato.css. Serve anche a
     mantenere tre schede per riga — senza, oltre i 1700px ne entrano quattro
     e la disposizione 3 + 2 del Figma salta. */
  padding: 96px max(120px, (100% - 1200px) / 2);
  background: var(--ink);
  overflow: hidden;
  font-family: 'Switzer', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------- L'effetto «matrix» sul fondo ----------
   Nel Figma è un frame «Number»: 28 colonne di cifre verdi, 510 in tutto, di
   cui 91 a opacità zero — sono i buchi che danno il ritmo della pioggia. Non
   sta al centro della sezione e non la riempie: occupa una **fascia in fondo**
   alta 454px (Number a +1183.6 su una sezione di 1637), e dentro quella fascia
   svanisce verso il basso in 463px. La sfumatura, nel file, è un rettangolo
   d'inchiostro sopra le cifre; qui è una maschera, che fa lo stesso lavoro
   senza dipendere dal colore del fondo.

   Fino al 2026-08-08 era una sola immagine `cover` con `blur(16px)`: la
   sfocatura sommata all'esportazione — che si portava dentro anche la
   sfumatura del Figma — riduceva tutto a una nebbia. Il cliente l'ha
   segnalato: «effetto matrix non si vede». Ora le cifre sono nitide come nel
   file, e l'asset (`numbers.svg`, rigenerabile con `scripts/matrix-svg.mjs`)
   non ha più la velatura cotta dentro. */
.aef-speaker::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 454px;
  z-index: -1;
  background-image: url('../img/speaker/numbers.svg');
  /* Misura naturale del Figma: le cifre restano alte 30px come nel file.
     Con `cover` su una sezione alta 1637px venivano ingrandite quasi al
     doppio e non si leggevano più come cifre. */
  background-size: 1463px 992px;
  background-repeat: no-repeat;
  /* Il frame parte da -12px su 1440: di fatto centrato. Così resta al centro
     anche sugli schermi larghi. */
  background-position: center top;
  opacity: .55;
  pointer-events: none;

  -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0) 463px);
  mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0) 463px);
}

/* ---------- Intestazione ----------
   Sta al centro sopra le schede, non appoggiata al bordo sinistro. */
.aef-speaker__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 683px;
  margin-inline: auto;
  text-align: center;
}

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

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

/* ---------- Griglia delle schede ----------
   Nel Figma sono tre sopra e due sotto, centrate: con flex-wrap e
   justify-content center la disposizione viene da sé, a qualsiasi larghezza. */
.aef-speaker__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  width: 100%;
}

/* Quattro relatori: in fila, non 3 + 1.
   La classe la mette il template quando le schede sono esattamente quattro,
   così le pagine con cinque — la landing biglietti e le due pagine pubbliche
   del cliente — restano 3 + 2 come sono sempre state.
   Numeri dal frame Partner: griglia 1200, spazio 20, scheda 285. */
@media (min-width: 1024px) {
  .aef-speaker__grid--quattro {
    gap: 20px;
  }
}

.aef-speaker__card {
  display: flex;
  flex-direction: column;
  /* Le foto sono ritagli su fondo trasparente: con `contain` restano 24px di
     vuoto per lato, mentre sopra la testa toccava il bordo della scheda.
     Misurato il 2026-08-08: 24px ai lati, 0 sopra. Questi 24px pareggiano i
     tre lati — la foto non cambia misura, cresce la scheda. */
  padding-top: 24px;
  /* Tre per riga a qualsiasi larghezza: la scheda si restringe invece di
     scendere a capo. Con larghezza fissa, su uno schermo da 1280 px le cinque
     schede si spezzavano in 2 + 2 + 1. Non cresce oltre i 368 px del Figma,
     così le due dell'ultima riga restano della stessa misura delle altre. */
  flex: 0 1 calc((100% - 48px) / 3);
  max-width: 368px;
  border: 1px solid var(--deep);
  /* la variante a quattro ridefinisce base e massimo poco più sotto */
  border-radius: 18px;
  background: var(--surface);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.8,.3,1), border-color .3s ease, box-shadow .3s ease;
}

/* Quattro schede in fila, **solo da 1024 px in su**.
   Sta DOPO `.aef-speaker__card` di proposito: a parità di peso del selettore
   decide l'ordine nel file, e questa deve poter scavalcare la base a tre
   colonne.
   La media query non è un dettaglio: due classi pesano più di una, quindi senza
   il limite questa regola vinceva anche dentro le media query di tablet e
   telefono, e a 390 px le quattro schede finivano in fila larghe **71 px**.
   Sotto i 1024 valgono le regole di sempre: due colonne, poi una. */
@media (min-width: 1024px) {
  .aef-speaker__grid--quattro .aef-speaker__card {
    flex: 0 1 calc((100% - 60px) / 4);
    max-width: 285px;
  }
}

.aef-speaker__card:hover {
  transform: translateY(-4px);
  border-color: var(--green);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

.aef-speaker .aef-speaker__photo {
  display: block;
  width: 100%;
  height: 343px;
  /* Le foto sono verticali (736×~790) dentro un riquadro orizzontale
     (368×343). Con `cover` venivano ingrandite fino a riempire la larghezza e
     il basso finiva fuori: si perdevano busto e mani. Con `contain` la sagoma
     si vede intera — resta alta 343 px come nel Figma, solo più stretta di una
     cinquantina di pixel, e il vuoto ai lati non si nota perché lo sfondo è
     trasparente. Stessa correzione già fatta sulle foto di «Cosa ottieni». */
  object-fit: contain;
  object-position: center bottom;
  /* Le foto sono ritagli con lo sfondo trasparente. Dietro ci andava un verde
     pieno, che annullava la trasparenza e lasciava vedere lo stacco con la
     scheda: sembravano fotografie rettangolari incollate sopra. Senza fondo,
     la sagoma poggia direttamente sulla scheda, com'era stata disegnata. */
  background: transparent;
}

.aef-speaker__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
}

.aef-speaker__name {
  margin: 0;
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.aef-speaker__role {
  margin: 0;
  color: var(--green-bright);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.5px;
}

.aef-speaker__bio {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.62;
}

/* Lo spazio fra un capoverso e l'altro della biografia. Stava nell'attributo
   `style` del capoverso, dove vinceva su qualunque foglio di stile e non si
   poteva togliere dove il Figma non lo vuole. */
.aef-speaker__bio p { margin: 0 0 .8em; }

/* ---------- Comparsa ---------- */
.aef-anima .aef-speaker .aef-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2,.8,.3,1);
}
.aef-speaker .aef-reveal.is-in { opacity: 1; transform: none; }
.aef-speaker__card:nth-child(2) { transition-delay: .07s }
.aef-speaker__card:nth-child(3) { transition-delay: .14s }
.aef-speaker__card:nth-child(4) { transition-delay: .21s }
.aef-speaker__card:nth-child(5) { transition-delay: .28s }

body.elementor-editor-active .aef-speaker .aef-reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- Tablet ---------- */
@media (max-width: 1180px) {
  .aef-speaker { padding: 72px 40px; }
  .aef-speaker__title { font-size: 34px; line-height: 40px; }
  .aef-speaker .aef-speaker__photo { height: 300px; }
}

/* Sotto i 1024 px tre schede sarebbero troppo strette: si passa a due,
   con le prime quattro appaiate e la quinta centrata sotto. */
@media (max-width: 1023px) {
  .aef-speaker__card {
    flex: 0 1 calc((100% - 24px) / 2);
    max-width: none;
  }
}

/* =========================================================================
   MOBILE — frame 390×3283: una scheda per riga
   ========================================================================= */
@media (max-width: 767px) {
  /* Margini e distanze del frame Figma mobile: 64 sopra e sotto, 24 fra
     intestazione e schede. Erano 56 e 28, scelti a mano. */
  .aef-speaker {
    gap: 24px;
    padding: 64px 24px;
  }

  /* Nel frame Figma mobile il matrix non c'è. Lo teniamo, ma più basso e più
     tenue: la sezione qui è lunghissima e il fondo non deve rubare
     leggibilità alle schede. */
  .aef-speaker::before {
    height: 320px;
    opacity: .34;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0) 330px);
    mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0) 330px);
  }

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

  .aef-speaker__title {
    font-size: 28px;
    line-height: 34px;
    letter-spacing: -0.3px;
  }

  .aef-speaker__grid { gap: 18px; }

  .aef-speaker__card {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .aef-speaker .aef-speaker__photo { height: 320px; }

  /* Su telefono le schede arrivano una alla volta: i ritardi a cascata
     farebbero aspettare l'ultima troppo a lungo. */
  .aef-speaker__card { transition-delay: 0s !important; }
}

/* =========================================================================
   VARIANTE «QUATTRO» — landing Partner
   Frame «Speaker» 1440×818 · «Speaker — mobile» 390×2228.
   Quattro relatori invece di cinque, e con loro cambia molto più della
   disposizione: il frame Partner ha tipografia, spazi e bordo tutti suoi.
   Tutto quello che sta qui dentro è chiuso a doppia mandata dalle due classi
   «--quattro», così le pagine a cinque schede — la landing biglietti e le due
   pagine pubbliche del cliente — non vengono sfiorate.
   ========================================================================= */

/* ---------- Il bordo è INSIDE ----------
   Nel Figma il filo da 1px sta **dentro** i 285 della scheda e non toglie
   spazio al contenuto: la fotografia è larga 285 piena e il testo 237.
   Con `border` il contenuto scende a 283 e il testo a 235: due pixel, che
   però bastano a mandare a capo l'ultima parola della biografia. Da lì la
   scheda cresceva di 11px e con lei tutta la sezione. `outline` con scarto
   negativo disegna lo stesso filo senza rubare quei due pixel. */
.aef-speaker__grid--quattro .aef-speaker__card {
  border: 0;
  outline: 1px solid var(--deep);
  outline-offset: -1px;
  /* La fotografia riempie il suo riquadro: il margine sopra serve alla landing
     biglietti, dove le foto sono ritagli su fondo trasparente. */
  padding-top: 0;
}

.aef-speaker__grid--quattro .aef-speaker__card:hover { outline-color: var(--green); }

/* Lo spazio sopra la cornice.
   La cornice verde che incornicia il ritratto **sta dentro la fotografia**: nel
   frame l'immagine è ritagliata e la cornice comincia a 22px dal bordo alto
   della scheda, da noi a 8, perché la mostriamo intera e appoggiata in basso.
   Misurato sui pixel del render contro i nostri. Quattordici pixel di rientro
   in cima rimettono la cornice dove il disegno la vuole, senza ritagliare il
   ritratto: l'immagine si rimpicciolisce di altrettanto e resta tutta visibile. */
@media (min-width: 768px) {
  .aef-speaker__grid--quattro .aef-speaker__photo { padding-top: 14px; }
}

/* Sul telefono il frame fa un'altra cosa: la fotografia parte **a filo** della
   scheda, larga 306 dentro i 342 — 18px per lato — e l'immagine è stirata del
   4% in altezza con un piccolo taglio sopra (scaleMode STRETCH, sy 1,044,
   oy −0,045). Il rientro da 14 del computer qui non c'entra: dava i 18 laterali
   per via traversa — rimpicciolendo il ritratto — e lo spostava in giù di 14.
   Qui i 18 sono dichiarati, e il ritratto riempie i 345 di altezza col taglio
   in cima, come nel disegno. */
@media (max-width: 767px) {
  .aef-speaker__grid--quattro .aef-speaker__photo {
    /* I 18 ai lati sono del frame (riquadro 306 dentro una scheda di 342).
       Il 12 in cima **no**: nel frame la fotografia parte a filo del bordo
       superiore, ma il cliente ha chiesto un po' d'aria sopra la testa
       (3 settembre, «leggermente più padding in alto, ma poco»). Il riquadro
       resta alto 345 — `box-sizing: border-box` —, quindi la scheda non
       cambia altezza e nessuna quota si sposta: con `contain` la sagoma si
       rimpicciolisce del 3,5% e, essendo ancorata in basso, lascia lo spazio
       in cima. */
    padding: 12px 18px 0;
    /* `contain`, non `cover`. Il frame stira il ritratto del 4% e con `cover`
       lo si imitava ritagliandolo di 7px per lato — a 390. Ma i telefoni non
       sono tutti 390: la scheda si stringe e l'altezza della foto resta 345,
       quindi `cover` ritagliava sempre di più — 14px per lato a 375, **42 a 320**,
       un settimo del ritratto. Le fotografie non si tagliano al restringersi
       della finestra: si mostrano intere, appoggiate in basso come sul
       computer, e la fascia che avanza sopra è la stessa aria che il computer
       ha per scelta. A 390 il ritratto rende comunque 306 di larghezza, cioè i
       18px per lato del frame. */
    object-fit: contain;
    object-position: 50% 100%;
  }
}

/* Il riquadro dei testi arriva in fondo alla scheda, com'è nel frame: lì è
   alto 192 su tutte e quattro, anche dove il testo ne riempie 166. Senza,
   resta un vuoto in fondo alla scheda invece che dentro il riquadro — non si
   vede, perché il fondo è lo stesso, ma le misure non tornano. */
.aef-speaker__grid--quattro .aef-speaker__info { flex: 1; }

/* ---------- Il fondo di cifre ----------
   Non c'è niente da ritarare, ed è una cosa che si scopre solo misurando.
   L'asset è **lo stesso** frame «Number» della landing biglietti: generato dai
   due file dà 419 cifre identiche, byte per byte. E anche la velatura del
   foglio di base — opacità .55, sfumatura su 463px — è già quella giusta:
   provate nove combinazioni e confrontato il solo fondo col PNG del frame
   (i pixel fuori dalle schede, per fasce da 40px), il minimo cade a .60/463px
   contro i .55/463px di adesso, e la differenza è dell'un percento: niente.
   Una taratura più «morbida» — .50 con sfumatura su 700px — sembrava migliore
   finché la metrica comprendeva anche le fotografie, e invece era peggiore:
   lasciava le cifre accese in fondo, dove nel frame sono del tutto spente. */

/* L'unica cosa che cambia davvero è **dove comincia** la fascia. Nel frame
   Partner il riquadro «Number» parte a 374 su una sezione alta 818; la fascia
   del foglio di base è alta 454 e, appoggiata in fondo, partirebbe a 364.
   Dieci pixel, che si vedono: nelle due fasce più alte le cifre sono un quarto
   più forti che nel frame, perché lì la velatura è appena cominciata.
   Resta uno scarto nelle due fasce alte — 98 e 88 contro 79 e 74 — e viene dal
   **profilo** della velatura, che nel file è un rettangolo d'inchiostro su
   tutti i 992px del riquadro mentre qui è una maschera su 463: dalla terza
   fascia in giù i due profili coincidono a meno di otto punti su 255. */
/* ---------- La sfocatura del fondo, che il frame dichiara e noi non avevamo ----------
   Il riquadro «Number» del frame porta un LAYER_BLUR **progressivo**: raggio 20
   in cima, zero al 70% dell'altezza. Nella parte che la sezione lascia vedere
   il raggio non scende mai sotto i 7px: le cifre nel disegno sono sempre
   morbide, e da noi erano nitide. A occhio la differenza era netta — nel frame
   le cifre si intuiscono, in pagina si leggono — mentre le misure sui picchi
   dicevano «1,4%»: contavano i pixel più luminosi, e l'occhio vede la media.
   Contati i pixel *accesi* fuori dalle schede, nel frame sono il doppio dei
   nostri ma ognuno più tenue: cifre diffuse, non cifre nette.
   Un blur uniforme non è un blur progressivo, ma è quel che il CSS sa fare
   senza un secondo elemento. Il valore l'hanno scelto due griglie di prove
   misurate contro il render — media, mediana, decimo più luminoso, massimo e
   numero di pixel accesi — partendo da uno scarto relativo medio di 0,310:
   blur 6px con opacità .85 lo porta a 0,060. Sei è il raggio minimo che il
   frame dichiara nella zona visibile, arrotondato: sotto, la misura migliorava
   ancora ma si tradiva il meccanismo del disegno. */
.aef-speaker--quattro::before {
  height: 444px;
  filter: blur(6px);
  opacity: .85;
}

/* Il frame del telefono **non ha** il fondo di cifre: la sezione mobile ha
   solo il titolo e le quattro schede. Il foglio di base lo tiene «più basso e
   più tenue» per la landing biglietti, dove è una scelta di quella pagina; qui
   segue il disegno e si spegne. */
@media (max-width: 767px) {
  .aef-speaker--quattro::before { display: none; }
}

/* Sotto l'ultimo capoverso il frame Partner non lascia spazio: quei dieci
   pixel per scheda sono gli undici che la sezione aveva di troppo. */
.aef-speaker__grid--quattro .aef-speaker__bio p:last-child { margin-bottom: 0; }

/* ---------- Tipografia del frame desktop ----------
   Interlinee dichiarate in pixel, come nel file: 26 e 16, non 1,25 e 1,4 del
   foglio di base che davano 25 e 16,8. */
@media (min-width: 768px) {
  .aef-speaker__grid--quattro .aef-speaker__name { line-height: 26px; }
  .aef-speaker__grid--quattro .aef-speaker__role { line-height: 16px; }
  .aef-speaker__grid--quattro .aef-speaker__bio  { line-height: 20px; }
}

/* ---------- Il frame mobile ha valori suoi ----------
   390×2228: corpi più piccoli, spazi più stretti, ruolo in semigrassetto.
   Le misure che il pannello di Elementor governa — altezza delle foto e
   spazio dell'intestazione — non stanno qui ma nei controlli, che ora
   accettano un valore per il telefono. */
@media (max-width: 767px) {
  /* Sul telefono l'intestazione è **allineata a sinistra** e larga quanto la
     colonna: nel frame occhiello e titolo partono entrambi dal margine, a 24.
     Sul desktop invece è centrata, e resta com'era. */
  .aef-speaker--quattro .aef-speaker__head {
    align-items: flex-start;
    text-align: left;
    max-width: none;
    width: 100%;
    margin-inline: 0;
  }

  .aef-speaker--quattro .aef-speaker__eyebrow {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 2px;
  }

  .aef-speaker--quattro .aef-speaker__title {
    font-size: 28px;
    line-height: 34px;
    letter-spacing: -0.3px;
  }

  .aef-speaker__grid--quattro { gap: 24px; }

  .aef-speaker__grid--quattro .aef-speaker__info {
    padding: 18px 20px 20px;
    gap: 6px;
  }

  .aef-speaker__grid--quattro .aef-speaker__name { font-size: 19px; line-height: 24px; }

  .aef-speaker__grid--quattro .aef-speaker__role {
    font-size: 11px;
    line-height: 15px;
    font-weight: 600;
    letter-spacing: 1px;
  }

  .aef-speaker__grid--quattro .aef-speaker__bio { font-size: 13px; line-height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .aef-speaker .aef-reveal { opacity: 1; transform: none; transition: none; }
  .aef-speaker__card { transition: none; }
}