/* ============================================================
   拍立叙全站移动端响应式兜底样式  mobile-fix.css
   统一引入：所有频道页与首页 <head> 内
            <link rel="stylesheet" href="/assets/mobile-fix.css">
   仅 ≤768px 视口生效，完全不影响桌面端布局。

   作用：收纳任意因「固定宽度写死 / 祖先 transform 使 fixed 包含块偏移 /
   横排不包裹 / 长文本 nowrap」导致的横向溢出，使全站页面在手机上
   自适应，不再出现左右滑动条或内容被裁切。
   设计为「纯补充层」：只加约束，不改既有结构、不动桌面断点。
   ============================================================ */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; max-width: 100%; }

  /* 所有元素（含匿名 div 与固定宽度容器）约束在视口内，
     避免任意元素撑破页面产生整页横向滚动 */
  *, *::before, *::after {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 固定定位顶栏：强制贴合真实视口宽，
     绕过「祖先 transform 使 fixed 包含块偏移」陷阱（08_community 等） */
  .mobile-topbar {
    max-width: 100vw !important;
    width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* 横排卡片组（自然时序热门物种等）：允许内部横向滚动，
     而非撑宽整页（03_nature） */
  .hot-species-section {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }
  .hot-species-card { flex-shrink: 0 !important; }

  /* 长文本标签允许换行，避免单标签超宽（11_travel_planner） */
  .cap-tag {
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* 桌面统一侧栏移动端隐藏：
     各页原有 .sidebar{display:none} 规则因侧栏真实 class 是 uni-sidebar
     而从未命中，导致窄视口下侧栏展开挤压内容区（02_inspire/03_nature 等）。
     首页无 uni-sidebar，正常页移动端本就不显示，此规则零误伤。 */
  .uni-sidebar { display: none !important; }

  /* 桌面侧栏为 body 预留的 padding-left:260px（uni-push）在移动端归零：
     否则侧栏隐藏后内容仍被推到 260px 起、挤成 115px 窄条。
     正常页移动端本已归零，此规则零误伤。 */
  body.uni-push { padding-left: 0 !important; }
}