/* =========================================================
   IL PALLINO DI UN GRUPPO DI SEGNAPOSTI
   =========================================================
   Foglio a parte, e caricato sia da itera.html sia da viewer.html: il
   viewer ha il suo CSS scritto da zero (nessuna regola presa in prestito
   da main.css), quindi l'unico modo di avere lo stesso pallino nelle due
   pagine senza scriverlo due volte è un file suo. Due copie divergono al
   primo ritocco — è già successo con il divIcon delle tappe.

   Vedi js/modules/map-gruppi.js per il perché del raggruppamento.
   I colori sono quelli del progetto, ricopiati qui perché il viewer non
   ha le variabili di main.css: verde percorso sul bordo, carta dentro.
   ========================================================= */

.mappa-gruppo{
  width:100%;
  height:100%;
  border-radius:50%;
  background:#F7F4EC;
  border:2px solid #2D5C4D;
  /* Un alone chiaro attorno: sopra una foto o una strada scura il bordo
     verde da solo sparirebbe, e il pallino sembrerebbe una macchia. */
  box-shadow:0 0 0 2px rgba(247,244,236,.85), 0 2px 6px rgba(0,0,0,.28);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1;
  cursor:pointer;
  transition:transform .12s ease;
}

.mappa-gruppo:hover{ transform:scale(1.08); }

/* Il simbolo dice DI COSA è il gruppo — foto, luoghi, saluti — perché sui
   tre strati insieme un pallino col solo numero non si sa cosa conti. */
.mappa-gruppo-simbolo{
  font-size:10px;
  opacity:.85;
  margin-bottom:1px;
}

.mappa-gruppo b{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-weight:700;
  color:#1B1F23;
  font-size:12px;
}

/* Più cose contiene, più pesa a vedersi: la misura la decide il divIcon
   (iconSize), qui cambiano solo i corpi del testo perché dentro a
   quarantaquattro pixel un 12 sta stretto quando il numero è di tre
   cifre. */
.mappa-gruppo-medio .mappa-gruppo-simbolo{ font-size:11px; }
.mappa-gruppo-medio b{ font-size:13px; }
.mappa-gruppo-grande{ border-width:3px; }
.mappa-gruppo-grande .mappa-gruppo-simbolo{ font-size:12px; }
.mappa-gruppo-grande b{ font-size:14px; }

/* =========================================================
   I FILI DELLA ROSA
   =========================================================
   ⬇️ NUOVO (16/08/2026): quando lo zoom non basta più a separare un
   gruppo, i segnaposti escono in cerchio attorno al pallino e ognuno
   resta legato al centro da un filo — vedi js/modules/map-rosa.js.

   Il filo serve a dire "questi vengono da lì": senza, quattro pin
   comparsi in cerchio sembrano quattro posti veri disposti in tondo,
   che è proprio la bugia che il raggruppamento doveva evitare. Verde
   percorso come tutto il resto, ma sottile e un po' trasparente: deve
   spiegare, non farsi guardare. */
.mappa-rosa-filo{
  stroke:#2D5C4D;
  /* Un alone chiaro anche qui: su una strada scura o una foto satellite
     una riga verde di un pixel e mezzo sparirebbe. */
  filter:drop-shadow(0 0 1.5px rgba(247,244,236,.9));
}