/* territorio: CSS delle composizioni, portato dallo <style> dei componenti Astro (src/sezioni/territorio/) e limitato alla classe della sezione. */

/* territorio/Mappa.astro → .b-territorio-mappa */
  .b-territorio-mappa .mappa-scena {
    position: relative; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: center; gap: 24px;
    padding: calc(var(--testata) + 16px) var(--margine) 32px; overflow: hidden;
  }
  .dove[data-fondo="scuro"].b-territorio-mappa .mappa-scena { background: var(--fondo-scuro); }
  .b-territorio-mappa .mappa-testo h2 { font-size: clamp(2.2rem, 5vw, var(--scala-5)); margin-bottom: .4em; }
  .b-territorio-mappa .mappa-testo p { max-width: 30ch; color: var(--testo-secondario); }
  .dove[data-fondo="scuro"].b-territorio-mappa .mappa-testo p { color: var(--salvia-chiara); }
  .b-territorio-mappa .mappa-testo p + p { margin-top: .6em; }
  .b-territorio-mappa .mappa-testo .btn, .b-territorio-mappa .mappa-testo .link-freccia { margin-top: 24px; }
  .b-territorio-mappa .mappa-testo .nota { margin-top: 28px; }

  .b-territorio-mappa .mappa { width: 100%; height: min(78svh, 720px); overflow: visible; }
  .b-territorio-mappa .mappa .strada { fill: none; stroke: var(--extra-salvia); stroke-width: 3; stroke-linecap: round; }
  .b-territorio-mappa .mappa .comune circle { fill: currentColor; }
  .b-territorio-mappa .mappa text { paint-order: stroke; stroke: var(--fondo); stroke-width: 7px; stroke-linejoin: round; fill: currentColor; }
  .dove[data-fondo="scuro"].b-territorio-mappa .mappa text { stroke: var(--fondo-scuro); }
  .b-territorio-mappa .mappa .comune text { font: 600 22px var(--font-testo); }
  .b-territorio-mappa .mappa .minuti { fill: var(--testo-secondario); font: 600 17px var(--font-dettaglio); letter-spacing: .05em; }
  .dove[data-fondo="scuro"].b-territorio-mappa .mappa .minuti { fill: var(--salvia-chiara); }
  .b-territorio-mappa .mappa .negozio circle.pieno { fill: var(--accento); }
  .b-territorio-mappa .mappa .negozio circle.anello { fill: none; stroke: var(--accento); stroke-width: 3; }
  .b-territorio-mappa .mappa .negozio text { font: 800 26px var(--font-titoli); }
  /* L'indirizzo ha un alone del colore del fondo: una strada che gli passa sotto non lo attraversa. */
  .dove[data-fondo="scuro"].b-territorio-mappa .mappa .negozio text { paint-order: stroke; stroke: var(--fondo-scuro); stroke-width: 12px; stroke-linejoin: round; }

  @media (max-width: 700px) {
    .b-territorio-mappa .mappa-scena { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: 8px; padding-bottom: 20px; }
    .b-territorio-mappa .mappa-testo h2 { font-size: clamp(2rem, 9vw, 2.6rem); }
    .b-territorio-mappa .mappa-testo .btn { margin-top: 18px; }
    .b-territorio-mappa .mappa-testo .nota { margin-top: 16px; }
    .b-territorio-mappa .mappa { height: 100%; min-height: 0; }
    .b-territorio-mappa .mappa .comune text { font-size: 34px; }
    .b-territorio-mappa .mappa .minuti { font-size: 30px; }
    .b-territorio-mappa .mappa .negozio text { font-size: 36px; }
  }