/* ============================================================
   AgriSense AI · GLOBAL MOBILE FIT v46
   ────────────────────────────────────────────────────────────
   Catch-all responsive guards for every page so:
   • Nothing overflows horizontally past the viewport edge
   • Images, videos, iframes, tables always fit
   • Fixed-pixel-width elements get a hard cap on mobile
   • Long text wraps; long words break
   • Grids fall back to single column on phones
   • Big hero numbers / KPI values shrink to fit
   Author: VinayKumar Errolla — Founder
   ============================================================ */

/* (1) Universal box model + word-wrap safety net */
* {
  box-sizing: border-box;
  min-width: 0;            /* allows flex children to shrink */
}

/* (2) Top-level overflow lock — never let the page scroll sideways */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* (3) Media: never exceed parent width */
img, video, picture, svg, canvas, iframe, embed, object {
  max-width: 100% !important;
  height: auto;
}
iframe { width: 100% !important; }

/* (4) Tables: become horizontally scrollable on small screens */
@media (max-width: 1023px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  pre, code {
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* (5) Fix any element that's been given a hardcoded pixel width too wide for mobile */
@media (max-width: 768px) {
  [style*="width:1200px"], [style*="width:1100px"], [style*="width:1000px"],
  [style*="width:900px"], [style*="width:800px"], [style*="width:700px"],
  [style*="width:600px"], [style*="width:500px"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  [style*="min-width:1200px"], [style*="min-width:1100px"], [style*="min-width:1000px"],
  [style*="min-width:900px"], [style*="min-width:800px"], [style*="min-width:700px"],
  [style*="min-width:600px"], [style*="min-width:500px"] {
    min-width: 0 !important;
  }
}

/* (6) Grids: collapse to single column on phones */
@media (max-width: 640px) {
  [class*="grid"]:not(.akd-lifecycle-track):not(.role-tabs):not(.method-tabs):not(.akd-mobile-cta-bar) {
    grid-template-columns: 1fr !important;
  }
  /* Specifically: marketplace tile grids, services grids, KPI grids */
  .mkt-grid, .svc-grid, .kpi-grid, .ai-pp-grid, .akd-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* 2-column grids stay 2-column at small sizes (KPI cards) */
  .stats-grid, .metrics-grid, .akd-stats-band {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* (7) Sections / containers: respect viewport */
section, main, header, footer, article, aside {
  max-width: 100vw;
}
section > *, main > *, header > *, footer > *, article > *, aside > * {
  max-width: 100%;
}

/* (8) Containers and wrappers — common class names */
.container, .akd-container, .uc-wrap, .ai-hero-inner, .ai-pp,
[class*="-wrap"]:not(.akd-nav-wrap), [class*="-inner"] {
  max-width: 100% !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}
@media (min-width: 1024px) {
  .container, .akd-container, .uc-wrap, .ai-hero-inner, .ai-pp {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* (9) Big hero / display headings: shrink on mobile so they don't wrap awkwardly */
@media (max-width: 640px) {
  h1, .akd-h1, .ai-headline {
    font-size: clamp(1.55rem, 6.5vw, 2.1rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -.018em !important;
  }
  h2, .akd-h2 {
    font-size: clamp(1.25rem, 5.2vw, 1.7rem) !important;
    line-height: 1.18 !important;
  }
  h3 { font-size: 1.05rem !important; line-height: 1.25 !important; }

  /* KPI big numbers shrink */
  .akd-stat-val, .ai-pp-num, [class*="kpi-val"], [class*="metric-num"] {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }
}

/* (10) Long product/scheme cards — squeeze padding */
@media (max-width: 640px) {
  .card, .akd-card, .mkt-tile, .svc-tile,
  [class*="card"]:not(.akd-cb-msg) {
    padding: 14px 12px !important;
  }
}

/* (11) Pricing tier columns — single column on phone */
@media (max-width: 768px) {
  .pricing-grid, [class*="pricing-grid"], .tiers, [class*="tiers-"] {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }
}

/* (12) Marketplace tile photos: contain ratio */
.mkt-photo, .svc-photo, [class*="tile-photo"] img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100% !important;
}

/* (13) Page-level horizontal scroll absolute prevention */
@media (max-width: 1023px) {
  body > * {
    max-width: 100vw !important;
  }
}

/* (14) Inline SVG illustrations — never wider than container */
svg:not(.akd-mobile-toggle svg) {
  max-width: 100%;
  height: auto;
}

/* (15) Common spacing on phones */
@media (max-width: 640px) {
  section {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  /* Reduce excessive top/bottom padding on phones */
  section[class*="hero"], section[class*="cta"], section[class*="feat"] {
    padding-top: clamp(24px, 5vw, 56px) !important;
    padding-bottom: clamp(24px, 5vw, 56px) !important;
  }
}