/* ============================================================
   827 Marketing Solutions — Mobile + Safari layer
   ------------------------------------------------------------
   PHONE-ONLY by design. Every layout rule lives inside the
   max-width:680px media query, so desktop AND tablet render
   EXACTLY as they did before this file existed — nothing wider
   than a phone is ever touched. The only always-on rules are
   harmless cross-browser shims with zero layout impact.
   Owner: Judy. Change once here -> applies to all pages.
   ============================================================ */

/* ---- Cross-browser / Safari shims (no layout impact, all widths) ---- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* ============================================================
   PHONE ONLY (<=680px). Desktop/tablet untouched.
   ============================================================ */
@media (max-width: 680px){
  html, body { max-width: 100%; overflow-x: hidden; }

  /* Responsive media — phone only, so sized desktop logos/charts/SVGs
     are never affected. */
  img, video { max-width: 100%; height: auto; }

  /* Collapse every known multi-column grid to one column.
     Header grids (.client-profile / .client-strip) are intentionally
     excluded — they are handled by shared/dashboard.css.
     (.platform-strip is intentionally an arrow-navigated carousel.) */
  .bd-grid, .bd-row, .blog-list, .brandgrid, .cal, .client-grid, .conflict,
  .connect, .da-grid, .gs-milestones, .gs-payment-row, .hero, .issue,
  .nap-row, .need-grid, .needs-list, .notes, .params-grid, .plat-grid,
  .plat-row, .pol-cols, .post-ref-grid, .results, .sched-row,
  .score-stats, .setup-grid, .split, .srow, .stats, .status-strip,
  .sum-grid, .three-col, .tier-grid, .track-key, .twocol, .year-banner {
    grid-template-columns: 1fr !important;
  }

  /* Admin bar — pages with their own inline admin bar (Marketing Plan,
     Payments, Discovery, etc.) keep the desktop 32px padding and a wide
     right-hand group, which overflows a phone. Trim padding, let the two
     groups wrap, hide the long user name, and flow any absolute-centered
     switcher inline so the bar can never push the page sideways. */
  .admin-bar { padding-left: 12px !important; padding-right: 12px !important;
               flex-wrap: wrap !important; height: auto !important; min-height: 48px; }
  .admin-bar > div[style*="absolute"] { position: static !important; transform: none !important;
               left: auto !important; top: auto !important; }
  .admin-user-name { display: none !important; }

  /* Flex rows that don't wrap by default would overflow + get clipped on
     a phone — let the known strips wrap onto multiple lines. */
  .plat-row, .secnav, .status-strip,
  .quick-stats, .qs-row, .tab-row, .dash-tabs { flex-wrap: wrap !important; }

  /* Grid/flex children default to min-width:auto, which lets a wide child or
     a long unbroken string blow the track out past the viewport. Allow them
     to shrink so the collapsed single-column layout actually holds. */
  .bd-grid > *, .results > *, .rph-grid > *, .score-stats > *, .sum-grid > *,
  .params-grid > *, .setup-grid > *, .da-grid > *, .three-col > *, .tier-grid > *,
  .plat-grid > *, .need-grid > *, .brandgrid > *, .post-ref-grid > * { min-width: 0; }

  /* The pricing worksheet is a real 6-column spreadsheet — keep its shape and
     let the card swipe horizontally instead of squashing/stacking it. */
  .rph-outer { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .rph-grid { min-width: 560px; }

  /* Wide tables scroll horizontally instead of breaking the page. */
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Comfortable padding on the main shells so content isn't edge-to-edge. */
  .body, .wrap, .container, main { padding-left: 16px !important; padding-right: 16px !important; }
}