/* ==========================================================================
   ESTRIA — Pagina Manifesto
   Figma: manifesto-1 (desktop 1512) / m-manifesto-1 (mobile 393)
   5 principi su fondo nero: Modulo <Property 1=8> largo 711px centrato,
   numero arancio DM Mono 108px + titolo Questrial 66px con icona 60px
   inline nel flusso del testo (Tool-2, Search-1, Espandi-1, Cuore-1,
   Infinito-1).
   ========================================================================== */

/* Sezione nera a tutta pagina: parte sotto la navbar fissa.
   Primo modulo a 190px dal top (70px navbar + 120px padding Figma). */
.manifesto {
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding-top: 190px;
  padding-bottom: 120px;
  background: var(--black);
  color: var(--grigio-3);
}

/* Modulo 8: colonna centrata, 711px, gap 30 tra numero e testo */
.manifesto-item {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  max-width: 711px;
  margin-inline: auto;
  text-align: center;
}

/* Numero arancio — DM Mono 300 108/108 (nessuna classe condivisa) */
.manifesto-item__num {
  font-family: var(--font-mono);
  font-size: 108px;
  font-weight: 300;
  line-height: 108px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--arancio-1);
}

/* Icona decorativa 60px inline nel testo (in Figma occupa il vuoto
   lasciato dagli spazi multipli tra le due frasi) */
.manifesto-item__text .icon {
  width: 60px;
  height: 60px;
  margin-inline: 6px;
  vertical-align: middle;
}

/* CTA navbar: su questa pagina Figma la mostra arancione con testo nero
   (variante Default-White-1). Override locale: components.css non prevede
   una CTA arancio per la navbar on-dark.
   Debug 0812c: il riempimento dell'hover era nero, ora è #595959 (grigio-1)
   come chiesto in lista debug — cioè quello di .btn::before, per cui qui
   l'override non serve più ed è stato tolto. */
.navbar--on-dark .navbar__cta {
  background: var(--arancio-1);
  color: var(--black);
}

@media (hover: hover) {
  .navbar--on-dark .navbar__cta:hover {
    color: var(--grigio-3);
  }
}

.navbar--on-dark .navbar__cta:active {
  color: var(--grigio-3);
}

/* Mobile (m-manifesto-1: 393px, Modulo 8-M) ------------------------------- */

@media (max-width: 1024px), (hover: none) and (pointer: coarse) and (max-width: 1400px) {
  .manifesto {
    padding-top: 310px; /* 70px navbar + 240px padding Figma */
    padding-bottom: 60px;
  }

  /* Numero: DM Mono 300 66/66, ls 3.3px (0.05em) */
  .manifesto-item__num {
    font-size: 66px;
    line-height: 66px;
    letter-spacing: 0.05em;
  }

  /* Icona 45px (il testo scende a 40/44 via .t-2 responsive) */
  .manifesto-item__text .icon {
    width: 45px;
    height: 45px;
    margin-inline: 4px;
  }
}