/* ============================================================
   PAGINE LEGALI — Impressum, Datenschutz, AGB
   Non stanno in Figma: qui c'è solo l'impaginazione del testo
   con i token e le classi che il sito ha già. Nessun blocco
   nuovo, nessuna variante di colore.
   ============================================================ */

/* ---- HERO
   Stesso impianto delle altre pagine, ma più corta: qui sotto
   non c'è un'immagine o una griglia, c'è subito il testo. */
.hero{
  width:100%;
  max-width:var(--size-page-max);
  margin-inline:auto;
  padding:var(--space-240) var(--space-page-margin) var(--space-80);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-32);
  text-align:center;
  width:100%;
}
.hero-copy > *{ max-width:clamp(750.667px, 58.646vw, 1126px); }
.hero-subhead{
  font-family:var(--font-sans);
  font-size:var(--font-size-paragraph-sm);
  line-height:1.5;
  color:var(--color-gray-60);
}

/* ---- IL TESTO
   Una colonna sola. La larghezza è in ch e non in vw: così si
   accorcia insieme al corpo del testo e le battute per riga
   restano le stesse a ogni larghezza di schermo. */
.legal{
  width:100%;
  max-width:var(--size-page-max);
  margin-inline:auto;
  padding:0 var(--space-page-margin) var(--space-240);
  box-sizing:border-box;
  display:flex;
  justify-content:center;
}
/* Il corpo del testo è Paragraph/SM, dichiarato con la classe
   sull'article: i <p> e i <li> dentro lo ereditano, e la misura in
   ch si calcola sul font giusto. */
.legal-text{
  width:100%;
  /* la misura in ch segue il corpo del testo invece del viewport:
     così le battute per riga restano quelle a ogni larghezza, che è
     l'unica cosa che conta per la leggibilità */
  max-width:67ch;
  color:var(--color-black);
}

/* I margini stanno SOPRA ai titoli e non sotto ai paragrafi: così
   il primo elemento non porta un margine iniziale da azzerare. */
.legal-text > * + *{ margin-top:var(--space-24); }
.legal-text > h2{ margin-top:var(--space-80); }
.legal-text > h3{ margin-top:var(--space-48); }
.legal-text > :first-child{ margin-top:0; }

.legal-text a{
  color:var(--color-primary);
  text-decoration:underline;
  text-underline-offset:0.2em;
  /* gli URL lunghi delle informative vanno a capo invece di sfondare */
  overflow-wrap:anywhere;
}
.legal-text a:hover{ color:var(--color-primary-60); }

.legal-list{
  display:flex;
  flex-direction:column;
  gap:var(--space-12);
  padding-left:var(--space-24);
  list-style:disc;
}
.legal-list li{ padding-left:var(--space-8); }

@media (max-width: 1023px){
  .hero{ padding-top:120px; padding-bottom:48px; }
  .legal{ padding-bottom:120px; }
  .legal-text > h2{ margin-top:48px; }
  .legal-text > h3{ margin-top:32px; }
}