/* =========================================================
   POOLANO — HOME LAYOUT COMPLETO
   Guscio largo su desktop + corsie banner + mobile fluido.
   SOSTITUISCE home_responsive.css (contiene già tutte quelle
   regole: usa SOLO questo file).

   INSTALLAZIONE
   1. Carica questo file in /assets/css/home_layout.css
   2. In index.php, prima di </head>, aggiungi:
      <link rel="stylesheet" href="/assets/css/home_layout.css">
   3. (Facoltativo, per i banner) includi adv_rails.php subito
      dopo l'include di header.php — vedi quel file.
   ========================================================= */

/* ---------- 0. SICUREZZA GLOBALE ---------- */
html, body { overflow-x: hidden; }
img, svg, video { max-width: 100%; }

/* =========================================================
   A. GUSCIO LARGO — desktop e laptop (da 1024px in su)
   Il contenuto passa da 1152px (max-w-6xl) a un guscio
   fluido: 94% dello schermo, con tetto a 1440px.
   Vale per header, sezioni della home e footer, così resta
   tutto allineato.
   ========================================================= */
@media (min-width: 1024px) {

  .mx-auto.max-w-6xl,
  .hero-inner-vertical {
    max-width: min(1440px, 94vw) !important;
  }

  /* Footer allineato al nuovo guscio */
  .ft-inner { max-width: min(1440px, 94vw); }

  /* Mappa regioni: può respirare un po' di più */
  .pw-italy-map-wrap { max-width: 1100px !important; }

  /* La mappa grande Leaflet sfrutta la larghezza extra */
  .home-map-wrap { height: 46rem; }
}

/* Schermi molto larghi: il contenuto si ferma a 1440px,
   la mappa può essere un filo più alta */
@media (min-width: 1600px) {
  .home-map-wrap { height: 52rem; }
}

/* =========================================================
   B. CORSIE BANNER LATERALI (richiede adv_rails.php)
   Compaiono solo quando c'è davvero spazio: da 1800px.
   1440px contenuto + 2 corsie da 160px + margini.
   Sotto quella soglia sono nascoste: zero impatto.
   ========================================================= */
.home-adv-rail {
  display: none;
  position: fixed;
  top: 110px;                 /* sotto il menu sticky */
  width: 160px;
  z-index: 30;
}
.home-adv-rail.rail-left  { left: 16px; }
.home-adv-rail.rail-right { right: 16px; }

@media (min-width: 1800px) {
  .home-adv-rail { display: block; }
}

/* Segnaposto tratteggiato: si vede solo finché la corsia è
   vuota. Quando inserirai il codice pubblicitario dentro
   l'aside, togli il div .rail-placeholder da adv_rails.php */
.rail-placeholder {
  height: 600px;
  border: 2px dashed #e2e8f0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 .7rem/1.4 'Plus Jakarta Sans', sans-serif;
  color: #cbd5e1;
  text-align: center;
  writing-mode: vertical-rl;
  letter-spacing: .08em;
}

/* =========================================================
   C. SLOT BANNER ORIZZONTALI TRA LE SEZIONI (in-feed)
   Su mobile le corsie laterali non esistono: i formati che
   rendono sono i banner tra una sezione e l'altra.
   Uso: <div class="home-adv-slot"><!-- codice adv --></div>
   Finché è vuoto non occupa spazio (nessun buco bianco).
   ========================================================= */
.home-adv-slot {
  max-width: min(1440px, 94vw);
  margin: 0 auto;
  padding: 0 1.25rem;
}
.home-adv-slot:empty { display: none; }
.home-adv-slot > * { margin: 1.5rem auto; }

/* =========================================================
   D. TABLET (640px – 1023px)
   ========================================================= */
@media (min-width: 640px) and (max-width: 1023px) {
  .hotel-card { width: 15rem; }
  .tip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .home-map-wrap { height: 32rem; }
}

/* =========================================================
   E. MOBILE (fino a 639px)
   ========================================================= */
@media (max-width: 639px) {

  /* Hero compatto */
  .hero-inner-vertical { gap: 1.25rem; }
  .hero-inner-vertical h1 { font-size: 1.75rem !important; line-height: 1.2 !important; }

  /* Tab citta' ("Le destinazioni piu' ricercate"): una sola riga
     scorrevole col dito, invece di 4 righe sparpagliate */
  .city-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    gap: 1.15rem !important;
    scrollbar-width: none;
    margin-right: -1.25rem;
    padding-right: 1.25rem;
  }
  .city-tabs::-webkit-scrollbar { display: none; }
  .city-tab { flex: 0 0 auto; white-space: nowrap; }

  /* Filtri del hero: riga di chip scorrevole */
  .hero-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .4rem;
    margin-right: -1.25rem;
    padding-right: 1.25rem;
    scrollbar-width: none;
  }
  .hero-filters::-webkit-scrollbar { display: none; }
  .hero-filters > * { flex: 0 0 auto; }
  .hero-filters a, .hero-filters button { min-height: 2.6rem; }

  /* Caroselli: card fluida con "spia" della successiva */
  .hotel-card { width: min(16.5rem, 76vw); scroll-snap-align: start; }
  .carousel-track {
    touch-action: pan-x pan-y;
    gap: .85rem;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 1.25rem;
  }

  /* Mappa grande più bassa: non intrappola lo scroll */
  .home-map-wrap { height: 21rem; border-radius: .9rem; }

  /* Tipologie: da colonna infinita a carosello */
  .tip-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    gap: .9rem;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: .75rem;
    scrollbar-width: none;
  }
  .tip-grid::-webkit-scrollbar { display: none; }
  .tip-grid > * {
    flex: 0 0 76vw;
    max-width: 19rem;
    scroll-snap-align: start;
  }

  /* Mappa regioni compatta */
  #pw-region-list { max-height: 16rem; }
  .pw-italy-map-wrap svg { max-width: 330px !important; }

  /* Titoli di sezione uniformi */
  .mx-auto.max-w-6xl h2 { font-size: 1.35rem; line-height: 1.25; }

  /* Tutte le destinazioni: più densa */
  .alldest-grid { gap: .1rem 1rem; font-size: .82rem; }
}