/* mobile.css — SEOToolInsider universal responsive fixes
   Loaded on every page. Overrides page-specific CSS for mobile/tablet.
   ================================================================== */

/* ── GLOBAL: prevent horizontal overflow ── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

*, *::before, *::after {
  max-width: 100%;
}

/* ── GLOBAL: images always fluid ── */
img, svg, video, canvas, iframe {
  max-width: 100%;
  height: auto;
}

/* ── GLOBAL: tables — always scrollable on small screens ── */
table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  white-space: nowrap; /* prevent wrapping that makes table taller */
}

/* restore normal table layout on wider screens */
@media(min-width:769px){
  table { display: table; white-space: normal; }
}

/* ── TABLET (≤900px) ── */
@media(max-width:900px){
  /* Homepage grid: 3-col picks → 2 col */
  .pg { grid-template-columns: 1fr 1fr !important; }
  .pick.ft { grid-column: span 2 !important; grid-template-columns: 1fr !important; }
  .ftr { margin-top: 16px; }

  /* EEAT section */
  .eeat-i, .eeat-inner { grid-template-columns: 1fr !important; gap: 36px; }

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

  /* More links grid */
  .mg, .more-grid { grid-template-columns: 1fr 1fr !important; }

  /* Reviews grid */
  .rg, .reviews-grid { grid-template-columns: 1fr 1fr !important; }

  /* Picks grid */
  .picks-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ── MOBILE LARGE (≤768px) ── */
@media(max-width:768px){
  /* Main article+sidebar layout → single column */
  .wrap {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding-left: 4% !important;
    padding-right: 4% !important;
  }

  /* Sidebar — move below article on mobile */
  .sb, .sidebar, .sb-card-wrap, aside {
    position: static !important;
    top: auto !important;
    width: 100% !important;
  }

  /* Sticky sidebar box ordering — show below article */
  .sb { order: 2; }
  article { order: 1; }

  /* Review score header */
  .sh {
    grid-template-columns: auto 1fr !important;
    gap: 16px !important;
  }
  .sh-p { text-align: left !important; }
  .sh-fr { float: none !important; }

  /* Pros/cons grid → stack */
  .pros-cons, .pc-g, .pc-grid, .qv-grid, .vg, .vb-row { 
    grid-template-columns: 1fr !important; 
  }

  /* Pricing plans → stack */
  .plan-grid, .pricing-grid { grid-template-columns: 1fr !important; }

  /* Score hero breakdown */
  .score-hero, .score-breakdown { grid-template-columns: 1fr !important; }

  /* Feature/use case grids */
  .feat-grid, .use-case-grid, .fvp-grid, .h2h-hero { 
    grid-template-columns: 1fr !important; 
  }

  /* Day plan two-col */
  .dp-row { grid-template-columns: 60px 1fr !important; }

  /* Included grid */
  .included-grid { grid-template-columns: 1fr !important; }

  /* Free tier grid */
  .free-grid { grid-template-columns: 1fr !important; }

  /* Results grid (calculator) */
  .results-grid { grid-template-columns: 1fr 1fr !important; }

  /* Creds grid */
  .creds, .ecg, .eeat-creds { grid-template-columns: 1fr 1fr !important; }

  /* Tool cards */
  .tool-card { grid-template-columns: 1fr !important; }
  .tc-cta { margin-top: 10px; }

  /* Rank cards */
  .rank-card { grid-template-columns: 30px 1fr !important; }
  .rk-btn { grid-column: 1 / -1 !important; margin-top: 8px; }

  /* Buyer grid */
  .buyer-grid, .metrics { grid-template-columns: 1fr 1fr !important; }

  /* Budget header flex */
  .budget-header { flex-direction: column; gap: 8px !important; }

  /* Reviews grid */
  .review-grid { grid-template-columns: 1fr !important; }

  /* Links grid (404) */
  .links { grid-template-columns: 1fr !important; }

  /* Score box */
  .score-box { flex-direction: column; gap: 12px; }

  /* Comparison widget hero */
  .compare-hero, .sc-header { flex-direction: column !important; }

  /* Trust bar */
  .trust-i, .trust-inner { 
    display: grid !important; 
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important; 
  }
  .td, .trust-divider { display: none !important; }

  /* E-E-A-T section */
  .eeat-i, .eeat-inner { grid-template-columns: 1fr !important; }
  .esc, .eeat-stats-col { gap: 10px !important; }

  /* Footer */
  .fi, .footer-inner { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }

  /* Hero buttons */
  .hero-btns, .hero-actions { flex-direction: column !important; align-items: flex-start !important; }

  /* CTA form */
  .ckf, .cc-form, .lm-form { flex-direction: column !important; gap: 8px !important; }
  .ckf button, .cc-form button, .ckf input, .cc-form input { width: 100% !important; }

  /* Exit intent form */
  #exit-form { flex-direction: column; }

  /* Share buttons */
  [id^="share-"] { padding: 8px 12px !important; font-size: 12px !important; }

  /* Related posts grid → 1 col */
  [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* More/tools grid */
  .mg, .more-grid, .mc { grid-template-columns: 1fr !important; }

  /* Checklist tool grid */
  .tool-grid { grid-template-columns: 1fr !important; }

  /* Sticky bottom CTA adjust */
  #sticky-cta { 
    padding: 10px 4% !important; 
    gap: 8px !important;
  }
  #sticky-cta div:first-child { display: none !important; }

  /* Jump to verdict button — hide on mobile (sticky CTA covers it) */
  #jump-verdict { display: none !important; }
}

/* ── MOBILE SMALL (≤480px) ── */
@media(max-width:480px){
  /* Homepage featured pick */
  .pg { grid-template-columns: 1fr !important; }
  .pick.ft { grid-column: span 1 !important; }

  /* Footer → single column */
  .fi, .footer-inner { grid-template-columns: 1fr !important; }
  .fb, .footer-bottom { flex-direction: column !important; gap: 8px !important; }

  /* More grid → single column */
  .mg, .more-grid { grid-template-columns: 1fr !important; }

  /* Nav CTA — shorter text */
  .nbtn { padding: 7px 12px !important; font-size: 12px !important; }

  /* Creds → 2 col still fine */
  .creds, .ecg { grid-template-columns: 1fr 1fr !important; }

  /* Reviews grid */
  .rg, .reviews-grid { grid-template-columns: 1fr !important; }

  /* Score header → stack completely */
  .sh { grid-template-columns: 1fr !important; }
  .sh-n { font-size: 56px !important; }

  /* Privacy/disclaimer page */
  .wrap { padding-top: 24px !important; }

  /* Meta info wraps nicely */
  .meta { gap: 8px 12px !important; font-size: 12px !important; }

  /* Results grid calculator → 1 col */
  .results-grid { grid-template-columns: 1fr !important; }

  /* Buyer grid → 1 col */
  .buyer-grid, .metrics { grid-template-columns: 1fr !important; }

  /* Hero h1 size */
  h1 { font-size: clamp(26px, 8vw, 40px) !important; }

  /* Trust bar → 1 col */
  .trust-i, .trust-inner { grid-template-columns: 1fr 1fr !important; }

  /* vs-table text size */
  .vs-table td, .vs-table th { padding: 8px 10px !important; font-size: 12px !important; }

  /* Checklist items */
  .ci { flex-direction: row; gap: 8px; }
  .ci-check { width: 18px; height: 18px; flex-shrink: 0; }

  /* Cookie banner */
  #cookie-banner { flex-direction: column !important; gap: 10px !important; }
  #cookie-banner div:last-child { width: 100% !important; display: flex !important; gap: 8px !important; }
  #cookie-banner button { flex: 1 !important; }
}

/* ── PRINT ── */
@media print {
  nav, .mob-menu, #cookie-banner, #sticky-cta, #back-top, 
  #jump-verdict, #exit-overlay, .ham, .share-buttons,
  .cta, .cta-hero, .cta-box, footer { 
    display: none !important; 
  }
  body { font-size: 12pt; }
  a::after { content: " (" attr(href) ")"; font-size: 10pt; }
}