/* =========================================================================
   Alzati e Fattura — sezione 09 EDIZIONI PASSATE
   Desktop 1440×1006 · mobile 390×952.
   Galleria a sinistra, argomenti a destra.
   ========================================================================= */

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

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

  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
  /* Contenuto tenuto a 1200px al centro: vedi mercato.css */
  padding: 96px max(120px, (100% - 1200px) / 2);
  background: var(--ink);
  overflow: hidden;
  font-family: 'Switzer', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Stesso «matrix» della sezione Speaker — vedi speaker.css per il perché
   della fascia in fondo e della maschera.
   Qui però il Figma non lo mette al centro: il frame parte a **+558px** su
   1440, cioè sotto la colonna degli argomenti, a destra. È esattamente il
   punto che il cliente ha cerchiato dicendo che l'effetto non si vedeva.
   558 = metà sezione − 162: così resta agganciato al contenuto anche sugli
   schermi più larghi. */
/* Lo scostamento sta nel riquadro, non in `background-position`: una
   percentuale dentro `background-position` non si conta sul contenitore ma su
   «contenitore meno immagine», quindi `calc(50% - 162px)` con un'immagine da
   1463px finiva a −173px e le cifre spuntavano dal bordo sinistro. Misurato
   il 2026-08-09 guardando la sezione, non il foglio di stile. */
.aef-edizioni::before {
  content: '';
  position: absolute;
  left: calc(50% - 162px);
  right: 0;
  bottom: 0;
  height: 462px;
  z-index: -1;
  background-image: url('../img/speaker/numbers.svg');
  background-size: 1463px 992px;
  background-repeat: no-repeat;
  background-position: left top;
  opacity: .5;
  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);
}

/* ---------- Galleria ---------- */
.aef-edizioni__gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  flex: 0 1 560px;
}

.aef-edizioni .aef-edizioni__photo {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  /* Dove guardare dentro la foto: lo dice il template, foto per foto, perché
     il Figma ne ritaglia due in modo diverso dalle altre. Senza, le due della
     colonna di sinistra restavano centrate e alle persone si tagliava la
     testa — segnalato dal cliente l'11 agosto. */
  object-position: center var(--aef-foto-y, 50%);
  border-radius: 4px;
  transition: transform .35s cubic-bezier(.2,.8,.3,1), filter .35s ease;
}

.aef-edizioni .aef-edizioni__photo:hover {
  transform: scale(1.03);
  filter: brightness(1.08);
}

/* ---------- Colonna testi ---------- */
.aef-edizioni__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 0 1 576px;
}

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

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

/* ---------- Argomenti ---------- */
.aef-edizioni__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aef-edizioni__tag {
  padding: 10px 18px;
  border: 1px solid rgba(0, 226, 123, 0.30);
  border-radius: 4px;
  /* Fondo quasi pieno, non un velo. Dietro questi riquadri passa l'effetto
     matrix, e con il 10% di verde trasparente le cifre si vedevano **dentro**
     il testo: segnalato dal cliente l'11 agosto. Il colore è il verde scuro
     della sezione con un soffio di verde sopra, così la pastiglia si stacca
     dal fondo senza cambiare carattere. */
  background: rgba(6, 32, 22, 0.92);
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.aef-edizioni__tag:hover {
  background: rgba(0, 226, 123, 0.18);
  border-color: rgba(0, 226, 123, 0.5);
  color: #FFFFFF;
}

/* ---------- Comparsa ---------- */
.aef-anima .aef-edizioni .aef-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2,.8,.3,1);
}
.aef-edizioni .aef-reveal.is-in { opacity: 1; transform: none; }
.aef-edizioni__head { transition-delay: .1s }

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

/* ---------- Tablet ---------- */
@media (max-width: 1180px) {
  .aef-edizioni { gap: 40px; padding: 72px 40px; }
  .aef-edizioni__title { font-size: 32px; line-height: 38px; }
  .aef-edizioni .aef-edizioni__photo { height: 150px; }
}

/* =========================================================================
   MOBILE — frame 390×952: testi sopra, galleria sotto
   ========================================================================= */
@media (max-width: 767px) {
  .aef-edizioni {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 64px 24px;
  }

  /* Ordine voluto su telefono: occhiello, titolo, FOTO, poi gli argomenti.
     La colonna dei testi sparisce come contenitore (display: contents) e i
     suoi tre pezzi diventano fratelli della galleria: così si possono
     riordinare senza spostare niente nel markup, che resta quello buono per
     chi legge la pagina con uno screen reader. */
  .aef-edizioni__head { display: contents; }

  .aef-edizioni__eyebrow { order: 1; }
  .aef-edizioni__title   { order: 2; }
  .aef-edizioni__gallery { order: 3; }
  .aef-edizioni__tags    { order: 4; }

  .aef-edizioni__gallery { flex: 1 1 auto; width: 100%; }

  .aef-edizioni__gallery { gap: 12px; }
  .aef-edizioni .aef-edizioni__photo { height: 120px; }

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

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

  .aef-edizioni__tags { gap: 8px; }

  .aef-edizioni__tag {
    padding: 8px 14px;
    font-size: 12.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aef-edizioni .aef-reveal { opacity: 1; transform: none; transition: none; }
  .aef-edizioni .aef-edizioni__photo,
  .aef-edizioni__tag { transition: none; }
}