/* ==========================================================================
   WineFor VERSIONE 2 — PAGINE CASO STUDIO
   CSS condiviso da tutte le pagine case-<slug>.html.
   Richiede home3h.css caricato PRIMA (variabili, reset, container,
   .container--stretto, bottoni, sezioni, .reveal, .metric-list, .case-card).

   Impaginazione ripresa dal modello Smartness: citazione a piena larghezza,
   scheda dati sopra l'immagine, metriche in fila, intervista in colonna
   stretta, casi correlati a due colonne.
   ========================================================================== */

/* ==========================================================================
   SCALA DEI TESTI (30/09/2026) — tre livelli, in rem: seguono la dimensione
   di testo scelta nel browser (a impostazioni standard 1rem = 16px, quindi
   17px = 1.0625rem, 18px = 1.125rem). Si regola cambiando SOLO questi valori.
     lettura   paragrafi, elenchi, fasi, obiettivi, valori di tabella e scheda
     supporto  didascalie, etichette, note dello schema, link
     micro     maiuscoletti, intestazioni di tabella, note sulle fonti
   ========================================================================== */
:root {
  --cs-t-lettura: 1.0625rem;   /* 17px sotto i 900px */
  --cs-t-supporto: 1rem;       /* 16px */
  --cs-t-micro: 0.875rem;      /* 14px */
}

@media (min-width: 56.25em) {
  :root {
    --cs-t-lettura: 1.125rem;  /* 18px da 900px */
  }
}


/* ------------------------------------------------------------------- HERO */
.cs-hero {
  background: linear-gradient(
    180deg,
    var(--hero-grad-3) 0%,
    var(--blu-tint) 100%
  );
  padding-top: 40px;
}

.cs-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 36px;
  font-size: 0.9375rem;
  color: var(--testo-muted);
}

.cs-breadcrumb a {
  color: var(--blu);
  transition: color var(--transition);
}

.cs-breadcrumb a:hover {
  color: var(--blu-dark);
  text-decoration: underline;
}

.cs-breadcrumb span[aria-current] {
  color: var(--testo-muted);
}

.cs-hero-testa {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 40px;
}

.cs-titolo {
  /* Ridotto da 64px: con dati reali il titolo è una frase intera (es.
     "Contrada Palui: la cantina che vuole diventare..."), non più 1-2
     parole come nel modello segnaposto — a 64px andrebbe su 4-5 righe. */
  font-size: clamp(1.875rem, 4.4vw, 3.125rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.cs-sottotitolo {
  max-width: 760px;
  font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
  line-height: 1.55;
  color: var(--testo-muted);
}

/* Citazione a TUTTA LARGHEZZA, come nel modello: è il primo colpo d'occhio */
.cs-citazione {
  margin: 0 0 44px;
  padding: 0 0 0 28px;
  border-left: 4px solid var(--ottone);
}

.cs-citazione p {
  font-size: clamp(1.5rem, 3.4vw, 2.375rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--testo);
}

.cs-citazione p::before {
  content: '“';
  color: var(--ottone);
}

.cs-citazione p::after {
  content: '”';
  color: var(--ottone);
}

.cs-citazione-autore {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 18px;
  font-size: 0.9375rem;
}

.cs-citazione-autore b {
  color: var(--testo);
}

.cs-citazione-autore span {
  color: var(--testo-muted);
}

/* Scheda dati SOPRA l'immagine (nel modello sta lì, non a fianco) */
.cs-scheda {
  display: grid;
  gap: 0;
  margin: 0 0 28px;
  padding: 24px 28px;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 45em) {
  .cs-scheda {
    grid-template-columns: repeat(3, 1fr);
  }

  .cs-scheda-voce + .cs-scheda-voce {
    padding-left: 28px;
    border-left: 1px solid var(--bordo);
  }
}

.cs-scheda-voce + .cs-scheda-voce {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--bordo);
}

@media (min-width: 45em) {
  .cs-scheda-voce + .cs-scheda-voce {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
}

.cs-scheda dt {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--testo-muted);
}

.cs-scheda dd {
  margin: 6px 0 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--testo);
}

.cs-foto {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.cs-foto img {
  display: block;
  width: 100%;
  height: auto;
  /* la foto dedicata è orizzontale; se ne arriva una verticale il ritaglio
     evita che occupi mezza pagina in altezza */
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* --------------------------------------------------------------- METRICHE */
/* In FILA orizzontale, come nel modello */
.cs-metriche {
  display: grid;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 45em) {
  .cs-metriche {
    grid-template-columns: repeat(3, 1fr);
  }
}

.cs-metriche li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 32px 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
}

.cs-metriche b {
  font-size: clamp(2.5rem, 6vw, 3.625rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ottone);
  font-variant-numeric: tabular-nums;
}

.cs-metriche span {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.78);
}

/* -------------------------------------------------------------- INTERVISTA */
/* Colonna singola centrata e stretta: sezione da leggere */
.cs-qa {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  gap: 36px;
}

.cs-qa-blocco {
  padding-bottom: 32px;
  border-bottom: 1px solid var(--bordo);
}

.cs-qa-blocco:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.cs-domanda {
  margin-bottom: 12px;
  font-size: clamp(1.25rem, 2.4vw, 1.5625rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--blu);
}

.cs-risposta {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--testo-muted);
}

/* ------------------------------------------------------------ CTA FINALE */
/* Link sotto il pulsante "Richiedi una demo gratuita" che scorre fino al
   blocco "Altri casi studio" subito sotto (id="cs-altri-casi" nell'HTML,
   scroll morbido nativo già globale sul sito). Sfondo blu scuro
   (.section--blu): stesso grigio chiaro già usato per .section-sub in
   questo contesto, il link nel testo si stacca in ottone (stesso ruolo di
   accento leggero già usato altrove, mai l'arancio: qui non è una CTA di
   vendita, solo un rimando dentro la stessa pagina). */
.cs-cta-altri {
  margin-top: 18px;
  font-size: var(--cs-t-supporto);
  color: rgba(255, 255, 255, 0.72);
}

.cs-cta-altri a {
  color: var(--ottone);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cs-cta-altri a:hover {
  color: var(--bianco);
}

/* ---------------------------------------------------------- CASI CORRELATI */
/* 2 card per riga, come nel modello. .case-card arriva da home3h.css:
   ha aspect-ratio verticale 352/528, quindi va limitata in larghezza
   altrimenti su due colonne diventerebbe altissima. */
.cs-correlati {
  display: grid;
  gap: 28px;
  justify-items: center;
}

@media (min-width: 45em) {
  .cs-correlati {
    grid-template-columns: repeat(2, 1fr);
  }
}

.cs-correlati .case-card {
  width: 100%;
  max-width: 380px;
}

/* ---------------------------------------------------------- RESPONSIVE */
@media (max-width: 48em) {
  .cs-citazione {
    padding-left: 18px;
    border-left-width: 3px;
  }

  .cs-scheda {
    padding: 20px 18px;
  }

  .cs-foto img {
    aspect-ratio: 4 / 3;
  }

  .cs-metriche li {
    padding: 24px 16px;
  }
}

/* ==========================================================================
   COMPONENTI PER DATI REALI (28/09/2026) — Contrada Palui
   Box "IN SINTESI", sezioni narrative (contesto/obiettivo/apporto/significato),
   fasi numerate, tabella risultati, obiettivi futuri con nota fonte. Nomi di
   classe indipendenti da .cs-scheda / .cs-citazione / .cs-qa, che restano
   intoccate in questo file: servono ancora al modello in
   deploy/modello-caso-studio/ per i prossimi casi studio.
   ========================================================================== */

/* ------------------------------------------------------------ IN SINTESI */
/* Stesso principio di bordo sinistro ottone di .cs-citazione/.ris-domande,
   ma come card dati (non citazione): sostituisce .cs-scheda su questa
   pagina perché i valori reali sono più lunghi (una riga è un elenco
   puntato intero), non stanno su 3 colonne strette. */
.cs-sintesi {
  margin: 0 0 28px;
  padding: 28px 32px;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-left: 4px solid var(--ottone);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.cs-sintesi-titolo {
  margin-bottom: 18px;
  font-size: var(--cs-t-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blu);
}

.cs-sintesi dl {
  display: grid;
  gap: 16px;
  margin: 0;
}

.cs-sintesi-voce + .cs-sintesi-voce {
  padding-top: 16px;
  border-top: 1px solid var(--bordo);
}

.cs-sintesi dt {
  font-size: var(--cs-t-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--testo-muted);
}

.cs-sintesi dd {
  margin: 4px 0 0;
  font-size: var(--cs-t-lettura);
  font-weight: 600;
  line-height: 1.5;
  color: var(--testo);
}

@media (min-width: 40em) {
  .cs-sintesi-voce {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 12px;
    align-items: baseline;
  }

  .cs-sintesi dd {
    margin-top: 0;
  }
}

/* ------------------------------------------------------------- NARRATIVA */
/* Paragrafi di corpo per Il contesto / L'obiettivo / Il nostro apporto /
   Cosa significa per la cantina: stessa scala tipografica di .cs-risposta
   (17px/1.7), qui riusata fuori dal contesto intervista. */
.cs-prosa {
  display: grid;
  gap: 18px;
  max-width: 760px;
}

.cs-prosa p {
  font-size: var(--cs-t-lettura);
  line-height: 1.7;
  color: var(--testo-muted);
}

/* Frase d'apertura di "Il nostro apporto" (testo di Simone, 01/10): e' la tesi
   della sezione, quindi un gradino sopra il corpo (21px / 22px da 900px),
   in grassetto e nel colore pieno. Resta un <p>: l'h2 della sezione e' sopra. */
.cs-prosa p.cs-prosa-lead {
  font-size: calc(var(--cs-t-lettura) + 0.25rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--testo);
}

/* Parole chiave in grassetto dentro i paragrafi: colore pieno come in .cs-check b */
.cs-prosa p b {
  color: var(--testo);
}

.cs-prosa-obiettivo {
  margin-top: 8px;
  padding-top: 28px;
  border-top: 1px solid var(--bordo);
}

.cs-prosa-obiettivo h3 {
  margin-bottom: 10px;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--blu);
}

/* Lista con spunta ottone: stesso principio di .ris-check, qui sempre
   visibile (in risorsa.css è nascosta di default e riappare solo da
   1040px, ma lì serve per un layout a griglia diverso da questo). */
.cs-check {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}

.cs-check li {
  position: relative;
  padding-left: 30px;
  font-size: var(--cs-t-lettura);
  line-height: 1.55;
  color: var(--testo-muted);
}

.cs-check li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ottone);
  font-weight: 800;
}

.cs-check b {
  color: var(--testo);
}

/* -------------------------------------------------------------- FASI/OBIETTIVI */
/* Card numerate: stesso identico principio di .ris-punti in risorsa.css
   (cerchietto ottone via counter-increment), replicato qui perché questa
   pagina non carica risorsa.css. Riusata due volte: "Il nostro apporto"
   (Fase 1/2/3, con titolo) e "I prossimi obiettivi" (4 voci, senza titolo
   proprio — solo paragrafo). */
.cs-fasi {
  /* è un <ol> (ordine reale, va letto in sequenza) ma la numerazione è
     disegnata a mano col cerchietto ottone: list-style:none toglie quella
     nativa del browser, altrimenti compare doppia ("1." più il cerchietto
     con "1" dentro). home3h.css azzera solo <ul>, non <ol>. */
  list-style: none;
  display: grid;
  gap: 20px;
  margin-top: 20px;
  padding: 0;
  counter-reset: fase;
}

.cs-fase {
  position: relative;
  padding: 26px 28px 26px 76px;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  counter-increment: fase;
}

.cs-fase::before {
  content: counter(fase);
  position: absolute;
  top: 26px;
  left: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ottone);
  color: var(--bianco);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1;
}

.cs-fase-titolo {
  margin-bottom: 8px;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--blu);
}

.cs-fase p {
  font-size: var(--cs-t-lettura);
  line-height: 1.65;
  color: var(--testo-muted);
}

.cs-fase p + p {
  margin-top: 10px;
}

.cs-fase .cs-check {
  margin-top: 14px;
}

.cs-fase .cs-check li {
  font-size: var(--cs-t-lettura);
}

/* --------------------------------------------------------- TABELLA RISULTATI */
.cs-tabella-wrap {
  overflow-x: auto;
  margin: 0 0 28px;
  border: 1px solid var(--bordo);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.cs-tabella {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  background: var(--bianco);
}

.cs-tabella th,
.cs-tabella td {
  padding: 16px 24px;
  text-align: left;
  font-size: var(--cs-t-lettura);
  line-height: 1.4;
}

.cs-tabella thead th {
  background: var(--blu-tint);
  font-size: var(--cs-t-micro);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blu-dark);
}

.cs-tabella tbody th {
  font-weight: 600;
  color: var(--testo);
}

.cs-tabella tbody td {
  font-weight: 700;
  color: var(--blu);
  font-variant-numeric: tabular-nums;
}

.cs-tabella tbody tr + tr {
  border-top: 1px solid var(--bordo);
}

/* Paragrafi/liste sotto la tabella ("Cosa c'è dietro i numeri") */
.cs-numeri-dettaglio {
  max-width: 760px;
}

.cs-numeri-dettaglio-titolo {
  margin-bottom: 14px;
  font-size: var(--cs-t-lettura);
  font-weight: 700;
  color: var(--testo);
}

.cs-numeri-dettaglio .cs-check {
  margin-bottom: 20px;
}

/* Dal 02/10/2026 il grafico "30 su 100" sta fra i due elenchi dei risultati */
.cs-numeri-dettaglio .cs-puntini {
  margin: 8px 0 28px;
}

.cs-horeca-titolo {
  margin-bottom: 10px;
  font-size: var(--cs-t-lettura);
  font-weight: 700;
  color: var(--testo);
}

.cs-horeca-lista {
  display: grid;
  gap: 8px;
  margin: 0 0 22px;
  padding-left: 20px;
  list-style: disc;
  font-size: var(--cs-t-lettura);
  line-height: 1.55;
  color: var(--testo-muted);
}

.cs-numeri-chiusura {
  font-size: var(--cs-t-lettura);
  line-height: 1.65;
  color: var(--testo-muted);
}

/* ----------------------------------------------------------------- NOTE FONTE */
/* Stesso principio di .ris-numeri-fonte, ma su sfondo chiaro (qui la
   sezione obiettivi non è .section--blu) quindi colore testo-muted
   invece di rgba bianco. */
.cs-nota-fonte {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--bordo);
  font-size: var(--cs-t-micro);
  line-height: 1.6;
  color: var(--testo-muted);
}

/* ------------------------------------------------- RESPONSIVE (blocco nuovo) */
@media (max-width: 48em) {
  .cs-sintesi {
    padding: 22px 20px;
  }

  .cs-fase {
    padding: 22px 20px;
  }

  .cs-fase::before {
    position: static;
    margin-bottom: 12px;
  }

  .cs-tabella th,
  .cs-tabella td {
    padding: 13px 16px;
    font-size: var(--cs-t-lettura);
  }
}

/* ==========================================================================
   AGGIORNAMENTI DEL 30/09/2026 (feedback di Simone sulla pagina online)
   Hero a due colonne con ritratto, icone, obiettivi con icona, grafico 30/100.
   ========================================================================== */

/* ------------------------------------------------------------ HERO A GRIGLIA */
/* Sotto i 1100px: titolo, ritratto, scheda (ordine VISIVO; nel DOM la scheda
   viene prima del ritratto). Da 1100px: titolo + scheda a sinistra, ritratto a
   destra su due righe. */
.cs-hero-griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    'testa'
    'foto'
    'sintesi';
  gap: 28px;
}

.cs-hero-griglia .cs-hero-testa {
  grid-area: testa;
  margin-bottom: 0;
}

.cs-hero-griglia .cs-sintesi {
  grid-area: sintesi;
  margin: 0;
}

/* Ritratto (file verticale 680x1020): ritaglio 4:5 DALL'ALTO, cioe' testa e
   busto. Nel vecchio banner 16:9 centrato si vedeva solo dal collo ai fianchi
   (volto fuori) e l'immagine era ingrandita 1,8 volte. Il taglio dall'alto
   lascia fuori anche il marchio in basso a destra del file. */
.cs-hero-griglia .cs-foto {
  grid-area: foto;
  justify-self: center;
  width: 100%;
  max-width: 300px;
}

.cs-hero-griglia .cs-foto img {
  aspect-ratio: 4 / 5;
  object-position: 50% 0;
}

@media (min-width: 68.75em) {
  .cs-hero-griglia {
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas:
      'testa foto'
      'sintesi foto';
    column-gap: 56px;
    row-gap: 32px;
    align-items: start;
  }

  .cs-hero-griglia .cs-foto {
    justify-self: stretch;
    max-width: none;
  }
}

/* Tra 1100 e 1199px la colonna di sinistra e' ancora stretta: nella scheda
   l'etichetta sta SOPRA il valore (da 1200px torna affiancata). */
@media (min-width: 68.75em) and (max-width: 74.9375em) {
  .cs-hero-griglia .cs-sintesi-voce {
    display: block;
  }

  .cs-hero-griglia .cs-sintesi dd {
    margin-top: 4px;
  }
}

/* ------------------------------------------------------------------ ICONE */
/* Le icone sono uno sprite inline in cima alla pagina (<symbol id="cs-i-...">),
   usate con <svg class="cs-ico" viewBox="0 0 24 24"><use href="#cs-i-..."/></svg>.
   Tratto e colore: qui (le proprieta' passano dentro <use>). */
.cs-ico {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------ OBIETTIVI CON ICONA */
/* Stesse card numerate delle fasi, ma nel cerchietto ottone c'e' un'icona al
   posto del numero (i 4 traguardi non sono una sequenza da seguire). */
.cs-fasi--obiettivi .cs-fase::before {
  content: none;
}

.cs-fase-icona {
  position: absolute;
  top: 26px;
  left: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ottone);
  color: var(--bianco);
}

.cs-fase-icona .cs-ico {
  width: 19px;
  height: 19px;
}

/* Inizio dell'obiettivo in grassetto (titoletto per chi scorre) */
.cs-fase p b {
  color: var(--blu);
}

@media (max-width: 48em) {
  .cs-fase-icona {
    position: static;
    margin-bottom: 12px;
  }
}

/* ---------------------------------------------------- GRAFICO "30 SU 100" */
/* A supporto del testo (non al posto): 100 puntini, 30 evidenziati. */
.cs-puntini {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 760px;
  margin: 0 0 28px;
  padding: 22px 28px;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.cs-puntini-svg {
  flex: 0 0 auto;
  width: 132px;
  height: 132px;
}

.cs-puntini-testo {
  display: grid;
  gap: 6px;
}

.cs-puntini-numero {
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--blu);
}

.cs-puntini-testo p {
  font-size: var(--cs-t-lettura);
  line-height: 1.5;
  color: var(--testo-muted);
}

@media (max-width: 30em) {
  .cs-puntini {
    gap: 18px;
    padding: 18px 16px;
  }

  .cs-puntini-svg {
    width: 104px;
    height: 104px;
  }
}

/* ---------------------------------------- TABELLA RISULTATI SU TELEFONO */
/* Sotto i 640px la tabella a 2 colonne obbligava a scorrere in orizzontale
   (facile da non notare): ogni riga diventa una scheda, etichetta piccola sopra
   e valore grande sotto. L'intestazione resta per gli screen reader ma non si
   vede (clip, non display:none). I ruoli ARIA nell'HTML mantengono la semantica
   di tabella anche con le celle "block". */
@media (max-width: 40em) {
  .cs-tabella-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .cs-tabella {
    min-width: 0;
    background: transparent;
  }

  .cs-tabella thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .cs-tabella,
  .cs-tabella tbody,
  .cs-tabella tr,
  .cs-tabella th,
  .cs-tabella td {
    display: block;
    width: 100%;
  }

  .cs-tabella tbody tr {
    margin-bottom: 12px;
    padding: 14px 16px;
    background: var(--bianco);
    border: 1px solid var(--bordo);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
  }

  .cs-tabella tbody tr + tr {
    border-top: 1px solid var(--bordo);
  }

  .cs-tabella th,
  .cs-tabella td {
    padding: 0;
  }

  .cs-tabella tbody th {
    font-size: var(--cs-t-supporto);
    font-weight: 600;
    color: var(--testo-muted);
  }

  .cs-tabella tbody td {
    margin-top: 4px;
    font-size: 1.3125rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--blu);
  }
}

/* ==========================================================================
   USCITA 2 DEL 30/09/2026: colonna risultati a destra (sticky) + schema
   "il percorso in sintesi". Progettati dall'agente di design (mockup in
   case-contrada-palui-mockup-2/), integrati e verificati a schermo.
   L'icona (.cs-ico) e' definita piu' su, nel blocco degli aggiornamenti.
   ========================================================================== */

/* ==========================================================================
   A. COLONNA RISULTATI (desktop) / BLOCCO RISULTATI (tablet e telefono)

   UN SOLO MARKUP, due comportamenti:
   - da 1340px in su: colonna a DESTRA del testo, la card scorre insieme alla
     pagina (sticky) per tutta "Il contesto" + "Cosa abbiamo fatto";
   - sotto i 1340px: blocco normale in cima al wrapper (subito dopo l'hero),
     NON sticky, nessuna barra fissa.
   (Era 1240px con 3 dati: con 5 dati e testi piu' grandi la card stretta da
   210px andava su 3-4 righe per etichetta, quindi la colonna parte da 1340px,
   dove la larghezza e' almeno 260px.)
   DAL 02/10/2026 le voci sono 4 e sono PAROLE, non cifre ("Da zero", "Meno di un
   quinto", "Oltre il 97%", "Da lettori a clienti"): ogni voce ha due livelli,
   titoletto teal sopra e frase sotto, a tutte le larghezze.

   PERCHE' LA COLONNA STA FUORI DALLE SECTION: le .section-decorated hanno
   overflow:hidden (home3h.css) e overflow diverso da "visible" su un antenato
   spegne lo sticky. La colonna e' quindi sorella delle section, dentro il
   wrapper .cs-storia. REGOLA D'ORO: su .cs-storia (e sui suoi antenati nel
   tema) NON mettere overflow, contain o transform. E NON usare l'elemento
   "aside": il tema nasconde ogni aside nelle pagine full-width.
   ========================================================================== */

/* Wrapper: avvolge SOLO "Il contesto" e "Cosa abbiamo fatto" (+ la colonna).
   Le variabili sono qui, in un punto solo, per ritoccare le misure. */
.cs-storia {
  position: relative;

  --cs-col-w: 852px;        /* larghezza utile di .container--stretto: 900 - 2x24 di padding */
  --cs-testo-dx: 334px;     /* dal CENTRO pagina al bordo destro del testo: la colonna .cs-prosa
                               (760px) e' allineata a sinistra e parte a -426px dal centro:
                               -426 + 760 = +334px (NON +380: quella sarebbe una colonna centrata) */
  --cs-rail-w: 260px;       /* larghezza della colonna risultati (da 1340px cresce fino a 300px) */
  --cs-rail-gap: 24px;      /* distanza tra testo e colonna */
  --cs-rail-top: 210px;     /* altezza a cui parte la card, allineata al primo paragrafo di
                               "Il contesto": 96 (padding sezione) + 58 (titolo 52px x 1.12)
                               + 56 (margine sotto il titolo) = 210px */
  --cs-rail-sticky: 24px;   /* distanza dal bordo alto dello schermo quando la card si aggancia */
  --cs-margine-tema: 0px;   /* il tema WP da' i 20px laterali a TUTTO il contenuto (sezioni e questo
                               wrapper insieme): card e testo sono gia' allineati, nessuna compensazione. */
}

/* Nel wrapper le card delle fasi (852px) non devono superare la colonna di
   testo (760px): altrimenti finirebbero sotto la colonna risultati. Vale a
   tutte le larghezze (bordo destro coerente col testo). */
.cs-storia .cs-fasi {
  max-width: 760px;
}

/* ---- Guscio: sotto i 1340px e' un blocco normale in cima al wrapper ---- */
.cs-rail {
  /* stessi margini laterali del testo delle section, cosi' la card si allinea
     alla colonna di lettura: max(gutter + margine tema, meta' dello spazio
     libero attorno alla colonna da 852px). Prima riga = fallback senza max(). */
  padding: 32px 44px;
  padding: 32px max(calc(var(--gutter) + var(--cs-margine-tema)), calc((100% - var(--cs-col-w)) / 2));
}

/* ---- Card: stessa famiglia di .cs-sintesi (bianca, bordo ottone a sinistra) ---- */
.cs-rail-card {
  max-width: 760px;               /* come la colonna di testo */
  padding: 18px 18px 4px 20px;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-left: 4px solid var(--ottone);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.cs-rail-titolo {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--testo);
}

/* "dopo 60 giorni": riga piccola sotto il titolo */
.cs-rail-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--testo-muted);
}

.cs-rail-lista {
  margin: 14px 0 0;
  border-top: 1px solid var(--bordo);
}

/* TELEFONO (< 600px): voci impilate, ognuna su due livelli: titoletto (.cs-rail-num,
   il nome della classe e' rimasto quando erano cifre) e frase (.cs-rail-etic). */
.cs-rail-voce {
  display: block;
  padding: 11px 0;
}

.cs-rail-voce + .cs-rail-voce {
  border-top: 1px solid var(--bordo);
}

.cs-rail-num {
  display: block;
  margin-bottom: 3px;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--blu);                  /* 6,3:1 su bianco */
  overflow-wrap: break-word;
}

.cs-rail-etic {
  display: block;
  min-width: 0;
  font-size: var(--cs-t-supporto);
  font-weight: 500;
  line-height: 1.3;
  color: var(--testo);
  overflow-wrap: break-word;
}

/* Link: sempre sottolineato (non solo su hover), area di tocco alta 44px.
   Selettori con "html ..." per battere le regole del tema, come fa home3h.css
   per a:hover e ".page-content a" (specificita' alzata di proposito). */
.cs-rail-link {
  display: block;
  margin-top: 2px;
  padding: 11px 0;
  border-top: 1px solid var(--bordo);
  font-size: var(--cs-t-supporto);
  font-weight: 600;
  line-height: 1.4;
}

html .cs-rail .cs-rail-link {
  color: var(--blu);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

html .cs-rail .cs-rail-link:hover {
  color: var(--blu-dark);
}

html .cs-rail .cs-rail-link:focus-visible {
  color: var(--blu-dark);
  outline: 3px solid var(--blu);
  outline-offset: 3px;
  border-radius: 4px;
}

/* La freccia non e' sottolineata: inline-block esce dalla propagazione */
.cs-rail-freccia {
  display: inline-block;
  margin-left: 4px;
  text-decoration: none;
}

/* Telefoni molto stretti (320-359px): meno padding interno */
@media (max-width: 22.4375em) {
  .cs-rail-card {
    padding: 16px 12px 4px 14px;
  }
}

/* TABLET / TELEFONO GRANDE (>= 600px): le 4 voci su 2 colonne (2x2), anche da
   900px in su (4 voci in 3 colonne lascerebbero una voce sola). Filetto sopra
   ogni voce tranne quelle della prima riga. (Sotto i 600px una colonna sola.) */
@media (min-width: 37.5em) {
  .cs-rail-lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
  }

  .cs-rail-voce,
  .cs-rail-voce + .cs-rail-voce {
    border-top: 1px solid var(--bordo);
  }

  .cs-rail-voce:nth-child(-n + 2) {
    border-top: 0;
  }

  .cs-rail-num {
    font-size: 1.375rem;
  }
}

/* DESKTOP (>= 1340px = 83.75em): colonna a destra del testo + card STICKY.
   I breakpoint di questo file sono in EM (1em = 16px a impostazioni standard,
   quindi identici a prima): chi ingrandisce il testo nel browser li supera piu'
   tardi e la colonna, che con testi grandi sarebbe troppo alta, non compare.
   Larghezza fluida: 50vw - 410px, fra 260 e 300px. Con la sezione larga
   (viewport - 55px: scrollbar 15 + margini tema 40) il bordo destro del testo
   sta a centro + 334px, la colonna va da centro + 358px a centro + 358px + w:
   restano SEMPRE almeno 24px liberi dal bordo destro (a 1340: w = 260px;
   a 1366: 273px; a 1440 e oltre: 300px). */
@media (min-width: 83.75em) {
  .cs-storia {
    --cs-rail-w: clamp(260px, calc(50vw - 410px), 300px);
  }

  .cs-rail {
    position: absolute;
    top: 0;
    bottom: 0;                    /* alto quanto il wrapper: e' il "binario" dello sticky */
    left: 50%;
    width: var(--cs-rail-w);
    margin-left: calc(var(--cs-testo-dx) + var(--cs-rail-gap));
    /* padding-top: la card parte allineata al primo paragrafo;
       padding-bottom: si stacca e sale via quando finisce l'ultima card fase
       (96px = padding in fondo alla sezione "Il nostro apporto") */
    padding: var(--cs-rail-top) 0 var(--section-y);
    z-index: 2;                   /* le section successive sono position:relative e
                                     verrebbero dipinte sopra la colonna */
    pointer-events: none;         /* il binario vuoto non intercetta click/selezione */
  }

  .cs-rail-card {
    position: sticky;             /* resta al suo posto poi si aggancia... */
    top: var(--cs-rail-sticky);   /* ...a 24px dal bordo alto e scorre col testo */
    max-width: none;
    padding: 14px 10px 0 14px;
    pointer-events: auto;
    /* rete di sicurezza: con schermi molto bassi la card scorre al suo
       interno invece di essere tagliata (non scatta mai a misure normali) */
    max-height: calc(100vh - 2 * var(--cs-rail-sticky));
    overflow-y: auto;
  }

  .cs-rail-titolo {
    font-size: 1.1875rem;
  }

  .cs-rail-sub {
    margin-top: 1px;
  }

  /* voci impilate, ognuna su due livelli (titoletto + frase) */
  .cs-rail-lista {
    display: block;
    margin-top: 10px;
  }

  .cs-rail-voce {
    padding: 9px 0;
  }

  .cs-rail-voce + .cs-rail-voce {
    border-top: 1px solid var(--bordo);
  }

  .cs-rail-num {
    font-size: 1.125rem;
    margin-bottom: 2px;
  }

  .cs-rail-link {
    margin-top: 0;
    padding: 8px 0;
  }
}


/* ==========================================================================
   B. SCHEMA "IL PERCORSO IN SINTESI" — dentro "Il nostro apporto", dopo i due
   punti elenco e PRIMA delle tre card delle fasi.

   HTML + CSS puro: il testo va a capo e si ingrandisce con lo zoom.
   Il contenitore .cs-schema-flusso ha role="img" + aria-label con il percorso
   a parole, quindi tutto cio' che sta dentro e' decorativo per gli screen
   reader. Nessun numero nei passi: le fasi sotto sono gia' numerate 1-2-3.

   TELEFONO / TABLET (< 840px): colonna singola, dall'alto in basso
     4 ingressi (griglia) -> freccia giu' -> La guida -> community -> mail
     -> comunicazione periodica con i 4 tipi di contenuto.
   DESKTOP (>= 840px): in orizzontale
     ingressi a sinistra che convergono (graffa) -> La guida -> community
     -> mail; sotto la mail, una fascia larga con i 4 tipi di contenuto.
   ========================================================================== */

.cs-schema {
  max-width: 760px;               /* come la colonna di testo */
  margin: 32px 0 12px;
  padding: 18px 16px 20px;
  background: var(--off-white);
  border: 1px solid var(--bordo);
  border-radius: var(--radius-lg);
}

/* Etichetta opzionale (microcopy nuovo): togliere il <p> se non serve */
.cs-schema-etichetta {
  margin-bottom: 14px;
  font-size: var(--cs-t-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blu);
}

/* Colonna singola di default; da 840px diventa una griglia a 7 colonne */
.cs-schema-flusso {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* ---- Icona in cerchietto (tinta teal chiara, icona teal: 5:1) ---- */
.cs-schema-icona {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--blu-tint);
  color: var(--blu);
}

.cs-schema-icona .cs-ico {
  width: 18px;
  height: 18px;
}

/* ---- Etichette (nomi) e note ---- */
.cs-schema-testo {
  min-width: 0;
}

.cs-schema-nome {
  display: block;
  font-size: var(--cs-t-lettura);
  font-weight: 700;
  line-height: 1.3;
  color: var(--testo);
  overflow-wrap: anywhere;
}

/* Alcuni frammenti del testo iniziano in minuscolo ("una sequenza di mail…"):
   il DOM resta letterale, solo la prima lettera e' maiuscola a video. */
.cs-schema-nome::first-letter {
  text-transform: uppercase;
}

.cs-schema-nota {
  display: block;
  margin-top: 4px;
  font-size: var(--cs-t-supporto);
  line-height: 1.4;
  color: var(--testo-muted);
  overflow-wrap: anywhere;
}

/* ---- 1. Ingressi: quattro riquadri (2x2 su telefono, in riga su tablet) ---- */
.cs-schema-ingressi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr));
  gap: 10px;
}

.cs-schema-ingressi li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 6px 12px 6px 7px;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.cs-schema-ingressi .cs-schema-nome {
  font-size: calc(var(--cs-t-lettura) - 0.0625rem);
  font-weight: 600;
  line-height: 1.25;
}

/* Aggiunto dopo la prova a schermo (30/09): a 390px "Instagram" veniva spezzata
   a metà parola ("Instagra / m"). Sotto i 480px icona e spazi più piccoli;
   sotto i 360px gli ingressi vanno in colonna (una parola per riga, mai spezzata). */
@media (max-width: 29.9375em) {
  .cs-schema-ingressi li {
    gap: 8px;
    padding: 6px 8px 6px 6px;
  }

  .cs-schema-ingressi .cs-schema-icona {
    width: 28px;
    height: 28px;
  }

  .cs-schema-ingressi .cs-schema-icona .cs-ico {
    width: 16px;
    height: 16px;
  }

  .cs-schema-ingressi .cs-schema-nome {
    font-size: 0.96875rem;
    overflow-wrap: break-word;
  }
}

@media (max-width: 22.4375em) {
  .cs-schema-ingressi {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- 2-4. Passi (guida, community, mail): card come le fasi ---- */
.cs-schema-passo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.cs-schema-passo > .cs-schema-icona {
  width: 44px;
  height: 44px;
}

.cs-schema-passo > .cs-schema-icona .cs-ico {
  width: 24px;
  height: 24px;
}

/* La community e' il punto d'arrivo ("un unico luogo"): l'unica card colorata.
   Testo scuro su tinta chiara: 12,6:1 il nome, 9,8:1 la nota. */
.cs-schema-passo--chiave {
  background: var(--blu-tint);
  border: 2px solid var(--blu);
}

.cs-schema-passo--chiave .cs-schema-nota {
  color: var(--blu-dark);
}

/* ---- Frecce (decorative, aria-hidden nel markup) ----
   Di base VERTICALI (freccia in giu'); --dx le gira a destra da 840px. */
.cs-schema-freccia {
  position: relative;
  display: block;
  height: 32px;
}

.cs-schema-freccia::before {       /* asta */
  content: '';
  position: absolute;
  left: 50%;
  top: 4px;
  bottom: 8px;
  width: 2px;
  margin-left: -1px;
  background: var(--blu);
}

.cs-schema-freccia::after {        /* punta: triangolo pieno */
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  margin-left: -7px;
  border-style: solid;
  border-width: 9px 7px 0 7px;
  border-color: var(--blu) transparent transparent transparent;
}

/* ---- 5. Comunicazione periodica + 4 tipi di contenuto ---- */
.cs-schema-periodica {
  padding: 16px;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.cs-schema-periodica-titolo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.cs-schema-tipi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 10px;
}

/* Pallino ottone = micro-accento decorativo (mai come colore di testo) */
.cs-schema-tipi li {
  position: relative;
  padding: 10px 12px 10px 30px;
  background: var(--off-white);
  border: 1px solid var(--bordo);
  border-radius: var(--radius);
  font-size: var(--cs-t-supporto);
  line-height: 1.4;
  color: var(--testo);
}

.cs-schema-tipi li::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ottone);
}

/* ---- DESKTOP >= 840px: flusso orizzontale ----
   Larghezza disponibile = min(760, viewport - 88): a 840px sono 752px.
   Colonne: ingressi | freccia | guida | freccia | community | freccia | mail
   Prima riga: i 7 elementi in ordine. Seconda riga: freccia in giu' sotto la
   mail. Terza riga: fascia "comunicazione periodica" a tutta larghezza. */
@media (min-width: 52.5em) {
  .cs-schema {
    padding: 20px 20px 22px;
  }

  .cs-schema-flusso {
    grid-template-columns:
      minmax(0, 1.15fr) 22px minmax(0, 0.62fr) 22px minmax(0, 1fr) 22px minmax(0, 1.15fr);
  }

  /* I tre passi hanno la stessa altezza degli ingressi, contenuto centrato:
     la freccia sotto la mail cosi' parte esattamente dal bordo della card. */
  .cs-schema-passo {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 16px 12px;
    text-align: center;
  }

  .cs-schema-passo > .cs-schema-icona {
    width: 48px;
    height: 48px;
  }

  /* Frecce orizzontali tra le colonne */
  .cs-schema-freccia--dx {
    align-self: center;
    height: 16px;
  }

  .cs-schema-freccia--dx::before {
    left: 0;
    right: 8px;
    top: 50%;
    bottom: auto;
    width: auto;
    height: 2px;
    margin: -1px 0 0;
  }

  .cs-schema-freccia--dx::after {
    left: auto;
    right: 0;
    top: 50%;
    bottom: auto;
    margin: -7px 0 0;
    border-width: 7px 0 7px 9px;
    border-color: transparent transparent transparent var(--blu);
  }

  /* La freccia in giu' (senza --dx) sta sotto la colonna della mail */
  .cs-schema-flusso > .cs-schema-freccia:not(.cs-schema-freccia--dx) {
    grid-column: 7;
    grid-row: 2;
  }

  .cs-schema-periodica {
    grid-column: 1 / -1;
    grid-row: 3;
    padding: 18px 20px 20px;
  }

  /* Ingressi: una colonna di quattro righe uguali + "graffa" che li fa
     convergere. Ogni riquadro disegna il proprio tratto orizzontale (::after)
     e il proprio pezzo di "spina" verticale (::before): cosi' funziona
     qualunque sia l'altezza dei riquadri. Il primo parte dal centro, l'ultimo
     arriva al centro. La freccia successiva parte dalla spina. */
  .cs-schema-ingressi {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 1fr;
    padding-right: 20px;            /* spazio per i tratti della graffa */
  }

  .cs-schema-ingressi li {
    position: relative;
  }

  .cs-schema-ingressi li::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    width: 20px;
    height: 2px;
    margin-top: -1px;
    background: var(--blu);
  }

  .cs-schema-ingressi li::before {
    content: '';
    position: absolute;
    left: calc(100% + 19px);
    top: 0;
    bottom: -10px;                  /* fino al riquadro successivo (gap 10px) */
    width: 2px;
    background: var(--blu);
  }

  .cs-schema-ingressi li:first-child::before {
    top: 50%;
  }

  .cs-schema-ingressi li:last-child::before {
    bottom: 50%;
  }

  .cs-schema-tipi {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}