/* =========================================================
   LE FOTO SULLA MAPPA E LA FOTO APERTA GRANDE
   =========================================================
   ⬇️ NUOVO (18/08/2026). Foglio suo e non due blocchi dentro a main.css,
   che è già fra i quattro file da dividere (§4.4).

   Le misure sono le stesse del viewer pubblico (viewer.html, .foto-mappa e
   #fotoGrande): la stessa cosa nelle due pagine deve avere lo stesso
   aspetto, o si impara due volte lo stesso gesto. Il viewer tiene le sue
   dentro al file per scelta — quella pagina si apre senza dipendere da
   niente — quindi sono due copie che vanno tenute uguali a mano, come per
   css/foto-segnaposto.css.
   ========================================================= */

/* Il segnaposto tondo. cursor:zoom-in dice che si apre, prima ancora di
   toccarlo: è la differenza fra un segnaposto e una decorazione. */
.foto-mappa{
  width:46px; height:46px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid var(--white);
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  background:var(--line);
  cursor:zoom-in;
}
.foto-mappa img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- LA FOTO APERTA ---------- */
/* Fondo quasi nero e nient'altro: qui si guarda una foto, tutto il resto
   è disturbo. */
#fotoGrandeMappa{
  display:none;
  position:fixed; inset:0; z-index:6500;
  background:rgba(10,9,8,.94);
  align-items:center; justify-content:center;
  padding:12px;
}
#fotoGrandeMappa.aperto{ display:flex; }

#fotoGrandeMappa img{
  max-width:100%; max-height:82vh;
  object-fit:contain;
  border-radius:6px;
}

.fgm-chiudi{
  position:absolute; top:10px; right:12px;
  border:none; background:rgba(255,255,255,.15); color:#fff;
  width:36px; height:36px; border-radius:50%;
  font-size:17px; cursor:pointer;
}

/* Le frecce ai lati e non sotto: il pollice sta lì quando si tiene il
   telefono, e sotto ci sta già la didascalia. */
.fgm-freccia{
  position:absolute; top:50%; transform:translateY(-50%);
  border:none; background:rgba(255,255,255,.15); color:#fff;
  width:40px; height:56px; border-radius:8px;
  font-size:26px; line-height:1; cursor:pointer;
}
.fgm-prima{ left:6px; }
.fgm-dopo{ right:6px; }

.fgm-didascalia{
  position:absolute; bottom:14px; left:12px; right:12px;
  text-align:center;
  color:rgba(255,255,255,.85);
  font-size:12px; line-height:1.4;
}