/* WRC — Mappa "Cosa c'è vicino" nelle pagine articolo (derivata da hotels/css/hotel-map.css) */
.hmap { --m-card:#fff; --m-ink:#1d0b14; --m-mute:#6f5b64; --m-wine:#6a0631; --m-deep:#25020f; --m-gold:#fcb900; --m-line:rgba(106,6,49,.12); --m-r:28px; --m-shadow:0 1px 2px rgba(37,2,15,.04),0 8px 24px -8px rgba(37,2,15,.10); --m-shadow-lg:0 2px 4px rgba(37,2,15,.06),0 24px 60px -12px rgba(37,2,15,.28); font-family:Inter,system-ui,sans-serif; color:var(--m-ink); text-align:left; }
.hmap *, .hmap *::before, .hmap *::after { box-sizing:border-box; }
.hmap button { font-family:inherit; }
.hmap ul { list-style:none; margin:0; padding:0; }
.hmap__back { position:absolute; z-index:600; left:10px; top:10px; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border:0; border-radius:999px; background:#fff; color:var(--m-wine); font:700 .85rem/1 inherit; box-shadow:var(--m-shadow-lg); cursor:pointer; }
.wrc-nearby-wrap { margin-top:20px; }
.wrc-nearby-wrap .hmap__foot { margin:14px 0 0; font-size:.9rem; color:var(--m-mute); }
/* Mappa dintorni + navigatore (hotel-detail) */
.hmap { display: flex; flex-direction: column; gap: 12px; margin-inline: -16px; }
.hmap__side { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding-inline: 16px; }
.hmap__tools { display: flex; flex-direction: column; gap: 10px; }
.hmap__search { width: 100%; min-height: 48px; border: 1.5px solid var(--m-line); background: var(--m-card); border-radius: 999px; padding: 12px 18px; font: inherit; font-size: 16px; color: var(--m-ink); outline: none; }
.hmap__search:focus { border-color: var(--m-wine); }
.hmap__chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.hmap__chips::-webkit-scrollbar { display: none; }
.hmap__chips { margin-inline: -16px; padding-inline: 16px; }
.hmap__chips button { flex: none; min-height: 40px; border: 1.5px solid var(--m-line); background: var(--m-card); color: var(--m-ink); border-radius: 999px; padding: 7px 14px; font: 600 .82rem/1 inherit; cursor: pointer; }
.hmap__chips button.on { background: var(--m-wine); border-color: var(--m-wine); color: #fff; }
.hmap__count { font-size: .78rem; color: var(--m-mute); }
.hmap__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; }
.hmap__more { border: 1.5px solid var(--m-line); background: var(--m-card); color: var(--m-wine); font: 700 .9rem/1 inherit; min-height: 48px; border-radius: 999px; cursor: pointer; width: 100%; }
.hmap__item { width: 100%; min-height: 60px; display: flex; align-items: center; gap: 12px; text-align: left; background: var(--m-card); border: 1.5px solid transparent; border-radius: 16px; padding: 10px 12px; cursor: pointer; font: inherit; color: var(--m-ink); box-shadow: var(--m-shadow); transition: border-color .2s, transform .2s; }
.hmap__item:hover { transform: translateY(-1px); }
.hmap__item.on { border-color: var(--m-wine); }
.hmap__row { display: flex; gap: 6px; align-items: stretch; }
.hmap__row .hmap__item { flex: 1; min-width: 0; }
.hmap__info { flex: none; width: 48px; border: 1.5px solid var(--m-line); background: var(--m-card); color: var(--m-wine); border-radius: 16px; display: grid; place-items: center; cursor: pointer; box-shadow: var(--m-shadow); }
.hmap__info:hover { border-color: var(--m-wine); }
.hmap__th { flex: none; position: relative; width: 56px; height: 56px; border-radius: 14px; overflow: hidden; display: grid; place-items: center; color: #fff; font-size: 1rem; }
.hmap__th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hmap__th i { position: relative; }
.hmap__th.has-img i { position: absolute; right: 3px; bottom: 3px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: inherit; border: 2px solid #fff; font-size: .55rem; }
.hmap__ico { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .9rem; }
.hmap__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hmap__txt b { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hmap__txt small, .hmap__d small { color: var(--m-mute); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hmap__d { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-weight: 700; font-size: .85rem; color: var(--m-wine); }
.hmap__empty, .hmap__load { padding: 18px; color: var(--m-mute); font-size: .9rem; }
.hmap__stage { position: relative; border-radius: 0; overflow: hidden; height: min(64svh, 520px); background: #e9e2de; }
#hmapCanvas { position: absolute; inset: 0; z-index: 1; }
.hmap__sum { display: none; position: absolute; z-index: 500; left: 8px; right: 8px; bottom: 8px; max-height: 62%; overflow-y: auto; padding: 16px; border-radius: 22px; background: rgba(255,255,255,.92); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); box-shadow: var(--m-shadow-lg); }
.hmap__sum.on { display: block; }
.hmap__sumhead { display: flex; align-items: center; gap: 12px; }
.hmap__sumhead > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hmap__sumhead small { color: var(--m-mute); font-size: .78rem; }
.hmap__x { border: 0; background: rgba(0,0,0,.06); width: 30px; height: 30px; border-radius: 50%; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.hmap__modes { display: flex; gap: 4px; margin: 12px 0 8px; background: rgba(106,6,49,.07); border-radius: 999px; padding: 3px; }
.hmap__modes button { flex: 1; min-height: 40px; border: 0; background: transparent; padding: 8px 6px; border-radius: 999px; font: 600 .8rem/1 inherit; cursor: pointer; color: var(--m-ink); }
.hmap__modes button.on { background: var(--m-wine); color: #fff; }
.hmap__stats { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 12px; }
.hmap__stats strong { font: 800 1.6rem 'Raleway', sans-serif; letter-spacing: -.02em; }
.hmap__stats span { font-weight: 700; color: var(--m-wine); }
.hmap__stats em { font-style: normal; color: var(--m-mute); font-size: .8rem; }
.hmap__cta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hmap__go { flex: 1 1 100%; min-height: 54px; border: 0; cursor: pointer; background: var(--m-gold); color: var(--m-deep); font: 800 .95rem/1 inherit; padding: 14px 22px; border-radius: 999px; box-shadow: 0 8px 24px -6px rgba(252,185,0,.6); }
.hmap__lnk { flex: 1; text-align: center; padding: 14px 12px; border-radius: 999px; border: 1.5px solid var(--m-line); color: var(--m-wine); font-weight: 700; font-size: .85rem; text-decoration: none; }
.hmap__steps { margin-top: 12px; font-size: .86rem; }
.hmap__steps summary { cursor: pointer; font-weight: 700; color: var(--m-wine); }
.hmap__steps ol { margin: 8px 0 0; padding-left: 20px; }
.hmap__steps li { padding: 4px 0; }
.hmap__steps li small { display: block; color: var(--m-mute); }
.hmap__toast { position: absolute; z-index: 1200; top: 14px; left: 50%; transform: translate(-50%, -20px); background: var(--m-deep); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: .85rem; opacity: 0; pointer-events: none; transition: .3s; max-width: calc(100% - 28px); text-align: center; }
.hmap__toast.on { opacity: 1; transform: translate(-50%, 0); }

/* marker */
.hmk-wrap { background: transparent; border: 0; }
.hmk { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); display: grid; place-items: center; color: #fff; font-size: 13px; transition: transform .2s; }
.hmk--on { transform: scale(1.35); box-shadow: 0 0 0 4px rgba(252,185,0,.7), 0 2px 8px rgba(0,0,0,.4); }
.hmk--hotel { width: 40px; height: 40px; background: var(--m-wine, #6a0631); border-color: #fcb900; font-size: 16px; }
.hmu { width: 28px; height: 28px; position: relative; --h: 0deg; }
.hmu::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(33,115,255,.22); animation: hmuP 2s infinite; }
.hmu i { position: absolute; inset: 6px; border-radius: 50%; background: #2173ff; border: 3px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.4); }
@keyframes hmuP { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

/* modalità navigatore */
.hmapn__ban, .hmapn__bar { display: none; }
.is-nav .hmap__stage { position: fixed; inset: 0; z-index: 9000; height: auto; border-radius: 0; }
.is-nav .hmap__sum { display: none !important; }
.is-nav .hmapn__ban { display: flex; position: absolute; z-index: 1100; top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px; gap: 14px; align-items: center; background: var(--m-wine, #6a0631); color: #fff; border-radius: 22px; padding: 14px 18px; box-shadow: var(--m-shadow-lg); }
.hmapn__ico { flex: none; width: 56px; height: 56px; border-radius: 16px; background: rgba(255,255,255,.14); display: grid; place-items: center; color: var(--m-gold, #fcb900); }
.hmapn__t { display: flex; flex-direction: column; min-width: 0; }
.hmapn__t b { font-size: 1.1rem; line-height: 1.25; }
.hmapn__t small { opacity: .85; font-size: .9rem; }
.is-nav .hmapn__bar { display: flex; position: absolute; z-index: 1100; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); gap: 8px; align-items: center; background: rgba(255,255,255,.96); border-radius: 22px; padding: 12px 14px; box-shadow: var(--m-shadow-lg); }
.hmapn__eta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hmapn__eta b { font-size: 1.05rem; }
.hmapn__eta small { color: var(--m-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hmapn__bar button { border: 0; width: 44px; height: 44px; border-radius: 50%; background: rgba(106,6,49,.08); font-size: 1.1rem; cursor: pointer; }
.hmapn__bar button.exit { width: auto; padding: 0 20px; background: #c0392b; color: #fff; font-weight: 800; border-radius: 999px; }
.nofollow [data-act="recenter"] { background: var(--m-gold, #fcb900); }
.is-nav .hmap__toast { top: 110px; z-index: 1300; position: fixed; }
.is-nav .leaflet-control-zoom { margin-top: 110px; }
html.hmap-lock, html.hmap-lock body { overflow: hidden; }

@media (min-width: 861px) {
  .hmap { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 18px; align-items: start; margin-inline: 0; }
  .hmap__side { padding-inline: 0; height: clamp(440px, 62vw, 640px); }
  .hmap__chips { margin-inline: 0; padding-inline: 0; }
  .hmap__list { overflow-y: auto; flex: 1; }
  .hmap__stage { order: 0; border-radius: var(--m-r); box-shadow: var(--m-shadow-lg); height: clamp(440px, 62vw, 640px); }
  .hmap__sum { left: 14px; right: auto; bottom: 14px; width: min(400px, calc(100% - 28px)); max-height: 70%; }
  .hmap__go { flex: 0 0 auto; }
  .hmap__lnk { flex: 0 0 auto; padding: 12px 16px; }
}

/* Pulsante "torna in hotel" sulla mappa */
.hmap__back { position: absolute; z-index: 600; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--m-gold, #fcb900); color: var(--m-deep, #25020f); font: 800 .88rem/1 inherit; box-shadow: 0 8px 24px -6px rgba(0,0,0,.35); cursor: pointer; }
.is-nav .hmap__back { display: none; }

/* Modale breve del luogo */
html.hmap-lock, html.hmap-lock body { overflow: hidden; }
.hmod { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: flex-end; justify-content: center; background: rgba(20,1,9,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: hmodF .2s ease; }
.hmod__card { position: relative; width: 100%; max-width: 520px; max-height: 92svh; overflow-y: auto; background: var(--m-card, #fff); color: var(--m-ink, #1d0b14); border-radius: 26px 26px 0 0; box-shadow: 0 -20px 60px -10px rgba(0,0,0,.5); animation: hmodU .3s cubic-bezier(.22,1,.36,1); padding-bottom: env(safe-area-inset-bottom); }
.hmod__x { position: absolute; z-index: 2; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: #25020f; font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.hmod__img { aspect-ratio: 16 / 10; background: #e9e2de; }
.hmod__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hmod__body { padding: 18px 20px 22px; }
.hmod__tag { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.hmod__body h3 { font: 800 1.45rem/1.15 'Raleway', sans-serif; letter-spacing: -.02em; margin: 12px 0 4px; }
.hmod__d { color: var(--m-wine, #6a0631); font-weight: 700; font-size: .88rem; margin-bottom: 10px; }
.hmod__t { font-size: 1rem; line-height: 1.6; color: #3d2a33; margin-bottom: 12px; }
.hmod__m { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .88rem; color: var(--m-mute, #6f5b64); }
.hmod__m i { width: 18px; color: var(--m-wine, #6a0631); margin-right: 6px; text-align: center; }
.hmod__cta { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.hmod__more, .hmod__route { min-height: 54px; display: flex; align-items: center; justify-content: center; border-radius: 999px; font: 800 1rem/1 inherit; text-decoration: none; cursor: pointer; border: 0; }
.hmod__more { background: var(--m-gold, #fcb900); color: var(--m-deep, #25020f); box-shadow: 0 8px 24px -6px rgba(252,185,0,.6); }
.hmod__route { background: transparent; border: 1.5px solid var(--m-line, rgba(106,6,49,.2)); color: var(--m-wine, #6a0631); }
@keyframes hmodF { from { opacity: 0; } }
@keyframes hmodU { from { transform: translateY(40px); opacity: 0; } }
@media (min-width: 641px) { .hmod { align-items: center; } .hmod__card { border-radius: 26px; } .hmod__cta { flex-direction: row-reverse; } .hmod__cta > * { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .hmod, .hmod__card { animation: none; } }

/* Sezione "What to see on foot": schede POI con immagine */
.hpoi__rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 4px 16px 20px; scrollbar-width: none; }
.hpoi__rail::-webkit-scrollbar { display: none; }
.hpc { flex: 0 0 78%; max-width: 340px; scroll-snap-align: center; background: var(--m-card, #fff); border-radius: 22px; overflow: hidden; box-shadow: var(--m-shadow); cursor: pointer; display: flex; flex-direction: column; transition: transform .3s cubic-bezier(.22,1,.36,1); outline-offset: 3px; }
.hpc:hover { transform: translateY(-3px); }
.hpc__img { position: relative; aspect-ratio: 16 / 10; }
.hpc__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hpc__tag { position: absolute; left: 12px; top: 12px; display: inline-flex; gap: 6px; align-items: center; padding: 6px 11px; border-radius: 999px; background: rgba(37,2,15,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.hpc__b { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.hpc__b h3 { font: 800 1.12rem/1.2 'Raleway', sans-serif; letter-spacing: -.02em; margin: 0; }
.hpc__d { color: var(--m-wine, #6a0631); font-weight: 700; font-size: .84rem; margin: 0; }
.hpc__t { font-size: .88rem; line-height: 1.5; color: #3d2a33; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hpc__a { margin-top: auto; padding-top: 10px; display: flex; gap: 8px; align-items: center; }
.hpc__go { flex: 1; min-height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--m-gold, #fcb900); color: var(--m-deep, #25020f); font-weight: 800; font-size: .9rem; }
.hpc__route { min-height: 46px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--m-line, rgba(106,6,49,.2)); background: transparent; color: var(--m-wine, #6a0631); font: 700 .88rem/1 inherit; cursor: pointer; }
.hpoi__more { font: 800 1.1rem 'Raleway', sans-serif; letter-spacing: -.02em; margin: 6px 0 14px; color: var(--m-mute, #6f5b64); }
@media (min-width: 761px) {
  .hpoi__rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); overflow: visible; margin-inline: 0; padding: 0 0 28px; }
  .hpoi__rail .hpc { max-width: none; }
}

/* ── Riempie la colonna dell'articolo: annulla il suo padding laterale (niente 100vw: sforava lo schermo) ── */
.wrc-nearby-wrap { align-self: stretch; width: auto; max-width: none; min-width: 0; box-sizing: border-box;
  margin-inline: calc(-1 * var(--wrc-spacing--20, 20px)); margin-top: 20px; overflow: hidden; }
.wrc-nearby-wrap .hmap { margin-inline: 0; max-width: none; width: 100%; }
.wrc-nearby-wrap .hmap__foot { padding-inline: 16px; }
/* Mobile: la mappa prende tutta la larghezza dello schermo, centrata sul viewport
   (indipendente dal padding/allineamento della colonna dell'articolo). Su mobile non c'è scrollbar, quindi 100vw non sfora. */
@media (max-width: 860px) {
  .wrc-nearby-wrap { align-self: auto; box-sizing: border-box; position: relative; left: 0;
    width: 100vw; max-width: 100vw; margin-inline: 0; }
}
@media (min-width: 861px) {
  .wrc-nearby-wrap .hmap { padding-inline: 20px; }
  .wrc-nearby-wrap .hmap__foot { padding-inline: 20px; }
  .wrc-nearby-wrap .hmap__stage { border-radius: 28px; }
}