/* ==========================================================================
   Taxi Catania H24 — responsive overrides
   Breakpoint principali: 960px (tablet), 720px (mobile), 480px (mobile piccolo)
   ========================================================================== */

/* ---- Tablet (≤960px) ----------------------------------------------------*/

@media (max-width: 960px) {
  /* Hero: card + testo passano da 2 colonne a 1 colonna intera */
  .hero-main__row { grid-template-columns: 1fr; }

  /* Tariffe */
  .rate-grid { grid-template-columns: repeat(2, 1fr); }
  .rate-card--highlight { grid-column: span 2; }

  /* Come funziona */
  .steps-grid { grid-template-columns: 1fr; }
}

/* ---- Mobile (≤720px) -----------------------------------------------------*/

@media (max-width: 720px) {
  /* --- Navbar: passa al menu hamburger ---
     !important necessario perche' nav.css e' incluso dopo mobile.css
     nell'HTML e altrimenti sovrascriverebbe queste regole a qualsiasi
     larghezza (stessa specificita', ordine nel cascade vince). */
  .site-nav__links,
  .site-nav__actions { display: none !important; }
  .site-nav__burger { display: flex !important; }
  .site-nav__logo { height: 40px; }

  /* --- Hero: spazio sotto la navbar fissa --- */
  .hero-main .container { padding-top: 110px; }
  .map-section--top { padding-top: 110px; }
  .flight-teaser-section--top { padding-top: 110px; }
  .dest-hero--photo .container { padding-top: 110px; }
  /* Su mobile la hero fotografica (servizi/destinazioni/tariffe/contatti e
     pagine destinazione) occupava troppo schermo (58vh) prima di arrivare
     ai contenuti veri: la accorciamo qui senza toccare il desktop. */
  .dest-hero--photo { min-height: 46vh; }

  /* --- Hero: ordine mobile — 1) card "Aeroporto ↔ Catania", 2) testo/CTA.
     (la mappa ora vive in una sezione a se' dopo lo strip, quindi qui
     riordiniamo solo card e copy). */
  .hero-main .container {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .hero-main__row { display: contents; }
  .hero-main__card { order: 1; }
  .hero-main__copy { order: 2; }

  /* --- Sezione mappa: meno padding e margini su mobile --- */
  .map-section { padding: 40px 0 48px; }

  /* --- Copy hero spostato via JS dopo la sezione mappa (vedi
     assets/js/mobile-layout.js): card -> strip -> mappa -> copy -> tabellone voli --- */
  .hero-copy-mobile {
    display: flex;
    flex-direction: column;
    padding: 8px 24px 44px;
    background: var(--color-deep);
    text-align: left;
    color: var(--color-white);
  }
  .hero-copy-mobile h1 { color: var(--color-white); }
  .hero-copy-mobile .hero-main__actions { flex-direction: column; align-items: stretch; }

  .hero-main__actions { flex-direction: column; align-items: stretch; }

  /* --- Tariffe --- */
  .rate-grid { grid-template-columns: 1fr; }
  .rate-card--highlight { grid-column: span 1; }

  /* --- Striscia servizi / tabellone voli (home) --- */
  .timeline-item { grid-template-columns: 40px 1fr; }
  .trust-badges { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; }
  .promise-strip__track { animation-duration: 22s; gap: 28px; }

  .split-board__row { grid-template-columns: 0.8fr 0.9fr 1.5fr; font-size: 0.82rem; gap: 6px; }
  .split-board__row span:nth-child(3),
  .split-board__row span:nth-child(5) { display: none; }
  .flight-teaser { padding: 24px; }
  .mini-flight-tabs { width: 100%; }
  .mini-flight-tab { flex: 1; text-align: center; }

  /* --- Mappa e calcolo tratta --- */
  .hero-map__frame { height: 340px; }
  .route-form__row,
  .route-form__row--when { grid-template-columns: 1fr; }
  .route-form__submit { width: 100%; justify-content: center; }
  .route-result { flex-direction: column; align-items: flex-start; }
  .route-result__actions { width: 100%; }
  .route-result__actions .btn { flex: 1; justify-content: center; }

  /* --- Footer --- */
  .site-footer__grid { grid-template-columns: 1fr 1fr; }

  /* Su mobile il footer aveva troppo spazio vuoto sopra (padding sezione +
     padding del footer si sommavano), prima di arrivare ai link. Riduciamo
     solo il footer per non toccare i padding già calibrati sezione per
     sezione. */
  .site-footer { padding-top: 40px; }
}

/* ---- Mobile piccolo (≤480px) ---------------------------------------------*/

@media (max-width: 480px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}