/* ============================================================
   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; 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); }
.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: bottom;          /* header multi-riga allineati in basso */
  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: nowrap; }   /* FIX A: prezzi dato mai a capo */
.lst-table th.lst-num { white-space: normal; }   /* FIX A: header numerici possono andare a capo */
.lst-table .lst-muted { color: var(--ink-soft); }
/* min-width per scroll orizzontale solo quando serve */
.lst-table--compare { min-width: 560px; }
.lst-table--svc { min-width: 700px; }   /* Schede / Listino completo (5 col) */
.lst-table--pack { min-width: 560px; }   /* Pacchetti (7 col) - FIX B: rientra nella colonna principale a desktop; floor per scroll mobile */
.lst-table--perchi { min-width: 480px; }
.lst-table--redaz { min-width: 600px; }
.lst-table--sedi { min-width: 460px; }

/* ---------- 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 th, .lst-table td { padding: 9px 11px; }
}