/* ============================================================
   LISTINO  (/listino) — documento sobrio: prose + tabelle.
   Riusa il design system del sito (palette Lago del plugin) e il
   componente TOC delle guide (g-sidebar-toc, g-body__grid, g-body__content).
   Namespace proprio: lst-*. Nessun font esterno.
   ============================================================ */

/* Scope delle variabili "guide" (--g-*) per poter riusare g-body__content
   e g-sidebar-toc anche fuori dalle pagine .mil-single-guida. Valori identici
   a quelli definiti dal plugin per .mil-single-guida. */
.lst {
  --g-ink: #1f2a32;
  --g-ink-2: #3d4a54;
  --g-accent: #c5563f;
  --g-accent-hover: #a84832;
  --g-bg: #f9f7f4;
  --g-paper: #fff;
  --g-border: #eaeaea;
  --g-border-light: #f0eeeb;
  --g-r: 8px;
  background: var(--g-bg);
}

/* ---------- Header sobrio (no hero scuro, no callout) ---------- */
.lst-head { background: var(--sand); border-bottom: 1px solid var(--hairline); }
.lst-head__inner { max-width: 1180px; margin: 0 auto; padding: 32px var(--gutter) 28px; }
.lst-breadcrumb { font-size: 12.5px; color: var(--ink-soft); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.lst-breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.lst-breadcrumb a:hover { color: var(--coral); }
.lst-breadcrumb .sep { opacity: 0.5; }
.lst-breadcrumb .current { color: var(--ink-3); }
.lst-head__title { font-family: var(--font-display); font-size: clamp(32px, 4vw, 44px); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.lst-head__intro { font-size: 16px; line-height: 1.6; color: var(--ink-3); max-width: 760px; margin: 12px 0 0; }
.lst-head__vat { display: inline-block; margin-top: 16px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em; color: var(--ink-2); background: var(--sand-3); border-radius: 999px; padding: 5px 13px; }

/* ---------- Sezioni ---------- */
.lst-sec { scroll-margin-top: 24px; }
/* La prima h2 dentro g-body__content ha gia' margin-top:40px: la riduciamo
   per la primissima sezione cosi' il contenuto parte vicino al TOC. */
.g-body__content > .lst-sec:first-child h2 { margin-top: 8px; }
.lst-examples { /* riusa stile ul di g-body__content */ }
.lst-note { font-size: 13px; line-height: 1.6; color: var(--ink-soft); margin: 6px 0 0; }

/* ---------- Tabelle: pulite, prezzi in colonna (NO chip) ---------- */
.lst-tablewrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  max-width: 100%;                 /* FIX B: il wrapper non deborda dalla colonna; scrolla su mobile */
  border: 1px solid var(--g-border); border-radius: var(--g-r);
  margin: 10px 0 6px; background: var(--g-paper);
}
.lst-tablewrap:focus-visible { outline: 2px solid var(--g-accent); outline-offset: 2px; }
.lst-table { width: 100%; max-width: 100%; border-collapse: collapse; table-layout: fixed; font-family: var(--font-sans); font-size: 14px; }
.lst-table th, .lst-table td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--g-border-light); overflow-wrap: break-word; word-break: normal; }
.lst-table thead th {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--g-ink); background: var(--sand-2); border-bottom: 1px solid var(--hairline);
  white-space: normal;             /* FIX A: gli header possono andare a capo (colonne piu' strette) */
  vertical-align: top;             /* FIX C: header multi-riga allineati in alto */
  line-height: 1.18;
  overflow-wrap: break-word;
  hyphens: auto;
}
.lst-table tbody th { font-weight: 600; color: var(--g-ink); }
.lst-table tbody td { color: var(--g-ink-2); }
.lst-table tbody tr:last-child th, .lst-table tbody tr:last-child td { border-bottom: 0; }
.lst-table tbody tr:hover { background: var(--g-bg); }
.lst-table .lst-num { text-align: right; font-variant-numeric: tabular-nums; }
.lst-table td.lst-num { white-space: normal; }   /* FIX C: i prezzi possono andare a capo in colonna stretta (es. "una tantum") */
.lst-table th.lst-num { white-space: normal; }   /* header numerici possono andare a capo */
.lst-table .lst-muted { color: var(--ink-soft); }

/* ---------- FIX C: larghezze RELATIVE (table-layout:fixed) ----------
   prezzi (.lst-num) stretti ed eguali, nome (1a col) medio, descrizione (col senza
   width) la piu' larga. min-width = solo floor per lo scroll su mobile (wrapper overflow-x:auto). */
.lst-table--compare { min-width: 420px; }
.lst-table--svc     { min-width: 560px; }   /* Schede / Listino completo (5 col) */
.lst-table--pack    { min-width: 680px; }   /* Pacchetti (7 col) */
.lst-table--perchi  { min-width: 360px; }
.lst-table--redaz   { min-width: 500px; }   /* 4 col */
.lst-table--sedi    { min-width: 420px; }

.lst-table--svc   thead th:first-child { width: 18%; }
.lst-table--svc   thead th.lst-num     { width: 14%; }      /* 3 prezzi uguali -> descrizione ~40% */
.lst-table--pack  thead th:first-child { width: 14%; }
.lst-table--pack  thead th.lst-num     { width: 11%; }      /* 5 prezzi uguali */
.lst-table--redaz thead th:first-child { width: 18%; }
.lst-table--redaz thead th.lst-num     { width: 18%; }      /* 2 prezzi -> descrizione ~46% */
.lst-table--sedi  thead th:first-child { width: 28%; }
.lst-table--sedi  thead th.lst-num     { width: 24%; }      /* 3 prezzi */
.lst-table--perchi  thead th:first-child    { width: 26%; } /* descrizione (col2) ~74% */
.lst-table--compare thead th:first-child    { width: 40%; }
.lst-table--compare thead th:nth-child(n+2) { width: 30%; } /* Free / Premium uguali */

/* ---------- TOC: desktop = sidebar sticky (riusa g-sidebar-*) ---------- */
.lst-side .g-sidebar-card { /* eredita: paper, bordo, sticky top:24px dalle guide */ }
.lst-side .g-sidebar-card__h { margin-bottom: 6px; }
/* la prima g-sidebar-section dentro la card non deve avere il filo sopra doppio */
.lst-side .g-sidebar-card > .g-sidebar-section:first-of-type { margin-top: 12px; }

/* ---------- TOC: mobile = disclosure "Indice" in cima ---------- */
.lst-toc-m-wrap { max-width: 1180px; }
.lst-toc-m { display: none; }
.lst-toc-m > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--g-ink);
}
.lst-toc-m > summary::-webkit-details-marker { display: none; }
.lst-toc-m > summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--ink-soft); }
.lst-toc-m[open] > summary::after { content: "\2212"; }
.lst-toc-m .lst-toc-groups { padding: 0 16px 14px; }
.lst-toc-m .g-sidebar-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ============================================================
   RESPONSIVE (breakpoint allineati alle guide: 1100 / 768 / 480)
   ============================================================ */
@media (max-width: 1100px) {
  .lst-side { display: none; }
  .lst-toc-m {
    display: block; margin: 18px 0 0;
    background: var(--g-paper); border: 1px solid var(--g-border); border-radius: var(--g-r);
  }
}
@media (max-width: 768px) {
  .lst-head__inner { padding: 24px var(--gutter) 22px; }
}
@media (max-width: 480px) {
  .lst-table { font-size: 13px; }
  .lst-table th, .lst-table td { padding: 9px 10px; }
  .lst-table thead th { font-size: 11px; letter-spacing: 0.04em; }
}