/* ─────────────────────────────────────────────────────────────────────
 * detail-tabs-fallback.css — v313.154.170
 * ─────────────────────────────────────────────────────────────────────
 * Layout fix per il render V2 (.ad2-root) di site-detail-rebuild.js v11.
 *
 * PROBLEMA #1 — Spazi vuoti enormi tra le sezioni su cell
 *   Ogni .ad2-section ha margin:14px 0 + padding:14px 0 = 56px verticali
 *   tra sezione e sezione. Con 10 sezioni → 560px di spacing solo da
 *   layout. Su mobile (380-420px width) lo spazio è insostenibile.
 *
 * PROBLEMA #2 — Sezioni vuote lasciano margin attivi
 *   Quando .ad2-section ha display:flex/block con contenuto vuoto, il
 *   bounding rect è 0x0 ma margin/padding restano applicati e creano
 *   gap fantasma fra sezioni visibili.
 *
 * FIX
 *   1. Mobile (≤760px): margin/padding sezioni ridotti a 6/8px.
 *   2. Sezioni con altezza visibile = 0 → hide completo (no margin).
 *   3. Hero compatto, gallery compatta.
 *   4. Hide ad2-section vuote (text content === metadata helper).
 *
 * Additivo, no touch a CSS detail-2tabs.css né site-detail-rebuild.js.
 * ───────────────────────────────────────────────────────────────────── */

/* ── Compress spacing tra sezioni V2 — TUTTI i dispositivi ──────────── */

#detailBody .ad2-root .ad2-section,
#detailBody .ad2-root .ad2-hero {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* ── Mobile: ancora più stretto ─────────────────────────────────────── */

@media (max-width: 760px) {
  #detailBody .ad2-root .ad2-section,
  #detailBody .ad2-root .ad2-hero {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    padding: 10px 12px !important;
  }

  /* Hero: titolo + meta più compatto su mobile */
  #detailBody .ad2-root .ad2-hero h1,
  #detailBody .ad2-root .ad2-hero h2 {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    line-height: 1.15 !important;
  }

  /* Gallery: meno padding */
  #detailBody .ad2-root .ad2-gallery {
    padding: 8px !important;
  }

  /* Action buttons: meno gap */
  #detailBody .ad2-root .ad2-actions {
    gap: 6px !important;
  }

  /* Headings dentro sezione: zero margin top */
  #detailBody .ad2-root .ad2-section h3,
  #detailBody .ad2-root .ad2-section h2 {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
  }
}

/* ── Hide sezioni con bounding rect 0 (vuote ma con margin attivi) ──── */
/* Approccio :empty + :has() per browser moderni */

#detailBody .ad2-root .ad2-section:empty {
  display: none !important;
}

@supports selector(:has(*)) {
  /* Hide sezioni che contengono SOLO un titolo h2/h3 senza altro contenuto */
  #detailBody .ad2-root .ad2-section:not(.ad2-hero):not(.glow):has(> h3:only-child),
  #detailBody .ad2-root .ad2-section:not(.ad2-hero):not(.glow):has(> h2:only-child) {
    display: none !important;
  }
}

/* ── Hero su mobile: compress meta info ──────────────────────────────── */

@media (max-width: 760px) {
  #detailBody .ad2-root .ad2-hero {
    /* Compatta meta sotto titolo */
    line-height: 1.3 !important;
  }
  #detailBody .ad2-root .ad2-hero .ad2-meta,
  #detailBody .ad2-root .ad2-hero .ad2-tags {
    margin-top: 4px !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
  }
}

/* ── Tabs sticky non si sovrappongono a contenuto V2 su cell ────────── */

@media (max-width: 760px) {
  #detail .ads-tabs {
    /* La barra tabs deve avere min-height ragionevole */
    min-height: 44px !important;
  }
  #detailBody {
    /* Top padding minimo per non avere gap dopo i tabs */
    padding-top: 6px !important;
  }
  #detailBody .ad2-root {
    /* Root V2 senza padding extra all'inizio */
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  /* Prima sezione del root: zero margin top per attaccarsi ai tabs */
  #detailBody .ad2-root > .ad2-section:first-child,
  #detailBody .ad2-root > .ad2-hero:first-child {
    margin-top: 2px !important;
    padding-top: 8px !important;
  }
}

/* ── Approfondisci tab: spazio tra tabs e CHIEDI ALL'AI ─────────────── */
/* Quando i tabs sono sticky e l'utente è su Approfondisci, la prima */
/* sezione visibile non deve avere gap eccessivo dal tab */

@media (max-width: 760px) {
  #detail[data-ads-tab="approfondisci"] #detailBody .ad2-root .ad2-section:first-of-type,
  #detail[data-ads-tab="approfondimenti"] #detailBody .ad2-root .ad2-section:first-of-type {
    margin-top: 2px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
 * v313.154.172 — Override aggressivi a mobile-ux-overhaul.css
 *
 * Problema A (spazio bianco enorme dopo hero su cell):
 *   `html body .ad2-root .ad2-hero { min-height: 220px !important; }`
 *   in mobile-ux-overhaul.css linea 61-63 forza altezza 220px anche se
 *   il contenuto reale è ~80px → 140px di vuoto dentro l'hero.
 *   FIX: ripristina altezza naturale al contenuto.
 *
 * Problema B (sezioni 6+ collapsabili con "Tocca per espandere"):
 *   linee 117-142 di mobile-ux-overhaul.css clip a `max-height: 56px`
 *   le sezioni dalla 6° in poi (DEEP DIVE, RECENSIONI, MITI, ecc) e
 *   mostrano pseudo-element "▼ Tocca per espandere".
 *   L'utente ha chiesto: no accordion, scroll come FB.
 *   FIX: forza max-height auto + nasconde pseudo ::after.
 *
 * Problema C (cerchio luminoso del pin visibile attraverso il pannello):
 *   detailBody / .ad2-root hanno background trasparente, quindi il pin
 *   sulla mappa con effetto glow si vede attraverso le aree senza content.
 *   FIX: detail panel background opaco crema, no transparenze.
 * ───────────────────────────────────────────────────────────────────── */

/* A — hero altezza naturale, no min-height forzato */
html body .ad2-root .ad2-hero,
html body #detailBody .ad2-root .ad2-hero {
  min-height: 0 !important;
  height: auto !important;
}

/* B — niente accordion: tutte le sezioni espanse, nessun "tocca per espandere" */
html body .ad2-root > .ad2-section,
html body #detailBody .ad2-root > .ad2-section {
  max-height: none !important;
  overflow: visible !important;
  cursor: default !important;
}
html body .ad2-root > .ad2-section::after,
html body #detailBody .ad2-root > .ad2-section::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  position: static !important;
}
html body .ad2-root > .ad2-section.ad2-expanded,
html body .ad2-root > .ad2-section.ad2-expanded::after {
  /* idempotente: stessa cosa anche se già marked expanded */
  max-height: none !important;
  content: none !important;
  display: revert !important;
}

/* C — background opaco detail panel (mobile + desktop) per nascondere pin glow */
@media (max-width: 760px) {
  #detail,
  #detailBody {
    background: #f9f5ec !important;
  }
  #detailBody {
    background-color: #f9f5ec !important;
  }
  /* Detail panel deve coprire completamente la mappa quando aperto su mobile */
  body.archeo-detail-open #detail,
  body.am-detail-open #detail,
  body.detail-open #detail {
    background: #f9f5ec !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
 * v313.154.173 — fix mobile: glow ancora visibile, tap doppio, scroll, singhiozzo
 *
 * D — Detail panel deve coprire TUTTO il viewport mobile (no glow visibile)
 *     Su iOS Safari `100vh` esclude la barra URL → uso `100dvh` + bottom 0
 *     + height 100% come fallback. Background opaco UNIVERSALE non solo media.
 * E — Tab Panoramica/Approfondisci richiedono click multipli:
 *     touch-action: manipulation (no 300ms delay), z-index alto,
 *     min-height 48px, pointer-events sicuro, tap-highlight transparent.
 * F — Tabs sticky e ads-tabs sopra il content sempre.
 * G — Scroll body con `overscroll-behavior: contain` per non passare a body window.
 * ───────────────────────────────────────────────────────────────────── */

/* D — background opaco senza bloccare la bottom-sheet mobile.
   v1.18.24: non forziamo piu' height:100dvh/bottom:0; quel vincolo
   congelava la tendina e annullava sheet-resize.js. */
#detail.open,
#detail[class*="open"] {
  background: #f9f5ec !important;
  background-color: #f9f5ec !important;
}
@media (max-width: 760px) {
  #detail,
  #detail.open {
    background: #f9f5ec !important;
  }
  /* Nasconde footer legale e altri overlay quando detail aperto, anche se manca body class */
  body:has(#detail.open) #__archeo_legal_footer {
    display: none !important;
  }
}

/* E — Tab Panoramica/Approfondisci tap-friendly */
#detail .ads-tabs {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  background: #f9f5ec !important;
  pointer-events: auto !important;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
#detail .ads-tabs button {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  min-height: 48px !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 1 !important;
  pointer-events: auto !important;
}

/* F — il body interno NON deve sovrastare i tabs */
#detailBody {
  position: relative !important;
  z-index: 1 !important;
}

/* G — Scroll containment: lo scroll del detail body non si propaga al document */
@media (max-width: 760px) {
  #detail {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
}