/* ═══════════════════════════════════════════════════════════════
   IECAN RESPONSIVE FIX — Netlify snippet injection
   Injected via: Project config → Build & deploy → Snippet Injection
   Before </head>: <link rel="stylesheet" href="/responsive-fix.css">
   ═══════════════════════════════════════════════════════════════ */

/* === FOUNDATION === */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* === IMAGE & MEDIA CONTAINMENT === */
img, video, canvas, svg, embed, object, iframe {
  max-width: 100%;
  height: auto;
}

/* === FORM INPUTS: prevent iOS auto-zoom === */
input, select, textarea { 
  max-width: 100%; 
  font-size: 16px !important; /* prevents iOS zoom on focus */
}

/* === TABLE SCROLL WRAPPER (applied by responsive-fix.js) === */
.table-scroll-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ═══ TABLET (≤1024px) ═══ */
@media (max-width: 1024px) {
  /* Fluid containers */
  body > div, .container, .wrapper, .content, main, #main,
  [style*="max-width:1160px"], [style*="max-width: 1160px"],
  [style*="max-width:1400px"], [style*="max-width: 1400px"] {
    max-width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  
  /* Hero text scaling */
  section[id="hero"] h1, .hero-h1 {
    font-size: clamp(2rem, 1.2rem + 3.5vw, 4.8rem) !important;
  }
  
  /* Pricing grid — 2 columns on tablet */
  .pillars-grid, [class*="tier-grid"], [class*="pricing-grid"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }
  
  /* VS table — smaller text */
  .vs-table th, .vs-table td {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
}

/* ═══ MOBILE (≤768px) ═══ */
@media (max-width: 768px) {
  /* Stack ALL grids to single column */
  .pillars-grid, .problem-grid, .stat-row, .aeo-steps,
  .vert-grid, .score-details, .articles-grid,
  [class*="grid-2"], [class*="grid-3"],
  [style*="grid-template-columns: repeat"],
  [style*="grid-template-columns:repeat"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Stack flex rows */
  .hero-stats, .hero-btns,
  [style*="display:flex"][style*="gap"],
  [style*="display: flex"][style*="gap"] {
    flex-direction: column !important;
  }
  
  /* Hero adjustments */
  .hero-inner, .hero-bg + div {
    padding: 0 20px !important;
  }
  
  /* Section padding reduction */
  section {
    padding: 60px 0 !important;
  }
  
  /* Featured article card — single column */
  .article-featured {
    grid-template-columns: 1fr !important;
    grid-column: 1 !important;
  }
  
  /* Pricing mega menu — stack columns */
  .mega [style*="grid-template-columns: 1fr 1fr"],
  .mega [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .mega [style*="border-left"] {
    border-left: none !important;
    border-top: 1px solid rgba(196,160,80,0.15) !important;
    padding-left: 0 !important;
    padding-top: 16px !important;
    margin-top: 16px !important;
  }
  
  /* Body text — ensure readability */
  body {
    font-size: 17px !important;
  }
  
  /* Partner banner — stack */
  [style*="Refer a Client"] {
    flex-direction: column !important;
    text-align: center !important;
    padding: 24px 20px !important;
  }
  
  /* Pre/code blocks */
  pre, code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
  }
}

/* ═══ SMALL MOBILE (≤480px) ═══ */
@media (max-width: 480px) {
  /* Touch targets */
  a, button, [role="button"], .btn, .btn-gold, .btn-ghost {
    min-height: 44px;
  }
  
  /* Navigation utility bar */
  .nav-util {
    font-size: 12px !important;
    padding: 0 12px !important;
  }
  
  /* Footer columns — single column */
  footer [style*="grid-template-columns"],
  footer [style*="display:grid"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  
  /* Stat cards — tighter */
  .stat-card, .stat-item {
    padding: 16px !important;
  }
  
  /* Header adjustments */
  .header {
    padding: 12px 16px !important;
  }
  
  /* Verticals grid — 2 columns on small mobile */
  .vert-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ═══ DYNAMIC VIEWPORT HEIGHT FIX ═══ */
/* Fix the 100vh mobile toolbar bug */
@supports (height: 100dvh) {
  section[id="hero"], [style*="min-height:100vh"] {
    min-height: 100dvh !important;
  }
}