/* 最终移动端覆盖层：必须在各页面专属样式之后加载。 */
@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;
  }

  /* 非首页移动端：以参考站的卡片内容层为准，集中覆盖旧的桌面缩放遗留规则。 */
  body.is-mobile .header[data-page="sub"] {
    position: sticky !important;
    top: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: 60px !important;
    min-height: 60px !important;
    padding: 0 14px !important;
    background: #fff !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .08) !important;
    z-index: 1100 !important;
  }
  body.is-mobile .header[data-page="sub"] .nav-toggle {
    order: 0 !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    background: transparent !important;
    color: #333 !important;
    font-size: 25px !important;
  }
  body.is-mobile .header[data-page="sub"] .lang {
    order: 1 !important;
    margin-left: 8px !important;
    color: #333 !important;
  }
  body.is-mobile .header[data-page="sub"] .lang a,
  body.is-mobile .header[data-page="sub"] .lang span { color: #333 !important; }
  body.is-mobile .header[data-page="sub"] .header-image {
    display: block !important;
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    width: 112px !important;
    height: 38px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
  body.is-mobile .header[data-page="sub"] .el-menu--horizontal {
    background: rgba(23, 23, 26, .98) !important;
  }
  body.is-mobile .header[data-page="sub"].nav-open .el-menu--horizontal {
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
  }

  /* 桌面导航的 header-mask 伪元素在移动端会覆盖抽屉，必须彻底关闭。 */
  body.is-mobile .header-mask::before,
  body.is-mobile .header-mask::after,
  body.is-mobile .header[data-page="sub"]::before,
  body.is-mobile .header[data-page="sub"]::after {
    display: none !important;
    content: none !important;
    pointer-events: none !important;
  }

  body.is-mobile.light .events-page,
  body.is-mobile.light .news-page {
    padding: 58px 18px 48px !important;
    background: #f3f3f3 !important;
  }
  body.is-mobile.light .events-page .section,
  body.is-mobile.light .news-page .news-section { width: 100% !important; }
  body.is-mobile.light .section-header,
  body.is-mobile.light .news-section .section-header {
    margin: 0 0 20px !important;
    text-align: center !important;
  }
  body.is-mobile.light .section-line {
    width: 38px !important;
    height: 3px !important;
    margin: 0 auto 18px !important;
    background: #ef1b23 !important;
  }
  body.is-mobile.light .section-title {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #333 !important;
  }
  body.is-mobile.light .event-grid,
  body.is-mobile.light .video-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px 12px !important;
    width: 100% !important;
  }
  body.is-mobile.light .event-item,
  body.is-mobile.light .video-item {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  body.is-mobile.light .event-image-container {
    position: relative !important;
    height: auto !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    aspect-ratio: 1 / 1.42 !important;
    background: #d9d9d9 !important;
  }
  body.is-mobile.light .event-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  body.is-mobile.light .event-title-overlay {
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    padding: 20px 7px 7px !important;
    background: linear-gradient(transparent, rgba(0, 0, 0, .78)) !important;
    color: #fff !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }

  body.is-mobile.light .news-grid,
  body.is-mobile.light .news-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
  }
  body.is-mobile.light .news-item {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    min-height: 136px !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .10) !important;
  }
  body.is-mobile.light .news-image {
    flex: 0 0 126px !important;
    width: 126px !important;
    height: 102px !important;
    border-radius: 9px !important;
    object-fit: cover !important;
  }
  body.is-mobile.light .news-content {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 1px 0 0 12px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  body.is-mobile.light .news-title {
    display: -webkit-box !important;
    overflow: hidden !important;
    color: #333 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }
  body.is-mobile.light .news-category {
    margin-top: 7px !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }
  body.is-mobile.light .news-date {
    margin-top: auto !important;
    color: #999 !important;
    font-size: 10px !important;
  }

  body.is-mobile.dark .project-layout,
  body.is-mobile.dark .contact-page,
  body.is-mobile.dark #pc > div[data-v-2b878d01] {
    min-height: 0 !important;
    background: transparent !important;
  }
  body.is-mobile.dark .page-hero { display: none !important; }
  body.is-mobile.dark .project-layout__content {
    padding: 64px 28px 118px !important;
    text-align: center !important;
  }
  body.is-mobile.dark .project-layout__content > div:first-child {
    width: 38px !important;
    height: 3px !important;
    margin: 0 auto 26px !important;
  }
  body.is-mobile.dark .project-main-title {
    color: #fff !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
  }
  body.is-mobile.dark .project-description {
    margin-top: 28px !important;
    color: #fff !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    text-align: left !important;
  }
  body.is-mobile.dark .project-layout__content > div[style*="display: flex"] {
    display: flex !important;
    margin-top: 38px !important;
    gap: 20px !important;
  }
  body.is-mobile.dark .project-service-item,
  body.is-mobile.dark .radius-box {
    display: flex !important;
    width: 100% !important;
    min-height: 72px !important;
    padding: 13px 18px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255, 255, 255, .92) !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }
  body.is-mobile.dark .contact-page {
    padding: 62px 30px 126px !important;
  }
  body.is-mobile.dark .contact-page .title-container {
    padding: 0 !important;
    text-align: center !important;
  }
  body.is-mobile.dark .contact-page .title-line {
    width: 38px !important;
    height: 3px !important;
    margin: 0 auto 25px !important;
  }
  body.is-mobile.dark .contact-page .title-text {
    color: #fff !important;
    font-size: 20px !important;
  }
  body.is-mobile.dark .contact-page .content-container {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 26px !important;
    padding: 32px 22px 20px !important;
    border: 1px solid rgba(255, 255, 255, .9) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .18) !important;
  }
  body.is-mobile.dark .contact-page .contact-info {
    width: 100% !important;
    margin: 0 !important;
  }
  body.is-mobile.dark .contact-page .info-item {
    margin-bottom: 20px !important;
  }
  body.is-mobile.dark .contact-page .info-icon img {
    width: 18px !important;
    height: 18px !important;
  }
  body.is-mobile.dark .contact-page .info-label,
  body.is-mobile.dark .contact-page .info-value { color: #fff !important; }
  body.is-mobile.dark .contact-page .info-label { font-size: 13px !important; }
  body.is-mobile.dark .contact-page .info-value { font-size: 13px !important; line-height: 1.35 !important; }
  body.is-mobile.dark .contact-page .map-container {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1.68 / 1 !important;
    margin: 18px 0 0 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
  }

  body.is-mobile.light .events-page > .footer,
  body.is-mobile.light .news-page > .footer {
    width: calc(100% + 36px) !important;
    margin: 0 -18px -48px !important;
    padding-bottom: 120px !important;
  }

  body.is-mobile.dark .footer {
    margin-top: 0 !important;
    padding: 28px 24px 24px !important;
    border-radius: 12px 12px 0 0 !important;
    background: #fff !important;
    color: #555 !important;
  }
  body.is-mobile.dark .footer a,
  body.is-mobile.dark .footer div { color: #555 !important; }
  body.is-mobile.dark .footer > div > div[style*="gap:630px"] {
    gap: 14px !important;
    color: #555 !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
  }
}