/* ===============================================================
   ADATTAMENTO A TABLET E TELEFONO

   I template erano stati disegnati per lo schermo grande: margini
   da 80px, griglie a più colonne, testi enormi. Qui vengono ridotti
   in modo ordinato, senza toccare il progetto originale.
   =============================================================== */

/* Nessuna pagina deve poter scorrere lateralmente */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe { max-width: 100%; }

/* ── TABLET E SOTTO (≤ 1024px) ───────────────────────────────── */
@media (max-width: 1024px) {

  nav, nav.solid { padding-left: 24px; padding-right: 24px; }

  .hero-content,
  .slide-content { padding-left: 24px; padding-right: 24px; }

  .section,
  .mid-section,
  .villas-section, .poi-section, .offers-section, .gallery-section,
  .reviews-section, .location-section, .gallery-mosaic-section,
  .offers-slider-section, .villa-header, .contact-section,
  .faq-section, .cta-section {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* due colonne diventano una */
  .mid-grid,
  .location-grid,
  .contact-grid,
  .poi-grid { grid-template-columns: 1fr !important; }

  .footer-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── TELEFONO (≤ 760px) ──────────────────────────────────────── */
@media (max-width: 760px) {

  /* Intestazione: logo e pulsante, il resto sparisce */
  nav, nav.solid { padding: 12px 16px !important; gap: 10px; }
  .nav-logo { font-size: 1.1rem; }
  .nav-bread, .nav-right .nav-outline { display: none; }
  .nav-btn { padding: 8px 16px; font-size: .78rem; }

  /* Apertura a schermo intero: testo leggibile, non gigantesco */
  .hero, .villa-hero { min-height: 78vh; }
  .hero-content, .slide-content { padding: 0 18px 40px !important; }
  .hero-title, .slide-title { font-size: clamp(2rem, 9vw, 2.9rem) !important; line-height: 1.12; }
  .hero-subtitle, .slide-sub { font-size: .95rem !important; max-width: 100%; }
  .hero-eyebrow, .slide-tag { font-size: .66rem !important; }
  .hero-arrows, .os-nav, .rv-nav { bottom: 14px; right: 14px; }

  /* Barra dei numeri sotto l'apertura: da riga a griglia 2×N */
  .hero-meta-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .hm-item { padding: 12px 14px !important; border-right: none; }
  .hm-sep { display: none !important; }
  .hm-val { font-size: .9rem; }
  .hm-lbl { font-size: .66rem; }

  /* Tutte le sezioni: margini stretti */
  .section, .mid-section, .villa-header,
  [class$="-section"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  /* Griglie a colonna unica */
  .villas-grid, .hl-grid, .poi-grid, .mid-grid, .location-grid,
  .contact-grid, .floor-cards, .reviews-grid, .offers-grid,
  .season-grid, .ci-channels, .ci-villa-links, .form-row,
  .villa-radio-group, .footer-grid, .faq-header, .os-header, .gm-header {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 12px !important;
  }

  /* Dotazioni: due colonne strette invece di due larghe */
  .amenities-grid { grid-template-columns: 1fr 1fr !important; gap: 2px !important; }
  .am-item { font-size: .78rem; }

  /* Dati della villa in intestazione */
  .vh-meta { flex-wrap: wrap; gap: 8px 16px; }
  .vh-mi { font-size: .78rem; }

  /* Titoli di sezione */
  .section-title, .block-title, .gm-title, .loc-title, .os-title, .rv-title {
    font-size: clamp(1.5rem, 6.5vw, 2rem) !important;
  }
  .section-lead, .loc-sub { font-size: .92rem !important; }

  /* Riquadro prenotazione */
  .booking-inline { padding: 18px !important; }
  .bi-dates, .bi-guests, .bi-contacts { grid-template-columns: 1fr !important; display: grid !important; gap: 10px; }
  .bi-price { font-size: 1.5rem !important; }

  /* Modulo contatti */
  .form-input, .form-select, .form-textarea { font-size: 16px !important; } /* evita lo zoom automatico su iPhone */
  .form-submit { width: 100%; }

  /* Caroselli e slider orizzontali */
  .os-track, .rv-slider { gap: 12px !important; }
  .offer-card, .rv-card { min-width: 78vw !important; }

  /* Galleria a fascia: due file più basse */
  .tv-mosaico { grid-template-rows: repeat(2, 112px) !important; grid-auto-columns: 150px !important; gap: 6px !important; }

  /* Pulsante WhatsApp: non deve coprire i contenuti */
  .wa-float { width: 52px !important; height: 52px !important; right: 14px !important; bottom: 14px !important; }

  /* Piè di pagina */
  .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer-bottom, .footer-legal { flex-direction: column; gap: 10px; text-align: center; }

  /* Mappa: non troppo alta */
  .map-frame { aspect-ratio: 4 / 3; }
}

/* ── TELEFONI STRETTI (≤ 400px) ──────────────────────────────── */
@media (max-width: 400px) {
  .amenities-grid { grid-template-columns: 1fr !important; }
  .hero-meta-bar { grid-template-columns: 1fr; }
  .hero-title, .slide-title { font-size: 1.85rem !important; }
}