/* ==========================================================================
   ArcheoMap — Mobile UX Overhaul (v313.144)
   --------------------------------------------------------------------------
   Caricato con media="(max-width:768px)" → ZERO impatto su desktop.

   Pattern presi da Instagram/Airbnb/Komoot:
     1. Pin marker più grandi (52×72 vs 36×52) — leggibili da metro di distanza
     2. Detail panel: hero foto, nome grande, chip compatti, sezioni collapse
     3. CTA principale sticky bottom (foto/posizione)
     4. Tipografia mobile-first (16px base = no zoom su iOS)
     5. Touch target ≥ 44×44 (Apple HIG)

   NON tocca .ad2-* su desktop (>768px) — il file ha media query a livello link.
   ========================================================================== */

/* ────────────────────────────────────────────────────────────────────
   1. PIN MARKER — più grandi, più leggibili
   --------------------------------------------------------------------
   v313.145 FIX: Leaflet usa transform: translate3d() sul .leaflet-marker-icon
   per posizionare i marker. Se applichiamo transform: scale() in CSS,
   sostituiamo il translate3d → il marker si "muove" durante pan/zoom
   perché Leaflet riapplica translate ma il CSS scale resta in conflitto.
   Soluzione: scaliamo SOLO IL CONTENUTO INTERNO del divIcon (i div
   figli con emoji/SVG), non il marker container. Leaflet resta libero
   di gestire il translate, il pin appare comunque più grande.
   ──────────────────────────────────────────────────────────────────── */

/* v313.151 — PIN MOBILE = PIN WEB (zero differenze grafiche).
   I pin singoli NON HANNO REGOLE su mobile: ereditano TUTTO dal web.
   Stessa dimensione, stesso stile, stessa ombra (quella nativa del divIcon).
   L'unica cosa che cambia mobile è:
     - cluster numerici 0.7x (più piccoli per non dominare)
     - pin user "Vicino" con glow cyan per identificazione
     - spiderfy attivo (mobile-spiderfy.js)
   Tutto il resto è IDENTICO al web. */

/* (NIENTE regole sui pin singoli — ereditano dal CSS web) */

/* Cluster: 0.7x → SEMPRE più piccoli del pin singolo.
   La gerarchia visiva diventa: pin = elemento principale, cluster = aggregatore. */
html body .marker-cluster > div {
  transform: scale(0.7);
  transform-origin: center;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .1px;
}

/* Pin user "Vicino": glow cyan per riconoscibilità (l'unica differenza visiva
   intenzionale rispetto al web — su mobile è importante riconoscere "io sono qui") */
html body .leaflet-marker-icon.user-pos > div,
html body .leaflet-marker-icon.ams-osm-dot > div {
  filter: drop-shadow(0 0 6px rgba(78,205,196,.55));
}

/* ────────────────────────────────────────────────────────────────────
   2. DETAIL PANEL — semplificazione mobile
   ──────────────────────────────────────────────────────────────────── */

/* Hero: foto più alta, nome leggibile */
html body .ad2-root .ad2-hero {
  min-height: 220px !important;
}
html body .ad2-root .ad2-hero h1,
html body .ad2-root .ad2-hero .ad2-title {
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.7);
}

/* Sezioni: padding più stretto, gap minore */
html body .ad2-root .ad2-section {
  padding: 14px 16px !important;
  margin-bottom: 8px !important;
}
html body .ad2-root .ad2-section h3 {
  font-size: 15px !important;
  font-weight: 800 !important;
  margin-bottom: 8px !important;
}

/* Pulsanti: touch target ≥ 44px, full-width per la CTA principale */
html body .ad2-root .ad2-btn {
  min-height: 44px !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
}
html body .ad2-root .ad2-btn.primary {
  font-size: 15px !important;
  font-weight: 800 !important;
}

/* Galleria: swipeable orizzontale invece di griglia */
html body .ad2-root .ad2-gallery {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  gap: 8px !important;
  padding: 4px 0 !important;
}
html body .ad2-root .ad2-gallery > * {
  flex: 0 0 auto !important;
  scroll-snap-align: start !important;
  width: 70vw !important;
  max-width: 280px !important;
  height: 200px !important;
}

/* Sezioni secondarie: collapse di default usando native <details> trick.
   Trasformiamo i .ad2-section dopo la 5a in collapsibili visivamente. */
html body .ad2-root > .ad2-section:nth-of-type(n+6):not(.ad2-similar-section):not(.ad2-section-deepdive) {
  position: relative;
  max-height: 56px;
  overflow: hidden;
  transition: max-height .35s ease;
  cursor: pointer;
}
html body .ad2-root > .ad2-section:nth-of-type(n+6):not(.ad2-similar-section):not(.ad2-section-deepdive)::after {
  content: '▼ Tocca per espandere';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 0;
  color: #4ecdc4;
  background: linear-gradient(180deg, rgba(15,20,25,0) 0%, rgba(15,20,25,.95) 50%);
}
html body .ad2-root > .ad2-section.ad2-expanded {
  max-height: none !important;
}
html body .ad2-root > .ad2-section.ad2-expanded::after {
  content: '▲ Comprimi';
  background: transparent;
  position: relative;
}

/* Recensioni / Leggende / Position fix: card più compatte */
html body .ad2-root .ad2-review,
html body .ad2-root .ad2-legend {
  padding: 10px 12px !important;
  font-size: 13px !important;
}
html body .ad2-root .ad2-stars {
  font-size: 22px !important;
  letter-spacing: 4px !important;
}

/* Textarea / input: 16px font-size per evitare auto-zoom iOS */
html body .ad2-root input[type="text"],
html body .ad2-root input[type="email"],
html body .ad2-root textarea,
html body .ad2-root .ad2-textarea {
  font-size: 16px !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
}

/* Approfondisci: pulsanti 2x2 grid invece di lista verticale */
html body .ad2-root .ad2-deepdive {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}
html body .ad2-root .ad2-deepdive .ad2-btn {
  margin: 0 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

/* Siti simili: scroll orizzontale con snap */
html body .ad2-root .ad2-similar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  gap: 10px !important;
  padding: 4px 0 !important;
  margin: 0 -16px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
html body .ad2-root .ad2-similar .ad2-sim-card {
  flex: 0 0 auto !important;
  scroll-snap-align: start !important;
  width: 75vw !important;
  max-width: 260px !important;
  padding: 14px !important;
  border-radius: 14px !important;
}

/* ────────────────────────────────────────────────────────────────────
   3. SCHEDA "Segnala posizione" — radio cards più tap-friendly
   ──────────────────────────────────────────────────────────────────── */

html body .ad2-position-modal .pos-option {
  min-height: 56px !important;
  font-size: 15px !important;
  padding: 14px 16px !important;
  margin-bottom: 10px !important;
  border-radius: 14px !important;
}

/* ────────────────────────────────────────────────────────────────────
   4. TIPOGRAFIA & SPAZIATURA — scala mobile-first
   ──────────────────────────────────────────────────────────────────── */

html body .ad2-root {
  font-size: 14px !important;
  line-height: 1.5 !important;
}
html body .ad2-root p,
html body .ad2-root .ad2-desc,
html body .ad2-root .ad2-meta {
  font-size: 14px !important;
}

/* Smaller chip/badge in chip rows */
html body .ad2-root .ad2-chip {
  font-size: 12px !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
}

/* ────────────────────────────────────────────────────────────────────
   5. CTA STICKY BOTTOM — primary action sempre raggiungibile
   ──────────────────────────────────────────────────────────────────── */

html body .ad2-root .ad2-cta-sticky {
  position: sticky;
  bottom: env(safe-area-inset-bottom, 0px);
  background: linear-gradient(180deg, transparent 0%, rgba(15,20,25,.95) 30%, rgba(15,20,25,1) 100%);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 10;
}

/* ────────────────────────────────────────────────────────────────────
   6. v313.146 — FIX SOVRAPPOSIZIONI TOP-BAR
   --------------------------------------------------------------------
   Il modulo search-unified-v313.js inietta #suBar fisso a top:8px+safe
   con z-index 4000. La .topbar di app.js è anch'essa sticky in alto.
   Risultato: si sovrappongono. Soluzione: la topbar mobile va SOTTO
   #suBar, comprimendo l'altezza per non occupare schermo, e con
   z-index inferiore. I FAB/banner respect-z-index altri.
   ──────────────────────────────────────────────────────────────────── */

/* Topbar spostata sotto la search bar */
html body .topbar {
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 64px) !important;
  left: 8px !important;
  right: 8px !important;
  z-index: 900 !important;
  background: rgba(15, 20, 25, 0.78) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 12px !important;
  padding: 4px 8px !important;
  min-height: 36px !important;
  height: 36px !important;
  gap: 4px !important;
  border: 1px solid rgba(255,255,255,.06);
}

/* Brand più piccolo: solo icona, no titolo "ArcheoMap" (già visibile dal logo) */
html body .topbar .brand h1 {
  display: none !important;
}
html body .topbar .brand-icon {
  width: 28px !important;
  height: 28px !important;
  font-size: 16px !important;
  line-height: 28px !important;
}

/* Lang switcher e widgets compatti */
html body .topbar .lang-btn {
  padding: 2px 5px !important;
  font-size: 10px !important;
  min-width: 22px !important;
  height: 22px !important;
}
html body .topbar #themeToggle,
html body .topbar .theme-toggle {
  width: 26px !important;
  height: 26px !important;
  font-size: 12px !important;
}
html body .topbar #weatherWidget,
html body .topbar .weather-chip {
  padding: 3px 5px !important;
  font-size: 10px !important;
  height: 22px !important;
}

/* "Viaggio" trip-topbar-btn nascosto su mobile (è già nel petal menu) */
html body .topbar .trip-topbar-btn {
  display: none !important;
}

/* Mappa: spazio per topbar+searchbar su mobile (top: 110px = 8+48+8+36+10) */
html body #map {
  top: calc(env(safe-area-inset-top, 0px) + 110px) !important;
}

/* Rispetto z-index dei modal su tutto */
/* (già fatto in modal-z-fix.css con z-index:99000 — qui rinforziamo) */
html body #suBar {
  z-index: 4000 !important;
}
html body .leaflet-container {
  z-index: 1 !important;
}
html body .fab-group,
html body #petalFab {
  z-index: 950 !important;
}