/* =========================================================
   移动端适配层（mobile.css）
   规则仅在 JS 于窄屏(<=768px)给 body 挂上 .is-mobile 时生效。
   桌面端继续走 scale 缩放，完全不受此文件影响（两套展示逻辑）。
   选择器使用 body.is-mobile + 完整 DOM 路径，确保能覆盖原站 CSS。
   ========================================================= */

/* 汉堡按钮默认在桌面端隐藏 */
.nav-toggle { display: none; }

/* ---- 通用：关闭桌面 scale，恢复真实视口宽度 ---- */
body.is-mobile #app { transform: none !important; width: 100% !important; max-width: 100% !important; }
body.is-mobile #viewport, body.is-mobile #pc { width: 100% !important; }
body.is-mobile html, body.is-mobile body { overflow-x: hidden; }

/* ---- 导航：桌面横排 -> 移动端汉堡 + 下拉抽屉 ---- */
body.is-mobile #app #viewport #pc .header {
  position: relative !important;
  top: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  height: auto !important;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.5);
}
body.is-mobile #app #viewport #pc .header .nav-toggle {
  display: flex !important;
  order: 3;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
body.is-mobile #app #viewport #pc .header .lang { order: 2; }

/* 菜单默认隐藏 */
body.is-mobile #app #viewport #pc .header .el-menu--horizontal {
  display: none !important;
  order: 1;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100%;
  height: auto !important;
  background: rgba(0, 0, 0, 0.92);
  position: absolute;
  top: 100%;
  left: 0;
  padding: 8px 0;
}
/* 菜单展开：纵向抽屉 */
body.is-mobile #app #viewport #pc .header.nav-open .el-menu--horizontal {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
body.is-mobile #app #viewport #pc .header .el-menu--horizontal li[style*="pointer-events: none"] {
  display: none !important;
}
body.is-mobile #app #viewport #pc .header .el-menu-item {
  display: flex !important;
  height: 48px !important;
  width: 100% !important;
  padding: 0 16px !important;
  justify-content: flex-start !important;
}
body.is-mobile #app #viewport #pc .header .el-menu-item a {
  justify-content: flex-start !important;
}
body.is-mobile #app #viewport #pc .header .header-selection {
  justify-content: flex-start !important;
}
body.is-mobile #app #viewport #pc .header .header-border::after {
  bottom: 8px !important;
  left: 16px !important;
  transform: none !important;
  width: 40% !important;
}

/* ---- 首页 hero：移动端同样等比完整显示（contain），按宽度缩放不裁切 ---- */
body.is-mobile .home-hero {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1920 / 661 !important;
  margin-top: 0 !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* ---- 首页 Tab 条：移动端占满宽度、横向滚动，避免 1920px 溢出 ---- */
body.is-mobile .home-tabs {
  width: 100% !important;
  height: auto !important;
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
  -webkit-overflow-scrolling: touch;
}
body.is-mobile .home-tab {
  flex: 0 0 auto !important;
  min-width: 116px !important;
  height: 60px !important;
  font-size: 13px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
}