/* ==========================================================================
   响应式适配层（平板 / 手机）
   --------------------------------------------------------------------------
   背景：本页原为固定宽度(1180px)桌面布局，组件样式由 JS 在运行时注入，
        且大量使用 min-width / 固定 width / 绝对定位，在手机上会横向溢出。
   做法：本文件不改动原有任何资源，仅叠加媒体查询做自适应。
        （加 !important 是为了覆盖运行时注入的组件样式，且必须保持）
   断点：≥1200 桌面原样 | <1200 平板自适应 | <992 手机抽屉导航 | <560 小屏微调
   ========================================================================== */

/* ---------------------------- 全局：消除横向溢出 ---------------------------- */
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; }

/* 移动端汉堡按钮（默认隐藏，桌面不出现） */
.wb-navbtn { display: none; }

/* ==========================================================================
   平板 & 手机： 宽度 < 1200px
   ========================================================================== */
@media (max-width: 1199px) {

  /* ---------- 顶部导航 ---------- */
  .head { min-width: 0 !important; }
  .head-box {
    width: 100% !important;
    max-width: 1180px;
    box-sizing: border-box;
    padding: 0 16px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }
  .menu { float: none !important; }

  /* ---------- 首屏 Banner ---------- */
  .banner { min-width: 0 !important; max-width: 100% !important; }
  .banner-img-box { height: 260px !important; }
  .banner-img-box img {
    width: 100% !important;
    height: 260px !important;
    object-fit: cover;
    left: 0 !important;
    transform: none !important;
  }
  .banner-title,
  .banner-title.center {
    width: 100% !important;
    /* 原节点带内联 height:296px，与缩短后的 banner 不匹配，需重置 */
    height: auto !important;
    bottom: 26px !important;
  }
  .banner-title.index-page { transform: translate(-50%, -30px) !important; }
  .banner-title h1 p:first-of-type {
    font-size: 24px !important;
    height: auto !important;
    line-height: 1.35 !important;
    padding: 0 16px;
    text-align: center;
  }
  .decoration-line, .line { width: 200px !important; }

  /* ---------- 通用容器 ---------- */
  .section { min-width: 0 !important; }
  .section-box {
    width: 100% !important;
    max-width: 1152px;
    box-sizing: border-box;
    padding: 40px 16px !important;
  }
  .section-box h2 { font-size: 22px !important; margin-bottom: 26px !important; }
  .section-content { width: 100% !important; }
  .container { width: 100% !important; }

  /* ---------- 实验室建设方案：左文右图 → 上下排列 ---------- */
  .lab-build-solution { display: block; }
  .lab-build-solution p {
    width: 100% !important;
    height: auto !important;
    float: none !important;
  }
  .lab-build-solution img {
    position: static !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    display: block;
    margin-bottom: 16px;
  }

  /* ---------- 标签页：4 项折成 2×2 ---------- */
  .tab-title-list {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    padding: 20px 0 18px !important;
  }
  .tab-title-list li {
    flex: 1 1 44% !important;
    font-size: 14px !important;
    height: 46px !important;
    line-height: 46px !important;
    border-right: none !important;
    border-radius: 2px;
  }

  /* ---------- 课程体系（整张长图） ---------- */
  .container.course { text-align: center; }
  .container.course img {
    width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* ---------- 活动 / 合作案例卡片：取消固定尺寸与绝对定位 ---------- */
  .list-item {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 20px !important;
  }
  .list-item.vertical,
  .list-item.vertical-orange,
  .list-item.vertical-triple {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin-right: 0 !important;
  }
  .list-item .img-box,
  .list-item.vertical .img-box,
  .list-item.vertical-triple .img-box,
  .list-item.vertical-orange .img-box {
    float: none !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    height: 220px !important;
    overflow: hidden;
  }
  .list-item .img-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
  /* 位置/尺寸重置（刻意不改配色） */
  .list-item .info,
  .list-item.left .info,
  .list-item.right .info,
  .list-item.vertical .info,
  .list-item.vertical-triple .info,
  .list-item.vertical-orange .info {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    padding: 18px 16px 20px !important;
  }
  /* 活动卡（白字）原为半透明叠层，移到图下方后改成实底，保证对比度 */
  .list-item.vertical .info,
  .list-item.vertical-triple .info { background: #0b1c34 !important; }
  /* 图文卡（深字）保持透明，沿用白色区块背景，避免深字压深底 */
  .list-item.left .info,
  .list-item.right .info,
  .list-item.vertical-orange .info { background: transparent !important; }
  .list-item .info p:first-of-type { margin-top: 0 !important; }
  .list-item .info button {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin-top: 12px;
  }

  /* ---------- 联系我们 ---------- */
  .contact-us {
    height: auto !important;
    padding: 40px 16px 48px !important;
    box-sizing: border-box;
  }
  .contact-us p {
    margin: 22px auto 30px !important;
    font-size: 16px !important;
    line-height: 1.9 !important;
    padding: 0 4px;
  }

  /* ---------- 页脚：绝对定位 → 流式堆叠 ---------- */
  .foot { min-width: 0 !important; height: auto !important; }
  .foot-box {
    width: 100% !important;
    max-width: 1180px;
    height: auto !important;
    padding: 32px 16px 0 !important;
    box-sizing: border-box;
  }
  .foot .info {
    width: 100% !important;
    height: auto !important;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-bottom: 26px;
  }
  .foot .logo {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
  }
  .foot .site-map {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 16px;
  }
  .foot .site-map .column { width: auto !important; }
  .foot .wechat {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }
  .foot .copyright { padding: 22px 16px 30px !important; line-height: 1.8; }
}

/* ==========================================================================
   手机： 宽度 < 992px —— 抽屉式导航
   ========================================================================== */
@media (max-width: 991px) {

  /* 汉堡按钮（由 responsive.js 注入到 body，规避 Vue 重渲染） */
  .wb-navbtn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    position: fixed;
    top: 10px;
    right: 12px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    box-sizing: border-box;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10000;
  }
  .wb-navbtn span {
    display: block;
    height: 2px;
    width: 100%;
    background: #fff;
    border-radius: 2px;
    transition: transform .25s, opacity .25s;
  }
  body.wb-nav-open .wb-navbtn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.wb-nav-open .wb-navbtn span:nth-child(2) { opacity: 0; }
  body.wb-nav-open .wb-navbtn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* 导航抽屉 */
  body.wb-nav-open { overflow: hidden; }
  .menu {
    position: fixed !important;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    margin: 0 !important;
    padding: 6px 0 60px !important;
    background: rgba(8, 26, 57, .99);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: none !important;
    z-index: 9999;
  }
  body.wb-nav-open .menu { display: block !important; }

  .menu > li {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
  .menu > li > p {
    min-width: 0 !important;
    line-height: 52px !important;
    text-align: left !important;
    padding: 0 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .menu > li > p > a { padding: 0 !important; display: block !important; }
  .menu li .menu-cover { display: none !important; }

  /* 二级菜单：默认收起，点击展开 */
  .menu li .dropdown-menu {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    display: none;
    background: rgba(255, 255, 255, .05) !important;
  }
  .menu li.wb-sub-open .dropdown-menu { display: block !important; }
  .dropdown-menu a {
    text-align: left !important;
    height: auto !important;
    line-height: 1.5 !important;
    padding: 10px 20px 10px 34px !important;
  }
  .dropdown-menu a span { line-height: 1.5 !important; }
}

/* ==========================================================================
   小屏手机： 宽度 < 560px
   ========================================================================== */
@media (max-width: 560px) {
  .banner-img-box,
  .banner-img-box img { height: 200px !important; }
  .banner-title h1 p:first-of-type { font-size: 20px !important; letter-spacing: 1px !important; }
  .decoration-line, .line { width: 150px !important; }
  .section-box { padding: 30px 14px !important; }
  .section-box h2 { font-size: 19px !important; }
  .list-item .img-box,
  .list-item.vertical .img-box { height: 180px !important; }
  .tab-title-list li { font-size: 13px !important; }
  .foot .site-map { grid-template-columns: repeat(2, 1fr); gap: 6px 12px; }
}