/* informativa.css — la pagina dell'informativa privacy (issue 053). Token,
   titoli e link stanno in stile.css; il guscio in guscio.css. Qui solo la
   colonna di lettura e le due tabelle: solo token, nessun colore scritto a
   mano, nessun attributo style nell'HTML (la CSP lo blocca). */

/* Colonna di lettura: un testo legale lungo si legge in righe corte, non a
   tutta la larghezza del contenitore. Le tabelle hanno bisogno di più spazio
   di una riga di testo, da qui 860 px e non i 58ch di .lead. */
.informativa { max-width: 860px; }

.testata { margin-bottom: 40px; }
.aggiornamento {
  margin: 0;
  color: var(--ink2);
}

.informativa section + section { margin-top: 40px; }
.informativa h2 { margin-bottom: 12px; }

.informativa ul {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding-left: 1.2em;
}
.informativa ul:last-child { margin-bottom: 0; }

/* ---- Tabelle -------------------------------------------------------------- */

/* Una carta per tabella: i filetti fra le righe stanno dentro la carta
   (DESIGN.md). L'overflow nascosto serve agli angoli arrotondati; la tabella
   sta nel contenitore e non scorre mai da sola. */
.tabella {
  margin-bottom: 16px;
  overflow: hidden;
  background: var(--surface);
  border-radius: var(--r-carta);
  box-shadow: var(--sh1);
}
.tabella:last-child { margin-bottom: 0; }

.tabella table {
  width: 100%;
  border-collapse: collapse;
}
.tabella th,
.tabella td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}
.tabella thead th {
  background: var(--surface2);
  color: var(--ink3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tabella tbody th {
  width: 24%;
  font-weight: 600;
}
.tabella tbody tr + tr { border-top: 1px solid var(--line); }

/* ---- Telefono -------------------------------------------------------------- */

/* Quattro colonne non stanno in 335 px: ogni riga diventa una carta, e al
   posto della riga di intestazione ogni cella porta la sua etichetta
   (data-etichetta, la stessa dell'intestazione di colonna). La riga di
   intestazione resta nel DOM, nascosta alla vista come .solo-lettori. */
@media (max-width: 759.98px) {
  .tabella {
    overflow: visible;
    background: none;
    border-radius: 0;
    box-shadow: none;
  }
  .tabella table,
  .tabella tbody,
  .tabella tr,
  .tabella th,
  .tabella td { display: block; }
  .tabella thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tabella tbody tr {
    margin-bottom: 12px;
    padding: 16px;
    background: var(--surface);
    border-radius: var(--r-riquadro);
    box-shadow: var(--sh1);
  }
  .tabella tbody tr:last-child { margin-bottom: 0; }
  .tabella tbody tr + tr { border-top: 0; }
  .tabella th,
  .tabella td { padding: 0; }
  .tabella tbody th {
    width: auto;
    margin-bottom: 10px;
    font-size: 16px;
  }
  .tabella td + td { margin-top: 10px; }
  .tabella td::before {
    content: attr(data-etichetta);
    display: block;
    color: var(--ink3);
    font-size: 13px;
    font-weight: 600;
  }
}