:root {
  /* Tema chiaro (default) */
  --color-bg: #f5f6f8;
  --color-surface: #ffffff;
  --color-border: #e0e2e7;
  --color-text: #1c1f26;
  --color-text-muted: #6b7280;
  --color-text-faint: #9aa0aa;
  --color-primary: #2255dd;
  --color-primary-dark: #1a41ad;
  --color-error-bg: #fdecec;
  --color-error-border: #f3b4b4;
  --color-error-text: #9a1c1c;
  --color-ok: #2f9e5b;
  --color-warn: #d9a51c;
  --color-bad: #d9432f;
  --radius: 8px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);

  /* Tinte derivate riusate in piu' punti (badge, hover, sfondi sottili):
     centralizzate qui per evitare colori hex sparsi nel resto del CSS. */
  --color-surface-subtle: #fafbfc;
  --color-neutral-tint: #eef0f3;
  --color-primary-tint: #eef2ff;
  --color-primary-tint-border: #d7e0ff;
  --color-warn-tint-bg: #fff2df;
  --color-warn-tint-text: #a3660a;
  --color-banner-bg: #fff3cd;
  --color-banner-border: #f0d488;
  --color-banner-text: #6b4e00;
  --color-heatmap-nd-a: #f2f3f5;
  --color-heatmap-nd-b: #e6e8ec;
  --color-chart-prevanno: #a8bdf0;
  /* Overlay (tooltip mappa): volutamente identico in chiaro/scuro, non deve
     dipendere da --color-text (che si inverte in dark mode). */
  --color-overlay-bg: #1c1f26;
  --color-overlay-text: #ffffff;

  /* Token dedicati ai grafici canvas — palette categorica validata (skill dataviz):
     ordine fisso, mai ciclato; ordine e valori dalla palette di riferimento. */
  --chart-surface: #fcfcfb;
  --chart-text-primary: #0b0b0b;
  --chart-text-secondary: #52514e;
  --chart-text-muted: #898781;
  --chart-gridline: #e1e0d9;
  --chart-baseline: #c3c2b7;
  --chart-series-1: #2a78d6; /* blu — serie primaria (presenze, italiani) */
  --chart-series-2: #1baf7a; /* aqua — serie secondaria (posti letto, stranieri) */
  --chart-series-1-tint: #b7d3f6; /* stesso hue, step piu' chiaro: confronto stesso indicatore periodo precedente */
  --chart-good: #0ca30c;
  --chart-warning: #fab219;
  --chart-critical: #d03b3b;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

:root[data-theme="dark"] {
  /* Tema scuro: sfondo quasi nero (non nero puro), superfici leggermente piu'
     chiare dello sfondo, testo quasi bianco, colori semantici desaturati per
     restare leggibili senza abbagliare. */
  --color-bg: #14161b;
  --color-surface: #1c1f26;
  --color-border: #2e323c;
  --color-text: #edeef1;
  --color-text-muted: #a3a9b7;
  --color-text-faint: #767c8a;
  --color-primary: #6f93f0;
  --color-primary-dark: #a9c1f7;
  --color-error-bg: #3a1f22;
  --color-error-border: #6b3238;
  --color-error-text: #f2a7a7;
  --color-ok: #4caf7d;
  --color-warn: #e0b84a;
  --color-bad: #e2685a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);

  --color-surface-subtle: #242830;
  --color-neutral-tint: #2a2e37;
  --color-primary-tint: #1e2a4d;
  --color-primary-tint-border: #33447a;
  --color-warn-tint-bg: #4a3a12;
  --color-warn-tint-text: #f0c975;
  --color-banner-bg: #3d3212;
  --color-banner-border: #5c4a1a;
  --color-banner-text: #e8c565;
  --color-heatmap-nd-a: #262a33;
  --color-heatmap-nd-b: #1e2129;
  --color-chart-prevanno: #39456b;
  --color-overlay-bg: #1c1f26;
  --color-overlay-text: #ffffff;

  /* Stessi ruoli, step scuri validati (skill dataviz, banda dark OKLCH ~0.48-0.67). */
  --chart-surface: #1a1a19;
  --chart-text-primary: #ffffff;
  --chart-text-secondary: #c3c2b7;
  --chart-text-muted: #898781;
  --chart-gridline: #2c2c2a;
  --chart-baseline: #383835;
  --chart-series-1: #3987e5;
  --chart-series-2: #199e70;
  --chart-series-1-tint: #184f95;
  --chart-good: #0ca30c;
  --chart-warning: #fab219;
  --chart-critical: #d03b3b;
}

* {
  box-sizing: border-box;
}

/* L'attributo [hidden] deve sempre vincere sulle regole di layout (es. display:grid/flex
   su .kpi-row e simili), altrimenti un elemento "nascosto" via JS resta visibile. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
}

/* Spostato sotto il contenuto principale (prima era in cima alla pagina, sopra la piega):
   resta importante per la trasparenza sui dati ma non deve essere la prima cosa vista da un
   visitatore/crawler — decisione di Federico 2026-07-16. Bordo sopra, non sotto, ora che sta
   tra il contenuto e il footer invece che tra header e contenuto. */
.demo-banner {
  background: var(--color-banner-bg);
  border-top: 1px solid var(--color-banner-border);
  color: var(--color-banner-text);
  padding: 16px clamp(16px, 4vw, 48px);
  font-size: 0.85rem;
  text-align: center;
  line-height: 1.4;
}

.demo-banner a {
  color: inherit;
  font-weight: 600;
}

.app-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 24px clamp(16px, 4vw, 48px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

/* Sulle pagine città (/statistiche-turismo/<slug>) "Demand Radar" scende a <p> (l'H1 semantico
   diventa il nome della città, vedi .destinazione-intestazione__titolo sotto): stessa resa
   visiva di un h1, selettore duplicato per coprire entrambi i tag. */
.app-header__title h1,
.app-header__title .app-header__brand {
  margin: 0 0 4px 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.app-header__subtitle {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  max-width: 72ch;
}

.app-header__nav {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* Intestazione della destinazione selezionata: il vero "protagonista" visivo di ogni
   scheda pubblica (es. /statistiche-turismo/firenze) — la marca "Demand Radar" in alto
   resta come identita' dello strumento, ma qui il nome della citta' e' quello che l'utente
   (e i motori di ricerca, vedi <h1> semantico) deve vedere per primo. */
.destinazione-intestazione {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 4px;
}

.destinazione-intestazione__icona {
  font-size: 2.6rem;
  line-height: 1;
  flex-shrink: 0;
}

.destinazione-intestazione__titolo {
  margin: 0;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.destinazione-intestazione__sottotitolo {
  margin: 4px 0 0 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.destinazione-intestazione__sottotitolo .badge-categoria {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
  font-size: 0.78rem;
  font-weight: 600;
  margin-right: 8px;
}

.app-header__nav-link {
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text-muted);
  border: 1px solid transparent;
}

.app-header__nav-link:hover {
  background: var(--color-bg);
}

.app-header__nav-link[aria-current="page"] {
  color: var(--color-primary);
  background: var(--color-primary-tint);
  border-color: var(--color-primary-tint-border);
}

.tema-toggle {
  padding: 8px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

.tema-toggle:hover {
  background: var(--color-bg);
}

.app-main {
  padding: 24px clamp(16px, 4vw, 48px) 48px;
  max-width: 1100px;
  margin: 0 auto;
}

.app-footer {
  padding: 16px clamp(16px, 4vw, 48px) 32px;
  color: var(--color-text-faint);
  font-size: 0.8rem;
  max-width: 1100px;
  margin: 0 auto;
}

.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px clamp(16px, 3vw, 28px);
  margin-bottom: 20px;
}

.panel h2 {
  margin: 0 0 16px 0;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel__icon {
  font-size: 1.15rem;
  line-height: 1;
}

.fonte-dato {
  margin: 8px 0 0;
  font-size: 0.72rem;
  color: var(--color-text-faint);
}

.panel__subtitle {
  margin: 24px 0 8px 0;
  font-size: 1rem;
  color: var(--color-text);
  font-weight: 600;
}

.panel__description {
  margin: 0 0 12px 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  font-weight: 400;
}

.panel__header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.panel__header-row h2 {
  margin: 0;
}

.controls-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.controls-row__label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

select,
button {
  font: inherit;
}

#select-destinazione {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  min-width: 240px;
}

.btn {
  padding: 8px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text);
  transition: background 0.15s ease, opacity 0.15s ease;
}

.btn--secondary {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn--secondary:hover:not(:disabled) {
  background: var(--color-primary-tint);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.status-text {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.alert {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 0.9rem;
}

.alert--error {
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  color: var(--color-error-text);
}

.empty-state {
  padding: 20px 16px;
  text-align: center;
  color: var(--color-text-muted);
  background: var(--color-surface-subtle);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  font-size: 0.9rem;
}

.empty-state__hint {
  display: block;
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--color-text-faint);
}

.loading-state {
  padding: 32px;
  text-align: center;
  color: var(--color-text-muted);
}

canvas {
  width: 100%;
  max-width: 100%;
  display: block;
}

/* Grafici in SVG (testo sempre nitido: renderer nativo, non bitmap). Il viewBox interno
   fissa il sistema di coordinate di disegno; la larghezza reale segue il contenitore. */
.chart-svg {
  width: 100%;
  max-width: 100%;
  display: block;
  height: 260px;
  overflow: visible;
}

.chart-svg--basso {
  height: 140px;
}

.chart-svg--donut {
  width: 220px;
  height: 220px;
  max-width: 100%;
}

/* KPI row */
.panel--kpi {
  padding: 16px clamp(16px, 3vw, 28px);
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.kpi-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.kpi-card__label {
  font-size: 0.76rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.kpi-card__value {
  font-size: 1.3rem;
  font-weight: 700;
}

.kpi-card__value--positivo {
  color: var(--color-ok);
}

.kpi-card__value--negativo {
  color: var(--color-bad);
}

.kpi-card__hint {
  font-size: 0.76rem;
  color: var(--color-text-faint);
}

.kpi-card__badge {
  align-self: flex-start;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-neutral-tint);
  color: var(--color-text);
}

.kpi-card__badge--categoria {
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
}

/* Narrazione automatica */
.sr-only-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.panel--narrazione {
  padding: 16px clamp(16px, 3vw, 28px);
}

.narrazione-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.narrazione-lista li {
  position: relative;
  padding-left: 18px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-text);
}

.narrazione-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

.narrazione-vuota {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* Badge stato dato */
.badge-stato {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}

.badge-stato--osservato {
  background: var(--color-ok-tint, #d7f2d7);
  color: var(--color-ok);
}

.badge-stato--stimato {
  background: var(--color-warning-tint, #fdecc7);
  color: var(--chart-warning);
}

.badge-stato--previsto {
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
}

.badge-stato--provvisorio {
  background: var(--color-ok-tint, #d7f2d7);
  color: var(--color-ok);
  border: 1px dashed currentColor;
}

.badge-stato--dimostrativo {
  background: var(--color-neutral-tint);
  color: var(--color-text-muted);
}

.badge-stato--nd {
  background: var(--color-neutral-tint);
  color: var(--color-text-faint);
}

/* Mercato estero per paese */
.mercato-estero-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mercato-estero-lista li {
  display: grid;
  grid-template-columns: 1.3em 8em 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
}

.mercato-estero-lista__rank {
  color: var(--color-text-faint);
  font-weight: 700;
  text-align: right;
}

.mercato-estero-lista__paese {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text);
}

.mercato-estero-lista__barra-wrap {
  position: relative;
  background: var(--color-neutral-tint);
  border-radius: 4px;
  overflow: hidden;
  height: 14px;
}

.mercato-estero-lista__barra {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--chart-series-1);
  border-radius: 4px;
}

.mercato-estero-lista__quota {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Il mix ricettivo mostra sempre due misure (quota posti letto + numero strutture): serve
   piu' spazio e la possibilita' di andare a capo, a differenza dell'elenco mercati esteri. */
.mercato-estero-lista--larga li {
  grid-template-columns: 1.3em 10em 1fr auto;
}

.mercato-estero-lista--larga .mercato-estero-lista__quota {
  white-space: normal;
  text-align: right;
}

.mix-ricettivo-riepilogo {
  margin: 0 0 12px;
  font-size: 0.88rem;
  color: var(--color-text);
}

/* Heatmap stagionalita' */
.heatmap-stagionalita-wrap {
  overflow-x: auto;
}

.heatmap-stagionalita {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.8rem;
}

.heatmap-stagionalita th,
.heatmap-stagionalita td {
  padding: 6px 8px;
  text-align: center;
  border: 1px solid var(--color-border);
  white-space: nowrap;
}

.heatmap-stagionalita__anno-col {
  text-align: left;
}

.heatmap-stagionalita__anno {
  text-align: left;
  font-weight: 700;
  color: var(--color-text);
}

.heatmap-stagionalita__cella {
  font-variant-numeric: tabular-nums;
}

.heatmap-stagionalita__top3 {
  text-align: right;
  font-weight: 700;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Storico presenze + donut provenienza, affiancati */
.storico-presenze-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.storico-presenze-row__chart {
  flex: 1 1 360px;
  min-width: 0;
}

.storico-presenze-row__donut {
  flex: 0 0 220px;
}

.storico-presenze-row__donut .chart-svg {
  margin: 0 auto;
}

.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.82rem;
}

.donut-legend__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.donut-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Legenda generica per i grafici combinati/YoY */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.chart-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chart-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Previsione grid */
.previsione-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.previsione-row {
  display: grid;
  grid-template-columns: 110px 1fr 90px;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}

.previsione-row:last-child {
  border-bottom: none;
}

.previsione-row__mese {
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: capitalize;
}

.previsione-row__bar-track {
  background: var(--color-neutral-tint);
  border-radius: 999px;
  height: 14px;
  overflow: hidden;
  position: relative;
}

.previsione-row__bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.2s ease;
}

.previsione-row__value {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: right;
}

.previsione-row--insufficiente {
  grid-template-columns: 110px 1fr;
}

.previsione-row__insufficiente-label {
  font-size: 0.85rem;
  color: var(--color-text-faint);
}

.previsione-row__note {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-faint);
  margin-top: 2px;
}

@media (max-width: 640px) {
  .controls-row {
    flex-direction: column;
    align-items: stretch;
  }

  #select-destinazione {
    min-width: 0;
  }

  .kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .heatmap-stagionalita {
    font-size: 0.72rem;
  }

  .storico-presenze-row__donut {
    flex-basis: 100%;
  }

  .previsione-row {
    grid-template-columns: 90px 1fr 70px;
  }
}

/* Tooltip condiviso dei grafici canvas (una sola istanza, riposizionata via JS) */
.chart-tooltip {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  background: var(--color-overlay-bg);
  color: var(--color-overlay-text);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  line-height: 1.4;
  box-shadow: var(--shadow-sm);
  transform: translate(-50%, -115%);
  white-space: nowrap;
}

.chart-tooltip strong {
  font-weight: 700;
}

canvas.chart-canvas,
.chart-svg[data-interattivo="true"] {
  cursor: crosshair;
}

/* ---------- Grafici SVG: mark spec (skill dataviz) ---------- */

.chart-gridline {
  stroke: var(--chart-gridline);
  stroke-width: 1;
}

.chart-axis-label {
  fill: var(--chart-text-muted);
  font-size: 11px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.chart-serie-1 {
  fill: var(--chart-series-1);
}

.chart-serie-1-fill {
  fill: var(--chart-series-1);
}

.chart-serie-2-fill {
  fill: var(--chart-series-2);
}

.chart-serie-1-tint-fill {
  fill: var(--chart-series-1-tint);
}

.chart-serie-1-linea {
  stroke: var(--chart-series-1);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart-serie-2-linea {
  stroke: var(--chart-series-2);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart-serie-1-area {
  fill: var(--chart-series-1);
  opacity: 0.1;
}

.chart-marker-ring {
  fill: var(--chart-surface);
}

.chart-serie-1-marker {
  fill: var(--chart-series-1);
}

.chart-serie-2-marker {
  fill: var(--chart-series-2);
}

.chart-baseline-100 {
  stroke: var(--chart-baseline);
  stroke-width: 1;
}

.chart-linea-tratteggiata {
  stroke-dasharray: 5 4;
}

.chart-donut-buco {
  fill: var(--chart-surface);
}

.chart-donut-anno {
  fill: var(--chart-text-primary);
  font-size: 13px;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.donut-legend__swatch--serie1 { background: var(--chart-series-1); }
.donut-legend__swatch--serie2 { background: var(--chart-series-2); }
.donut-legend__swatch--serie1-tint { background: var(--chart-series-1-tint); }

.chart-legend__item--nota {
  flex-basis: 100%;
  font-size: 0.75rem;
  color: var(--color-text-faint);
}

/* ---------- hub /statistiche-turismo/ ---------- */

.statistiche-hub__sezione {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px clamp(16px, 3vw, 28px);
  margin-bottom: 20px;
}

.statistiche-hub__sezione h2 {
  margin: 0 0 4px 0;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.statistiche-hub__lista {
  list-style: none;
  margin: 16px 0 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.statistiche-hub__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
}

.statistiche-hub__link:hover,
.statistiche-hub__link:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-primary-tint);
}

.statistiche-hub__icona {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}

.statistiche-hub__nome {
  display: block;
  font-weight: 700;
  color: var(--color-text);
}

.statistiche-hub__luogo {
  display: block;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

/* ---------- breadcrumb ---------- */

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}

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

.breadcrumb__sep {
  color: var(--color-text-faint);
}