/* tourmap.css — mappa interattiva dei tour (pagine hub cliente: ADC, Verve…).
   Desktop: mappa interattiva. Mobile (<=820px): card tappabili al posto della mappa. */

/* — statistiche — */
.tour-stats{display:flex;gap:clamp(28px,5vw,72px);flex-wrap:wrap;margin-top:clamp(26px,3.4vw,44px)}
.tour-stat b{display:block;font-family:var(--f-disp);font-weight:800;font-size:clamp(1.9rem,3.4vw,3rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tour-stat span{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-faint);margin-top:9px}

/* — contenitore mappa — */
.tourmap{position:relative;margin-top:clamp(30px,4vw,56px);border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg-1)}
.tourmap svg#euromap{display:block;width:100%;height:auto}
.tourmap::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 62% 62% at 50% 50%,rgba(8,8,10,0),rgba(8,8,10,.72))}
.tm-land{fill:rgba(242,242,239,.05);stroke:rgba(242,242,239,.15);stroke-width:.7;transition:fill .5s var(--ease)}
.tm-land.lit{fill:rgba(52,87,224,.22)}
.tm-route{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:.85;cursor:pointer;transition:opacity .4s var(--ease),stroke .4s var(--ease),stroke-width .4s var(--ease)}
.tm-route.on{stroke:var(--accent-2);stroke-width:3.8;opacity:1}
.tm-route.off{opacity:.08}
.tm-hit{fill:none;stroke:rgba(0,0,0,0);stroke-width:22;cursor:pointer}
.tm-node{fill:var(--accent);transition:opacity .4s var(--ease)}
.tm-node.start{fill:var(--fg)}
.tm-node.off{opacity:.08}
.tm-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 24px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);z-index:3}
.tm-reset{position:absolute;right:clamp(14px,2vw,26px);top:clamp(14px,2vw,26px);z-index:8;font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);background:rgba(8,8,10,.6);border:1px solid var(--line);border-radius:999px;padding:9px 15px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .35s var(--ease),color .3s}
.tm-reset.show{opacity:1;pointer-events:auto}
.tm-reset:hover{color:var(--fg);border-color:var(--line-2)}

/* — card grande in alto a sinistra (hover) — */
.tm-bigcard{position:absolute;left:clamp(14px,2vw,26px);top:clamp(14px,2vw,26px);z-index:5;width:clamp(280px,34vw,460px);aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid rgba(242,242,239,.16);box-shadow:0 34px 80px -30px rgba(0,0,0,.9);opacity:0;transform:translateY(12px) scale(.985);transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.tm-bigcard.show{opacity:1;transform:none}
.tm-bigcard img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.12) brightness(.9)}
.tm-bigcard::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,6,8,.92),rgba(6,6,8,.15) 52%,rgba(6,6,8,.05))}
.tm-bigcard .bc{position:absolute;left:clamp(16px,1.6vw,22px);right:16px;bottom:clamp(14px,1.5vw,20px);z-index:2}
.tm-bigcard .bc .bc-lbl{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2)}
.tm-bigcard .bc b{display:block;font-family:var(--f-disp);font-weight:800;font-size:clamp(1.4rem,2.6vw,2.3rem);line-height:1;letter-spacing:-.02em;margin-top:8px}
.tm-bigcard .bc .bc-meta{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);margin-top:10px}
.tm-bigcard .bc .bc-cta{display:inline-block;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#fff;font-style:normal;margin-top:12px;padding:6px 11px;border:1px solid rgba(242,242,239,.22);border-radius:999px}

/* — quick-look (click) — */
.ql-scrim{position:absolute;inset:0;z-index:6;background:radial-gradient(120% 90% at 50% 0,rgba(8,8,10,.35),rgba(8,8,10,.82));opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
.ql-scrim.show{opacity:1;pointer-events:auto}
.ql-panel{position:absolute;left:0;right:0;bottom:0;z-index:7;padding:clamp(18px,2.4vw,30px);background:linear-gradient(0deg,rgba(8,8,10,.94),rgba(8,8,10,.72));border-top:1px solid rgba(242,242,239,.12);backdrop-filter:blur(8px);transform:translateY(102%);transition:transform .6s cubic-bezier(.19,1,.22,1)}
.ql-panel.show{transform:none}
.ql-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(12px,1.5vw,18px)}
.ql-head .ql-lbl{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2)}
.ql-head b{display:block;font-family:var(--f-disp);font-weight:800;font-size:clamp(1.3rem,2.4vw,2.1rem);letter-spacing:-.02em;line-height:1;margin-top:8px}
.ql-head .ql-meta{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);margin-top:9px}
.ql-cta{flex:none;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:12px 20px;cursor:pointer;white-space:nowrap;transition:background .3s,transform .3s}
.ql-cta:hover{background:var(--accent-2);transform:translateX(3px)}
.ql-strip{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(150px,17vw,220px);gap:clamp(8px,1vw,14px);overflow-x:auto;padding-bottom:4px}
.ql-strip figure{margin:0;aspect-ratio:3/2;border-radius:8px;overflow:hidden;background:var(--bg-2)}
.ql-strip img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.12) brightness(.92);transition:transform .8s var(--e-expo),filter .5s}
.ql-strip figure:hover img{transform:scale(1.05);filter:none}
.ql-close{position:absolute;top:12px;right:14px;z-index:9;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:rgba(8,8,10,.6);color:var(--fg-dim);font-size:16px;line-height:1;cursor:pointer}
.ql-close:hover{color:var(--fg)}

/* lista testuale nascosta (accessibilita' / SEO) */
.tourlist{margin:0;padding:0;list-style:none;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* — griglia tour: SOLO mobile (sostituisce la mappa) — */
.tourgrid{display:none}
.tourcard{position:relative;display:block;text-decoration:none;color:inherit;border-radius:8px;overflow:hidden;background:var(--bg-2);aspect-ratio:4/3}
.tourcard img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.5) brightness(.62);transition:transform 1.1s var(--e-expo),filter .6s var(--ease)}
.tourcard:active img,.tourcard.on img{transform:scale(1.05);filter:grayscale(0) brightness(.86)}
.tourcard::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,6,8,.9),rgba(6,6,8,.05) 62%)}
.tourcard-txt{position:absolute;left:14px;right:14px;bottom:13px;z-index:2}
.tourcard-txt b{display:block;font-family:var(--f-disp);font-weight:700;font-size:15px;letter-spacing:-.005em}
.tourcard-txt span{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);margin-top:5px;font-variant-numeric:tabular-nums}

/* — galleria best-of (stile home photo-wall) — */
.tour-bestof-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(20px,2.4vw,34px)}
.tour-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;grid-auto-flow:dense}
.tour-wall a{display:block;overflow:hidden;position:relative;background:var(--bg-2);border-radius:4px;aspect-ratio:3/4}
.tour-wall a.w{grid-column:span 2;aspect-ratio:3/2}
.tour-wall img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .6s var(--ease),transform 1.1s var(--ease)}
.tour-wall a:hover img{filter:brightness(1.05);transform:scale(1.04)}

/* hint sotto il titolo mappa: testo diverso desktop/mobile */
.tm-hint .m-only{display:none}

/* — responsive: sotto 820px la mappa resta, pilotata da un carosello di card — */
@media (max-width:820px){
  .tourmap{display:block;margin-top:clamp(18px,3vw,28px)}
  .tm-bigcard,.tm-reset{display:none}          /* hover card e reset: solo desktop */
  .tm-hint .d-only{display:none}
  .tm-hint .m-only{display:inline}

  /* carosello orizzontale COMPATTO che pilota la mappa (la mappa domina in alto) */
  .tourgrid{
    display:flex;gap:10px;margin:12px -4px 0;padding:2px 4px 6px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;
  }
  .tourgrid::-webkit-scrollbar{display:none}
  .tourcard{
    flex:0 0 68%;scroll-snap-align:center;aspect-ratio:16/10;border-radius:10px;
    transition:filter .5s var(--ease),transform .5s var(--ease);
  }
  .tourcard img{filter:grayscale(.55) brightness(.5)}
  .tourcard.on img{filter:grayscale(0) brightness(.92)}
  .tourcard-txt{left:13px;right:13px;bottom:11px}
  .tourcard-txt b{font-size:14px}
  .tourcard-txt span{font-size:9px;margin-top:4px}

  .tour-wall{grid-template-columns:repeat(2,1fr);gap:13px}
}
@media (prefers-reduced-motion:reduce){
  .tourcard{transition:none}
}