/* ══ SICILYTRAVEL MAPS — LA PAGINA È LA MAPPA ═════════════════════════════════
   Dentro un evento o dentro un viaggio la mappa è un riquadro alto quattrocento
   pixel, e va bene: là mostra una cosa sola. Qui si esplora, e una mappa da
   esplorare dentro una finestrella è una mappa che si guarda dal buco della
   serratura.

   Quindi: niente scorrimento della pagina, niente margini, niente piede. La
   carta arriva ai quattro bordi e la barra del sito ci sta sopra. */

  body.maps-piena{ margin:0; overflow:hidden; }
/* Il fondo anche sull'html: su Safari, con `100svh`, il colore messo solo sul
   corpo lascia una banda grigia in fondo quando la barra degli indirizzi si
   ritira. */
  html:has(body.maps-piena){ background:#aad3df; }

  /* ═══ L'INTESTAZIONE STA DENTRO ═══════════════════════════════════════════
     `100svh` è giusta perché questo contenitore comincia in cima alla pagina: la
     barra e il suo spaziatore stanno DENTRO di lui, non prima.

     Avevo provato a togliere l'altezza della barra da qui, dopo aver messo
     l'intestazione fuori in un'altra pagina: la correzione era nel posto
     sbagliato — sarebbe andata bene per una pagina e avrebbe accorciato questa
     di cinquantaquattro pixel. La regola non si piega alla pagina che sbaglia:
     è la pagina che si mette in riga. */
  .maps{ position:relative; height:100svh; width:100%; overflow:hidden;

/* ═══ LA DISTANZA DAL BORDO, UNA SOLA PER TUTTI ═══════════════════════════════
   Ricerca, comandi, scala e firma stanno tutti appoggiati ai bordi dello
   schermo. Ognuno era nato in un momento diverso e portava la sua misura — 5
   pixel i comandi, 10 la scala, 11 la firma, 11 e due decimi la ricerca — e da
   fuori si legge come una cosa messa storta, senza che si capisca cosa.

   Adesso è un numero solo, scritto qui. Cambiarlo li muove tutti insieme, che è
   l'unico modo perché restino allineati anche fra sei mesi.

   Sei pixel e non dodici: qui la parete è il bordo dello schermo, non il bordo
   di una card, e la mappa deve arrivarci il più vicino possibile. Un margine
   largo su una carta a pagina intera è carta buttata. */
    --bordo:6px;
/* Il fondo resta più largo: là sotto c'è il bordo dello schermo vero — sui
   telefoni con la tacca in basso ci passa anche la barretta di sistema — e sei
   pixel lo sfiorerebbero. Non è lo stesso caso dei lati, e non è lo stesso
   numero. */
    --bordo-sotto:12px;
/* Quanto scendono da sotto la barra del sito NON è un margine: è dove finisce la
   barra. Cambia con lei, non con i bordi. */
    --sotto-barra:62px; }

/* ── LA BARRA DEL SITO, SOPRA LA CARTA ──────────────────────────────────────
   Non sposta la mappa di un pixel: `absolute` e non `sticky`, se no la carta
   comincerebbe sotto la barra e in cima resterebbe una striscia di niente. */
  .maps .landing-nav{ position:absolute; top:0; left:0; right:0; z-index:20; }
/* La barra si porta dietro un distanziatore che tiene il posto sotto di lei:
   serve nelle pagine che scorrono, qui sarebbe una fascia vuota sopra la
   carta — e la carta comincerebbe più in basso del bordo dello schermo. */
  .maps .ln-spacer{ display:none; }

/* ── IL CONTENITORE DELLA CARTA ─────────────────────────────────────────────
   Il componente `#stmap` nasce con angoli tondi, ombra e altezza fissa: sono
   giusti per una card, e qui li disfa tutti. A pagina intera un angolo tondo
   sarebbe un angolo di schermo mangiato. */
  .maps #stmap{ position:absolute; inset:0; height:100%; width:100%;
    border-radius:0; border:0; box-shadow:none; }

/* ── SOTTO LA BARRA, NON DIETRO ─────────────────────────────────────────────
   Comandi, scala e marchio nascono a ridosso del bordo di sopra — giusto in una
   card, che di barre non ne ha. Qui il bordo di sopra è occupato dalla barra del
   sito, e il primo bottone finiva mezzo dietro al menu.

   Il selettore ripete `#stmap` perché è quello che usa il foglio del
   componente: un `.maps .stm-glnav` da solo perde il confronto con un `id`, e
   la regola non si applica mai — si vede solo guardando, e sembra un caso. */
  .maps #stmap .stm-glnav{ margin:var(--sotto-barra) var(--bordo) 0 0; }
/* La «i» dei crediti e la scala stanno in colonna a destra, la scala sotto. Il
   margine dal fondo lo porta la scala, che è l'ultima. */
  .maps #stmap .stm-scale{ margin:0 var(--bordo) calc(var(--bordo-sotto) + env(safe-area-inset-bottom)) 0; }


/* ══ LA RICERCA ═══════════════════════════════════════════════════════════════
   Galleggia sopra la carta, centrata, larga quanto una frase: sotto continua la
   Sicilia. Una fascia bianca a tutta larghezza avrebbe rubato alla mappa l'unica
   cosa che ha — lo spazio — per contenere una casella lunga sei centimetri.

   Sui telefoni si allarga fino ai bordi meno un margine, perché lì lo schermo è
   già stretto e centrare qualcosa di piccolo dentro qualcosa di piccolo lascia
   solo aria ai lati. */
  .mc{ position:absolute; z-index:30;
    top:calc(var(--sotto-barra) + var(--sat, env(safe-area-inset-top))); left:50%; transform:translateX(-50%);
    width:min(520px, calc(100% - var(--bordo) * 2)); }

/* ═══ OPACA ALL'80% ══════════════════════════════════════════════════════════
   Sotto la carta si intravede: la ricerca sta SOPRA la mappa, e una cosa bianca
   piena dice «questa striscia non è più mappa». Con un velo si capisce che la
   Sicilia continua sotto, e che la casella se ne andrà.

   La sfocatura non è un effetto: senza, il testo scritto passa sopra le strade e
   i nomi dei paesi, e a quel punto l'ottanta per cento diventa illeggibile. */
/* Tonda ai lati, come tutte le caselle del sito: una pillola non ha versi, e
   sopra una carta geografica — dove non c'è nessuna griglia a cui allinearsi —
   un rettangolo con gli angoli smussati sembra un pezzo di finestra caduto lì.
   La pillola galleggia. */
  .mc-riga{ display:flex; align-items:center; gap:.55rem;
    padding:.1rem .35rem .1rem 1.05rem; border-radius:999px;
    background:rgba(255,255,255,.8);
    -webkit-backdrop-filter:blur(12px) saturate(140%);
    backdrop-filter:blur(12px) saturate(140%);
    /* Due ombre: una corta e scura che stacca dalla carta, una lunga e morbida
       che la fa galleggiare. Con una sola o è piatta o è pesante. */
    box-shadow:0 1px 2px rgba(10,61,98,.18), 0 10px 28px -10px rgba(10,61,98,.45);
    transition:box-shadow .18s; }
/* Mentre si scrive l'ombra cresce di poco: dice «adesso stai lavorando qui»
   senza accendere niente. */
  .mc:focus-within .mc-riga{ background:rgba(255,255,255,.94);
    box-shadow:0 1px 2px rgba(10,61,98,.2), 0 14px 34px -10px rgba(10,61,98,.55); }
/* Coi risultati aperti gli angoli di sotto si raddrizzano: la riga e l'elenco
   diventano un oggetto solo invece di due che si toccano. */
  .mc.aperto .mc-riga{ border-radius:22px 22px 8px 8px; }

  .mc-lente{ flex:none; color:#0a3d62; opacity:.55; font-size:.9rem; }

/* Sedici pixel e non meno: sotto quella misura iOS ingrandisce la pagina da solo
   appena si tocca il campo, e la mappa si sposta sotto le dita di chi scrive. */
  .mc-campo{ flex:1 1 auto; min-width:0; border:0; outline:none; background:transparent;
    font-family:inherit; font-size:16px; color:#0a3d62; padding:.55rem 0; }
  .mc-campo::placeholder{ color:#6b8095; opacity:.75; }

/* La X compare solo quando c'è qualcosa da cancellare: un bottone che non fa
   niente è un bottone che si prova, e provare per niente irrita. */
  .mc-x{ flex:none; width:32px; height:32px; padding:0; border:0; border-radius:50%;
    background:transparent; color:#0a3d62; cursor:pointer;
    display:none; place-items:center; transition:background-color .15s, transform .15s; }
  .mc.pieno .mc-x{ display:grid; }
  .mc-x:hover{ background:rgba(10,61,98,.08); }
  .mc-x:active{ transform:scale(.88); background:rgba(10,61,98,.14); }

/* ── I RISULTATI ────────────────────────────────────────────────────────────
   Attaccati alla riga, e alti al massimo mezzo schermo: più giù coprirebbero la
   mappa, che è quello che si sta cercando. */
  .mc-elenco{ margin:.28rem 0 0; padding:.3rem; list-style:none;
    border-radius:8px 8px 22px 22px;
    /* Quasi pieno, non all'ottanta: qui si LEGGE un elenco, e un nome di paese
       sopra il disegno di un altro paese non si legge. */
    background:rgba(255,255,255,.96);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    box-shadow:0 1px 2px rgba(10,61,98,.18), 0 14px 34px -12px rgba(10,61,98,.5);
    max-height:min(46svh, 380px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .mc-elenco[hidden]{ display:none; }

  .mc-elenco li{ display:flex; align-items:center; gap:.6rem;
    padding:.62rem .7rem; border-radius:10px; cursor:pointer;
    color:#0a3d62; font-size:.95rem; line-height:1.2; }
  .mc-elenco li i{ flex:none; opacity:.45; font-size:.85rem; }
  .mc-nome{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; font-weight:600; }
/* Il tipo del posto, in coda e in piccolo: oggi dice sempre «comune», e servirà
   il giorno che nella stessa lista ci saranno spiagge, locali e stazioni. */
  .mc-tipo{ flex:none; font-size:.72rem; color:#6b8095; opacity:.8; }
/* Due righe: il nome sopra, sotto in piccolo quello che stava a destra
   («Ristoranti · Agrigento»). L'icona sta a sinistra, alta quanto tutt'e due. */
  .mc-elenco li{ display:grid; grid-template-columns:auto 1fr; column-gap:.6rem; row-gap:.1rem; }
  .mc-elenco li i{ grid-row:1 / span 2; align-self:center; }
/* L'icona a colori, come le pastiglie della mappa: il segno nel colore della
   categoria, dentro un tondo appena tinto dello stesso colore. */
  .mc-elenco li > i{ display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
    opacity:1; font-size:.9rem; color:var(--c, #7a8693);
    background:color-mix(in srgb, var(--c, #7a8693) 14%, #fff);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c, #7a8693) 22%, transparent); }
  .mc-elenco li > i.mc-segno{ font-style:normal; font-size:1.05rem; line-height:1; }
  .mc-nome{ grid-column:2; }
  .mc-tipo{ grid-column:2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mc-tipo:empty{ display:none; }

/* Sotto il dito o sotto la freccia è lo stesso stato: chi usa la tastiera vede
   quello che vedrebbe col mouse, e non deve indovinare dov'è. */
  .mc-elenco li:hover,
  .mc-elenco li.su{ background:rgba(10,61,98,.07); }
  .mc-elenco li.su .mc-nome{ font-weight:800; }

/* ── DOVE C'È POCO POSTO ────────────────────────────────────────────────────
   Sotto i 640 pixel il marchio verticale e la ricerca si contendono la stessa
   striscia. Vince la ricerca: il marchio è una firma, e una firma può aspettare
   che si smetta di cercare. */
  @media (max-width:640px){
    .maps{ --sotto-barra:58px; }
/* E i comandi scendono sotto la ricerca, che qui è larga quanto lo schermo: a
   62 pixel il primo bottone finiva sotto la casella, e chi cercava lo zoom
   trovava una casella di testo. 58 di partenza + 46 di casella + un respiro. */
    .maps #stmap .stm-glnav{ margin-top:calc(var(--sotto-barra) + 54px + var(--sat, env(safe-area-inset-top))); }
  }


/* ══ LA SCHEDA DEL PAESE ══════════════════════════════════════════════════════
   Sale dal fondo e si ferma a metà schermo: sopra resta scoperto il paese di cui
   si sta leggendo. Una finestra al centro coprirebbe proprio il punto toccato —
   ed è il motivo per cui le mappe, tutte, aprono dal basso.

   Su schermo largo non ha senso una fascia lunga due metri: diventa una colonna
   a sinistra, come un pannello. */
  .ms{ position:absolute; z-index:40; left:0; right:0; bottom:0;
    max-height:min(72svh, 620px);
    display:flex; flex-direction:column;
    border-radius:18px 18px 0 0;
    background:rgba(255,255,255,.97);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    box-shadow:0 -2px 6px rgba(10,61,98,.1), 0 -18px 50px -14px rgba(10,61,98,.5);
    transform:translateY(102%); transition:transform .26s cubic-bezier(.2,.8,.25,1);
    overscroll-behavior:contain; }
  .ms.su{ transform:translateY(0); }
  .ms[hidden]{ display:none; }

/* La linguetta che si tira: piccola, grigia, e larga quanto basta a dire «da qui
   si prende». È anche la zona dove il dito trascina — per questo è alta più di
   quanto sembri. */
  .ms-presa{ flex:none; height:22px; display:grid; place-items:center;
    cursor:grab; touch-action:none; }
  .ms-presa span{ width:38px; height:4px; border-radius:2px; background:rgba(10,61,98,.22); }

  .ms-x{ position:absolute; top:10px; right:10px; z-index:2;
    width:34px; height:34px; padding:0; border:0; border-radius:50%;
    background:rgba(10,61,98,.08); color:#0a3d62; cursor:pointer;
    display:grid; place-items:center; transition:background-color .15s, transform .15s; }
  .ms-x:active{ transform:scale(.88); background:rgba(10,61,98,.16); }

  .ms-corpo{ flex:1 1 auto; min-height:0; overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:0 1rem calc(1rem + env(safe-area-inset-bottom)); }

  .ms-attesa{ margin:2rem 0; text-align:center; color:#6b8095; }

/* ── LE FOTOGRAFIE ──────────────────────────────────────────────────────────
   In fila, si scorrono col dito, e si agganciano: mezza fotografia a metà
   schermo è una fotografia che non si guarda. */
  .ms-foto{ display:flex; gap:.4rem; margin:0 -1rem .8rem; padding:0 1rem;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; }
  .ms-foto::-webkit-scrollbar{ display:none; }
  .ms-foto img{ flex:0 0 auto; width:min(78%, 300px); height:170px; object-fit:cover;
    border-radius:12px; background:#dce6ec; scroll-snap-align:start; }

/* I crediti delle fotografie: piccoli, grigi, ma scritti. La licenza chiede di
   dire di chi sono, e su un telefono un `title` non lo legge nessuno. */
  .ms-crediti{ margin:-.4rem 0 .8rem; font-size:.68rem; line-height:1.35; color:#8a9aa8; }

  .ms-testa h2{ margin:0; font-size:1.35rem; font-weight:800; color:#0a3d62; line-height:1.15; }
  .ms-prov{ margin:.15rem 0 0; font-size:.85rem; color:#6b8095; }

/* ── I NUMERI ───────────────────────────────────────────────────────────────
   Quattro caselle in fila, e vanno a capo da sole quando non ci stanno: su un
   telefono stretto due e due, su un tablet quattro. */
  .ms-dati{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.9rem 0; }
  .ms-dato{ flex:1 1 8rem; display:flex; flex-direction:column; align-items:flex-start;
    gap:.1rem; padding:.55rem .7rem; border-radius:12px; background:rgba(10,61,98,.055); }
  .ms-dato i{ font-size:.8rem; color:#2e86de; margin-bottom:.15rem; }
  .ms-dato b{ font-size:1rem; font-weight:800; color:#0a3d62; line-height:1.1; }
  .ms-dato span{ font-size:.7rem; color:#6b8095; }

  .ms-testo{ margin:.2rem 0 0; font-size:.92rem; line-height:1.5; color:#33424d; }

  .ms-tit{ margin:1.1rem 0 .5rem; font-size:.75rem; font-weight:800;
    letter-spacing:.1em; text-transform:uppercase; color:#6b8095; }

/* ── I MONUMENTI ────────────────────────────────────────────────────────────
   Pastiglie e non un elenco puntato: trenta chiese in colonna sono trenta righe
   da scorrere, in pastiglia sono quattro righe da guardare.
   Quelle che hanno una posizione sono bottoni e portano lì; le altre restano
   scritte — e si vede che non si toccano, invece di scoprirlo provando. */
  .ms-luoghi{ display:flex; flex-wrap:wrap; gap:.4rem; }
  .ms-luogo{ display:inline-flex; align-items:center; gap:.4rem; max-width:100%;
    margin:0; padding:.42rem .7rem; border:0; border-radius:999px;
    background:rgba(10,61,98,.06); color:#0a3d62;
    font-family:inherit; font-size:.82rem; line-height:1.2; text-align:left; }
  .ms-luogo i{ font-size:.72rem; opacity:.6; flex:none; }
  .ms-luogo span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ms-va{ cursor:pointer; transition:background-color .15s, transform .15s; }
  .ms-va:hover{ background:rgba(46,134,222,.14); }
  .ms-va:active{ transform:scale(.95); }

  .ms-fonte{ display:inline-flex; align-items:center; gap:.4rem; margin:1rem 0 .2rem;
    font-size:.75rem; color:#6b8095; text-decoration:none; }
  .ms-fonte:hover{ color:#2e86de; }

/* ── SU SCHERMO LARGO DIVENTA UNA COLONNA ───────────────────────────────────
   Una fascia larga milleduecento pixel e alta trecento è una striscia: il testo
   ci corre dentro per venti centimetri e la mappa la si guarda dal buco che
   resta. Come colonna a sinistra, invece, la carta resta tutta lì accanto. */
  @media (min-width:900px){
    .ms{ left:var(--bordo); right:auto; bottom:var(--bordo-sotto);
      width:400px; max-height:min(78svh, 720px);
      border-radius:18px; transform:translateY(calc(100% + var(--bordo-sotto) + 20px)); }
    .ms.su{ transform:translateY(0); }
    .ms-presa{ cursor:default; }
  }

/* ── IL FOGLIO DI UN POSTO È ALTO, E NON CAMBIA ───────────────────────────────
   Passando da una linguetta all'altra il foglio cresceva e si accorciava: ora
   ha un'altezza sola, bella alta, e dentro si scorre. Vale solo quando dentro
   c'è un posto: la scheda del comune resta com'è. */
  .ms.ms-alta{ height:86svh; max-height:86svh; }
  @media (min-width:900px){ .ms.ms-alta{ height:min(86svh, 760px); max-height:min(86svh, 760px); } }


/* ── LE COORDINATE DEL CENTRO ─────────────────────────────────────────────────
   In fondo, sotto la riga dei filtri: gradi-primi-secondi e UTM. Piccole e
   grigie, nel carattere della frase «il sistema operativo…» (JetBrains Mono).
   Non si toccano: sono da leggere, e la mappa sotto resta della mano. Il filo
   chiaro attorno alle lettere le tiene leggibili sul mare e sulla terra. */
  .maps-dove{ position:absolute; left:0; right:0; z-index:6; margin:0; padding:0 8px;
    bottom:calc(3px + env(safe-area-inset-bottom));
    font-family:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace; font-weight:500;
    font-size:.6rem; letter-spacing:-.02em; line-height:1.2; text-align:center; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; color:#6b7683; pointer-events:none;
    text-shadow:0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff; }

/* ── LA CROCETTA AL CENTRO ────────────────────────────────────────────────────
   Il punto di cui si leggono le coordinate. Quattro gambette da 3px (più il filo in mezzo: 7 in tutto), un filo
   grigio: si vede se la cerchi, non disturba se guardi la mappa. */
  .maps-mira{ position:absolute; left:50%; top:50%; z-index:3; width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
    pointer-events:none; }
  .maps-mira::before, .maps-mira::after{ content:''; position:absolute; background:#6b7683; opacity:.85; }
  .maps-mira::before{ left:0; right:0; top:50%; height:1px; margin-top:-.5px; }
  .maps-mira::after{ top:0; bottom:0; left:50%; width:1px; margin-left:-.5px; }

/* Per chi non è entrato i collegamenti dentro la mappa non portano via: danno
   una scossa (assets/mappe/ospite.js). */
.maps-scossa{ animation:maps-scossa .42s ease-in-out; }
@keyframes maps-scossa{ 0%, 100%{ transform:translateX(0); } 20%{ transform:translateX(-6px); } 40%{ transform:translateX(5px); }
  60%{ transform:translateX(-4px); } 80%{ transform:translateX(2px); } }
@media (prefers-reduced-motion: reduce){ .maps-scossa{ animation:none; } }