/*
 * La rete dei centri di noleggio (brand book 5.16.0): il catalogo della
 * homepage a manifesto in riga (§ 5.2.1, § 4.6.5 linguetta 2) e l'elenco dei
 * centri di Chi siamo e Contatti (componente nlg-mappa-centri, versione B).
 * Solo token del kit.
 */

/* ── Le caselle e le loro etichette, come nel partial del libro: l'etichetta
   in UI 600 al corpo di base, non in maiuscoletto. */
.nw-rete-campo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 200px;
  min-width: 0;
}
.nw-rete-etichetta {
  font: 600 var(--nlg-fs-body)/1.3 var(--nlg-font-ui);
  color: var(--nlg-text-1);
  text-transform: none;
  letter-spacing: 0;
}

/* ── Il catalogo della homepage (nlg-hp-listing-proposte): a sinistra titolo
   e introduzione, a destra le due caselle; sotto le anteprime, quattro per
   riga, e «Tutte le proposte» a destra. */
.nw-rete-catalogo__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--nlg-s-5) var(--nlg-gutter, 32px);
  margin-bottom: var(--nlg-s-6);
}
.nw-rete-catalogo__titoli {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-3);
  flex: 1 1 420px;
  min-width: 0;
}
.nw-rete-catalogo__titoli .nw-in-h2 { margin: 0; }
.nw-rete-catalogo__titoli .nw-in-testo { margin: 0; max-width: 60ch; }
.nw-rete-catalogo__caselle {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nlg-s-3);
  flex: 0 1 520px;
  min-width: 0;
}
/* Quattro colonne fisse, a prescindere da quante anteprime l'ambito o la
   provincia scelti lasciano visibili (il committente, 2026-11-04: «restino
   4 colonne a prescindere dal numero di anteprime»): con `auto-fit` due
   sole anteprime si allargavano a meta' riga ciascuna. Due colonne sui
   tablet, una sul telefono. */
.nw-hp-proposte.nw-hp-proposte--riga {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 959px) {
  .nw-hp-proposte.nw-hp-proposte--riga { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 519px) {
  .nw-hp-proposte.nw-hp-proposte--riga { grid-template-columns: minmax(0, 1fr); }
}
.nw-hp-proposte--riga > li[hidden] { display: none; }
.nw-hp-proposta.nw-hp-proposta--riga {
  aspect-ratio: 3 / 4;
  background:
    var(--nw-immagine, none) center 28% / 78% no-repeat,
    linear-gradient(var(--nlg-velo-ripiego), var(--nlg-velo-ripiego)),
    url(../brand/immagini/nlg-trama.png) center/cover no-repeat;
  background-color: var(--nlg-passepartout);
}
.nw-hp-proposta--riga .nw-hp-proposta__velo {
  background: linear-gradient(to top, var(--nlg-immagine-velo) 0%, var(--nlg-immagine-velo) 40%, transparent 72%);
}
.nw-hp-proposta--riga .nw-hp-proposta__corpo { padding: 16px 18px 18px; }
.nw-hp-proposta--riga .nw-hp-proposta__titolo {
  font: 800 var(--nlg-fs-h4)/var(--nlg-lh-h4) var(--nlg-font-ui);
  letter-spacing: var(--nlg-ls-h4);
}
.nw-rete-catalogo__tutte {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--nlg-s-5);
}
.nw-rete-catalogo__tutte-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font: 700 var(--nlg-fs-button)/1.3 var(--nlg-font-ui);
  color: var(--nlg-blue-ink);
  text-decoration: none;
}

/* ── La rete di Chi siamo: il testo e i tre numeri. */
.nw-rete-testa {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--nlg-s-5) var(--nlg-gutter, 32px);
  margin-bottom: var(--nlg-s-6);
}
.nw-rete-testa__testo { flex: 1 1 420px; min-width: 0; }
.nw-rete-numeri {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--nlg-s-5);
}
.nw-rete-numero { display: flex; flex-direction: column; gap: 2px; }
.nw-rete-numero__cifra {
  font: 800 var(--nlg-fs-h2)/1 var(--nlg-font-ui);
  letter-spacing: var(--nlg-ls-h2);
  color: var(--nlg-text-1);
}
.nw-rete-numero__cosa {
  font: 400 var(--nlg-fs-body-sm)/1.4 var(--nlg-font-text);
  color: var(--nlg-text-2);
}

/* ── L'elenco dei centri (nlg-mappa-centri, versione B): la casella, la
   riga dell'esito e le schede del § 4.6.1; la scheda del centro scelto
   porta il bordo dell'azione. */
/* A sinistra l'elenco, a destra la mappa (versione B, «prima l'elenco, poi
   la mappa»); sotto i 680 px la mappa scende sotto l'elenco. */
.nw-rete {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--nlg-s-6) var(--nlg-gutter, 32px);
  align-items: start;
  min-width: 0;
}
.nw-rete__elenco {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-4);
  min-width: 0;
}
.nw-rete__elenco > .nw-rete-campo { flex: none; }
.nw-rete-campo__riga {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nw-rete-campo__riga .nlg-campo { flex: 1 1 200px; min-width: 0; }
.nw-rete__posizione { flex: none; }

/* La mappa (nlg-mappa-centri): l'Italia su --nlg-surface-1, i Paesi vicini
   su --nlg-canvas, le province come punti nel terzo inchiostro, i centri
   come quadri dell'azione; il centro scelto in rosso, le sue province in
   blu, il visitatore in giallo col filo tratteggiato verso il centro. */
.nw-rete__mappa {
  min-width: 0;
  max-width: 440px;
  width: 100%;
  justify-self: center;
}
.nw-rete-mappa {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--nlg-r-lg);
  background: var(--nlg-canvas);
  border: 1px solid var(--nlg-border);
}
.nw-rete-mappa__vicini { fill: var(--nlg-canvas); stroke: var(--nlg-border); stroke-width: 1; }
.nw-rete-mappa__italia { fill: var(--nlg-surface-1); stroke: var(--nlg-border-strong); stroke-width: 1.2; }
.nw-rete-mappa__provincia { fill: var(--nlg-text-3); opacity: .5; transition: r .15s, opacity .15s; }
.nw-rete-mappa__provincia[data-servita] { fill: var(--nlg-action); opacity: .9; }
.nw-rete-mappa__provincia[data-scelta] { r: 7.5; }
.nw-rete-mappa__centro { cursor: pointer; }
.nw-rete-mappa__alone { fill: var(--nlg-surface-1); }
.nw-rete-mappa__quadro { fill: var(--nlg-action); }
.nw-rete-mappa__centro[data-attivo] .nw-rete-mappa__quadro { fill: var(--nlg-bar-red); }
.nw-rete-mappa__nome { font: 700 13px var(--nlg-font-ui); fill: var(--nlg-text-1); }
.nw-rete-mappa__filo { stroke: var(--nlg-action); stroke-width: 2; stroke-dasharray: 4 4; }
.nw-rete-mappa__tu { fill: var(--nlg-bar-yellow); stroke: var(--nlg-text-1); }
.nw-rete__esito {
  min-height: 1.5em;
  font: 400 var(--nlg-fs-body-sm)/1.5 var(--nlg-font-text);
  color: var(--nlg-text-2);
}
.nw-rete__centri {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nw-rete-centro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--nlg-surface-1);
  border: 1px solid var(--nlg-border);
  border-radius: var(--nlg-r-xl);
  min-width: 0;
}
.nw-rete-centro[data-attivo] {
  border-color: var(--nlg-action);
  box-shadow: inset 0 0 0 1px var(--nlg-action);
}
.nw-rete-centro__etichetta { color: var(--nlg-text-3); }
.nw-rete-centro__nome {
  font: 700 var(--nlg-fs-body-lg)/1.3 var(--nlg-font-ui);
  color: var(--nlg-text-1);
  text-decoration: none;
}
.nw-rete-centro__riga {
  font: 400 var(--nlg-fs-body-sm)/1.5 var(--nlg-font-text);
  color: var(--nlg-text-2);
}
.nw-rete-centro__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.nw-rete-centro__bottone { height: 36px; padding: 0 12px; font-size: 13px; }