/* 最终移动端覆盖层：必须在各页面专属样式之后加载。 */
@media (max-width: 768px) {
  html, body, body.is-mobile {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.is-mobile *, body.is-mobile *::before, body.is-mobile *::after { box-sizing: border-box; }

  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;
  }

  body.is-mobile .header {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    transform: none !important;
  }

  body.is-mobile .header .nav-toggle {
    position: relative !important;
    z-index: 2100 !important;
    pointer-events: auto !important;
  }

  /* 移动端汉堡菜单：固定左侧抽屉，不受桌面横向导航布局影响。 */
  body.is-mobile .header .el-menu--horizontal {
    display: flex !important;
    position: fixed !important;
    z-index: 2000 !important;
    top: 0 !important;
    left: 0 !important;
    width: min(78vw, 320px) !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 72px 0 24px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    overflow-y: auto !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transform: translateX(-100%) !important;
    transition: transform .24s ease, opacity .2s ease, visibility .2s ease !important;
    background: rgba(20, 20, 24, .97) !important;
    box-shadow: 8px 0 28px rgba(0, 0, 0, .28) !important;
  }

  body.is-mobile .header.nav-open .el-menu--horizontal {
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
  }

  body.is-mobile .header .el-menu--horizontal .el-menu-item,
  body.is-mobile .header .el-menu--horizontal .el-menu-item a {
    display: flex !important;
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 20px !important;
    justify-content: flex-start !important;
    color: #fff !important;
  }

  body.is-mobile .header .el-menu--horizontal .header-selection {
    justify-content: flex-start !important;
    font-size: 16px !important;
  }

  body.is-mobile .header .el-menu--horizontal .header-image,
  body.is-mobile .header .el-menu--horizontal li[style*="pointer-events: none"] {
    display: none !important;
  }

  body.is-mobile .header .el-menu--horizontal .header-border::after {
    bottom: 6px !important;
    left: 20px !important;
    width: 36px !important;
    transform: none !important;
  }

  body.is-mobile .home-hero,
  body.is-mobile .home-tabs,
  body.is-mobile .tab-panels,
  body.is-mobile .tab-panel,
  body.is-mobile .intro-section,
  body.is-mobile .tab-section,
  body.is-mobile .page-hero,
  body.is-mobile .title-container,
  body.is-mobile .intro-text,
  body.is-mobile .intro-gallery,
  body.is-mobile .gallery-track,
  body.is-mobile .contact-page,
  body.is-mobile .project-layout,
  body.is-mobile .project-layout__content,
  body.is-mobile .events-page,
  body.is-mobile .news-list,
  body.is-mobile .news-item,
  body.is-mobile .footer,
  body.is-mobile .footer > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.is-mobile .home-hero { height: auto !important; aspect-ratio: 1920 / 611 !important; margin-top: 0 !important; }
  body.is-mobile .home-tabs { overflow-x: auto !important; }
  body.is-mobile .tab-panel { min-height: 0 !important; }
  body.is-mobile .intro-section, body.is-mobile .tab-section { padding: 28px 16px 50px !important; }
  body.is-mobile .intro-text { margin: 0 0 18px !important; }

  body.is-mobile .intro-gallery { overflow: hidden !important; }
  body.is-mobile .gallery-track { display: block !important; transform: none !important; }
  body.is-mobile .gallery-slide { display: none !important; }
  body.is-mobile .gallery-slide.is-active {
    display: block !important;
    width: 100% !important;
    transform: none !important;
    opacity: 1 !important;
  }

  body.is-mobile .project-layout__content { padding: 0 16px 72px !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 .contact-page { padding: 0 16px !important; }
  body.is-mobile .title-container { padding: 0 16px !important; }
  body.is-mobile .title-container .title-text { width: 100% !important; }

  body.is-mobile .footer { margin-top: 0 !important; padding: 32px 16px 24px !important; overflow: hidden !important; background: transparent !important; background-image: none !important; }
  body.is-mobile .footer > div > div[style*="gap:630px"] {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
}