/* ==========================================================================
   智规律 · 统一移动端适配层 (ZGL Mobile Fix v1)
   目的：消除手机端横向溢出、字号过小、点按目标过小三大问题。
   原则：只做「兜底修正」，不改变桌面端外观；全部规则限定在 max-width:820px。
   生成：CEO 亲自执行（依据 2026-09-19 全站移动端细节审计的 16 个问题）
   ========================================================================== */

@media (max-width: 820px) {

  /* ---- 1. 根治横向溢出 -------------------------------------------------- */
  html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  /* 任何内联固定宽度 / 最小宽度，在窄屏一律放开 */
  *[style*="width"]      { max-width: 100% !important; }
  *[style*="min-width"]  { min-width: 0 !important; }
  *[style*="max-width"]  { max-width: 100% !important; }

  /* 媒体元素不撑破容器 */
  img, video, canvas, svg, iframe, embed, object {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 表格与代码块改为可横向滚动，而不是把整页撑开 */
  table  { display: block; width: 100% !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  pre, code, .code, .codeblock {
    white-space: pre-wrap !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
  /* 长链接/长串不撑破 */
  a, p, li, td, th, h1, h2, h3, h4, h5, h6, span, div {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* 常见固定宽度栅格容器：改为单列自适应 */
  .container, .wrap, .wrapper, .content, .main, .page, .layout,
  [class*="container"], [class*="wrapper"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  /* 多列弹性布局在手机上改为纵向堆叠 */
  .row, [class*="row"], [class*="grid"], [class*="flex"] {
    flex-wrap: wrap !important;
  }

  /* ---- 2. 字号下限：手机可读性 ----------------------------------------- */
  /* 审计发现 8px / 10px / 10.5px / 11px / 11.5px 等过小字号 */
  small, .small, .text-xs, .text-xxs, .muted, .hint, .tip, .note, .desc, .sub,
  [style*="font-size:8"], [style*="font-size: 8"],
  [style*="font-size:9"], [style*="font-size: 9"],
  [style*="font-size:10"], [style*="font-size: 10"],
  [style*="font-size:11"], [style*="font-size: 11"] {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
  .text-xs, [class*="text-xs"], [class*="text-sm"] { font-size: 13px !important; }

  /* 正文与标题的最小可读性 */
  body { font-size: 15px !important; line-height: 1.7 !important; }
  p, li { font-size: 15px !important; }
  h1 { font-size: 21px !important; line-height: 1.35 !important; }
  h2 { font-size: 19px !important; line-height: 1.35 !important; }
  h3 { font-size: 17px !important; line-height: 1.4 !important; }
  h4, h5, h6 { font-size: 15px !important; }

  /* ---- 3. 触控友好：点按目标与手感 ------------------------------------- */
  button, [role="button"], input[type="submit"], input[type="button"],
  input[type="reset"], .btn, [class*="btn"], a.button {
    min-height: 44px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent;
  }
  a, button, [role="button"], input, select, textarea, label {
    touch-action: manipulation;
  }
  input, select, textarea {
    font-size: 16px !important;   /* 防止 iOS 自动放大 */
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* 输入框在手机上占满宽度更好用 */
  input[type="text"], input[type="search"], input[type="email"],
  input[type="tel"], input[type="password"], textarea {
    width: 100% !important;
  }

  /* ---- 4. 常见交互区在手机上的间距 ------------------------------------- */
  .actions, [class*="actions"], [class*="toolbar"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .actions > *, [class*="actions"] > * { flex: 1 1 auto; }

  /* ---- 5. 弹窗/抽屉类组件适配 ------------------------------------------ */
  .modal, .dialog, [class*="modal"], [class*="dialog"], [class*="drawer"] {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* ---- 6. 桌面侧栏在手机上不占位 --------------------------------------- */
  .sidebar, [class*="sidebar"] {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ---- 7. 超窄屏（≤380px，如 iPhone SE）进一步收窄 ---------------------- */
@media (max-width: 380px) {
  .container, .wrap, .wrapper, .content, .main, .page, .layout {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  body { font-size: 14px !important; }
  h1 { font-size: 19px !important; }
}

/* ---- 8. 平板（≤1024px）只处理溢出，不动内容 ------------------------- */
@media (min-width: 821px) and (max-width: 1024px) {
  html, body { max-width: 100% !important; overflow-x: hidden !important; }
  img, video, canvas, svg, table { max-width: 100% !important; }
  [class*="sidebar"] { max-width: 100% !important; }
}