/* ==========================================================================
   mappa e geotracking — vedi doc/copy.md, sezione «MAPPA E GEOTRACKING».

   Sezione scura fra l'area dipendente (chiara) e «Perche' EDILinCloud».
   Zero JavaScript, zero classi Bootstrap, nessuna immagine raster: la mappa e'
   un SVG disegnato nella view. Mobile-first.
   La regola prefers-reduced-motion e il focus-visible stanno in edil.css.

   COLORI FUNZIONALI: verde = valido / in orario, rosso = fuori area. Sono
   l'unica deroga alla regola blu-azzurro di famiglia e vivono SOLO qui: i
   token stanno in edil.css con la stessa avvertenza.
   ========================================================================== */

.geo {
  position: relative;
  overflow: hidden;
  padding: 64px 0 72px;
  background: linear-gradient(160deg, #071A2E 0%, #0A2A48 60%, #0C3A66 100%);
}

/* Alone azzurro in basso a sinistra: stessa funzione dell'alone della hero,
   togliere la campitura piatta dall'angolo. Sta dalla parte del TESTO, non
   della mappa, cosi' non compete col pannello — che e' gia' l'oggetto
   luminoso della sezione. In arabo il testo passa a destra e l'alone lo segue
   (vedi il blocco [dir="rtl"] in fondo). */
.geo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(620px 460px at 8% 94%,
    rgba(46, 155, 230, .20) 0%,
    rgba(46, 155, 230, 0) 70%);
}

.geo__griglia {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Colonna testo
   -------------------------------------------------------------------------- */

/* Su fondo scuro l'occhiello va in azzurro CHIARO: l'azzurro pieno qui sta
   sotto il 4,5:1 che WCAG AA chiede a un'etichetta di 12,5 px. */
.geo__occhiello {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  letter-spacing: .16em;
  line-height: 1.2;
  color: var(--azzurro-chiaro);
  margin-bottom: 16px;
}

/* Trattino azzurro che apre l'occhiello, come nella hero. Sta nel CSS e non
   nella traduzione: e' un segno grafico, non un carattere da tradurre. */
.geo__occhiello::before {
  content: "";
  flex: 0 0 auto;
  width: 28px;
  height: 2px;
  background: var(--azzurro);
}

.geo__titolo {
  font-family: var(--f-titolo);
  font-weight: 700;
  font-size: clamp(28px, 5.8vw, 39px);
  line-height: 1.14;
  letter-spacing: -.025em;
  color: var(--bianco);
  margin: 0 0 18px;
}

.geo__titolo-tenue {
  display: block;
  color: rgba(255, 255, 255, .5);
}

.geo__lead {
  font-family: var(--f-testo);
  font-size: 17px;
  line-height: 1.68;
  color: rgba(255, 255, 255, .76);
  max-width: 46ch;
  margin: 0 0 30px;
}

.geo__punti {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 22px;
}

.geo__punto {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
}

/* Riquadro icona: velo azzurro tenue, icona in azzurro chiaro a filo. Il velo
   e' lo sfondo, l'icona e' l'accento — mai due pieni sullo stesso oggetto. */
.geo__punto-icona {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(46, 155, 230, .14);
  border: 1px solid rgba(143, 207, 247, .18);
  color: var(--azzurro-chiaro);
}

.geo__punto-icona svg { width: 22px; height: 22px; }

.geo__punto-titolo {
  font-family: var(--f-titolo);
  font-weight: 700;
  font-size: 17.5px;
  line-height: 1.3;
  color: var(--bianco);
  margin: 0 0 6px;
}

.geo__punto-testo {
  font-family: var(--f-testo);
  font-size: 14.5px;
  line-height: 1.62;
  color: rgba(255, 255, 255, .72);
  margin: 0;
}

/* La parte chiave del testo. E' un <b>: la sostanza e' «questo conta piu' del
   resto», non «questo e' un titolo». Il peso resta quello del testo perche' a
   14,5 px su fondo scuro il grassetto impasta; a distinguerlo basta il colore. */
.geo__chiave {
  color: var(--azzurro-chiaro);
  font-weight: inherit;
}

/* Riga di conformita': art. 4 dello Statuto dei lavoratori e GDPR. Piccola ma
   non nascosta — e' un'informazione, non una postilla da far sparire, quindi
   resta sopra il 4,5:1 richiesto. */
.geo__nota {
  font-family: var(--f-testo);
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .6);
  max-width: 52ch;
  margin: 0;
}

.geo__nota-link {
  color: var(--azzurro-chiaro);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.geo__nota-link:hover,
.geo__nota-link:focus-visible { color: var(--bianco); }

/* --------------------------------------------------------------------------
   Il pannello mappa
   -------------------------------------------------------------------------- */
.geo__pannello {
  position: relative;
  /* Quadrato a tutte le larghezze, come chiede la nota mobile della copy. */
  aspect-ratio: 1;
  border-radius: 22px;
  overflow: hidden;
  background: #08172A;
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 34px 80px rgba(2, 10, 20, .55);
}

.geo__mappa {
  display: block;
  width: 100%;
  height: 100%;
  /* Il disegno resta in coordinate LTR anche in arabo: text-anchor="start"
     vuol dire «il bordo sinistro del testo sta su questa x», e con la pagina
     in rtl l'etichetta verde partiva a sinistra della x finendo sopra il suo
     dischetto. Il testo arabo continua a comporsi da destra a sinistra dentro
     la sua riga — quello lo fa il bidi, non questa proprieta'. */
  direction: ltr;
}

/* --- Strati della mappa, dal fondo alla superficie --- */

/* Isolati: impronte di edifici, bianco quasi invisibile. Fanno tessuto. */
.geo-isolati rect { fill: #ffffff; rx: 1.5; }

/* Fiume: una fascia azzurra tenue, senza bordo. */
.geo-fiume {
  fill: none;
  stroke: rgba(46, 155, 230, .13);
  stroke-width: 24;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Bordo delle strade: il colore del fondo, piu' largo della strada. Cancella
   gli isolati sotto la carreggiata, come fa un renderer di mappe. */
.geo-bordo path,
.geo-bordo circle {
  fill: none;
  stroke: #08172A;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Gerarchia: principali azzurre e larghe, secondarie bianche, vie sottili. */
.geo-strada path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.geo-strada--principale path { stroke: rgba(46, 155, 230, .18); stroke-width: 8; }
.geo-strada--secondaria path { stroke: rgba(255, 255, 255, .12); stroke-width: 4.5; }
.geo-strada--via path        { stroke: rgba(255, 255, 255, .07); stroke-width: 2.2; }

.geo-rotonda {
  fill: none;
  stroke: rgba(46, 155, 230, .18);
  stroke-width: 6;
}

.geo-fence {
  fill: url(#geo-alone);
  stroke: var(--azzurro);
  stroke-width: 2;
  stroke-dasharray: 7 7;
  opacity: .85;
}

.geo-fence-etichetta {
  font-family: var(--f-etichetta);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  fill: var(--azzurro-chiaro);
  /* Contorno del colore del fondo, disegnato sotto il riempimento: il testo
     resta leggibile anche dove passa sopra una strada. */
  paint-order: stroke;
  stroke: #08172A;
  stroke-width: 4px;
  stroke-linejoin: round;
}

/* --- I due percorsi --- */
.geo-traccia {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.geo-traccia--mario { stroke: var(--azzurro); }
.geo-traccia--luca  { stroke: var(--verde); }

/* Pallini di passaggio: vuoti, col bordo del colore di chi cammina. Il vuoto
   dice «e' passato di qui», il pieno dice «e' qui adesso». */
.geo-passo {
  fill: #08172A;
  stroke-width: 2.4;
}
.geo-passo--mario { stroke: var(--azzurro); }
.geo-passo--luca  { stroke: var(--verde); }

.geo-ora--mario { fill: var(--azzurro); }
.geo-ora--luca  { fill: var(--verde); }

/* --- Pin del cantiere --- */
.geo-pin {
  fill: var(--blu);
  stroke: var(--azzurro-chiaro);
  stroke-width: 1.6;
}
.geo-pin-occhio { fill: var(--bianco); }

/* --- Stati: valido (verde pieno) e bloccato (rosso a contorno) ---
   La differenza non e' solo il colore: pieno contro vuoto si legge anche in
   bianco e nero e da chi non distingue rosso e verde. */
.geo-stato--ok { fill: var(--verde); }
.geo-stato--ko {
  fill: rgba(255, 107, 107, .14);
  stroke: var(--rosso);
  stroke-width: 2;
}

.geo-stato-segno {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.geo-stato-segno--ok { stroke: #04101E; }
.geo-stato-segno--ko { stroke: var(--rosso); }

.geo-stato-testo {
  font-family: var(--f-etichetta);
  font-size: 14px;
  font-weight: 600;
  paint-order: stroke;
  stroke: #08172A;
  stroke-width: 4px;
  stroke-linejoin: round;
}
.geo-stato-testo--ok { fill: var(--verde); }
.geo-stato-testo--ko { fill: var(--rosso); }

/* --- Badge «in orario · live» --- */
.geo-badge {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-etichetta);
  font-weight: 600;
  font-size: 11px;
  color: rgba(255, 255, 255, .88);
  background: rgba(4, 16, 30, .68);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 999px;
  padding: 6px 12px;
  backdrop-filter: blur(6px);
}

.geo-badge__pallino {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--verde);
  /* Il battito dice «adesso», che e' esattamente quello che il badge afferma.
     Chi ha chiesto meno animazioni lo vede fermo: la regola globale di
     edil.css azzera la durata, e il pallino resta comunque verde e visibile. */
  animation: geo-battito 2s ease-in-out infinite;
}

@keyframes geo-battito {
  0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(53, 208, 165, .55); }
  50%      { opacity: .6; box-shadow: 0 0 0 5px rgba(53, 208, 165, 0); }
}

/* --- Legenda --- */
.geo-legenda {
  position: absolute;
  bottom: 14px;
  inset-inline-start: 14px;
  /* Su pannello stretto la legenda va a due righe invece di uscire: e' quello
     che chiede la nota mobile della copy. */
  inset-inline-end: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.geo-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-etichetta);
  font-weight: 500;
  font-size: 11px;
  color: rgba(255, 255, 255, .82);
  background: rgba(4, 16, 30, .68);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 999px;
  padding: 5px 11px;
  backdrop-filter: blur(6px);
}

.geo-chip i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: 0 0 auto;
}

.geo-chip--mario i { background: var(--azzurro); }
.geo-chip--luca  i { background: var(--verde); }

/* Chip spento: il quadratino e' vuoto e il testo arretra. E' la riga che dice
   che fuori orario non si traccia nessuno, quindi deve SEMBRARE spenta. */
.geo-chip--spento {
  color: rgba(255, 255, 255, .52);
}
.geo-chip--spento i {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, .32);
}

/* --------------------------------------------------------------------------
   Da 768 px: la sezione respira come le altre.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .geo { padding: 96px 0 100px; }
}

/* --------------------------------------------------------------------------
   Da 900 px: due colonne 0,82fr / 1,18fr — il testo stretto a sinistra, la
   mappa larga a destra. Sotto questa soglia e' una colonna sola: prima il
   testo, poi il pannello a larghezza piena, come chiede la nota mobile.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .geo__griglia {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: 54px;
  }
}

/* --------------------------------------------------------------------------
   Arabo. Griglia, testo, icone e chip si specchiano da soli perche' sono flex
   e grid e usano proprieta' logiche: qui resta il gradiente dell'alone, che
   non ha equivalente logica e va ribaltato a mano (posizione: 100% - x).

   La MAPPA non si ribalta, come i mattoncini della hero: e' un disegno, e un
   cantiere non ha un verso di lettura. Specchiarla sposterebbe soltanto il
   dischetto rosso dall'altra parte, senza dire niente di piu'.
   -------------------------------------------------------------------------- */
[dir="rtl"] .geo::before {
  background: radial-gradient(620px 460px at 92% 94%,
    rgba(46, 155, 230, .20) 0%,
    rgba(46, 155, 230, 0) 70%);
}