/* =========================================================
   移动端适配层（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; }
/* 移动端 header 走 sticky（不脱离文档流），桌面端给子页加的 120px 顶距需清除 */
body.is-mobile { padding-top: 0 !important; }

/* ---- 导航：桌面横排 -> 移动端汉堡 + 下拉抽屉 ---- */
body.is-mobile .header {
  position: sticky !important;
  top: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  height: auto !important;
  padding: 10px 14px;
  background: transparent !important;
  z-index: 1000 !important;
}
/* 移动端滚动后：首页(home)+ 红底页(body.dark sub)走深色磨砂衬白字；浅灰子页(body.light sub)走页面同款浅灰(#efefef)+ 淡阴影 */
body.is-mobile .header[data-page="home"].is-sticky,
body.is-mobile.dark .header[data-page="sub"].is-sticky {
  background: rgba(26, 26, 30, 0.72) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body.is-mobile.light .header[data-page="sub"].is-sticky {
  background: #efefef !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.10);
}
body.is-mobile .header .nav-toggle {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  order: 3;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
body.is-mobile .header .lang { order: 2; }

/* 菜单默认隐藏 */
body.is-mobile .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 .header.nav-open .el-menu--horizontal {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
body.is-mobile .header .el-menu--horizontal li[style*="pointer-events: none"] {
  display: none !important;
}
body.is-mobile .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 .header .el-menu-item a {
  justify-content: flex-start !important;
}
body.is-mobile .header .header-selection {
  justify-content: flex-start !important;
}
body.is-mobile .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;
}

/* ---- 红底页顶部 hero（project/contact）：移动端占满宽度、等比缩放、不叠在导航上 ---- */
body.is-mobile .page-hero {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1920 / 611 !important;
  margin-top: 0 !important;
  background-size: cover !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;
}
body.is-mobile .home-tab.is-active {
  height: 64px !important;
  font-size: 15px !important;
  margin-bottom: -4px !important;
}
body.is-mobile .home-tab .tab-line1 { font-size: inherit !important; }

/* ---- 首页 Tab 内容区：移动端占满宽度 ---- */
body.is-mobile .tab-panels {
  width: 100% !important;
  min-height: auto !important;
}
body.is-mobile .intro-section,
body.is-mobile .tab-section {
  width: 100% !important;
  padding: 28px 16px 50px !important;
}
body.is-mobile .intro-text {
  width: 100% !important;
  margin-bottom: 18px !important;
}
body.is-mobile .intro-title {
  font-size: 20px !important;
  margin-bottom: 12px !important;
}
body.is-mobile .intro-desc p {
  font-size: 14px !important;
  line-height: 1.8 !important;
  margin-bottom: 12px !important;
}
body.is-mobile .tab-section .section-inner {
  width: 100% !important;
}
body.is-mobile .schedule-image-wrap {
  margin-top: 4px !important;
}
body.is-mobile .tab-content-img {
  max-width: 100% !important;
  height: auto !important;
}

/* 画廊移动端 */
body.is-mobile .intro-gallery {
  width: 100% !important;
  overflow: hidden !important;
}
body.is-mobile .gallery-track {
  gap: 10px !important;
}
body.is-mobile .gallery-slide {
  flex: 0 0 88vw !important;
  transform: scale(0.88) !important;
  border-radius: 12px !important;
}
body.is-mobile .gallery-slide.is-active {
  transform: scale(1) !important;
}
body.is-mobile .gallery-slide img {
  height: auto !important;
  aspect-ratio: 820 / 461 !important;
}
body.is-mobile .gallery-nav {
  top: 42% !important;
  width: 34px !important;
  height: 34px !important;
  font-size: 18px !important;
  border-radius: 50% !important;
}
body.is-mobile .gallery-prev { left: 6px !important; }
body.is-mobile .gallery-next { left: auto !important; right: 6px !important; }

/* ---- 下载按钮移动端 ---- */
body.is-mobile .download-btn-wrap {
  padding: 0 0 14px !important;
  text-align: right !important;
}
body.is-mobile .download-btn {
  padding: 10px 24px !important;
  font-size: 14px !important;
  letter-spacing: 1px !important;
  border-radius: 8px !important;
}

/* ---- 项目页内容容器移动端 ---- */
body.is-mobile #pc > div[data-v-ea1cf15e] > div[data-v-ea1cf15e]:first-child {
  width: 100% !important;
  height: auto !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}
body.is-mobile .project-main-title {
  font-size: 20px !important;
}
body.is-mobile .project-description {
  font-size: 14px !important;
}
body.is-mobile .project-service-item {
  width: auto !important;
  flex: 1 !important;
  min-width: 0 !important;
  font-size: 13px !important;
  padding: 14px 12px !important;
}
body.is-mobile .radius-box {
  width: auto !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 13px !important;
  padding: 14px 12px !important;
}

/* ---- 联系我们页移动端 ---- */
body.is-mobile .contact-page {
  width: 100% !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}
body.is-mobile .contact-page .title-text {
  font-size: 22px !important;
}
body.is-mobile .contact-page .content-container {
  width: 100% !important;
  height: auto !important;
  flex-direction: column !important;
  gap: 20px !important;
}
body.is-mobile .contact-page .contact-info {
  width: 100% !important;
  margin-left: 0 !important;
}
body.is-mobile .contact-page .map-container {
  width: 100% !important;
  height: 240px !important;
  margin-right: 0 !important;
}
body.is-mobile .contact-page .info-value {
  font-size: 14px !important;
}

/* ---- 新闻页移动端 ---- */
body.is-mobile .news-list,
body.is-mobile .news-item {
  width: 100% !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}

/* ---- 赛事案例页移动端 ---- */
body.is-mobile .events-page {
  width: 100% !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}
body.is-mobile .event-item {
  width: 100% !important;
  height: auto !important;
}
body.is-mobile .event-grid,
body.is-mobile .video-grid {
  width: 100% !important;
  gap: 16px !important;
  grid-template-columns: repeat(2, 1fr) !important;
}
body.is-mobile .event-grid .event-title-overlay {
  font-size: 12px !important;
  padding: 6px 10px !important;
}
body.is-mobile .events-page .section-title {
  font-size: 18px !important;
}

/* ---- Footer 移动端 ---- */
body.is-mobile .footer {
  height: auto !important;
  padding: 32px 16px 24px !important;
  margin-top: 60px !important;
  box-sizing: border-box !important;
}
body.is-mobile .footer[data-v-b83fe6d2] {
  height: auto !important;
}
body.is-mobile .footer[data-v-b83fe6d2]::before {
  width: 100% !important;
}
body.is-mobile .footer > div > div:first-child {
  flex-direction: column !important;
  gap: 16px !important;
  align-items: flex-start !important;
}
body.is-mobile .footer .icon {
  margin-right: 0 !important;
}

/* ---- Toast 移动端 ---- */
body.is-mobile .toast {
  font-size: 14px !important;
  padding: 12px 24px !important;
  border-radius: 6px !important;
}

/* ---- 子页背景图移动端保留 ---- */
body.is-mobile body::before {
  width: 100vw !important;
  height: 100vh !important;
}

/* ---- 子页 hero 移动端宽高比修正（project=200px，contact=300px 原设定） ---- */
body.is-mobile .page-hero[style*="height:200px"] {
  aspect-ratio: 1920 / 200 !important;
}
body.is-mobile .page-hero[style*="height:300px"] {
  aspect-ratio: 1920 / 300 !important;
}

/* ---- 通用：强制页面内所有固定像素宽度容器在移动端占满 ---- */
body.is-mobile .schedule-cn,
body.is-mobile .hotel-cn {
  width: 100% !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}
body.is-mobile .schedule-days {
  flex-direction: column !important;
  gap: 16px !important;
}
body.is-mobile .schedule-table td:first-child {
  width: auto !important;
  white-space: normal !important;
}
body.is-mobile .schedule-table td:nth-child(3) {
  width: auto !important;
  text-align: left !important;
}

/* ---- 移动端最终布局重置：禁止继承桌面固定视口与1920px画布 ---- */
@media (max-width: 768px) {
  html,
  body,
  body.is-mobile {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.is-mobile #app,
  body.is-mobile #viewport,
  body.is-mobile #pc {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    transform: none !important;
    margin: 0 !important;
  }

  body.is-mobile #pc > *,
  body.is-mobile .project-layout,
  body.is-mobile .project-layout__content,
  body.is-mobile .contact-page,
  body.is-mobile .events-page,
  body.is-mobile .news-list,
  body.is-mobile .news-item {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.is-mobile .official-page-bg {
    position: fixed !important;
    width: 100vw !important;
    height: 100vh !important;
  }

  body.is-mobile .page-hero {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.is-mobile .project-layout__content {
    padding: 0 16px 72px !important;
    box-sizing: border-box !important;
  }

  body.is-mobile .project-layout__content > div[style*="display: flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-top: 28px !important;
  }

  body.is-mobile .footer {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    overflow: hidden !important;
  }

  body.is-mobile .footer > div,
  body.is-mobile .footer > div > div[style*="gap:630px"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.is-mobile .footer > div > div[style*="gap:630px"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  body.is-mobile .footer .icon-bg {
    max-width: 28px !important;
  }
}