/* ============================================================
   iTruck India — Mobile Responsiveness Patch
   mobile.css — Fixes for inline grids, logo sizing,
                and touch/small-screen polish
   ============================================================ */

/* ============================================================
   1. NAV LOGO — Shrink oversized logo on mobile
      The style.css late-override sets height:95px which
      exceeds the 68px nav height on small screens.
   ============================================================ */
@media (max-width: 1024px) {
  .nav-logo-img,
  #navbar-logo {
    height: 64px !important;
  }
}

@media (max-width: 768px) {
  .nav-logo-img,
  #navbar-logo {
    height: 52px !important;
  }

  .nav-logo {
    gap: 8px !important;
  }
}

@media (max-width: 480px) {
  .nav-logo-img,
  #navbar-logo {
    height: 44px !important;
  }
}

/* ============================================================
   2. INLINE TWO-COLUMN GRIDS (gap: 80px)
      Used in: about.html (story, milestones)
               services.html (FTL, ODC, PSU, Cement, Pharma)
      Class added: .inline-two-col
   ============================================================ */

/* Stack to single column on tablet and below */
@media (max-width: 1024px) {
  .inline-two-col {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
}

/* ============================================================
   3. INLINE TWO-COLUMN GRIDS (gap: 32px)
      Used in: about.html (Vision/Mission)
      Class added: .inline-two-col-sm
   ============================================================ */
@media (max-width: 768px) {
  .inline-two-col-sm {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* ============================================================
   4. INLINE FOUR-COLUMN GRIDS
      Used in: about.html (leadership)
               services.html (NE states grid)
      Class added: .inline-four-col
   ============================================================ */
@media (max-width: 768px) {
  .inline-four-col {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 480px) {
  .inline-four-col {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   5. SERVICES PAGE — stat/spec mini grids inside card panels
      Used in: services.html inside the FTL navy card,
               Cement section right column
      Class added: .inline-stats-grid
   ============================================================ */
@media (max-width: 480px) {
  .inline-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
}

/* ============================================================
   6. FTL / SERVICE — Sticky sidebar: remove sticky on mobile
      (position:sticky on inner divs causes bad UX on phones)
   ============================================================ */
@media (max-width: 1024px) {
  .sticky-sidebar {
    position: static !important;
    top: auto !important;
  }
}

/* ============================================================
   7. VISION/MISSION PANELS — Reduce padding on small screens
   ============================================================ */
@media (max-width: 768px) {
  .inline-two-col-sm > div {
    padding: 36px 28px !important;
  }
}

@media (max-width: 480px) {
  .inline-two-col-sm > div {
    padding: 28px 20px !important;
  }
}

/* ============================================================
   8. HERO SECTIONS — General overflow safety
   ============================================================ */
.hero,
.page-hero {
  overflow-x: hidden;
}

/* ============================================================
   9. ABOUT — Company at a Glance sticky card
      On mobile, the sticky card shouldn't be sticky
   ============================================================ */
@media (max-width: 1024px) {
  .about-glance-card {
    position: static !important;
    top: auto !important;
  }
}

/* ============================================================
   10. SERVICES — Section service panels: reduce large gap
   ============================================================ */
@media (max-width: 1024px) {
  .inline-two-col > div[style*="background:var(--primary-navy)"],
  .inline-two-col > div[style*="background: var(--primary-navy)"] {
    padding: 36px !important;
  }
}

@media (max-width: 768px) {
  .inline-two-col > div[style*="background:var(--primary-navy)"],
  .inline-two-col > div[style*="background: var(--primary-navy)"] {
    padding: 28px 22px !important;
  }
}

@media (max-width: 480px) {
  .inline-two-col > div[style*="background:var(--primary-navy)"],
  .inline-two-col > div[style*="background: var(--primary-navy)"] {
    padding: 24px 18px !important;
  }
}

/* ============================================================
   11. BUTTON TOUCH TARGETS — ensure 44px min height on mobile
   ============================================================ */
@media (max-width: 768px) {
  .btn {
    min-height: 44px;
  }
}

/* ============================================================
   12. FLEET TABLE — horizontal scroll hint on mobile
   ============================================================ */
@media (max-width: 768px) {
  .fleet-table-wrap {
    -webkit-overflow-scrolling: touch;
    position: relative;
  }

  .fleet-table-wrap::after {
    content: '← scroll →';
    display: block;
    text-align: center;
    font-size: 0.72rem;
    color: var(--mid-gray);
    padding: 6px 0 2px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}

/* ============================================================
   13. CONTACT — Quick contact items don't wrap awkwardly
   ============================================================ */
@media (max-width: 480px) {
  .quick-contact-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   14. ABOUT — Leadership grid padding on tiny screens
   ============================================================ */
@media (max-width: 480px) {
  .inline-four-col > div[style*="text-align:center"] {
    padding: 24px 16px !important;
  }
}

/* ============================================================
   15. GLOBAL — Prevent images from breaking out on narrow phones
   ============================================================ */
@media (max-width: 480px) {
  img {
    max-width: 100%;
  }

  .hero-glow-orb,
  .coverage-section::before,
  .cta-section::before {
    display: none;
  }
}

/* ============================================================
   16. NETWORK — Map SVG overflow on mobile
   ============================================================ */
@media (max-width: 768px) {
  .india-map-wrap svg,
  .india-map-wrap {
    max-width: 100%;
    overflow: hidden;
  }
}

/* ============================================================
   17. FOOTER — Extra small screens
   ============================================================ */
@media (max-width: 360px) {
  .footer-brand-logo {
    font-size: 1.4rem !important;
  }

  .footer-grid {
    gap: 32px !important;
  }
}

/* ============================================================
   18. WHATSAPP FLOAT — Don't overlap content on tiny screens
   ============================================================ */
@media (max-width: 360px) {
  .whatsapp-float {
    bottom: 12px !important;
    right: 12px !important;
    width: 44px !important;
    height: 44px !important;
  }
}

/* ============================================================
   19. SECTION HEADERS — Tighten up spacing on small screens
   ============================================================ */
@media (max-width: 480px) {
  .section-header {
    margin-bottom: 36px !important;
  }
}

/* ============================================================
   20. FORM — Tap target sizes for inputs on mobile
   ============================================================ */
@media (max-width: 768px) {
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px; /* Prevents iOS zoom on focus */
    min-height: 44px;
  }
}