/* =========================================================
   LA MINIATURA DELLA FOTO SUL SEGNAPOSTO DELLA TAPPA
   =========================================================
   ⬇️ NUOVO (17/08/2026, segnalato dall'utente con una fotografia dello
   schermo: la foto della tappa disegnata a grandezza naturale, sopra
   mezza mappa).

   IL DIFETTO, ED È VECCHIO DI DIECI GIORNI. `pinIcon()` in
   js/modules/map.js sa disegnare una miniatura accanto al pin da fine
   luglio, ma **solo il viewer** la accendeva — e infatti il suo stile
   vive dentro a viewer.html, che ha il foglio suo. Il commento accanto
   diceva a lettere: «su itera.html questa classe non viene mai generata,
   quindi non serve replicarla in main.css».

   Il 07/08 «Foto» è diventato un interruttore dei filtri della mappa
   (js/modules/map-filtri.js), che accende `showMarkerPhotoBadge` anche
   qui: da quel giorno itera.html generava il markup **senza avere lo
   stile**, e il commento era diventato falso senza che nessuno lo
   riscrivesse. È il caso di scuola di CLAUDE.md §6 — «il codice ha
   ragione sui documenti»: qui il documento era un commento, ed era
   rimasto indietro di dieci giorni.

   PERCHÉ NON SI VEDEVA. La miniatura compariva solo dopo un ridisegno
   qualsiasi, e quasi nessuno ne fa uno stando fermo sulla mappa. La
   correzione dell'ordine di bootstrap() (17/08, stessa sera) l'ha
   portata all'apertura — e con lei è arrivata a schermo la foto grande.
   Non l'ha causata: l'ha resa visibile subito invece che ogni tanto.

   ⚠️ !important È NECESSARIO, e non è pigrizia. leaflet.css contiene una
   regola più specifica della nostra — `.leaflet-container
   .leaflet-marker-pane img { width:auto; height:auto; }` — che altrimenti
   vince e disegna la fotografia alla sua dimensione vera. È la stessa
   nota che sta in viewer.html dal 30/07, dove il difetto era già stato
   visto e risolto.

   DUE COPIE, E RESTA COSÌ. Questo foglio serve itera.html (e la sua copia
   generata iterav2.html); viewer.html tiene la sua, perché quella pagina
   ha per scelta lo stile tutto dentro — è scritto in cima al suo file, ed
   è la ragione per cui si apre senza dipendere da niente. Le due copie
   devono restare uguali: se cambia la misura qui, va cambiata anche là.
   ========================================================= */

/* Il contenitore: fa da sistema di coordinate alla miniatura, senza
   spostare il pin di un pixel da dov'era. */
.stop-pin-wrap{ position:relative; width:100%; height:100%; }

.marker-photo-badge{
  position:absolute;
  top:-3px; left:32px;
  width:22px !important; height:22px !important;
  max-width:22px !important; max-height:22px !important;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--white);
  box-shadow:0 2px 6px rgba(0,0,0,.3);
  /* Nessuna contro-rotazione: a differenza di .pin-num, che sta DENTRO a
     .stop-pin (ruotato di -45°), questa immagine è sua SORELLA dentro a
     .stop-pin-wrap e non eredita nessuna rotazione da correggere. */
}