/* ============================================================
   mobile-fix.css — 手机端修复层 v1（2026-09-20）
   站点：www.bxlssws.com（邦熙律所）
   ------------------------------------------------------------
   原则：
   1. 全部规则包在 @media (max-width:768px) 内，
      PC 端（>768px）浏览器不读取，样式零变化。
   2. 只做追加，不修改 style.css 或任何原有文件。
   3. 带 !important 的规则仅用于压过 HTML 里的内联样式
      （width:1256px / width:500px / width:276px），
      同样只在 ≤768px 生效。
   ------------------------------------------------------------
   部署（二选一）：
   A. 把本文件上传到 /template/pc/skin/css/mobile-fix.css，
      然后在 index.htm 的 </head> 前、style.css 那行之后加：
      <link rel="stylesheet" href="/template/pc/skin/css/mobile-fix.css">
   B. 或者直接把本文件内容追加到 style.css 文件末尾
      （效果相同，但以后升级模板时记得它是外来的）。
   ============================================================ */

@media screen and (max-width: 768px) {

  /* ---------- 0. 全局兜底：禁止横向溢出 ---------- */
  html, body {
    overflow-x: hidden;
  }
  body .main, body .footer, body .copyright, body .link {
    max-width: 100%;
    overflow: hidden;
  }

  /* ---------- 1. 律师团队横滑区 ----------
     原状：.pro_list 内联 width:1256px，手机上直接撑破屏幕
     改法：宽度归 100%，内部 ul 改 flex，律师卡片横向滑动 */
  .i_box4 .pro_list {
    width: 100% !important;               /* 压过内联 1256px */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0 12px 8px 12px;             /* 两侧留白，滚动区同样收边 */
    box-sizing: border-box;
  }
  .i_box4 .pro_list ul {
    display: flex;
    flex-wrap: nowrap;
  }
  .i_box4 .pro_list li {
    flex: 0 0 44vw;                       /* 用 vw 给确定宽度，一屏约两张卡片 */
    width: 44vw !important;
    max-width: 44vw;
    float: none !important;
    margin-right: 3vw;
    box-sizing: border-box;
  }
  .i_box4 .pro_list li .imgauto {
    width: 100%;
    height: auto;
  }
  .i_box4 .pro_list li .imgauto img {
    width: 100% !important;               /* 压过内联 width:276px */
    height: auto !important;              /* 压过内联 height:286px */
    display: block;
  }

  /* ---------- 2. 案例/问答列表（法律案例、法律问答） ----------
     原状：每条 li 内联 width:500px；日期用 float:right + 百分比宽度，
     窄屏下会顶出容器右边。
     改法：整宽排列，改 flex 两端对齐，日期锁在右侧且不换行不溢出。 */
  .i_box6 .list ul li {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100% !important;               /* 压过内联 500px */
    line-height: 1.9 !important;          /* 压过内联 41px */
    height: auto !important;
    float: none !important;
    box-sizing: border-box;
    overflow: visible;
  }
  .i_box6 .list ul li a {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    max-width: none;
    float: none !important;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: inherit;
  }
  .i_box6 .list ul li span {
    flex: 0 0 auto;
    float: none !important;
    width: auto !important;
    text-align: right;
    white-space: nowrap;
    line-height: inherit;
  }

  /* ---------- 3. 法律资料区两栏 → 上下堆叠 ---------- */
  .i_box6 .box .fl,
  .i_box6 .box .fr {
    width: 100% !important;
    float: none !important;
    margin-bottom: 24px;
  }

  /* ---------- 4. 精英团队三张大图（i_box3）→ 单列 + 缩小 ----------
     注：尺寸由第 12 节统一控制，这里只负责取消浮动布局 */

  /* ---------- 5. 关于邦熙三条亮点（box5_lisst）→ 单列 ---------- */
  .box5_lisst .list ul li {
    width: 100% !important;
    float: none !important;
    margin-bottom: 14px;
  }

  /* ---------- 6. 页脚两栏 → 单列 ---------- */
  .footer .box .fl,
  .footer .box .mid {
    width: 100% !important;
    float: none !important;
    margin-bottom: 16px;
    text-align: left;
  }

  /* ---------- 7. 专业领域一排链接允许换行 ---------- */
  .box_tit p {
    white-space: normal;
    word-break: break-all;
  }
  .i_box1 .box_tit p a {
    display: inline-block;
    margin: 3px 5px;
  }

  /* ---------- 9. 板块标题字号修复 ----------
     原状：原 CSS 在 ≤450px 时把标题写成 .2rem（=3.2px），
     但站点没有配套的根字号缩放 JS，导致手机上标题小到看不清。
     改法：拨回正常像素值。 */
  .box_tit h3 {
    font-size: 26px !important;           /* 专业领域/律师团队/关于邦熙/法律资料 */
    font-weight: bold;
  }
  .box_tit p {
    font-size: 14px !important;
  }
  .fl_tit p span,
  .fr_tit p span {
    font-size: 22px !important;           /* 法律案例/法律问答 小标题 */
  }
  .fl_tit p i,
  .fr_tit p i {
    font-size: 13px !important;
  }
  .fl_tit a,
  .fr_tit a {
    font-size: 14px !important;
  }
  /* “查看更多”按钮：原 CSS 手机断点写成 .115rem（≈1.8px） */
  .more a {
    font-size: 15px !important;
    width: 120px !important;
    height: 44px !important;
    line-height: 44px !important;
  }

  /* ---------- 10. 板块标题离区块顶部的间距 ----------
     原状：手机断点把板块 padding-top 压到 20px，而标题上方
     60px 的英文水印 span 在手机上是隐藏的（原本兼作撑高），
     导致标题贴顶。补回呼吸空间。 */
  .i_box1 {
    padding-top: 44px !important;         /* 专业领域 */
  }
  .i_box4 {
    padding-top: 44px !important;         /* 律师团队 */
  }
  .i_box5 {
    padding-top: 44px !important;         /* 关于邦熙 */
  }

  /* ---------- 11. 律师团队列表页（/team/） ----------
     原状：ul 内联 width:1000px；每张卡片内联 min-width:271px、
     height:485px；照片内联 273x273。手机上溢出且内容被裁。
     改法：单列堆叠，宽高全部放开自适应。 */
  .prolist ul {
    width: 100% !important;               /* 压过内联 1000px */
    margin: 0 !important;
    padding: 0 14px !important;           /* 两侧留白 */
    box-sizing: border-box;
  }
  .prolist ul li {
    width: 100% !important;
    min-width: 0 !important;              /* 压过内联 min-width:271px */
    height: auto !important;              /* 压过内联 height:485px */
    float: none !important;
    margin: 0 0 16px 0 !important;
    box-sizing: border-box;
  }
  .prolist ul li .imgauto {
    width: 100% !important;               /* 压过内联 273px */
    height: auto !important;              /* 压过内联 273px */
    margin: 0 auto;
  }
  .prolist ul li .imgauto img {
    width: 100% !important;               /* 压过内联 273px */
    height: auto !important;
    display: block;
  }
  /* 页面顶部简介（内联 width:70%）放宽到整宽 */
  .page_main .wrap > div[style*="width:70%"] {
    width: 100% !important;
    padding: 0 4%;
    box-sizing: border-box;
  }

  /* ---------- 12. 中部三张大图（精英团队/专业理念/发展方向）----------
     原状：手机单列时占满整屏宽，偏大
     改法：缩到 74% 宽并居中（选择器与原 CSS 同形，保证优先级） */
  .i_box3 .box ul li {
    width: 74% !important;
    margin: 10px auto !important;
    float: none !important;
  }

  /* ---------- 8. 浮动客服/电话按钮：贴边且不遮内容 ---------- */
  .float-wechat { right: 12px; bottom: 40px; }
  .float-tel    { right: 12px; bottom: 104px; }

}