/* ==========================================================================
   RESPONSIVE — mobile-first adjustments only
   ========================================================================== */

/* Safety net: nothing on the page should ever force horizontal
   scroll on mobile — if something does (long unbroken text, a
   fixed-width element, etc.), clip it instead of shifting the
   whole page (which drags the sticky header sideways with it). */
html, body {
  overflow-x: hidden;
}

@media (max-width: 900px) {
  .services-grid, .services-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .why-us-grid { grid-template-columns: 1fr; gap: 32px; }
  .why-image { order: -1; }
  .why-image img { min-height: 260px; }
  .audience-grid { grid-template-columns: 1fr; }
  .fleet-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .track-widget { grid-template-columns: 1fr; }
  .form-shell { grid-template-columns: 1fr; }
  .summary-card { position: static; }
}

@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  .track-meta { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .hero { min-height: 78vh; text-align: left; }
  .hero-track { margin-top: 32px; }
  section { padding: 64px 0; }
  .services-grid, .services-grid.cols-4 { grid-template-columns: 1fr; }
  .fleet-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; }
  .page-hero { padding: 140px 0 48px; }

  /* The Ken Burns zoom (scale 1.08 -> 1.18 + pan) crops in nicely on
     a wide desktop hero, but on a narrow, tall mobile viewport the
     image is already tightly cropped by background-size: cover —
     zooming further just makes it blurrier and harder to read.
     Freeze it at its natural crop on mobile instead. */
  .hero-slide.kb-a.active .hero-slide-img,
  .hero-slide.kb-b.active .hero-slide-img {
    animation: none;
  }
  .hero-slide-img {
    transform: scale(1);
  }

  /* Swap hero slides 3-7 to portrait/mobile-optimized images */
  .hero-slide-img-3 { background-image: url('../assets/images/hero-slide-3-mobile.jpg') !important; }
  .hero-slide-img-4 { background-image: url('../assets/images/hero-slide-4-mobile.jpg') !important; }
  .hero-slide-img-5 { background-image: url('../assets/images/hero-slide-5-mobile.jpg') !important; }
  .hero-slide-img-6 { background-image: url('../assets/images/hero-slide-6-mobile.jpg') !important; }
  .hero-slide-img-7 { background-image: url('../assets/images/hero-slide-7-mobile.jpg') !important; }
}

@media (max-width: 480px) {
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .track-widget { padding: 24px; }

  /* .stats-grid only collapses from 3 columns to 2 at 900px — at
     phone widths, 2 columns leaves too little room per stat, so
     labels like "PACKAGES DELIVERED" wrap awkwardly across lines. */
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 28px 0;
  }

  /* The home "Track Your Shipment" box is a flex row (input +
     button) with no stacking rule — at narrow widths there isn't
     enough room for both side by side, which forced the page to
     overflow horizontally (previously masked by letting the page
     scroll sideways; now it would just get clipped). Stacking them
     removes the overflow instead of hiding it. */
  .tracking-form {
    flex-direction: column;
  }
  .tracking-form .btn {
    width: 100%;
  }
  .hero-track .tracking-box {
    padding: 24px 20px;
  }

  /* "Open Business Account" (and any other long CTA label) was
     forced onto one line by .btn's white-space: nowrap, which made
     the audience card — and the whole page — wider than the
     viewport. Letting these specific buttons wrap fixes the root
     cause without changing .btn's nowrap behavior anywhere else. */
  .audience-card .btn {
    white-space: normal;
    width: 100%;
    text-align: center;
  }
}