/* pagina Dintorni — mappa interattiva */
.dint-hero{padding:56px 32px 8px;text-align:center}
.dint-hero h1{font-size:clamp(30px,4.4vw,46px);line-height:1.15;max-width:780px;margin:16px auto 18px}
.dint-hero p.lead{font-size:17px;color:var(--slate);max-width:620px;margin:0 auto;line-height:1.7}

.map-section{max-width:1080px;margin:40px auto 0;padding:0 32px}
.map-frame{position:relative;width:100%;border-radius:14px;overflow:hidden;box-shadow:0 30px 70px -40px rgba(46,58,55,.45);border:1px solid var(--sage-light);background:var(--stone)}
.map-svg-container{position:relative;width:100%}
.map-svg-container svg{width:100%;height:auto;display:block}

.map-pin{position:absolute;transform:translate(-50%,-100%);cursor:pointer;background:none;border:none;padding:0;font-family:var(--sans);line-height:0}
.map-pin .pin-icon{width:26px;height:32px;display:block;filter:drop-shadow(0 3px 4px rgba(46,58,55,.35));transition:transform .18s ease}
.map-pin:hover .pin-icon,.map-pin:focus-visible .pin-icon,.map-pin.active .pin-icon{transform:translateY(-3px) scale(1.08)}
.map-pin .pin-label{position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%);font-size:11.5px;line-height:1.4;font-weight:600;letter-spacing:.02em;color:var(--ink);background:rgba(250,247,242,.9);padding:2px 7px;border-radius:4px;white-space:nowrap;box-shadow:0 1px 3px rgba(46,58,55,.15);font-family:var(--sans)}
/* varianti di ancoraggio etichetta, per evitare sovrapposizioni sulla mappa */
.map-pin.lbl-r .pin-label{top:50%;left:calc(100% + 4px);transform:translateY(-50%)}
.map-pin.lbl-l .pin-label{top:50%;left:auto;right:calc(100% + 4px);transform:translateY(-50%)}
.map-pin.lbl-t .pin-label{top:auto;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%)}
.map-pin:hover .pin-label,.map-pin.active .pin-label{background:var(--stone);z-index:6}
/* Laterina non e' un pulsante: e' il "tu sei qui". Sta sopra a
   tutto per leggibilita', ma se intercettasse i clic coprirebbe
   Arezzo, che le sta a nove pixel e su cui non si riusciva a
   cliccare. */
.map-pin.laterina{z-index:5;pointer-events:none}
.map-pin.laterina .pin-label{top:50%;left:50%;transform:translate(-50%,-50%);background:var(--terracotta-dark);color:var(--stone)}

.map-popup{position:relative;max-width:1080px;margin:0 auto;padding:0 32px;display:none}
.map-popup.open{display:block}
.map-popup-inner{position:relative;background:var(--white);border:.5px solid var(--sage-light);border-radius:12px;box-shadow:0 24px 60px -30px rgba(46,58,55,.4);margin-top:18px;overflow:hidden;animation:popIn .22s ease}
@keyframes popIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.map-popup-arrow{position:absolute;top:-11px;width:22px;height:22px;background:var(--white);border-left:.5px solid var(--sage-light);border-top:.5px solid var(--sage-light);transform:translateX(-50%) rotate(45deg);transition:left .2s ease}
.map-popup-head{display:flex;align-items:center;justify-content:space-between;padding:22px 26px 0}
.map-popup-head h2{font-size:clamp(20px,2.6vw,26px);margin:0}
.map-popup-head .km{font-family:var(--sans);font-size:14px;color:var(--terracotta-dark);font-weight:600;margin-left:8px}
.map-popup-head-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.map-popup-unesco{display:flex;align-items:center;gap:4px;background:var(--terracotta-dark);color:var(--stone);padding:4px 10px 4px 6px;border-radius:20px;font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.04em}
.map-popup-unesco[hidden]{display:none}
.map-popup-close{width:36px;height:36px;flex-shrink:0;border-radius:6px;border:.5px solid var(--sage-light);background:var(--stone);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}
.map-popup-close span{position:absolute;width:14px;height:1.6px;background:var(--slate);border-radius:2px}
.map-popup-close span:first-child{transform:rotate(45deg)}
.map-popup-close span:last-child{transform:rotate(-45deg)}
.map-popup-body{display:grid;grid-template-columns:1fr 1.3fr;gap:0;padding:20px 26px 26px}
.map-popup-photo{width:100%;aspect-ratio:4/3;border-radius:8px;overflow:hidden}
.map-popup-photo img{width:100%;height:100%;object-fit:cover;display:block}
.map-popup-text{padding-left:26px;max-height:340px;overflow-y:auto}
.map-popup-text p{color:var(--slate);font-size:15px;line-height:1.75;margin:0}

/* ============================================================
   La mappa sul telefono

   Su uno schermo da 375 px la mappa e' larga 311: quattordici
   etichette non ci stanno. Se ne sovrapponevano sette e due
   uscivano dal riquadro. Rimpicciolire il carattere non
   risolve, sposta solo il punto in cui si rompe.

   Quindi cambia il ruolo delle due cose. La mappa diventa
   soprattutto un colpo d'occhio - quanta Toscana c'e' intorno a
   Laterina - e resta etichettata solo Laterina, perche' senza
   il "tu sei qui" il colpo d'occhio non vuol dire niente. Il
   nome degli altri luoghi lo dice il riquadro che si apre
   subito sotto, dove c'e' spazio per scriverlo per intero.

   Lo strumento per leggere davvero i quattordici luoghi e'
   l'elenco piu' in basso, che sul telefono funziona meglio
   della mappa: nomi per esteso, distanze incolonnate e voci
   alte 44 px, fatte per il dito.
   ============================================================ */
@media(max-width:760px){
  .map-popup-body{grid-template-columns:1fr;gap:16px}
  .map-popup-text{padding-left:0;max-height:none}

  /* 12 px di respiro invece di 32: la mappa passa da 311 a 351,
     cioe' il 13% di spazio in piu' dove i segnaposto stanno
     stretti. Il riquadro arrotondato resta, e con lui il fatto
     che si legga come un oggetto e non come uno sfondo. */
  .map-section{padding:0 12px}
  .dint-note{padding:0 20px}

  /* Senza etichette accanto c'e' posto per segnaposto piu'
     grandi, che sono anche piu' facili da centrare. */
  .map-pin .pin-icon{width:24px;height:30px}

  /* Il dito non e' il puntatore del mouse, ma allargare qui
     l'area sensibile non serve e anzi fa danno: i segnaposto
     piu' vicini distano nove pixel, e bersagli grandi si
     mangiano a vicenda. Chi decide quale segnaposto e' stato
     toccato e' dintorni-map.js, che sceglie il piu' vicino al
     punto: cosi' ognuno resta raggiungibile dal proprio centro
     per costruzione, senza che nessuno rubi il tocco a un
     altro. */

  /* mute finche' non le si tocca */
  .map-pin[data-key] .pin-label{display:none}

  /* Il segnaposto toccato deve riconoscersi da solo: e' l'unico
     legame visibile fra il punto sulla mappa e il riquadro che
     si apre sotto. */
  .map-pin.active .pin-icon{transform:translateY(-4px) scale(1.3)}

  .map-pin.laterina .pin-label{font-size:10.5px;padding:2px 7px}
}

.dint-note{max-width:1080px;margin:28px auto 0;padding:0 32px;font-size:12.5px;color:var(--slate);text-align:center}

/* ============================================================
   I quattordici luoghi in forma leggibile

   Prima queste descrizioni comparivano solo nel riquadro al clic
   su un segnaposto: chi non esegue JavaScript - la maggior parte
   dei crawler AI - della pagina leggeva due frasi.

   Chiusi di partenza: <details> tiene il testo dentro il
   documento senza srotolare una pagina infinita. E' anche la via
   di lettura per chi la mappa non puo' usarla, col mouse o senza.
   ============================================================ */
.dint-testi{max-width:840px;margin:64px auto 0;padding:0 32px}
.dint-testi h2{font-size:clamp(22px,3vw,29px);line-height:1.2;text-align:center;margin:0 0 8px}
.dint-testi-sub{font-family:var(--sans);font-size:14px;color:var(--slate);text-align:center;margin:0 0 28px}

.dint-lista{border-top:.5px solid var(--sage-light)}

.dint-voce{border-bottom:.5px solid var(--sage-light)}
.dint-voce summary{
  display:flex;align-items:baseline;gap:12px;cursor:pointer;list-style:none;
  padding:18px 4px;min-height:44px;   /* bersaglio pieno anche col dito */
  transition:padding-left .18s ease}
.dint-voce summary::-webkit-details-marker{display:none}
.dint-voce summary:hover{padding-left:9px}
.dint-voce summary:focus-visible{outline:2px solid var(--terracotta);outline-offset:-2px;border-radius:6px}

.dint-nome{font-family:var(--serif);font-size:20px;line-height:1.25;color:var(--ink);flex:1;min-width:0}
.dint-voce[open] .dint-nome{color:var(--terracotta-dark)}

.dint-unesco{font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.09em;
  color:var(--terracotta-dark);border:1px solid var(--terracotta);border-radius:3px;
  padding:2px 5px;white-space:nowrap;flex:none}

.dint-km{font-family:var(--sans);font-size:13px;color:var(--slate);
  font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}

/* il segno di apertura sta in fondo: si legge il nome per primo,
   non un triangolo */
.dint-voce summary::after{content:"+";font-family:var(--sans);font-size:19px;line-height:1;
  color:var(--slate);flex:none;width:16px;text-align:center}
.dint-voce[open] summary::after{content:"\2212"}   /* meno tipografico */

.dint-corpo{padding:0 4px 26px;display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:start}
.dint-corpo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block}
.dint-corpo p{font-family:var(--sans);font-size:14.5px;line-height:1.75;color:var(--slate);margin:0}

@media (max-width:700px){
  .dint-testi{margin-top:48px;padding:0 20px}
  .dint-corpo{grid-template-columns:1fr;gap:16px}
  .dint-corpo img{max-height:220px}
  .dint-nome{font-size:18px}
}

@media (prefers-reduced-motion:reduce){
  .dint-voce summary,
  .dint-voce summary:hover{transition:none;padding-left:4px}
}

/* Sotto la voce Arezzo, il collegamento alla pagina dei mercatini di
   Natale. Testo e immagine stanno in un blocco solo, altrimenti il
   secondo paragrafo finirebbe nella colonna della foto. */
.dint-corpo .dint-natale{margin-top:12px}
.dint-natale a{color:var(--terracotta-dark);font-weight:500;text-decoration:underline;text-underline-offset:3px}