/* ===== 移动端适配（2026-11-02 追加）=====
   目标：华为/荣耀、iOS、微信内置浏览器下内容不被裁切、不横向滚动、点击区域够大。
   依据：device-adapt.js 在 <html> 上打的 is-mobile / is-huawei / is-ios / is-wechat 标记。 */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }

/* 1. 通用：任何固定宽度的容器/图片都不许撑破屏幕 */
@media (max-width: 820px) {
  img, video, canvas, svg, iframe { max-width: 100%; height: auto; }

  /* 页面里大量写死的内联 width:1220px / 900px / 760px… 在手机上统一收敛 */
  [style*="width:1220px"], [style*="width: 1220px"],
  [style*="width:900px"],  [style*="width: 900px"],
  [style*="width:760px"],  [style*="width: 760px"],
  [style*="width:720px"],  [style*="width: 720px"],
  [style*="width:620px"],  [style*="width: 620px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 表格、代码块、长链接不许横向溢出 */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  pre, code { overflow-x: auto; word-break: break-word; }
  a, p, li, span, td, th { word-break: break-word; overflow-wrap: anywhere; }

  /* 点击区域不小于 40px（华为/微信内置浏览器尤其明显） */
  button, .btn, .cta, a.btn, input[type="submit"] { min-height: 42px; }

  /* 顶部/底部安全区（刘海屏、手势条） */
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* 2. 小屏（多数手机竖屏） */
@media (max-width: 480px) {
  body { font-size: 15px; }
  h1 { font-size: 1.45em; }
  h2 { font-size: 1.18em; }

  /* 站点导航如果是一行横排，允许换行而不是被挤没 */
  header, nav, .nav, .navbar, .topbar { flex-wrap: wrap !important; }

  /* 两栏/三栏卡片一律单列 */
  .grid, .cards, .features { grid-template-columns: 1fr !important; }
}

/* 3. 华为 / 鸿蒙 定向修正 */
html.is-huawei body { letter-spacing: 0; }                 /* 鸿蒙字体字距偏大 */
html.is-huawei .btn, html.is-huawei button { border-radius: 8px; }
html.is-huawei input, html.is-huawei textarea { font-size: 16px; }  /* 防聚焦时页面放大 */

/* 4. 微信内置浏览器：顶部有工具栏，100vh 会多出一截 */
html.is-wechat .full-h, html.is-ios .full-h { min-height: calc(var(--vh, 1vh) * 100); }

/* 5. 兜底：任何元素都不许超出视口宽度（放在最后，权重最低但覆盖面最广） */
@media (max-width: 820px) {
  * { max-width: 100vw; }
}