/* ==========================================================================
   ESTRIA — Pagina Metodo
   Figma: metodo-1 (desktop 1512) / m-metodo-1 (mobile 393)
   1) Hero grigio con asterisco arancio (Modulo Cover-1, immagine FIT)
   2) Tre fasi numerate su nero (Moduli 1.1): colonna titolo 668px +
      colonna testo 724px separate da una riga verticale #595959 con
      tacca arancio 3x60 in cima
   3) CTA centrale arancio
   4) "Le persone al centro" (Modulo 3.1, cerchi grigi, immagine FIT)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero — navbar (70px) + modulo alto quanto il resto del viewport;
   l'asterisco è l'immagine di sfondo del modulo (contain, centrata)
   -------------------------------------------------------------------------- */

.metodo-hero {
  display: flex;
  flex-direction: column;
  min-height: 902px; /* 70 navbar + 832 modulo Cover, come da Figma */
  padding-top: 70px;
}

.metodo-hero__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 60px;
  text-align: center;
  position: relative;
  /* Debug 07/2026-6: la grafica di cover resta nei margini del modulo */
  overflow: hidden;
  overflow: clip;
}

.metodo-hero__inner > :not(.hero-anim) {
  position: relative;
  z-index: 1;
}

/* CTA L-1 a larghezza fissa 465px come in Figma */
.metodo-hero .btn,
.metodo-steps__cta .btn,
.metodo-manifesto .btn {
  width: 465px;
  max-width: 100%;
}

/* Varianti testo desktop/mobile (Figma usa copy diverse sui due frame) */
.metodo-hero__cta-mobile {
  display: none;
}

/* --------------------------------------------------------------------------
   2. Le tre fasi (Frame 105: pad verticale 60, gap 60 con la CTA)
   -------------------------------------------------------------------------- */

.metodo-steps {
  padding-block: 60px;
}

/* Modulo 1.1: due colonne 668/724 con gutter 60, pad laterale 30 */
.metodo-step {
  display: grid;
  grid-template-columns: minmax(0, 668fr) minmax(0, 724fr);
  column-gap: 60px;
  padding-inline: 30px;
}

/* Colonna titolo: numero + nome affiancati, allineati in alto */
.metodo-step__head {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding-top: 60px;
}

/* NUM — DM Mono 300 40/40 ls 0.05em (nessuna classe condivisa) */
.metodo-step__num {
  font-family: var(--font-mono);
  font-size: 40px;
  font-weight: 300;
  line-height: 40px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--grigio-1);
}

.metodo-step__nome {
  color: var(--arancio-1);
}

/* Colonna testo: progress bar verticale a sinistra (i moduli si toccano,
   quindi i bordi formano una linea continua). Debug 07/2026: spessore 3px
   in #595959, senza più la tacca arancio a inizio slide. */
.metodo-step__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 90px 0 90px 30px;
  border-left: 3px solid var(--grigio-1);
}

.metodo-step__sub {
  color: var(--grigio-3);
}

/* Paragrafi grigi, colonna 464px, spaziatura paragrafo 13px (Figma) */
.metodo-step__text {
  display: flex;
  flex-direction: column;
  gap: 13px;
  max-width: 464px;
  color: var(--grigio-2);
  line-height: 20px;
}

/* Elenco metriche del modulo 03: righe compatte con puntino */
.metodo-step__metrics li {
  position: relative;
  padding-left: 23px;
}

.metodo-step__metrics li::before {
  content: "\2022";
  position: absolute;
  left: 10px;
  top: 0;
  font-size: 11px;
  line-height: 20px;
}

/* Blocco punti: etichetta con icona + righe con freccia, gap 15 */
.metodo-step__points {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 447px;
}

.metodo-step__points-label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--grigio-3);
}

.metodo-step__points-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.metodo-step__points-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--grigio-3);
  line-height: 20px;
}

/* CTA centrale arancio */
.metodo-steps__cta {
  display: flex;
  justify-content: center;
  margin-top: 60px;
  padding-inline: 30px;
}

/* --------------------------------------------------------------------------
   3. Le persone al centro (Frame 91: pad 120/30, modulo 750px con i
   cerchi grigi come immagine di sfondo contain)
   -------------------------------------------------------------------------- */

.metodo-manifesto {
  padding: 120px 30px;
}

.metodo-manifesto__module {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 60px;
  min-height: 750px;
  text-align: center;
  background: url("../../assets/img/figma/991421951789ba7ae5958e81eae123d2f8b46d09.png") center / contain no-repeat;
}

.metodo-manifesto__text {
  max-width: 461px;
  color: var(--grigio-2);
  line-height: 20px;
}

/* --------------------------------------------------------------------------
   Mobile (m-metodo-1: 393px, pad laterale 15) — moduli impilati con la
   riga verticale a sinistra; immagini di sfondo dedicate (FILL → cover)
   -------------------------------------------------------------------------- */

@media (max-width: 1024px), (hover: none) and (pointer: coarse) and (max-width: 1400px) {
  /* Hero: copy ridotta, immagine mobile a copertura, gap 30 */
  .metodo-hero__nostro,
  .metodo-hero__cta-desktop {
    display: none;
  }

  .metodo-hero__cta-mobile {
    display: inline;
  }

  .metodo-hero {
    min-height: 752px; /* modulo Cover-1-M */
  }

  /* Debug 07/2026 mobile: grafica animata dedicata (hero-anim--mobile,
     crop scale 1.95 come da riferimento Metodo-1-M) al posto del PNG */
  .metodo-hero__inner {
    gap: 30px;
  }

  .metodo-hero .hero-anim--mobile svg {
    transform: scale(1.95);
  }

  .metodo-hero .btn,
  .metodo-steps__cta .btn,
  .metodo-manifesto .btn {
    width: 100%;
  }

  /* Moduli 1.1-M: colonna unica. Debug 07/2026 mobile: progress bar unica
     e continua — un binario 3px sul modulo intero (testata + testi), senza
     interruzioni tra una fase e l'altra (i .metodo-step si toccano) e
     senza più il segnaposto arancio in cima. Il riempimento arancio è in
     animations.css §6. */
  .metodo-step {
    display: block;
    position: relative;
    padding-inline: 15px;
  }

  .metodo-step::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 15px;
    width: 3px;
    background: var(--grigio-1);
  }

  .metodo-step__head {
    flex-direction: column;
    gap: 15px;
    padding: 60px 0 0 30px;
    border-left: 0;
  }

  .metodo-step__body {
    padding: 30px 0 60px 30px;
    border-left: 0;
  }

  /* Sottotitolo mobile: Questrial 25/28 (il t-3 responsive è 28/32) */
  .metodo-step__sub {
    font-size: 25px;
    line-height: 28px;
  }

  .metodo-step__text,
  .metodo-step__points {
    max-width: none;
  }

  .metodo-steps__cta {
    margin-top: 60px;
    padding-inline: 15px;
  }

  /* Le persone al centro: modulo full-bleed con pad interno 120/15 */
  .metodo-manifesto {
    padding: 0;
  }

  .metodo-manifesto__module {
    gap: 30px;
    min-height: 650px;
    padding: 120px 15px;
    /* Debug 07/2026-5: niente grafica di background su mobile
       (su desktop restano i cerchi, regola base del modulo) */
    background-image: none;
  }
}