/* Hallmark · pagina: Privacy · dentro il sistema di style.css (macrostructure Photographic 08 · N5 · Ft5)
 * pre-emit critique: P4 H4 E4 S4 R5 V3 (pagina di lettura: il vestito si fa da parte)
 *
 * ==========================================================================
 * Lincoln 35 · Privacy e cookie — aggiunte di pagina (agente 4, 24/09/2026)
 * Si carica DOPO style.css e ne usa i token.
 * · Testata solida (.testata--solida di style.css): nessun media in apertura.
 * · Colonna di lettura a 68 caratteri.
 * · Indice: vetro chiaro fisso a sinistra su desktop; su telefono diventa
 *   una fisarmonica (transitions-dev 21, CSS in style.css § 25). La voce
 *   della parte in vista ha aria-current (component-gallery, navigation) e
 *   una pillola che ci scivola sotto (transitions-dev 16 tabs sliding, in
 *   verticale: 250 ms, --ease-smooth-out, si muove solo transform).
 * ========================================================================== */

:root {
  --misura-lettura: 68ch;
  --indice-largo: 15rem;
  --indice-voce: 44px;
}

/* ==========================================================================
   1 · APERTURA SU CARTA
   ========================================================================== */
.privacy-testa {
  padding-top: calc(var(--testata-alta) + var(--testata-bordo) + clamp(3.5rem, 9vw, 7rem));
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.privacy-testa__interno { display: grid; gap: var(--s-5); }
.privacy-testa .titolo-apertura { color: var(--notte); }
.privacy-testa .riga { max-width: 60ch; }

/* La cascata anche senza media: la regola generale è ora in style.css */

/* ==========================================================================
   2 · IMPAGINAZIONE: indice + colonna di lettura
   ========================================================================== */
.privacy {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: var(--sezione);
}
.privacy__testo { min-width: 0; max-width: var(--misura-lettura); }

@media (min-width: 56.25rem) {
  .privacy {
    grid-template-columns: minmax(0, var(--indice-largo)) minmax(0, var(--misura-lettura));
    column-gap: clamp(3rem, 7vw, 7rem);
    align-items: start;
  }
  .indice {
    position: sticky;
    top: calc(var(--testata-alta) + var(--testata-bordo) + var(--s-6));
  }
}

/* ==========================================================================
   3 · INDICE IN VETRO
   ========================================================================== */
.indice {
  border-radius: var(--r-3);
  border: 1px solid var(--vetro-chiaro-bordo);
  background: var(--vetro-chiaro);
  box-shadow: var(--ombra-morbida);
  -webkit-backdrop-filter: var(--vetro-sfocatura);
  backdrop-filter: var(--vetro-sfocatura);
}
.indice__titolo,
.indice__testa {
  font-family: var(--font-testo);
  font-weight: 700;
  font-size: var(--t-occhiello);
  line-height: 1.3;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}
.indice__titolo { display: none; padding: var(--s-5) var(--s-5) var(--s-2); }
.indice__testa { min-height: 56px; padding: 0 var(--s-5); }
.indice__voce { border: 0; }
.indice .fisarmonica__interno > * { max-width: none; padding-bottom: var(--s-3); }

.indice__lista { position: relative; padding: 0 var(--s-2); }
.indice__elenco { position: relative; z-index: 1; display: grid; }
.indice__link {
  display: flex;
  align-items: center;
  min-height: var(--indice-voce);
  padding: 0 var(--s-4);
  border-radius: var(--r-pillola);
  color: var(--testo-tenue);
  font-weight: 600;
  font-size: var(--t-piccolo);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-quick) var(--ease-out);
}
.indice__link:hover { color: var(--testo); }
.indice__link[aria-current] { color: var(--notte); }
.indice__link:focus-visible { outline-offset: -2px; }

/* La pillola della voce attiva (tabs sliding in verticale) */
.indice__pillola {
  position: absolute;
  z-index: 0;
  top: 0;
  left: var(--s-2);
  right: var(--s-2);
  height: var(--indice-voce);
  border-radius: var(--r-pillola);
  background: var(--sabbia);
  opacity: 0;
  transform: translate3d(0, var(--y, 0), 0);
  transition:
    transform var(--tabs-dur) var(--ease-smooth-out),
    opacity var(--duration-quick) var(--ease-out);
  pointer-events: none;
}
.indice.is-attivo .indice__pillola { opacity: 1; }

@media (min-width: 56.25rem) {
  .indice__titolo { display: block; }
  .indice__testa { display: none; }
  .indice .fisarmonica__pannello { grid-template-rows: 1fr; }
  .indice .fisarmonica__interno { opacity: 1; filter: none; }
  .indice .fisarmonica__interno > * { padding-bottom: var(--s-4); }
}

/* Senza JavaScript l'indice resta aperto anche su telefono */
html:not(.js) .indice .fisarmonica__pannello { grid-template-rows: 1fr; }
html:not(.js) .indice .fisarmonica__interno { opacity: 1; filter: none; }
html:not(.js) .indice .fisarmonica__freccia { display: none; }

/* ==========================================================================
   4 · LE PARTI DELL'INFORMATIVA
   ========================================================================== */
.privacy__parte {
  display: grid;
  gap: var(--s-4);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--testo-14);
  scroll-margin-top: calc(var(--testata-alta) + var(--testata-bordo) + var(--s-5));
}
.privacy__parte:first-child { border-top: 0; padding-top: 0; }
.privacy__titolo {
  font-family: var(--font-titoli);
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -.012em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}
.privacy__parte .riga { max-width: none; }
.privacy__pila { display: grid; gap: var(--s-4); margin-top: var(--s-2); }
.privacy__pila a,
.privacy__parte .avvertenza a { color: var(--lampone); }

.privacy__elenco { display: grid; margin-top: var(--s-2); border-top: 1px solid var(--testo-14); }
.privacy__elenco > li {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--testo-14);
}
.privacy__voce {
  font-family: var(--font-titoli);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.2;
}
.privacy__societa { padding-top: var(--s-4); border-top: 1px solid var(--testo-14); }

/* La chiusura: card su sabbia con l'unica azione della pagina */
.privacy__chiusura {
  margin-top: var(--s-6);
  padding: clamp(1.75rem, 4.5vw, 3rem);
  border-top: 0;
  border-radius: var(--r-4);
  background: var(--sabbia);
}
.privacy__chiusura .azioni { margin-top: var(--s-3); }
.privacy__parte:first-child.privacy__chiusura { padding-top: clamp(1.75rem, 4.5vw, 3rem); }

/* ==========================================================================
   5 · DISPOSITIVI TOUCH, VETRO ASSENTE, CATTURE
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
  .indice { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--vetro-chiaro-ripiego); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .indice { background: var(--vetro-chiaro-ripiego); }
}