/* ════════════════════════════════════════════════════════════════════
   DETAIL 2-TABS — v313.154.81
   ────────────────────────────────────────────────────────────────────
   CSS canonico per il pannello dettaglio dopo la rimozione di
   detail-canonical.css / detail-shell-v2.css / detail-merge-v3.css.

   Principi:
     - tornare alla GRAFICA NATIVA del bundle (palette dark v60 +
       light theme automatico via body.light)
     - mantenere lo STILE TITOLO che piace dopo v80
       (22px, weight 800, Nunito, letter-spacing -0.5px)
     - nascondere a livello CSS il tab button "foto-azioni"
       (il JS detail-2tabs.js fa lo stesso, qui è backup robusto)
     - dare risalto al CTA "Organizza visita"
   ════════════════════════════════════════════════════════════════════ */

/* ── Tab UI ──────────────────────────────────────────────────────────── */

/* Nascondi il tab button "Foto & azioni": ora i suoi contenuti sono
   distribuiti tra Panoramica (gallery, azioni) e Approfondisci (deep-dive). */
#detail > .ads-tabs .ads-tab[data-ads-tab-id="foto-azioni"] {
  display: none !important;
}

/* Quando #detail è in stato "foto-azioni" per residuo cache (rarissimo),
   forziamo a fallback su panoramica via stessa logica del bundle. */
#detail[data-ads-tab="foto-azioni"] .ad2-section[data-ads-tab="foto-azioni"] {
  display: block !important; /* le sezioni saranno migrate dal JS comunque */
}

/* ── Titolo del sito (.ad2-hero primo div) ───────────────────────────── */
/* Il bundle scrive il nome con stile inline: font-size:20px, weight:800,
   color:#f0c040, letter-spacing:.3px. Sostituiamo con lo stile che
   l'utente preferisce dalla v80, lasciando però il colore al design
   system (gold sul dark, terracotta sul light). */
#detail .ad2-hero > div:first-child {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.15 !important;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* In light theme il fondo è cream: il titolo terracotta scuro è
   esattamente lo stile che piace nella v80. */
body.light #detail .ad2-hero > div:first-child {
  color: #5a4636 !important;
}

/* In dark theme il fondo è blu scuro: lasciamo il gold del bundle
   (più leggibile e coerente con l'ID visivo del progetto). */

/* ── CTA "Organizza visita" (dentro .ad2-actions) ────────────────────── */
/* Il bundle aggiunge il bottone "🗓️ Organizza visita" dentro
   .ad2-actions in coda. Diamo risalto coerente con la palette gold/orange
   v60 (i CTA Trail/Plan di AllTrails). */
#detail .ad2-btn.ads-trip-cta {
  background: linear-gradient(135deg, #e6891a, #f0c040) !important;
  color: #1a1f2e !important;
  border: 0 !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  box-shadow: 0 2px 8px rgba(230, 137, 26, .35) !important;
}
#detail .ad2-btn.ads-trip-cta:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* ── Sezione "Approfondisci" (link YouTube/Wiki/Amazon/Scholar) ──────── */
/* Quando una .ad2-section contiene link esterni di approfondimento,
   le diamo un trattamento un po' più caldo. Selettore canonico: ha .ad2-actions
   con almeno un link a youtube/wikipedia/amazon/scholar. */
#detail .ad2-section .ad2-actions a.ad2-btn[href*="youtube.com"],
#detail .ad2-section .ad2-actions a.ad2-btn[href*="wikipedia.org"],
#detail .ad2-section .ad2-actions a.ad2-btn[href*="amazon."],
#detail .ad2-section .ad2-actions a.ad2-btn[href*="scholar.google"] {
  text-decoration: none !important;
  font-weight: 700 !important;
}

/* Versione "gold" per Amazon (libri) — accent v60 */
#detail .ad2-section .ad2-actions a.ad2-btn.gold {
  background: linear-gradient(135deg, #f0c040, #e6891a) !important;
  color: #1a1f2e !important;
  border: 0 !important;
}

/* ── Tab pill: stile arancio v60 quando attiva ──────────────────────── */
/* Il bundle ha già la pillola; aggiungiamo l'accento arancio gold
   coerente con il resto della palette. */
#detail > .ads-tabs .ads-tab[aria-selected="true"] {
  background: linear-gradient(135deg, #e6891a, #f0c040) !important;
  color: #1a1f2e !important;
  border-color: #e6891a !important;
  font-weight: 800 !important;
}

/* ── Hero: piccola pulizia visiva ───────────────────────────────────── */
#detail .ad2-hero {
  padding: 16px 14px 8px !important;
}

/* ── Approfondisci tab: piccola annotazione visiva ──────────────────── */
/* Quando il tab "chiedi-ai" (rinominato Approfondisci) è attivo,
   diamo un sottile accent al contesto. */
#detail[data-ads-tab="chiedi-ai"] .ad2-section {
  /* niente di forzato: l'aspetto resta quello del bundle, coerente */
}

/* ── v84: Disabilitato banner volante "Sei stato qui?" ───────────────── */
/* pin-upload-cta.js (concatenato nel bundle) crea un toast .ads-cta-toast
   con position:fixed in basso, che invita l'utente a caricare foto.
   L'utente vuole UNA sola UI di upload (il bottone fisso sotto galleria).
   Il modulo continua a girare in memoria ma nulla è visibile.
   Hide aggressivo per battere qualunque !important inline. */
.ads-cta-toast,
.ads-cta-toast.ads-cta-exit {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: fixed !important;
  left: -9999px !important;
}

/* v84: rimossa la regola CSS :has() di v83 — bloccava il bottone fisso
   "📷 Aggiungi foto" perché archeo-detail-shell.js lo aggiungeva come
   ultimo figlio di .ad2-section[data-ad2="gallery"], che era nascosta. */

/* ── AI box opt-in (.am-ai-optin) ───────────────────────────────────── */
/* Bottone che svela il form ask-AI solo on-demand. Default: visibile,
   form nascosto. Click → form visibile, bottone via. Niente token finché
   l'utente non chiede esplicitamente. */
#detail .am-ai-optin {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(240,192,64,.12), rgba(230,137,26,.08));
  border: 1px dashed rgba(240,192,64,.45);
  border-radius: 12px;
  color: #f0c040;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  letter-spacing: .2px;
  transition: background .15s ease, border-color .15s ease;
}
#detail .am-ai-optin:hover {
  background: linear-gradient(135deg, rgba(240,192,64,.22), rgba(230,137,26,.14));
  border-color: rgba(240,192,64,.7);
}
body.light #detail .am-ai-optin {
  color: #b87a1a;
  background: linear-gradient(135deg, rgba(240,192,64,.10), rgba(230,137,26,.05));
  border-color: rgba(184,122,26,.35);
}
body.light #detail .am-ai-optin:hover {
  border-color: rgba(184,122,26,.6);
}
#detail .am-ai-collapse {
  margin-top: 10px;
}

/* ════════════════════════════════════════════════════════════════════
   v102 ADDITIVO — Carosello galleria foto orizzontale (stile AllTrails)
   ────────────────────────────────────────────────────────────────────
   Override con specificità maggiore (body #detail .ad2-gallery,
   body #detail .am-full-photo-grid) per imporre il carosello sopra
   le regole esistenti del bundle (riga 14680 e 19392). Solo CSS,
   nessun JS toccato. Niente regressioni.
   ════════════════════════════════════════════════════════════════════ */

body #detail .ad2-gallery,
body #detail .am-full-photo-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 10px !important;
  padding: 8px 4px 12px !important;
  margin: 0 !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(240,192,64,.5) transparent !important;
  /* v1.18.23: il verticale deve sempre scorrere la tendina, anche quando
     il dito parte sopra una foto. Il tap continua ad aprire il lightbox. */
  touch-action: pan-y pinch-zoom !important;
  -ms-touch-action: pan-y !important;
}

body #detail .ad2-gallery::-webkit-scrollbar,
body #detail .am-full-photo-grid::-webkit-scrollbar {
  height: 6px;
}
body #detail .ad2-gallery::-webkit-scrollbar-thumb,
body #detail .am-full-photo-grid::-webkit-scrollbar-thumb {
  background: rgba(240,192,64,.5);
  border-radius: 3px;
}

body #detail .ad2-gallery > img,
body #detail .ad2-gallery > button,
body #detail .am-full-photo-grid > img,
body #detail .am-full-photo-grid > button {
  flex: 0 0 auto !important;
  width: 240px !important;
  height: 180px !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  scroll-snap-align: center !important;
  cursor: pointer !important;
  transition: transform .2s ease !important;
  border: 1px solid rgba(240,192,64,.25) !important;
  padding: 0 !important;
  background: rgba(0,0,0,.04) !important;
}

body #detail .ad2-gallery > button > img,
body #detail .am-full-photo-grid > button > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  border: 0 !important;
}

body #detail .ad2-gallery > img:hover,
body #detail .am-full-photo-grid > img:hover,
body #detail .ad2-gallery > button:hover,
body #detail .am-full-photo-grid > button:hover {
  transform: scale(1.03) !important;
  border-color: rgba(240,192,64,.6) !important;
}

@media (max-width: 480px) {
  body #detail .ad2-gallery > img,
  body #detail .ad2-gallery > button,
  body #detail .am-full-photo-grid > img,
  body #detail .am-full-photo-grid > button {
    width: 75vw !important;
    max-width: 280px !important;
    height: 56vw !important;
    max-height: 200px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   v112 ADDITIVO — Carosello esteso a .acc-photo-grid (accordion bundle)
   ────────────────────────────────────────────────────────────────────
   Il bundle (linee 11111, 11119) renderizza la sezione foto del detail
   con la classe .acc-photo-grid, contenente .acc-photo-thumb > img.
   v102 copriva solo .ad2-gallery e .am-full-photo-grid → utenti che
   vedevano la versione "panel" non avevano carosello. Estendo le
   regole esistenti a .acc-photo-grid SENZA toccare nulla.
   ════════════════════════════════════════════════════════════════════ */

body #detail .acc-photo-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 10px !important;
  padding: 8px 4px 12px !important;
  margin: 0 !important;
  grid-template-columns: none !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(240,192,64,.5) transparent !important;
  scroll-behavior: smooth !important;
  will-change: scroll-position;
  /* v1.18.23: il verticale deve sempre scorrere la tendina. */
  touch-action: pan-y pinch-zoom !important;
  -ms-touch-action: pan-y !important;
}

body #detail .acc-photo-grid::-webkit-scrollbar {
  height: 6px;
}
body #detail .acc-photo-grid::-webkit-scrollbar-thumb {
  background: rgba(240,192,64,.5);
  border-radius: 3px;
}

body #detail .acc-photo-grid > .acc-photo-thumb {
  flex: 0 0 auto !important;
  width: 240px !important;
  height: 180px !important;
  aspect-ratio: auto !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  scroll-snap-align: center !important;
  cursor: pointer !important;
  transition: transform .2s ease !important;
  border: 1px solid rgba(240,192,64,.25) !important;
  padding: 0 !important;
  background: rgba(0,0,0,.04) !important;
  position: relative !important;
}

body #detail .acc-photo-grid > .acc-photo-thumb > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  border: 0 !important;
  display: block !important;
  transform: translateZ(0);
  backface-visibility: hidden;
}

body #detail .acc-photo-grid > .acc-photo-thumb:hover {
  transform: scale(1.03) !important;
  border-color: rgba(240,192,64,.6) !important;
}

@media (max-width: 480px) {
  body #detail .acc-photo-grid > .acc-photo-thumb {
    width: 75vw !important;
    max-width: 280px !important;
    height: 56vw !important;
    max-height: 200px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   v113 ADDITIVO — Carosello esteso a .apx-photo-wrap
   ────────────────────────────────────────────────────────────────────
   ISPEZIONE LIVE su archeomap.app (sito Roque Nublo, 4 foto):
   il bundle/app-extensions vivo emette i thumb come
   <span class="apx-photo-wrap"><img>...</span> dentro .ad2-gallery
   anziché <img> o <button> diretti. Le regole v102 (> img, > button)
   non matchano → 4 foto stack 75x100, niente scroll, niente carosello.
   Estendo regole carosello a SPAN.apx-photo-wrap (e fallback IMG)
   con specificità body #detail per battere il bundle.
   ════════════════════════════════════════════════════════════════════ */

body #detail .ad2-gallery > .apx-photo-wrap,
body #detail .am-full-photo-grid > .apx-photo-wrap,
body #detail .acc-photo-grid > .apx-photo-wrap {
  flex: 0 0 auto !important;
  display: inline-block !important;
  width: 240px !important;
  height: 180px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  position: relative !important;
  scroll-snap-align: center !important;
  cursor: pointer !important;
  transition: transform .2s ease !important;
  border: 1px solid rgba(240,192,64,.25) !important;
  background: rgba(0,0,0,.04) !important;
  padding: 0 !important;
  vertical-align: top !important;
}

body #detail .ad2-gallery > .apx-photo-wrap > img,
body #detail .am-full-photo-grid > .apx-photo-wrap > img,
body #detail .acc-photo-grid > .apx-photo-wrap > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  border: 0 !important;
  display: block !important;
  transform: translateZ(0);
  backface-visibility: hidden;
}

body #detail .ad2-gallery > .apx-photo-wrap:hover,
body #detail .am-full-photo-grid > .apx-photo-wrap:hover,
body #detail .acc-photo-grid > .apx-photo-wrap:hover {
  transform: scale(1.03) !important;
  border-color: rgba(240,192,64,.6) !important;
}

@media (max-width: 480px) {
  body #detail .ad2-gallery > .apx-photo-wrap,
  body #detail .am-full-photo-grid > .apx-photo-wrap,
  body #detail .acc-photo-grid > .apx-photo-wrap {
    width: 75vw !important;
    max-width: 280px !important;
    height: 56vw !important;
    max-height: 200px !important;
  }
}