/* ============================================================
   sale-cloud/salefeatures.html 移动端适配
   作用域: 仅 @media (max-width: 768px) 生效, 桌面端零影响
   目标: 接入共享移动端头 (mobile-hf.css + mobile-nav.js) 后,
        对主体内容做重排版 —— 两栏堆叠、固定宽图自适应、字号收敛

   本页与 sale-cloud/salecloud.html / product.html 同属一套模板
   (change.css + pro-god.css + 共享头尾 JS), 通用段落沿用那两页已验证的写法;
   本页独有区块单独处理:
     .salefeature  顶部横幅 —— 「绝对定位文字层压在右对齐大图上」的特殊结构
     .pad-top-50   三块「获得更多潜在客户 / 提高效率 / 洞悉先机」
   ============================================================ */

/* ---- 功能卡片网格 (.sale-func-grid) ----
   2026-09-11: 左栏 13 个功能项的卡片化(AI 风格, 多行多列 + 渐变矢量图标),
   纯插入在首屏大图下方; 桌面端由左栏 .pro-left 承担 → display:none 基线,
   仅 ≤768px 显示。放在 @media 外给桌面端一个干净的隐藏基线。 */
.sale-func-grid { display: none; }

@media (max-width: 768px) {

  /* ---- 容器: 1180px 固定宽 → 整宽自适应 ---- */
  .pro-mes {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
  }

  /* ---- 左侧子导航 (.pro-left 187px 浮动) → 移动端整块隐藏 ----
     2026-09-11 第三版(用户): 「销售云」标题行也去掉 (对齐 salecloud.html 同款处理),
     位置信息已由吸附加条「产品概览 › 销售云 › 功能」交代;
     原 13 个功能项改为首屏大图下方的卡片网格 .sale-func-grid (见下方规则) ---- */
  .pro-mes .pro-left { display: none !important; }

  /* ---- 右侧内容区 (.pro-right 990px 浮动) → 整宽 ---- */
  .pro-mes .pro-right {
    width: 100% !important;
    float: none !important;
    height: auto !important;
    margin-top: 16px !important;
  }

  /* ---- 层级导航条「产品概览 › 销售云 › 功能」吸附条 (2026-09-11 用户设计) ----
     与 salecloud.html 第三版同款: 移动端改为单行、去掉「‹ 返回销售云」按钮、
     页面滚动时 sticky 吸附在固定头 (#header 高 64px / z-index 9990) 正下方.
     视觉: 上一层 = 链接蓝 #0564F5, 当前页「功能」= 浅蓝胶囊 #eef3ff + 深蓝字;
     吸附时白底 + 底部分隔线 + 投影, 负 margin 抵消 .pro-mes 左右 12px padding 撑满屏宽.
     ⚠️ 基类(sale-crumb.css)移动端给 .sale-crumb-path 设了 width:100%,
        会顶掉负 margin 的自动撑宽 → 必须显式 width:calc(100% + 24px) 才能满宽. */
  .pro-mes .sale-crumb {
    position: sticky !important;
    top: 64px !important;
    z-index: 9960 !important;         /* < #header 9990 */
    width: calc(100% + 24px) !important;
    margin: 0 -12px 12px !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    padding: 8px 16px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #eef0f4 !important;
    box-shadow: 0 8px 16px -10px rgba(16, 42, 90, 0.22) !important;
  }
  .pro-mes .sale-crumb .sale-crumb-back { display: none !important; }
  .pro-mes .sale-crumb .sale-crumb-path {
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pro-mes .sale-crumb .sale-crumb-path::-webkit-scrollbar { display: none; }
  .pro-mes .sale-crumb .sale-crumb-path a {
    color: #0564F5 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }
  .pro-mes .sale-crumb .sale-crumb-path .cur {
    padding: 3px 11px !important;
    border-radius: 999px !important;
    background: #eef3ff !important;
    color: #1c3d7a !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    white-space: nowrap !important;
  }

  /* ---- 销售承诺看板隐藏 (2026-09-11 用户: 凑整 12 个 = 4 列 × 3 行) ----
     HTML 节点保留, 仅移动端卡片网格内隐藏; 左栏/桌面均不受影响 */
  .sale-func-grid .func-card[href*="Salescommitmentboard"] { display: none !important; }

  /* ---- 功能卡片网格: 4 列 × 3 行 (13 卡隐藏承诺看板后 12 卡排满, 用户确认),
          紧凑版: 小图标砖 + 短文案 + 小字号 ---- */
  .sale-func-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 4px 0 18px !important;
    padding: 0 !important;
  }
  .sale-func-grid .func-card {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    width: auto !important;
    height: auto !important;
    float: none !important;
    padding: 9px 8px 8px !important;
    background: linear-gradient(180deg, #ffffff, #f6f9ff) !important;
    border: 1px solid #e3ebf7 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px -8px rgba(16, 42, 90, 0.18);
    -webkit-tap-highlight-color: transparent;
  }
  .sale-func-grid .func-card:active {
    border-color: #bcd3f5 !important;
    box-shadow: 0 2px 8px -6px rgba(16, 42, 90, 0.28);
  }
  /* 矢量图标砖: 圆形浅色底 + 同色系彩色线性图标 (2026-09-11 用户参考图风格,
     替换原品牌渐变砖) —— 5 色循环用 nth-child 分配, HTML 零改动 */
  .sale-func-grid .func-ico {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #e8f7ef !important;
    color: #27ae60 !important;
    box-shadow: none !important;
  }
  .sale-func-grid .func-card:nth-child(5n+2) .func-ico { background: #f1ecfd !important; color: #7c3aed !important; }
  .sale-func-grid .func-card:nth-child(5n+3) .func-ico { background: #e8f0fe !important; color: #2563eb !important; }
  .sale-func-grid .func-card:nth-child(5n+4) .func-ico { background: #fdf1e0 !important; color: #f59a23 !important; }
  .sale-func-grid .func-card:nth-child(5n+5) .func-ico { background: #e4f6f3 !important; color: #0fae94 !important; }
  .sale-func-grid .func-ico svg {
    width: 18px !important;
    height: 18px !important;
    display: block;
  }
  .sale-func-grid .func-name {
    font-size: 12px !important;
    line-height: 1.3 !important;
    color: #1c3d7a !important;
    font-weight: 600 !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  /* ---- 容器链整宽 (桌面 .pro-two 写死 990px, 会把子元素全撑宽,
         导致图片 max-width:100% 解析到 990 而非容器实宽) ---- */
  .pro-right .pro-two,
  .pro-mes .cell-sale,
  .clear-both {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* ---- 所有固定宽图片自适应 (横幅 792px / 产品图 503px / 442px) ---- */
  .pro-mes img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ================= 顶部横幅 .salefeature =================
     桌面结构 (HTML 里三层 inline 样式写死):
       .salefeature  width:890 + padding 10/50/0/100 (原内联 !important) = 1040px
         └ div[1] height:240px; text-align:right   → <img xiaoshou.png> 792×240 右对齐
         └ div[2] height:auto                      → 一个 position:absolute 的文字层
                                                     (top:50 left:40 width:580 z-index:999)
     文字层是绝对定位, 所以 div[2] 自身高度塌成 0; 而那张 792×240 的图里图形本体
     只占右半 (内容列 400~791), 左半是透明区, 正好给文字留白 —— 这才凑成
     「左文字 + 右图形」的桌面观感.
     手机: 580px 文字层 + 792px 图 + 100px 左内边距 = 必然横向溢出,
           且文字层浮在图上会互相压住 → 改成「文字在上、图形在下」的纵向流. */
  .pro-one .salefeature.salefeature-pad {
    display: flex !important;
    flex-direction: column-reverse !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 18px 14px 20px !important;
    box-sizing: border-box !important;
  }
  /* 子盒 1 = 图片行: 桌面的 height:240px / text-align:right 都不要了 */
  .pro-one .salefeature > div:nth-child(1) {
    height: auto !important;
    margin: 0 !important;
    text-align: center !important;
    line-height: 0 !important;
  }
  /* 子盒 2: 原高度靠里面的绝对定位文字层撑, 改回正常流后它才有真实高度 */
  .pro-one .salefeature > div:nth-child(2) { height: auto !important; }
  .pro-one .salefeature > div:nth-child(2) > div {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 14px !important;
    z-index: auto !important;
  }
  /* 内联写了 font-size:26px / 18px, 必须 !important 才压得住 */
  .pro-one .salefeature h2 {
    font-size: 18px !important;
    height: auto !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    margin: 0 0 8px !important;
  }
  .pro-one .salefeature p {
    font-size: 13px !important;
    line-height: 22px !important;
    text-align: left !important;
  }
  /* 图形本体只占原图右半 (内容列 400~791 / 792). 整图缩到 390 宽后图形只剩 ~193px
     太小、左半还是一大片透明 → 按内容区比例开窗 + object-fit:cover + 右对齐,
     等价于无损裁掉左侧透明区 */
  .pro-one .salefeature > div:nth-child(1) img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 392 / 240;
    object-fit: cover;
    object-position: right center;
  }

  /* ---- 各部分之间补间距 + 内容不贴边 ----
     桌面每块 .cell-sale 都是 margin:0 紧贴下一块 (靠 #fafafa/#fff 交替底色假装分区),
     移到手机上整页糊成一片 → 每块留 18px 呼吸; 桌面 .sale-con/.sale-right
     左右内边距分别只有 14px / 4px, 文字几乎贴着色块边缘, 统一由 .cell-sale 给.
     注: 本条 shorthand 带 !important, 桌面 .pad-top-50{padding-top:50px} 被它一并压掉,
         不需要再单独写 .pad-top-50 覆盖 */
  .pro-mes .cell-sale {
    padding: 22px 16px !important;
    margin-bottom: 18px !important;
    box-sizing: border-box !important;
  }
  /* .padding-px 桌面是 50px 50px 10px !important, 手机上过于空旷 */
  .pro-mes .padding-px { padding: 16px 16px 8px !important; }

  /* ---- 产品行: sale-left / sale-right 单列堆叠 ---- */
  .cell-sale .sale-con {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0 18px !important;      /* 左右内边距交给 .cell-sale, 避免重复叠加 */
    box-sizing: border-box !important;
  }
  .cell-sale .sale-left,
  .cell-sale .sale-right,
  .no-float,
  .no-potion {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }
  /* 桌面 .sale-left 有 HTML 内联 margin-top:50px / 图片内联 margin-top:30px(或 80px) */
  .cell-sale .sale-left { margin-top: 0 !important; line-height: 0 !important; }
  .cell-sale .sale-left img { width: 100% !important; max-width: 100% !important; height: auto !important; margin-top: 0 !important; }
  .cell-sale .sale-right { padding: 0 !important; }
  .clear-both { overflow: visible !important; }

  /* ---- 字号阶梯 (与 salecloud.html 移动端同一套, 两页视觉保持一致) ---- */
  .cell-sale .sale-con h4,
  .cell-sale h4 {
    height: auto !important;
    line-height: 1.4 !important;
    font-size: 17px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
  }
  .pro-mes h3 { font-size: 16px !important; }
  .cell-sale h3 { font-size: 15px !important; margin: 14px 0 6px !important; }
  .cell-sale .top-shou h3 { font-size: 15px !important; }
  .cell-sale .sale-right p,
  .cell-sale p { font-size: 13px !important; line-height: 22px !important; }
  .cell-sale .top-shou p { font-size: 13px !important; line-height: 22px !important; }

  /* ---- 按钮统一 AI 风格: 渐变胶囊 + 柔光投影 ----
     与首页 / product.html / salecloud.html 同一套 AI Design Tokens ---- */
  .pro-mes .free-shi,
  .pro-mes .free-video,
  .pro-mes .btn-block,
  .pro-mes .more_sales {
    display: inline-block !important;
    padding: 9px 22px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    color: #ffffff !important;
    background: linear-gradient(115deg, #0564F5 0%, #4a7bff 50%, #06bcd4 100%) !important;
    border: none !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 14px rgba(5, 100, 245, 0.28) !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }
  .pro-mes .free-shi,
  .pro-mes .free-video { margin: 0 !important; }

  /* ---- 「免费试用吧」区 ----
     历史 bug(桌面同样存在): pro-god.css:380 把 .bgcolor-blue{background:#00a1e0} 注释掉了,
     而 .font-color{color:#fff !important} 还在 → 白字落在浅底上, 整块基本看不见.
     移动端补回蓝底保证可读; 桌面端按「零影响」原则不动 (待用户确认) ---- */
  .pro-mes .cell-sale.bgcolor-blue { background: #00a1e0 !important; }
  .pro-mes .cell-sale.bgcolor-blue .font-color,
  .pro-mes .cell-sale.bgcolor-blue .sale-con h4 {
    color: #ffffff !important;
  }
  /* 该区按钮落在青蓝底上, 蓝渐变对比不足 → 反白胶囊 */
  .pro-mes .cell-sale.bgcolor-blue .free-shi {
    background: #ffffff !important;
    color: #0564F5 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
  }
  /* 该区配图 bg-close-img-hi2.png (442×450, 内容行 81~399, 上下共 131px 透明留白).
     这张图被 50+ 页面按 442×450 硬编码引用, 原图绝不能改 → 用 object-fit 按内容区
     开窗 (object-position 的 62% = 81/131), 只显示有内容的那一段,
     避免手机上多出 131px 空蓝带 */
  .pro-mes .cell-sale.bgcolor-blue .sale-left img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 442 / 319;
    object-fit: cover;
    object-position: center 62%;
  }

  /* ---- 底部 Tab 轮播区 (.div-dian: 桌面 #content 1000×270 + hover 翻页) ----
     沿用销售云页的处理: 这块是 5 个 SEO 长文面板 + 分页圆点, 桌面靠 hover 翻页,
     触屏上本来就不生效 → 移动端整体隐藏 (整页可省下 ~40% 长度) ---- */
  .div-dian { display: none !important; }
  .pro-mes #footer { display: none !important; }

  /* ---- 右侧悬浮「返回顶部」(fixed bottom:180px) 会一直压住正文 → 隐藏 ---- */
  #back-to-top { display: none !important; }
  /* ---- 左下角固定「订阅号」二维码 (fixed bottom/left:10px) 在 390px 屏上必然
         遮挡正文, 且与汉堡抽屉层级冲突 → 移动端隐藏 ---- */
  .qr_code_l { display: none !important; }

  /* ---- itemDisplay() / window.onscroll 会显示 190px 高的 #item_x_display 占位
         (桌面用来补偿 fixed 悬浮条); 本页图标条在 HTML 里本来就是注释掉的,
         移动端恒隐藏, 免得锚点跳转后多出一大块空白 ---- */
  .pro-mes [id$="_display"] { display: none !important; }
  /* 锚点跳转落点: 固定头 64px + 12px 余量 (本页无吸附条) */
  .pro-mes [id^="item_"] { scroll-margin-top: 76px !important; }
}
/* end @media (max-width: 768px) */