/* ══════════════════════════════════════════════════════════════
   EcomSarthi — Mobile Optimizations
   Author  : EcomSarthi Dev
   Scope   : All pages (<= 767px = mobile, 768-1023px = tablet)
   Strategy: Additive overrides — nothing removed, only adapted
══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   1. BASE RESETS FOR SMALL SCREENS
───────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

/* ─────────────────────────────────────────
   2. TYPOGRAPHY — MOBILE SCALE
   Tailwind text-4xl/5xl/6xl are too large
   on 360-480px screens. Scale down.
───────────────────────────────────────── */
@media (max-width: 767px) {
  /* Section / page headings */
  h1,
  .text-5xl,
  .text-6xl {
    font-size: clamp(1.6rem, 5.5vw, 2.25rem) !important;
    line-height: 1.25 !important;
  }

  h2,
  .text-4xl {
    font-size: clamp(1.3rem, 4.5vw, 1.75rem) !important;
    line-height: 1.3 !important;
  }

  h3,
  .text-3xl {
    font-size: clamp(1.1rem, 4vw, 1.4rem) !important;
    line-height: 1.35 !important;
  }

  /* Large metric numbers (150%+, 98%, etc.) */
  .text-5xl.font-extrabold,
  .text-5xl.font-bold {
    font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
  }

  /* Slightly reduce paragraph and body text */
  p, li {
    font-size: 0.9375rem; /* 15px */
    line-height: 1.6;
  }
}

/* ─────────────────────────────────────────
   3. SECTION PADDING — MOBILE
   5rem top/bottom (80px) is too much on
   small screens; reduce to 2.5rem (40px)
───────────────────────────────────────── */
@media (max-width: 767px) {
  .section-padding {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  /* Extra breathing room for mt-12 / mt-20 */
  .mt-20 { margin-top: 3rem !important; }
  .mt-12 { margin-top: 2rem !important; }
  .mb-16 { margin-bottom: 2rem !important; }
  .mb-20 { margin-bottom: 3rem !important; }

  /* CTA banner — p-12 is 48px which causes side bleed */
  .p-12 {
    padding: 1.75rem 1.25rem !important;
  }

  /* Gap reduction in grid sections */
  .gap-12 { gap: 1.5rem !important; }
  .gap-8  { gap: 1rem !important; }
}

/* ─────────────────────────────────────────
   4. CONTAINER — ENSURE SAFE HORIZONTAL PADDING
───────────────────────────────────────── */
@media (max-width: 767px) {
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ─────────────────────────────────────────
   5. HERO SECTION FIXES
   clip-path + negative margin-bottom causes
   content overlap on narrow screens
───────────────────────────────────────── */
@media (max-width: 767px) {
  .hero {
    clip-path: none !important;
    margin-bottom: 0 !important;
    padding-top: 70px !important;
    padding-bottom: 50px !important;
  }

  .hero h1 {
    font-size: clamp(1.6rem, 5.5vw, 2.25rem) !important;
  }
}

/* ─────────────────────────────────────────
   6. MARKETPLACE & QUICK-COMMERCE TILES
   md:grid-cols-4 defaults to 1-col on mobile.
   2-col is better for tiles/cards.
───────────────────────────────────────── */
@media (max-width: 767px) {
  /* Homepage marketplace tiles */
  .grid.md\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Client logos section */
  .grid.md\:grid-cols-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* 3-col grids → single col on mobile (services, features) */
  .grid.md\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }

  /* 2-col grids → single col on mobile */
  .grid.md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* Internal service tiles (4 cols inside a section) */
  .grid.md\:grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Tile text */
  .market-tile span { font-size: 0.875rem; }
  .market-tile { padding: 18px 12px; }
}

/* ─────────────────────────────────────────
   7. TESTIMONIAL CAROUSEL
   Arrow buttons use ml-[-1rem] / mr-[-1rem]
   which pulls them outside the viewport edge.
   On mobile, keep inside with small offset.
───────────────────────────────────────── */
@media (max-width: 767px) {
  /* Carousel arrows — stay inside */
  #prev-review {
    margin-left: 0.25rem !important;
    padding: 0.5rem !important;
    width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
  }

  #next-review {
    margin-right: 0.25rem !important;
    padding: 0.5rem !important;
    width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
  }

  /* Single card view on mobile (already set via JS but ensure CSS) */
  .testimonial-card {
    min-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
  }

  .testimonial-card-wrapper {
    padding: 0.5rem 0;
  }
}

/* ─────────────────────────────────────────
   8. PRICING CARDS
   Stack to 1-col, ensure full width CTA
───────────────────────────────────────── */
@media (max-width: 767px) {
  /* Most popular badge — ensure it doesn't overflow */
  .ring-4 { ring-width: 2px; }

  /* Pricing card internal padding */
  .card-hover.p-8 { padding: 1.25rem !important; }
}

/* ─────────────────────────────────────────
   9. HEADER & NAV
   Mobile menu is full-overlay; ensure
   the logo doesn't get too large and the
   hamburger is easy to tap.
───────────────────────────────────────── */
@media (max-width: 767px) {
  /* Logo height on mobile */
  header img.h-12 { height: 2.25rem !important; } /* 36px */

  /* Hamburger button tap target */
  #mobile-menu-button {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Mobile menu overlay — full screen scroll */
  #mobile-menu {
    padding-top: 4.5rem !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    overflow-y: auto !important;
  }

  /* Mobile nav links — comfortable tap target */
  #mobile-menu nav a {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
    font-size: 1.125rem !important;
    border-bottom: 1px solid #f1f5f9;
    display: block;
  }

  /* Close button tap target */
  #mobile-menu-close {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ─────────────────────────────────────────
   10. FOOTER — MOBILE STACK
───────────────────────────────────────── */
@media (max-width: 767px) {
  footer .grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  footer { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  footer .mt-12 { margin-top: 2rem !important; }
}

/* ─────────────────────────────────────────
   11. CITY PAGE — MARKETPLACE GRID
───────────────────────────────────────── */
@media (max-width: 767px) {
  /* City × Marketplace card grid */
  .city-mp-grid,
  .mp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* City page FAQ */
  summary {
    padding: 14px 16px;
    font-size: 0.9375rem;
  }

  .details-body {
    padding: 16px;
  }
}

/* ─────────────────────────────────────────
   12. BUTTONS — MINIMUM TAP TARGETS (44px)
───────────────────────────────────────── */
@media (max-width: 767px) {
  a.btn-gradient,
  button.btn-gradient,
  a[class*="rounded-full"][class*="py-3"],
  button[class*="rounded-full"][class*="py-3"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Full-width CTAs in banners */
  .btn-gradient.w-full,
  .sm\:w-auto {
    width: 100% !important;
  }
}

/* ─────────────────────────────────────────
   13. WHATSAPP FLOAT — MOBILE POSITION
   Move up from bottom to avoid conflict
   with browser navigation bars
───────────────────────────────────────── */
@media (max-width: 767px) {
  .whatsapp-float {
    bottom: 70px !important;
    right: 16px !important;
    width: 50px !important;
    height: 50px !important;
    font-size: 24px !important;
  }
}

/* ─────────────────────────────────────────
   14. OFFER / ANNOUNCEMENT BANNER
───────────────────────────────────────── */
@media (max-width: 767px) {
  .offer-banner {
    font-size: 0.75rem !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
}

/* ─────────────────────────────────────────
   15. SELLER TOOLS — IMAGE TOOLS GRID
───────────────────────────────────────── */
@media (max-width: 767px) {
  .tools-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────────────────────────────────────
   16. BLOG PAGE
───────────────────────────────────────── */
@media (max-width: 767px) {
  /* Blog cards full width on mobile */
  .blog-card-grid {
    grid-template-columns: 1fr !important;
  }

  /* Blog content readable width */
  .blog-content {
    font-size: 1rem;
    line-height: 1.75;
  }

  .blog-content h2 { font-size: 1.3rem !important; }
  .blog-content h3 { font-size: 1.1rem !important; }
}

/* ─────────────────────────────────────────
   17. TABLET ADJUSTMENTS (768px – 1023px)
───────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  h1,
  .text-5xl { font-size: 2.5rem !important; }
  h2, .text-4xl { font-size: 2rem !important; }

  .section-padding {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  /* 4-col grids → 2-col on tablet */
  .grid.md\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* 6-col → 3-col on tablet */
  .grid.md\:grid-cols-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ─────────────────────────────────────────
   18. OVERFLOW PROTECTION
   Prevent any section from causing
   horizontal scroll on narrow screens
───────────────────────────────────────── */
body {
  overflow-x: hidden;
}

main > section {
  overflow-x: hidden;
}

/* Inline images inside cards */
@media (max-width: 767px) {
  .rounded-xl img,
  .card-hover img {
    max-width: 100%;
    height: auto;
  }
}

/* ─────────────────────────────────────────
   19. TIMELINE PROGRESS BAR — MOBILE
───────────────────────────────────────── */
@media (max-width: 767px) {
  .timeline-bar { height: 8px; }

  .flex.justify-between.mt-4 {
    font-size: 0.75rem;
  }
}

/* ─────────────────────────────────────────
   20. ABOUT / ENTITY PAGE — TABLE
───────────────────────────────────────── */
@media (max-width: 767px) {
  table {
    font-size: 0.875rem;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  td, th {
    padding: 8px 10px !important;
  }
}