/* =========================================================================
   Alzati e Fattura — sezione P05 PARTNER EDIZIONI PRECEDENTI · landing Partner
   Frame «Partner edizioni precedenti» 1440×1591 · mobile 390×1327.
   Le distanze del frame tornano esatte: 130 + 134 + 48 + 223 + 48 + 72 + 48 +
   758 + 130 = 1591.
   ========================================================================= */

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

.aef-partner {
  --ink: #030F0F;
  --green-bright: #00E27B;
  --muted: #C7D2CC;

  display: flex;
  flex-direction: column;
  align-items: center;
  /* Il frame non ha margini laterali sulla sezione: li mettono i blocchi,
     perché il nastro deve poter uscire dallo schermo. */
  gap: 48px;
  padding: 130px 0;
  background: var(--ink);
  font-family: 'Switzer', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------- Intestazione ----------
   Nel frame desktop occhiello e titolo sono **centrati** (textAlignHorizontal
   CENTER su tutti e due); nel frame del telefono sono a sinistra. Il blocco
   resta largo 1240: cambia solo dove si posa il testo dentro. */
.aef-partner__head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 1440px;
  padding: 0 100px;
  text-align: center;
}

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

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

/* ---------- La griglia dei sei loghi grandi ----------
   Le linee non sono bordi. Nel frame il contenitore è bianco al 40% e i sei
   riquadri lo coprono lasciando scoperto un filo da 1px: con i bordi, agli
   incroci si sarebbero sommati e sarebbero usciti spessi il doppio. */
.aef-partner__griglia {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  width: 100%;
  max-width: 1240px;
  padding: 1px;
  background: rgba(255, 255, 255, 0.4);
}

.aef-partner__box {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 412×110 nel frame: 1240 meno i fili, diviso tre. */
  height: 110px;
  background: var(--ink);
}

/* Due classi, non una: Elementor porta le immagini a `height: auto` con un
   selettore che batte quello semplice, e i loghi uscivano alla misura naturale
   del file — 84px invece di 42. È la specificità già documentata nel progetto
   (errore 32), e vale per **tutte** le immagini della sezione, non solo per
   quella con cui è saltata fuori: vedi anche `.aef-partner__foto`. */
/* `--aef-logo-h` è l'altezza del frame desktop e arriva dal pannello, inline.
   `--aef-logo-f` è il fattore con cui la si riduce sul telefono: vale 1 qui e
   0,62 sotto i 767px, tranne per i quattro loghi del nastro che nel frame
   mobile scendono più degli altri (vedi la media query in fondo). Tenerli
   separati serve perché l'altezza inline non si può ridefinire dal foglio: si
   può solo moltiplicare. */
.aef-partner .aef-partner__logo {
  flex: 0 0 auto;
  height: calc(var(--aef-logo-h, 42px) * var(--aef-logo-f, 1));
  width: auto;
  display: block;
}

/* ---------- Il nastro dei tredici loghi ----------
   Stessa impalcatura di `press`: la fila è stampata due volte e il giro si
   chiude a metà corsa. Lo scorrimento a mano lo gestisce `nastri.js`, che va
   avvisato dell'esistenza di questo nastro (vedi l'elenco in cima al file). */
.aef-partner__marquee {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* Le due sfumature del frame sono larghe 180 su 1440, cioè il 12,5%. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12.5%, #000 87.5%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12.5%, #000 87.5%, transparent);
}

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

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

.aef-partner__track {
  display: flex;
  align-items: center;
  /* Spazio fra un logo e l'altro: 72 nel frame. */
  gap: 72px;
  width: max-content;
  height: 72px;
  /* IL GIRO SI CHIUDE QUI, e senza questo riempimento non si chiudeva.
     La fila è stampata due volte: ventisei loghi separati da venticinque
     spazi. Metà di quella larghezza vale un passo di fila MENO mezzo spazio,
     e l'animazione — che tira fino a -50% — ogni giro tornava indietro di 36px
     in meno del dovuto: uno scatto visibile una volta ogni 46 secondi.
     Il riempimento a destra aggiunge il ventiseiesimo spazio, così metà
     larghezza è esattamente il passo della fila. Serve anche a `nastri.js`,
     che riavvolge lo scorrimento a mano su `scrollWidth / 2`: stessa metà,
     stesso errore, corretto dalla stessa riga. */
  padding-right: 72px;
  animation: aef-partner-scroll var(--aef-partner-speed, 46s) linear infinite;
}

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

@media (hover: hover) {
  .aef-partner__marquee:hover .aef-partner__track { animation-play-state: paused; }
}

/* ---------- Le fotografie degli stand ---------- */
.aef-partner__stand {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
  max-width: 1440px;
  padding: 0 100px;
}

.aef-partner .aef-partner__foto {
  width: 100%;
  /* 295×369 nel frame. Il rapporto tiene anche quando la colonna si stringe,
     così le due righe restano alte uguali. */
  aspect-ratio: 295 / 369;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

/* ---------- Comparsa allo scorrimento ---------- */
.aef-anima .aef-partner .aef-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1);
}
.aef-partner .aef-reveal.is-in { opacity: 1; transform: none; }

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

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .aef-partner { padding: 90px 0; gap: 36px; }
  .aef-partner__head,
  .aef-partner__stand { padding: 0 40px; }
  .aef-partner__title { font-size: 34px; line-height: 40px; }
  .aef-partner__stand { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
   MOBILE — frame «Partner edizioni precedenti — mobile» 390×1327
   ========================================================================= */
@media (max-width: 767px) {
  /* Nel frame mobile la sezione **non ha margine sopra** — attacca direttamente
     a quella prima — e ne ha 72 sotto. Il conto torna:
     130 + 28 + 131 + 28 + 50 + 28 + 860 + 72 = 1327. */
  .aef-partner { padding: 0 0 72px; gap: 28px; }

  .aef-partner__head,
  .aef-partner__stand { padding: 0 24px; }

  /* Sul telefono i due testi tornano a sinistra: è il frame mobile a dirlo
     (textAlignHorizontal LEFT), mentre sul desktop sono centrati. */
  .aef-partner__head { gap: 12px; text-align: left; }
  .aef-partner__eyebrow { font-size: 12px; line-height: 16px; letter-spacing: 2px; }
  /* La spaziatura fra le lettere del titolo cambia insieme al corpo: -0,3 sul
     telefono contro -0,5 del desktop. Prima non veniva ridefinita e restava
     quella grande. */
  .aef-partner__title { font-size: 28px; line-height: 34px; letter-spacing: -0.3px; }

  /* Il titolo del pannello porta un ritorno a capo dopo «italiano»: sul
     desktop è voluto (nel frame c'è il separatore U+2028 nello stesso punto),
     sul telefono no — lì il frame lascia scorrere il testo e spezza da solo in
     «Le aziende che dominano / il mercato italiano ci / hanno già scelti».
     Spegnendo il <br> il telefono torna a spezzare negli stessi punti.
     Il testo è uno solo per tutte e due le larghezze, quindi il tag resta nel
     documento anche qui: chi conta i <br> invece delle righe rese continuerà a
     vederne uno. Toglierlo davvero vorrebbe dire due titoli diversi dal
     pannello, che è una decisione del build, non del foglio di stile. */
  .aef-partner__title br { display: none; }

  /* Le colonne restano **tre** anche sul telefono: nel frame i riquadri sono
     113×64, non due per riga come avevo supposto. */
  .aef-partner__griglia { max-width: 342px; }
  .aef-partner__box { height: 64px; }

  /* Quasi tutti i loghi scendono dello stesso fattore — 58→36, 42→26, 50→31
     nel frame, cioè 0,62. */
  .aef-partner .aef-partner__logo { --aef-logo-f: 0.62; }

  /* Il limite di larghezza serve **solo** ai sei loghi della griglia, che
     stanno dentro un riquadro di 112,67: sul nastro non c'è niente da tenere
     dentro e lì faceva solo danni.
     Ed è 100%, non 88%. L'88 mordeva Millionaire — il suo file ha proporzione
     4,0 contro il 3,52 del frame — e quando `max-width` morde, `object-fit:
     contain` lascia due strisce vuote sopra e sotto: la scatola restava alta
     26,03 e il marchio ne era disegnato 24,78, un'altezza che nessun
     `getBoundingClientRect` racconta. Nessuno dei sei arriva a 112,67 nemmeno
     con le altezze giuste (il più largo è Millionaire a 94), quindi il limite
     resta come rete e non tocca più nessuno. `contain` resta perché il giorno
     in cui mordesse è meglio una striscia vuota di un marchio schiacciato. */
  .aef-partner .aef-partner__box .aef-partner__logo {
    max-width: 100%;
    object-fit: contain;
  }

  /* I quattro che nel frame mobile scendono più degli altri. Non è una scelta
     di impaginazione da uniformare: nel frame Imprefocus e Reting sono 22 (da
     42), MyFoglio 18 (da 32), Certitude 16 (da 28). Il fattore lo si scrive
     come rapporto fra le due altezze del frame, così si legge da dove viene.
     Si sceglie il logo dal nome del file e non dalla posizione: se domani il
     nastro cambia ordine, questi restano attaccati al marchio giusto. */
  .aef-partner .aef-partner__logo[src*="logo-imprefocus"] { --aef-logo-f: calc(22 / 42); }
  .aef-partner .aef-partner__logo[src*="logo-reting"]     { --aef-logo-f: calc(22 / 42); }
  .aef-partner .aef-partner__logo[src*="logo-myfoglio"]   { --aef-logo-f: calc(18 / 32); }
  .aef-partner .aef-partner__logo[src*="logo-certitude"]  { --aef-logo-f: calc(16 / 28); }

  /* Nastro: nel frame è alto 36 con 32 di spazio fra un logo e l'altro.
     Il riempimento a destra è il ventiseiesimo spazio: vedi il commento sul
     desktop, senza di quello il giro scatta indietro di 16px. */
  .aef-partner__track { gap: 32px; height: 50px; padding-right: 32px; }

  /* Le due sfumature del nastro nel frame mobile sono 60 su 390, cioè il
     15,38%: la percentuale del desktop (12,5%, che erano 180 su 1440) qui
     darebbe 48,75. */
  .aef-partner__marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 15.3846%, #000 84.6154%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 15.3846%, #000 84.6154%, transparent);
  }

  /* Stand: 165×206, due per riga con 12 di spazio. */
  .aef-partner__stand { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ---------- Chi ha spento le animazioni ----------
   Il nastro si ferma e la copia sparisce: due volte gli stessi loghi, fermi,
   sarebbero solo una fila doppia senza senso. */
@media (prefers-reduced-motion: reduce) {
  /* Senza animazione e senza copia il riempimento a destra non chiude nessun
     giro: sarebbe solo un tratto vuoto da scorrere in fondo alla fila. */
  .aef-partner__track { animation: none; padding-right: 0; }
  .aef-partner__track [data-clone="true"] { display: none; }
  .aef-partner .aef-reveal { opacity: 1; transform: none; transition: none; }
}

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