/* ============================================================
 * responsive-pc.css — 前台 PC 站响应式断点层 (P1)
 * ------------------------------------------------------------
 * 加载顺序: 在 pc.css / responsive.css 之后，只覆盖窄屏。
 * 核心原则: 本文件所有规则都包在 @media (max-width: …) 内，
 *           ≥1200px 视口时完全不生效 → 桌面端逐像素不变。
 *           桌面布局由 pc.css 全权负责，本文件零触碰。
 * ============================================================ */

/* ============================================================
 * 平板及以下 (≤1199px): 开始流式化骨架
 * 仅去除 min-width:1200px 强制宽度，让容器随视口收缩。
 * ============================================================ */
@media (max-width: 1199px) {
  .header,
  .main,
  .main2 {
    min-width: 0;
  }
  .main {
    width: 100%;
    height: auto;        /* 解除首页固定 610px 高度 */
    margin: 20px auto 0;
  }
  .main2 {
    width: 100%;
  }
}

/* ============================================================
 * 平板 (≤991px): 固定左侧导航 → 静态全宽，堆叠到内容上方
 * 桌面端 .left-box 是 position:fixed 320px 悬浮导航，
 * 窄屏必须改为静态堆叠，否则会遮挡内容。
 * ============================================================ */
@media (max-width: 991px) {
  /* 固定的深色导航改为静态、全宽 */
  .left-box {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    float: none !important;
  }
  .left-con {
    width: 100% !important;
  }
  .menu-ul {
    width: 100% !important;
  }
  .menu-ul li a {
    width: 100% !important;
  }
  /* 桌面端用于给内容让位的占位 spacer 不再需要 */
  .left-box.left-box2 {
    display: none !important;
  }
  /* 内容区占满，不再与侧栏并排 */
  .main-box {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
  }
  /* 首页双栏模块堆叠为单列 */
  .m-con1,
  .m-con2 {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
    height: auto !important;
  }
}

/* ============================================================
 * 手机 (≤767px): 完全单列重排
 * ============================================================ */
@media (max-width: 767px) {
  /* ---------- 头部: 堆叠而非横排 ---------- */
  .header {
    height: auto !important;
    min-width: 0 !important;
    padding: 10px 0;
  }
  .logo {
    width: auto !important;
    float: none !important;
    height: auto !important;
    padding: 8px 12px;
  }
  .logo img {
    height: 48px;
    width: auto;
  }
  .h-txt {
    float: none !important;
    padding-left: 12px !important;
    line-height: 1.4 !important;
    height: auto !important;
    font-size: 16px !important;
  }
  .top-box {
    float: none !important;
    height: auto !important;
    line-height: 1.8 !important;
    padding: 6px 12px !important;
    text-align: center;
  }
  .top-box a {
    padding: 0 8px;
  }

  /* ---------- 强制内联固定宽度元素改为 100% ----------
     覆盖模板里 style="width:NNNpx" 的硬编码宽度
     (搜索框、占位块等)，避免手机横向溢出。 */
  .main2 [style*="width:"],
  .main [style*="width:"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ---------- 表格安全网 ----------
     宽数据表(.main-con 内)在手机上可横向滚动，
     既不撑破布局，也不丢内容。 */
  .main-con {
    overflow-x: auto !important;
  }
  table {
    width: 100% !important;
  }

  /* ---------- 首页模块高度解除固定 ---------- */
  .m-tab1,
  .m-li1,
  .m-li2,
  .m-li3,
  .m-li4 {
    height: auto !important;
  }

  /* ---------- 右侧悬浮工具在手机上隐藏，避免遮挡 ---------- */
  .r-main,
  .r-box {
    display: none !important;
  }

  /* ---------- 弹窗宽度自适应 (pc.css 已固定居中) ---------- */
  .tit-main {
    width: 92vw !important;
    max-width: 92vw !important;
  }

  /* ---------- 通用收敛 ---------- */
  body {
    font-size: 14px;
  }
  .main-box {
    padding: 0 8px;
  }
}