@charset "utf-8";
/* ==========================================================================
   速捷工控官网 —— 移动端修复补丁（"走进速捷工控" 区块）
   --------------------------------------------------------------------------
   使用方法：
   1. 上传本文件到 /skin/css/mobile-fix.css
   2. 在模板 <head> 中，放在 final-effect.css 之后、home-redesign.css 之前
      或之后（只要在 final-effect.css 之后即可）：
        <link rel="stylesheet" href="/skin/css/mobile-fix.css">
   3. 清除浏览器 / 服务器 CSS 缓存（Ctrl+F5）

   --------------------------------------------------------------------------
   【问题根因】
   final-effect.css 中，移动端 @media(max-width:760px) 写在前面，
   而后面又追加了多条**不带媒体查询**的桌面端规则，靠"后写覆盖前写"
   来改样式。CSS 层叠中同权重下后来者胜，于是移动端的这些设置全部失效：

     .aboutGrid   grid-template-columns  移动端想设 1fr  → 被桌面 1.04fr .96fr 覆盖
     .aboutGrid   gap                    移动端想设 32px → 被桌面 52px 覆盖
     .aboutCopy h2 font-size             移动端想设 30px → 被桌面 38px 覆盖
     .aboutCopy h3 font-size             移动端想设 21px → 被桌面 22px 覆盖
     .aboutCopy p  font-size             移动端想设 13px → 被桌面 15px!important 覆盖
     .about       padding-top            移动端想设 52px → 被桌面 64px 覆盖

   结果：手机上"走进速捷工控"仍是**左右双栏**（文字栏被压到约 150px 宽，
   一行只放得下三四个字），标题、正文也偏大，图片比例失衡。

   【修复思路】
   本文件把移动端样式放在**独立的媒体查询 + 选择器权重加高**中，
   并用 !important 兜底，确保在所有断点下都稳定生效，不再受层叠顺序影响。
   ========================================================================== */


/* ==========================================================================
   一、平板 ≤ 900px：提前转单栏，避免 760px~900px 之间被挤压
   ========================================================================== */
@media screen and (max-width: 900px) {

  .about {
    padding-top: 52px !important;
    padding-bottom: 0 !important;
  }

  .about > .wrap,
  .about .aboutGrid {
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
  }

  /* ★ 核心修复：强制单列，文字与图片上下堆叠 */
  .about .aboutGrid {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    align-items: stretch !important;
  }

  .about .aboutCopy,
  .about .aboutPhoto {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}


/* ==========================================================================
   二、手机 ≤ 760px：完整移动端排版
   ========================================================================== */
@media screen and (max-width: 760px) {

  /* ---------- 区块间距 ---------- */
  .about {
    padding-top: 48px !important;
    padding-bottom: 0 !important;
    background: #fff !important;
  }

  .about > .wrap {
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
  }

  /* ---------- 双栏 → 单栏（核心） ---------- */
  .about .aboutGrid {
    display: block !important;
    grid-template-columns: none !important;
    gap: 28px !important;
    align-items: stretch !important;
  }

  /* 文字块：强制撑满，不再被挤压 */
  .about .aboutCopy {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-align: left !important;
  }

  /* ---------- 标题：收紧字号与留白 ---------- */
  .about .aboutCopy h2 {
    font-size: 26px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    background: none !important;
    text-align: left !important;
    word-break: break-word !important;
  }

  .about .aboutCopy h3 {
    font-size: 17px !important;
    line-height: 1.65 !important;
    font-weight: 700 !important;
    max-width: 100% !important;
    margin: 0 0 12px !important;
    text-align: left !important;
    word-break: break-word !important;
  }

  .about .aboutCopy h4 {
    display: inline-block !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin: 0 0 14px !important;
    padding: 5px 10px !important;
    border-radius: 3px !important;
  }

  /* ---------- 正文 ---------- */
  .about .aboutCopy p {
    font-size: 14px !important;
    line-height: 1.85 !important;
    margin: 0 0 10px !important;
    color: #4e6272 !important;
    text-align: justify !important;
    word-break: break-word !important;
  }

  /* ---------- 按钮：并排铺满 ---------- */
  .about .aboutActions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 20px 0 0 !important;
    padding: 0 !important;
  }

  .about .aboutActions a {
    display: block !important;
    padding: 12px 8px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    white-space: nowrap !important;
    border-radius: 4px !important;
  }

  /* ---------- 图片：单列后改为 16:9，铺满宽度 ---------- */
  .about .aboutPhoto {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px 0 0 8px !important;
    border-top-width: 6px !important;
    border-left-width: 6px !important;
    border-top-style: solid !important;
    border-left-style: solid !important;
  }

  .about .aboutPhoto > .photo {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
    max-height: none !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }

  /* 兼容极老浏览器：aspect-ratio 不生效时回退 */
  @supports not (aspect-ratio: 16 / 9) {
    .about .aboutPhoto > .photo { height: 200px !important; }
  }

  .about .aboutPhoto > span {
    left: 16px !important;
    right: 12px !important;
    bottom: 12px !important;
    padding: 9px 12px !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    border-radius: 3px !important;
  }

  /* ---------- 底部数据条 ---------- */
  .about .stats {
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
    margin: 32px auto 0 !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    box-shadow: none !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }

  .about .stats div {
    padding: 18px 8px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
  }

  .about .stats div:nth-child(odd)  { border-right: 1px solid rgba(255, 255, 255, .12) !important; }
  .about .stats div:nth-child(n+3)  { border-bottom: 0 !important; }

  .about .stats b {
    font-size: 22px !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
    display: block !important;
  }

  .about .stats span {
    font-size: 12px !important;
    line-height: 1.4 !important;
    display: block !important;
  }
}


/* ==========================================================================
   三、超小屏 ≤ 380px：进一步压缩，避免"很窄"
   ========================================================================== */
@media screen and (max-width: 380px) {

  .about { padding-top: 40px !important; }
  .about > .wrap { width: calc(100% - 24px) !important; }

  .about .aboutGrid { gap: 22px !important; }

  .about .aboutCopy h2 { font-size: 23px !important; }
  .about .aboutCopy h3 { font-size: 16px !important; }
  .about .aboutCopy p  { font-size: 13.5px !important; }
  .about .aboutCopy h4 { font-size: 11.5px !important; }

  .about .aboutActions { grid-template-columns: 1fr !important; }

  .about .aboutPhoto > .photo { height: 168px !important; aspect-ratio: auto !important; }

  .about .stats div  { padding: 15px 6px !important; }
  .about .stats b    { font-size: 20px !important; }
  .about .stats span { font-size: 11px !important; }
}


/* ==========================================================================
   四、安全兜底：防止任何横向溢出导致"看起来很窄"
   ========================================================================== */
@media screen and (max-width: 900px) {

  .about,
  .about * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 长串英文/数字强制换行 */
  .about h2,
  .about h3,
  .about h4,
  .about p,
  .about span,
  .about a {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  /* 消除 iOS 字体自动放大导致的布局异常 */
  .about h2,
  .about h3,
  .about h4,
  .about p,
  .about a {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }
}