/* Global mobile responsiveness overrides for Sampoorna marketing site */

/* Prevent horizontal overflow on all devices */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Base responsive images */
img, svg, video {
  max-width: 100%;
  height: auto;
}

/* Tablets and below */
@media (max-width: 900px) {
  /* Generic two-column stacks */
  .landing-grid-2col,
  .fi-tool-grid,
  .fi-capture-row,
  .fi-result-metrics,
  .fi-stats {
    grid-template-columns: 1fr !important;
  }

  /* Hero / section inner padding */
  .section-inner {
    padding: 0 24px !important;
  }

  /* Typography scale down */
  h1, .hero h1 {
    font-size: clamp(32px, 8vw, 52px) !important;
  }

  h2 {
    font-size: clamp(26px, 6vw, 42px) !important;
  }

  /* Approach / pricing / feature cards */
  .approach-cards,
  .pricing-cards,
  .feature-grid {
    grid-template-columns: 1fr !important;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Phones */
@media (max-width: 600px) {
  .section-inner,
  .landing-header,
  .fi-page {
    padding: 0 16px !important;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  /* Header nav wrap */
  .landing-header {
    flex-wrap: wrap !important;
    gap: 12px !important;
    height: auto !important;
    min-height: 64px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .landing-header nav {
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 10px !important;
  }

  /* Hero stats */
  .hero-stats {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Form rows */
  .fi-capture-row,
  form > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Contact / newsletter inputs and buttons */
  form {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  form input,
  form select,
  form textarea,
  form button {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Pricing table scroll */
  .pricing-table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }

  /* Problem stats */
  .problem-grid {
    grid-template-columns: 1fr !important;
  }

  /* FAQ padding */
  .faq-item {
    padding: 16px !important;
  }

  /* Brief slides */
  .brief-slide {
    flex: 0 0 260px !important;
  }
}

/* Small phones */
@media (max-width: 380px) {
  h1, .hero h1 {
    font-size: 28px !important;
  }

  .btn.btn-lg {
    padding: 12px 18px !important;
    font-size: 14px !important;
  }
}

/* ─── Additional mobile polish ─── */

/* Landing header mobile */
@media (max-width: 768px) {
  .landing-header {
    height: 64px !important;
    padding: 0 20px !important;
    flex-wrap: nowrap !important;
  }

  .landing-header nav.landing-nav-links {
    display: none !important;
  }

  .landing-header .spacer {
    display: none !important;
  }

  .landing-header-actions {
    display: none !important;
  }

  .landing-nav-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .landing-header {
    height: 60px !important;
    padding: 0 16px !important;
  }

  .landing-nav-mobile a {
    font-size: 15px !important;
  }
}

/* Hero grid stack */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

/* Make all horizontal card/slide lists scroll on mobile */
@media (max-width: 600px) {
  .brief-slide {
    flex: 0 0 280px !important;
  }

  .brief-row,
  .open-source-grid,
  .partner-logos,
  .insights-grid {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 8px !important;
  }

  .pricing-cards,
  .approach-cards,
  .feature-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Whitepaper nav responsive */
@media (max-width: 720px) {
  .wp-nav-links {
    display: none !important;
  }

  .wp-nav-inner {
    padding: 0 20px !important;
  }

  .wp-hero {
    padding: 60px 0 70px !important;
  }

  .wp-section,
  .wp-section-wide {
    padding: 48px 20px !important;
  }

  .wp-layer {
    flex-direction: column !important;
  }

  .wp-layer-item {
    border-right: 1px solid var(--border) !important;
    border-radius: var(--r-md) !important;
    margin-bottom: 12px !important;
  }

  .wp-bench-table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }
}

/* Tables and code blocks scroll */
@media (max-width: 600px) {
  table, pre, code {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }
}

/* Ensure long words break */
html, body {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Prevent fixed/sticky elements from causing zoom/overflow */
.landing-header,
.wp-nav {
  max-width: 100vw;
}

/* Larger touch targets on mobile */
@media (max-width: 600px) {
  a, button, input, select, textarea, summary {
    min-height: 44px;
  }
}