/* ================================================================
   ATOMINC — CROSS-PAGE MOBILE FIXES
   ================================================================
   Additive overrides ONLY. Zero desktop styles modified.
   Every rule lives inside a media query.

   Covers:   index.html · integrations.html
             solutions-brands.html · analytics-dashboard.html

   Load order: link this file just before </body> so it loads
   after every inline <style> block and wins the cascade tie.

   Specificity notes:
     - Inline style="" attributes always win without !important.
       Every property that fights an inline attribute is flagged.
     - div[style*="…"] attribute selectors target inline grid
       declarations that have no class to hook into.
   ================================================================ */


/* ════════════════════════════════════════════════════════════════
   ① SMALL DESKTOP — max-width: 1024px
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

  /* ── Containers ─────────────────────────────────────────── */
  .container   { padding: 0 32px; }
  nav          { padding: 0 32px; }   /* analytics uses bare <nav> */
  .site-nav    { padding: 0 32px; }   /* all other pages */

  /* ── Sub-page section padding ───────────────────────────── */
  /* integrations.html and solutions-brands.html sections */
  .sec-white,
  .sec-light   { padding: 100px 0; }

  /* ── ANALYTICS: hero + section collapse ────────────────── */
  /* Already in analytics <style> at 1024px — reinforced here */
  .ad-hero              { padding-top: 100px; }
  .ad-section           { padding: 100px 0; }
  .ad-hero-inner,
  .ad-inner             { grid-template-columns: 1fr; gap: 48px; }
  .ad-inner.rev         { direction: ltr; }
  .ad-tiles             { grid-template-columns: 1fr 1fr; }
  .ad-tiles .ad-tile:last-child { display: none; }
  .two-dash-grid        { grid-template-columns: 1fr; gap: 48px; }

  /* ── ANALYTICS: stats (already in file — reinforced) ────── */
  .stats-inner          { grid-template-columns: 1fr 1fr !important; }
  .stat-item            {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
    padding: 20px !important;
  }
  .stat-item:last-child { border-bottom: none !important; }

  /* ── ANALYTICS + INTEGRATIONS: shared footer ────────────── */
  .s-footer-top  { grid-template-columns: 1fr !important; gap: 40px !important; }
  .s-footer-cols { grid-template-columns: repeat(3, 1fr) !important; }
  /* integrations.html uses sf-top / sf-cols from atominc-shared.css */
  .sf-top        { grid-template-columns: 1fr !important; gap: 40px !important; }
  .sf-cols       { grid-template-columns: repeat(3, 1fr) !important; }
}


/* ════════════════════════════════════════════════════════════════
   ② TABLET — max-width: 768px
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── CONTAINER ───────────────────────────────────────────── */
  .container   { padding: 0 20px; }
  nav          { padding: 0 20px; }

  /* ── NAVIGATION ──────────────────────────────────────────── */
  /* Hide desktop CTA buttons on ALL pages — hamburger takes over */
  .nav-right   { display: none !important; }
  /* analytics uses a different nav-center class for inline tabs */
  .nav-center  { display: none !important; }

  /* ── GLOBAL TYPOGRAPHY ───────────────────────────────────── */
  /* !important required — some instances carry inline style="font-size:clamp(…)" */
  .s-h2 {
    font-size: clamp(1.8rem, 5.5vw, 3rem) !important;
    max-width: 100% !important;
  }
  .s-h3        { font-size: clamp(1.2rem, 3.5vw, 1.6rem); }
  .s-body      { font-size: 0.95rem !important; max-width: 100% !important; }
  .s-eyebrow   { font-size: 0.72rem; }

  /* ── PAGE HERO (integrations.html + solutions-brands.html) ── */
  .page-hero h1 {
    font-size: clamp(2rem, 7vw, 3.5rem);
    letter-spacing: -0.04em;
  }
  .page-hero-inner > p { font-size: 1rem; line-height: 1.65; }
  .page-hero-btns {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* ── INLINE 4-COL GRID (integrations.html ecosystem cards) ── */
  /*
     The grid container has no class — only inline style="display:grid;
     grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px"
     Attribute selector + !important is the only way to override this.
  */
  div[style*="repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;   /* 4-col → 2-col on tablet */
  }

  /* ── STATS STRIP (integrations.html — from atominc-shared.css) ── */
  .stats-inner { grid-template-columns: 1fr 1fr !important; }
  .stat-item   {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
    padding: 20px !important;
  }
  .stat-lbl    { font-size: 0.78rem; }

  /* ── SOLUTIONS: cards grid ───────────────────────────────── */
  /*
     At 1100px it goes 1fr 1fr. Between 768px and the 600px rule
     the gap is not covered. Explicitly enforce 2-col here, 1-col
     at 480px below.
  */
  .cards-grid  { grid-template-columns: 1fr 1fr !important; }
  .sec-header  { margin-bottom: 40px; }

  /* ── SECTION PADDING ─────────────────────────────────────── */
  .sec-white,
  .sec-light   { padding: 72px 0 !important; }

  /* ── ANALYTICS ───────────────────────────────────────────── */
  .ad-hero     { padding-top: 80px; }
  .ad-section  { padding: 72px 0; }
  .ad-hero-btns { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* ── SHARED FOOTER (integrations + solutions + analytics) ── */
  /* sf-* → integrations / solutions  |  s-footer-* → analytics */
  .sf-top,
  .s-footer-top  { grid-template-columns: 1fr !important; gap: 40px !important; }
  .sf-cols,
  .s-footer-cols { grid-template-columns: repeat(2, 1fr) !important; }
  .s-footer-top  { padding-bottom: 40px; }
}


/* ════════════════════════════════════════════════════════════════
   ③ MOBILE — max-width: 480px
   (Primary mobile optimisation layer)
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

  /* ── CONTAINER ───────────────────────────────────────────── */
  .container  { padding: 0 16px; }
  nav         { padding: 0 16px; }

  /* ── TYPOGRAPHY ──────────────────────────────────────────── */
  .s-h2 {
    font-size: clamp(1.55rem, 7.5vw, 2.4rem) !important;  /* beats inline style */
    letter-spacing: -0.025em;
  }
  .s-h3       { font-size: clamp(1.1rem, 4vw, 1.4rem); }
  .s-body     { font-size: 0.92rem !important; line-height: 1.7; }
  .s-eyebrow  { font-size: 0.7rem; letter-spacing: 0.1em; }

  /* ── PAGE HERO ───────────────────────────────────────────── */
  .page-hero h1 {
    font-size: clamp(1.8rem, 8vw, 2.8rem) !important;
    letter-spacing: -0.035em;
  }
  .page-hero-inner > p { font-size: 0.92rem; }
  .page-hero-badge      { font-size: 0.7rem; padding: 6px 14px; }
  .page-hero-btns {
    align-items: stretch;             /* make buttons full-width */
    gap: 10px;
  }

  /* ── TOUCH-FRIENDLY BUTTONS ──────────────────────────────── */
  /*
     !important needed — some .s-btn-green instances carry
     inline style="font-size:1rem; padding:18px 44px"
  */
  .s-btn-green,
  .s-btn-outline {
    width: 100% !important;
    max-width: 320px;
    justify-content: center !important;
    padding: 13px 24px !important;
    font-size: 0.9rem !important;
    min-height: 48px;               /* WCAG touch target */
  }

  /* ── INLINE GRIDS → 1-col ────────────────────────────────── */
  /*
     Covers the integrations.html 4-col ecosystem grid
     AND any other inline repeat(4,1fr) or repeat(3,1fr) containers
  */
  div[style*="repeat(4,1fr)"],
  div[style*="repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ── STATS → single column ───────────────────────────────── */
  .stats-inner { grid-template-columns: 1fr !important; }

  /* ── INDEX.HTML: footer-grid 2-col → 1-col ─────────────────
     The 900px query sets 1fr 1fr. 600px sets 1fr.
     Between 600px and 900px gap already handled.
     This reinforces 1fr at 480px for all viewports ≤ 480px.  */
  .footer-grid { grid-template-columns: 1fr !important; }

  /* ── INDEX.HTML: s-logo-grid tighten ────────────────────── */
  /* 768px already sets 3-col, 480px was missing 2-col */
  .s-logo-grid   { grid-template-columns: repeat(2, 1fr) !important; }
  .s-logo-grid-7 { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── INDEX.HTML: hero-inner gap ────────────────────────── */
  .hero-inner    { gap: 32px !important; }

  /* ── SOLUTIONS: cards grid → single column ──────────────── */
  .cards-grid  { grid-template-columns: 1fr !important; gap: 16px !important; }
  .sec-header  { margin-bottom: 28px; }

  /* ── SECTION PADDING ─────────────────────────────────────── */
  .sec-white,
  .sec-light   { padding: 56px 0 !important; }

  /* ── PRICING STRIP ───────────────────────────────────────── */
  /* solutions-brands.html: not covered by .section-* rules */
  .pricing-strip   { padding: 56px 0 !important; }
  .pricing-strip h2 { font-size: clamp(1.8rem, 7vw, 2.8rem); }
  .pricing-strip p  { font-size: 0.95rem; }

  /* ── ANALYTICS: tiles + section ─────────────────────────── */
  .ad-tiles    { grid-template-columns: 1fr !important; }
  .ad-hero     { padding-top: 64px; }
  .ad-section  { padding: 56px 0; }

  /* ── ANALYTICS: data table overflow ─────────────────────── */
  /*
     Complex multi-column grids (ad-prod-head, pt-head, etc.)
     use 6-7 fractional columns. On mobile these compress to
     unreadable widths. Wrapping containers get overflow-x:auto
     so users can scroll the dashboard panels horizontally.
  */
  .ad-prod-bar   { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ad-prod-head,
  .ad-prod-row   { min-width: 480px; }  /* preserve intended proportions */

  .ui-shell      { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pt-head,
  .pt-row,
  .trends-head,
  .trends-row,
  .exp-head,
  .exp-row,
  .inv-head,
  .inv-row,
  .ppc-head,
  .ppc-row,
  .alert-head,
  .alert-row     { min-width: 480px; }

  /* Slightly smaller text inside dashboard panels */
  .ad-dash-wrapper { font-size: 0.82rem; }
  .ad-prod-name,
  .ad-prod-val   { font-size: 0.65rem; }

  /* ── SHARED FOOTER: collapse to 2-col ───────────────────── */
  .sf-cols,
  .s-footer-cols { grid-template-columns: 1fr 1fr !important; }

  /* ── SHARED FOOTER BOTTOM: stack vertically ─────────────── */
  /*
     solutions-brands already stacks sf-bottom at 900px.
     integrations and analytics do NOT stack. Fix both here.
  */
  .sf-bottom,
  .s-footer-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
    padding: 16px 0 !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   ④ EXTRA SMALL — max-width: 360px
   (Safety net for the smallest common devices)
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 360px) {

  .container   { padding: 0 14px; }

  /* Typography floors */
  .s-h2        { font-size: 1.45rem !important; }
  .page-hero h1 { font-size: 1.7rem !important; }
  .pricing-strip h2 { font-size: 1.6rem; }

  /* Single-column everything */
  .cards-grid  { gap: 12px !important; }
  .sf-cols,
  .s-footer-cols { grid-template-columns: 1fr !important; }
  .s-logo-grid,
  .s-logo-grid-7 { grid-template-columns: repeat(2, 1fr) !important; }
}