/* ==========================================================================
   Responsive — desktop, tablet, Figma 390px mobile, iOS/Android
   Mobile tokens from Figma node 149:29903 (390×11901)
   ========================================================================== */

/* --- Desktop / Mac (1920–1441) --- */
@media (min-width: 1441px) {
  .container {
    padding-left: max(var(--container-padding), calc((100vw - var(--container-max)) / 2));
    padding-right: max(var(--container-padding), calc((100vw - var(--container-max)) / 2));
  }

}

@media (min-width: 769px) {
  .cta-panel__actions {
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
  }
  .btn--cta-gold,
  .btn--cta-whatsapp,
  .btn--cta-outline {
    width: auto;
  }
}

@media (min-width: 1201px) {
  .route-grid.scroll-slider--horizontal {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: visible;
    scroll-snap-type: none;
  }
  .route-grid.scroll-slider--horizontal .route-card {
    flex: unset;
    width: auto;
  }
}

@media (max-width: 1440px) {
  .hero__inner { grid-template-columns: 1fr 600px; }
}

/* --- Laptop / tablet landscape (769–1200) --- */
@media (max-width: 1200px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .booking-card { max-width: 720px; margin: 0 auto; width: 100%; }
  .vehicle-grid { grid-template-columns: repeat(2, 1fr); }
  .experience-grid { grid-template-columns: 1fr; }
  .experience-intro { grid-column: span 1; }
  .experience-cards { grid-column: span 1; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .booking-page-grid { grid-template-columns: 1fr; }
  .fleet-page-grid { grid-template-columns: repeat(2, 1fr); }

  /* Routes: horizontal scroll with slider controls */
  .route-grid.scroll-slider--horizontal {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--space-5);
    padding-bottom: var(--space-2);
    -webkit-overflow-scrolling: touch;
  }
  .route-grid.scroll-slider--horizontal .route-card {
    flex: 0 0 min(320px, 85vw);
    scroll-snap-align: start;
  }
  .routes-header .slider-nav { display: flex; }
}

/* --- Tablet (769–992) --- */
@media (max-width: 992px) {
  :root {
    --header-height: 65px;
  }

  .nav-links,
  .nav-call,
  .nav-actions .btn--nav { display: none; }
  .nav-toggle { display: flex; }
  .navbar { gap: var(--space-3); }
  .brand { flex: 1; min-width: 0; }
  .brand__logo { width: 48px; height: 48px; }
  .brand__name {
    font-size: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-actions { margin-left: auto; }
  .mobile-menu {
    padding-left: max(var(--container-padding), env(safe-area-inset-left, 0));
    padding-right: max(var(--container-padding), env(safe-area-inset-right, 0));
  }
  .tour-grid { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .page-hero {
    padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0) + var(--space-7));
    padding-bottom: var(--space-7);
  }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .heading-display { font-size: 42px; }
  .page-hero__title { font-size: 42px; }

  /* Testimonials: horizontal scroll (desktop Figma pattern) */
  .testimonial-grid.scroll-slider--horizontal {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--space-5);
    padding-bottom: var(--space-2);
    -webkit-overflow-scrolling: touch;
  }
  .testimonial-grid.scroll-slider--horizontal .testimonial-card {
    flex: 0 0 min(400px, 88vw);
    scroll-snap-align: start;
    min-height: 330px;
  }
}

@media (min-width: 993px) {
  .testimonial-grid.scroll-slider--horizontal {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    scroll-snap-type: none;
    gap: var(--space-5);
  }
  .testimonial-grid.scroll-slider--horizontal .testimonial-card {
    flex: unset;
    width: auto;
  }
}

/* --- Mobile / tablet portrait (≤768) --- */
@media (max-width: 768px) {
  :root {
    --space-9: 64px;
  }

  .navbar { padding: 0 var(--container-padding); }

  .section { padding: var(--space-8) 0; }
  .section--dark { padding-left: 0; padding-right: 0; }
  .section--dark .container { padding: 0 var(--container-padding); }

  .hero {
    min-height: auto;
    padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0) + 48px);
  }
  .hero__inner {
    padding: var(--space-5) var(--container-padding) 72px;
    gap: var(--space-5);
  }
  .hero__desc { font-size: var(--text-base); line-height: 1.6; }
  .hero__badges { flex-direction: column; }
  .hero__marquee .marquee { height: 46px; min-height: 46px; padding: 0; }

  .hero__bg-track {
    animation-duration: 90s;
  }

  .form-grid { grid-template-columns: 1fr; }
  .form-input,
  .form-select { font-size: 16px; }

  .page-hero {
    padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0) + var(--space-7));
    padding-bottom: var(--space-7);
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }
  .page-hero .container {
    padding-left: 0;
    padding-right: 0;
  }
  .booking-page-grid { gap: var(--space-5); }

  .vehicle-grid,
  .service-grid,
  .experience-cards,
  .fleet-page-grid { grid-template-columns: 1fr; }

  /* Routes & testimonials: Figma mobile vertical stack */
  .route-grid.scroll-slider--horizontal,
  .testimonial-grid.scroll-slider--horizontal {
    display: grid;
    grid-template-columns: 1fr;
    overflow: visible;
    scroll-snap-type: none;
    gap: var(--space-6);
  }
  .route-grid.scroll-slider--horizontal .route-card,
  .testimonial-grid.scroll-slider--horizontal .testimonial-card {
    flex: none;
    width: 100%;
    max-width: 358px;
    margin-left: auto;
    margin-right: auto;
  }

  .routes-header { flex-direction: row; align-items: flex-end; }
  .routes-header .slider-nav { display: none; }

  .vehicle-card,
  .route-card,
  .tour-card,
  .service-card {
    max-width: 358px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; gap: var(--space-3); }

  .cta-panel__actions { flex-direction: column; align-items: stretch; }
  .cta-panel {
    padding: var(--space-6) var(--space-5);
    border-radius: 32px;
    margin-left: var(--container-padding);
    margin-right: var(--container-padding);
    width: auto;
  }
  .cta-panel__decor { display: none; }

  .section-title--stories { font-size: 32px; }
  .section-title { font-size: 28px; }
  .heading-display,
  .page-hero__title { font-size: 36px; line-height: 1.2; }

  .testimonial-card {
    padding: 33px;
    min-height: auto;
    border-radius: 24px;
  }
  .testimonial-card__avatar { width: 40px; height: 40px; }

  .marquee { height: auto; min-height: 46px; padding: 8px 0; }
  .marquee__track { gap: 48px; }

  .fixed-actions {
    right: calc(16px + env(safe-area-inset-right, 0));
    bottom: calc(96px + env(safe-area-inset-bottom, 0));
  }
  .back-to-top {
    right: calc(16px + env(safe-area-inset-right, 0));
    bottom: calc(16px + env(safe-area-inset-bottom, 0));
  }

  .experience-intro .heading-display { font-size: 36px; }
  .feature-card { padding: var(--space-5); }

  .btn--cta-gold,
  .btn--cta-whatsapp,
  .btn--cta-outline {
    width: 100%;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }

  .section--below-header {
    padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0) + var(--space-5));
  }

  .booking-page-grid {
    grid-template-columns: 1fr;
  }

  .booking-form-panel {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* --- Figma 390px target + Android 360 (≤430) --- */
@media (max-width: 430px) {
  :root {
    --container-padding: 16px;
  }

  .heading-display,
  .page-hero__title { font-size: 32px; letter-spacing: -0.8px; }
  .hero__title { font-size: 32px; line-height: 1.2; }

  .booking-card { padding: 24px 16px; width: 100%; }
  .vehicle-card { padding: 24px 20px; }
  .section--testimonials { padding-top: 38px; }

  .section-heading--stories { margin-bottom: var(--space-6); }
  .section-eyebrow { font-size: 11px; }
  .section-title--stories { font-size: 28px; }

  .route-card__img-wrap { height: 160px; }
  .route-card__img { height: 200%; transform: translateY(-35%); }

  .service-card__img { height: 200px; }
  .cta-panel { border-radius: 24px; padding: var(--space-5); }

  .geo-coverage { padding: var(--space-5) 0; }
  .geo-coverage-map { width: 100%; min-height: 180px; }
  .geo-coverage-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
}

/* --- iPhone Pro Max scale (391–430) — minor bump --- */
@media (min-width: 391px) and (max-width: 430px) {
  .vehicle-card,
  .route-card,
  .tour-card,
  .service-card,
  .route-grid.scroll-slider--horizontal .route-card,
  .testimonial-grid.scroll-slider--horizontal .testimonial-card {
    max-width: 358px;
  }
}

/* --- Small Android (≤360) --- */
@media (max-width: 360px) {
  .heading-display,
  .page-hero__title { font-size: 28px; }
  .section-title { font-size: 24px; }
  .trip-tabs { flex-direction: column; }
  .route-map { height: 180px; }
  .geo-coverage-map { height: 200px !important; border-radius: 12px; }
  .geo-coverage-list { gap: 8px; }
  .geo-coverage-chip { font-size: 12px; padding: 6px 10px; }
  .btn { padding: 14px 20px; font-size: 14px; }
}

/* --- Landscape phones --- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: auto; padding-top: calc(var(--header-height) + 24px); }
  .hero__inner { padding-bottom: 56px; }
  .mobile-menu { overflow-y: auto; }
}