/*
 * Mappa dei luoghi (home, /luoghi/ e scheda del luogo). Usa solo token del sito (variables.css).
 * Struttura: .mappa > .mappa__filtri, .mappa__area (mappa, suggerimento, pulsante), .mappa__crediti.
 */
.mappa { margin-block: 1rem; }
.mappa__filtri { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.8rem; }
.mappa__filtro {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.35em 0.95em;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mappa__filtro { text-decoration: none; }
.mappa__filtro:hover { border-color: var(--color-primary); color: var(--color-primary); }
.mappa__filtro.is-attivo { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.mappa__punto { width: 0.7em; height: 0.7em; border-radius: 50%; border: 1px solid #fff; box-shadow: 0 0 0 1px var(--color-border); }

.mappa__area {
  position: relative;
  min-height: 18rem;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}
.mappa .mappa__mappa { position: absolute; inset: 0; z-index: 0; font-family: var(--font-body); }
.mappa__suggerimento {
  position: absolute;
  inset: auto 1rem 1rem 1rem;
  z-index: 800;
  margin: 0;
  padding: 0.5rem 0.9rem;
  font-size: var(--text-sm);
  text-align: center;
  color: #fff;
  background: rgba(23, 48, 127, 0.88);
  border-radius: var(--radius-md);
  pointer-events: none;
}
.mappa__centra {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 800;
  padding: 0.35em 0.95em;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary-dark);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
}
.mappa__centra:hover { color: var(--color-primary); border-color: var(--color-primary); }
/* Crediti (obbligo Esri): una fascia attaccata sotto la mappa, come parte di essa: la mappa ha gli angoli bassi vivi e la fascia
   quelli bassi arrotondati, così insieme formano un solo blocco; senza bordo, basta lo sfondo */
.mappa__area { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.mappa__crediti {
  margin: 0;
  padding: 0.6rem 0.9rem;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg-soft);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.mappa__crediti a { color: var(--color-primary); font-weight: 500; }

/* Segnaposto: un cerchio con bordo bianco, colore della categoria */
.mappa__segnaposto span {
  display: block;
  width: 24px;
  height: 24px;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 25, 90, 0.45);
  opacity: 0.78;   /* pallino semitrasparente: dove sono vicini (Europa) si vedono quelli sotto e la mappa */
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.mappa__segnaposto:hover span,
.mappa__segnaposto:focus-visible span { opacity: 1; }
.mappa__scheda { display: flex; flex-direction: column; gap: 0.25rem; font-family: var(--font-body); }
.mappa__scheda strong { font-family: var(--font-heading); font-size: var(--text-base); color: var(--color-primary-dark); }
.mappa__scheda p { margin: 0; font-size: var(--text-sm); color: var(--color-text); }
.mappa__localita { font-size: var(--text-xs); color: var(--color-text-light); }
.mappa__link { font-size: var(--text-sm); font-weight: 600; }

/* Fascia "Luoghi" in home e elenco testuale sotto la mappa */
.fascia-luoghi { padding-block: 2.5rem 1rem; }
/* In home la fascia Luoghi è l'ultima: poco spazio prima del footer */
body.home .site-footer { margin-top: 2.5rem; }
.luoghi-elenco { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }
.luoghi-elenco li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.15rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 22px -18px rgba(30, 64, 175, 0.5);
  font-size: var(--text-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.luoghi-elenco li:hover, .luoghi-elenco li:focus-within { border-color: var(--color-primary); box-shadow: 0 12px 26px -16px rgba(30, 64, 175, 0.6); }
/* Tutta la card è cliccabile: il link si estende su di essa */
.luoghi-elenco a { font-family: var(--font-titoli); font-size: var(--text-base); font-weight: 600; line-height: 1.3; color: var(--color-primary-dark); }
.luoghi-elenco a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.luoghi-elenco a:focus-visible { outline: none; }
.luoghi-elenco li:focus-within { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.luoghi-elenco strong { font-family: var(--font-titoli); font-size: var(--text-base); font-weight: 600; color: var(--color-primary-dark); }
.luoghi-elenco small { display: block; color: var(--color-text-light); font-size: var(--text-sm); }
.luogo-chip { display: inline-flex; align-items: center; gap: 0.45em; margin-top: auto; padding-top: 0.5rem; font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.03em; color: var(--color-text); }


/* Scheda del luogo: a tutta larghezza, senza colonna destra */
@media (min-width: 992px) {
  .content-layout--luogo { grid-template-columns: minmax(0, 1fr); }
}

/* Rimando alla fonte esterna (per esempio la scheda della mostra di Carlo Acutis) */
.luogo-fonte { margin-block: 1.5rem; padding: 1.2rem 1.4rem; background: var(--color-bg-soft); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
/* Dal computer la card occupa due terzi della larghezza (come una colonna a 8 su 12); da telefono e tablet tutta */
@media (min-width: 992px) {
  .luogo-fonte { max-width: calc(66.6667% - 0.5rem); }
}
.luogo-fonte p { margin: 0; }
.luogo-fonte p + p { margin-top: 0.3rem; }
.luogo-fonte__titolo { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-gold); }
/* Citazione dalla scheda della mostra: frase breve, parole originali; niente bordo laterale, solo caratteri e virgolette */
.luogo-fonte__citazione { margin: 0.2rem 0 0.9rem; padding: 0; }
.luogo-fonte__citazione p { margin: 0; font-family: var(--font-script); font-size: var(--text-quote); line-height: 1.55; color: var(--color-text); }
.luogo-fonte__citazione p::before { content: "\201C"; }
.luogo-fonte__citazione p::after { content: "\201D"; }
.luogo-fonte__citazione footer { margin-top: 0.4rem; font-size: var(--text-xs); letter-spacing: 0.03em; color: var(--color-text-light); }
.luogo-fonte__link { display: inline-block; margin-top: 0.6rem; font-weight: 600; }
.mappa__nota { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-gold); }

/* Mappa della categoria sotto la scheda del luogo */
.luoghi-categoria { padding-block: 0 3rem; }
.luoghi-categoria h2 { margin-bottom: 0.4rem; }

/* Pagina di una categoria dei luoghi e raccolte nell'archivio */
.luoghi-altre { margin: 2.5rem 0 0.2rem; }
.luoghi-elenco--raccolte li { gap: 0.4rem; }
.aside-block__title a, .eyebrow a { color: inherit; text-decoration: none; }
.aside-block__title a:hover, .eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Testo della pagina di una categoria: in una card, come il riquadro della fonte nelle schede */
.luoghi-testo { margin: 0 0 1.5rem; padding: 1.2rem 1.4rem; background: var(--color-bg-soft); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.luoghi-testo p { margin: 0; }
.luoghi-testo p + p { margin-top: 0.8rem; }

/* Mappa: nome al passaggio del mouse e luogo corrente evidenziato (mappa della categoria sotto la scheda) */
.mappa__tooltip { white-space: normal; width: max-content; max-width: 90vw; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--color-text); border: 0; border-radius: var(--radius-sm); box-shadow: 0 6px 18px -8px rgba(0, 25, 90, 0.45); }
/* La freccetta di Leaflet sta di norma a metà del riquadro: quando il testo è spostato per restare nella mappa, mappa.js ne imposta la
   posizione (--freccia-sx) sul pallino, oppure la toglie se il pallino non è sotto il riquadro */
.mappa__tooltip.leaflet-tooltip-top::before,
.mappa__tooltip.leaflet-tooltip-bottom::before { left: var(--freccia-sx, 50%); }
.mappa__tooltip.senza-freccia::before { display: none; }
.mappa__segnaposto { cursor: pointer; }
.mappa__segnaposto.is-corrente { cursor: default; }
.mappa__segnaposto.is-corrente span { opacity: 1; transform: scale(1.45); box-shadow: 0 0 0 3px var(--color-primary-dark), 0 2px 8px rgba(0, 25, 90, 0.5); }

/* Pulsanti + e − nello stile del sito: due pulsanti bianchi arrotondati con ombra morbida, al posto del controllo "di serie" di Leaflet.
   Selettori più specifici di quelli di leaflet.css, che viene caricato dopo questo file. */
.mappa .leaflet-control-zoom.leaflet-bar {
  margin: 1rem 0 0 1rem;
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 24px -12px rgba(23, 48, 127, 0.55);
  overflow: hidden;
}
.mappa .leaflet-control-zoom.leaflet-bar a {
  width: 2.6rem;
  height: 2.6rem;
  line-height: 2.6rem;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-primary-dark);
  background: rgba(243, 250, 253, 0.78);                                  /* azzurro del sito, un po' trasparente */
  background: color-mix(in srgb, var(--color-bg-soft) 78%, transparent);
  border: 0;
  border-radius: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.mappa .leaflet-control-zoom.leaflet-bar a + a { border-top: 1px solid rgba(255, 255, 255, 0.55); }
.mappa .leaflet-control-zoom.leaflet-bar a:hover,
.mappa .leaflet-control-zoom.leaflet-bar a:focus-visible { background: var(--color-primary); color: #fff; }
.mappa .leaflet-control-zoom.leaflet-bar a.leaflet-disabled { color: rgba(23, 48, 127, 0.4); background: rgba(243, 250, 253, 0.78); background: color-mix(in srgb, var(--color-bg-soft) 78%, transparent); cursor: default; }

/* Elenco a card sotto la scheda del luogo: la card del luogo in cui ci si trova ha il bordo del colore del sito e non è un collegamento */
.luoghi-elenco li.is-corrente { border-color: var(--color-primary); box-shadow: 0 12px 26px -16px rgba(30, 64, 175, 0.6); }
.luoghi-elenco li.is-corrente:hover { transform: none; }

/* Coordinate del luogo con i collegamenti alle app di mappe: una fascia attaccata sotto la mappa, sopra i crediti, come parte di essa
   (stesso azzurro dei crediti, nessun arrotondamento: gli angoli bassi li ha la fascia dei crediti) */
.mappa__coordinate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 0.6rem 0.9rem;
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border);
}
.mappa__coordinate p { margin: 0; }
.mappa__coordinate-valori { display: flex; align-items: center; gap: 0.5rem; }
.mappa__coordinate-icona { flex: none; color: var(--color-gold); }
.mappa__coordinate-etichetta { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-gold); }
.mappa__coordinate-numeri { font-variant-numeric: tabular-nums; font-size: var(--text-sm); color: var(--color-text); }
.mappa__coordinate-apri { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mappa__coordinate-link {
  display: inline-block;
  padding: 0.3em 0.9em;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mappa__coordinate-link:hover, .mappa__coordinate-link:focus-visible { border-color: var(--color-primary); color: var(--color-primary); }

/* Scheda che si apre al tocco di un pallino (telefono): nome, località e "Vai alla scheda" */
.mappa__popup .leaflet-popup-content-wrapper { border-radius: var(--radius-md); box-shadow: 0 10px 24px -10px rgba(0, 25, 90, 0.55); }
.mappa__popup .leaflet-popup-content { margin: 0.9rem 1.1rem; font-family: var(--font-body); font-size: var(--text-base); line-height: var(--lh-compatto); }
.mappa__popup .mappa__scheda { display: flex; flex-direction: column; gap: 0.25rem; }
.mappa__popup .mappa__scheda strong { font-family: var(--font-titoli); font-size: var(--text-h4); color: var(--color-primary-dark); }
.mappa__popup .mappa__localita { font-size: var(--text-sm); color: var(--color-text-light); }
.mappa__popup .mappa__link { display: inline-block; margin-top: 0.4rem; padding: 0.55rem 0; font-size: var(--text-base); font-weight: 700; color: var(--color-primary); }

/* Raccolte assegnate alla scheda: stessi token e pillole dei filtri della mappa. */
.luogo-etichette { justify-content: center; }