@charset "utf-8";
/* ==========================================================================
   white-paper/blog-mobile.css — 资源中心「列表页 + 文章详情页 + 白皮书详情页」移动端适配
   --------------------------------------------------------------------------
   2026-09-08 新建。覆盖 white-paper/ 下除 index.html(已用 index-mobile.css) 外的全部页面:
     A. 列表页   morearticle(1-8) / knowledge(1-3) / crm-knowledge(1-3) / marketing-solutions(1-3)
        —— 共享 blog.css, 结构 .blog-container/.blog-card/.blog-sidebar
     B. 文章详情  knowledge/ crm-knowledge/ marketing-solutions/ 子目录 (57 个)
        —— 结构 1100px 容器 + 750px 正文(float:left) + 310px 侧栏(float:right)
     C. 旧文章   根目录 230xxx (10 个) —— 同上, 但缺 viewport (由注入脚本补)
     D. 白皮书   根目录 sales/service/market/partner/profit/zhinan/microapps/CloudCC-AI (8 个)
        —— 结构 .banaa4 标题 + .banab7 顶部 + 960px 容器 + .banab7b 相关白皮书

   覆盖技巧 (血泪教训):
     1) 内联样式带 !important 时 (如 style="width:310px !important"),
        同属性 !important 覆盖不掉, 改用 max-width:100%!important ——
        盒模型里 max-width 能压住 width, 与优先级无关。
     2) 内联 style 有 "width:1100px" 与 "width: 1100px"(带空格) 两种写法, 属性选择器都写。
     3) 移动端删 UI 改 CSS 不删 HTML (float 元素一律 float:none 单列化, 不删 DOM)。
   ========================================================================== */

@media (max-width: 768px) {

  /* ========================================================================
     一、列表页 (A 类)
     ======================================================================== */
  .blog-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px 32px !important;
    box-sizing: border-box !important;
  }
  .blog-header {
    padding: 8px 0 16px !important;
  }
  .blog-header h1 {
    font-size: 24px !important;
    margin: 0 0 8px !important;
  }
  .blog-header p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  /* 分类 tab: 一行放下 (2026-09-14)
     原设置 15px + 右侧 24px 间距, 四个 tab 合计 404px, 超过 375/390/414 手机的
     可用宽度 (351/366/390) → 第 4 个「CRM行业解决方案」被裁一半, 且 .blog-tabs
     overflow-x:auto 会**露出一条灰色横向滚动条**(桌面浏览器/预览面板经典滚动条)。
     现: 字号 14px + space-between 均分, 四个 tab 合计 288px, 最小 375 屏也放得下
     (间隙 21~39px, 与 PC 的 32px 节奏一致); 滚动条按全站惯例隐掉, 极窄屏 (<340)
     仍可滑动但不再有丑滚动条。 */
  .blog-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 16px !important;
    white-space: nowrap !important;
    scrollbar-width: none;             /* Firefox */
    -ms-overflow-style: none;          /* 旧 Edge */
  }
  .blog-tabs::-webkit-scrollbar { display: none !important; }
  .blog-tabs a {
    flex: 0 0 auto !important;
    padding: 10px 0 !important;
    margin-right: 0 !important;
    font-size: 14px !important;
  }
  /* 主列 / 侧栏 单列化 */
  .blog-main {
    width: 100% !important;
    float: none !important;
  }
  .blog-sidebar {
    width: 100% !important;
    float: none !important;
    margin-top: 24px !important;
  }
  /* 卡片: 横排 → 竖排 (图在上, 文在下)
     2026-09-10 用户反馈两点:
       ① 卡片内容(图/文)与卡片边框之间没有间距 —— 图直接顶到圆角边框上。
          根因: 这里原写 .blog-card{padding:16px 0} (特异性 0,1,0),
          而 mobile-hf.css 的 .ai-card{padding:16px} 同为 0,1,0;
          本文件在 mobile-hf.css 之后加载 → "16px 0" 胜出, 左右内边距归零。
          改为 .blog-card.ai-card (0,2,0) 显式声明, 稳定压过两边, 四边 12px。
       ② 多层嵌套多余: 卡片 16px 大圆角里塞一个 4px 小圆角 + #f5f5f5 灰底的图容器,
          呈"盒子套盒子"。现把图容器圆角收到 10px、底色去掉, 只保留 overflow 裁切,
          让图和卡片是同一套视觉语言。 */
  .blog-card,
  .blog-card.ai-card {
    flex-direction: column !important;
    padding: 12px !important;
    background: #ffffff !important;
  }
  /* 卡片之间的间距: 12(下内边距) + 8 + 12(上内边距) = 32px, 与改版前的 16+16 节奏一致 */
  .blog-card + .blog-card {
    margin-top: 8px !important;
  }
  .blog-card-thumb {
    width: 100% !important;
    height: auto !important;
    flex-shrink: 1 !important;
    border-radius: 10px !important;
    background: transparent !important;
    overflow: hidden !important;
  }
  .blog-card-thumb img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
  }
  .blog-card-body {
    margin-left: 0 !important;
    margin-top: 12px !important;
    /* 2026-09-10 用户反馈「短文内容部分背景色去掉, 层嵌套太多」:
       它曾被 mobile-hf.css 的「卡片玻璃质感」选择器组误收, 多出一层浅蓝渐变底 +
       16px 圆角 + 描边 + 阴影, 和外层 .blog-card.ai-card 叠成"盒子套盒子"。
       根因已在 mobile-hf.css 里把它移出该组; 这里再显式声明一次兜底
       (本文件在 mobile-hf.css 之后加载, 同特异性下必胜), 保证文字区只有文字。 */
    background: none !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .blog-card-title {
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }
  .blog-card-desc {
    font-size: 13px !important;
    -webkit-line-clamp: 3 !important;
  }
  .blog-card-meta {
    font-size: 12px !important;
  }
  .blog-card-meta .tag {
    margin-left: 6px !important;
  }
  /* 分页: 允许换行 */
  .pagination {
    text-align: center !important;
    line-height: 2.4 !important;
  }
  .pagination-info {
    display: block !important;
    margin: 0 0 4px !important;
  }

  /* ========================================================================
     二、详情页 / 白皮书页通用: 压内联固定宽度 + 单列化 (B / C / D 类)
     ======================================================================== */
  /* --- 2.1 所有固定宽度容器 → 100% --- */
  [style*="width:1100px"], [style*="width: 1100px"],
  [style*="width:960px"],  [style*="width: 960px"],
  [style*="width:750px"],  [style*="width: 750px"],
  [style*="width:600px"],  [style*="width: 600px"],
  [style*="width:380px"],  [style*="width: 380px"],
  [style*="width:310px"],  [style*="width: 310px"],
  [style*="width:300px"],  [style*="width: 300px"],
  [style*="width:700px"],  [style*="width: 700px"],
  [style*="width:290px"],  [style*="width: 290px"],
  [style*="width:288px"],  [style*="width: 288px"],
  [style*="width:274px"],  [style*="width: 274px"],
  [style*="width:250px"],  [style*="width: 250px"],
  [style*="width:200px"],  [style*="width: 200px"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  /* 居中容器 (margin:0 auto / margin:auto) 换行后需要左右留白 */
  [style*="margin:0 auto"], [style*="margin: 0 auto"],
  [style*="margin:0px auto"], [style*="margin: 0px auto"],
  [style*="margin:auto"], [style*="margin: auto"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* --- 2.1b style.css 里的固定宽度「类」兜底 (无内联 style, 属性选择器命不中) --- */
  .head-topp,
  .banaa4,
  .banab7,
  .banab7b,
  .anniou27,
  .anniou277,
  .anniou27a,
  .anniou27ab,
  .paper1,
  .paper2,
  .paper3 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  .anniou27,
  .anniou277 {
    height: auto !important;
    line-height: 1.5 !important;
  }
  .anniou27a,
  .anniou27ab {
    float: none !important;
    height: auto !important;
    line-height: 1.6 !important;
    margin-left: 0 !important;
  }

  /* --- 2.2 float 单列化 --- */
  [style*="float: left"],  [style*="float:left"],
  [style*="float: right"], [style*="float:right"] {
    float: none !important;
  }

  /* --- 2.3 固定高度容器放开 ---
       2026-09-09 补 470px: 8 个白皮书页 .banab7 内联 height:470px。
       注意: 内联带 !important 时外部 CSS 压不动 (style 属性优先级最高),
       已同步把 HTML 里的 "height: 470px !important" 改成 "height: 470px"
       —— PC 端 style.css 是 .banab7{height:400px}, 内联 470px 仍胜出, PC 零变化。 */
  [style*="height:550px"], [style*="height: 550px"],
  [style*="height:470px"], [style*="height: 470px"],
  [style*="height:320px"], [style*="height: 320px"] {
    height: auto !important;
    min-height: 0 !important;
  }

  /* --- 2.4 图片自适应 --- */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* --- 2.5 标题字号 --- */
  .head-topp {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }
  .head-topp > div,
  .banaa4 > div {
    font-size: 22px !important;
    line-height: 1.4 !important;
    float: none !important;
  }
  .date-title {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 16px !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }

  /* --- 2.6 详情页右侧推荐栏（PC 310px 竖条 → 手机卡片列表） --- */
  /* 用 :has(.anniou27a) 定位侧栏容器, 兼容 width/float 空格不一致;
     外层改为全宽块, padding 同步 20px */
  div[style*="width:310px"]:has(.anniou27a),
  div[style*="width: 310px"]:has(.anniou27a) {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 32px 0 0 !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }
  /* 顶部"白皮书下载"banner 图居中 */
  div[style*="width:310px"]:has(.anniou27a) > div > div:first-child,
  div[style*="width: 310px"]:has(.anniou27a) > div > div:first-child {
    margin-left: 0 !important;
    text-align: center !important;
  }
  div[style*="width:310px"]:has(.anniou27a) > div > div:first-child img,
  div[style*="width: 310px"]:has(.anniou27a) > div > div:first-child img {
    height: auto !important;
    max-height: 120px !important;
    width: auto !important;
    max-width: 80% !important;
    margin: 0 auto !important;
    display: block !important;
  }
  /* 内部 1px 灰色竖线 → 改为顶部 1px 分隔线 */
  div[style*="width:310px"]:has(.anniou27a) > div,
  div[style*="width: 310px"]:has(.anniou27a) > div {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
    border-top: 1px solid #e0e5ee !important;
    padding: 20px 0 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  /* 加"相关推荐"标题 */
  div[style*="width:310px"]:has(.anniou27a) > div::before,
  div[style*="width: 310px"]:has(.anniou27a) > div::before {
    content: "相关推荐" !important;
    display: block !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #19355e !important;
    margin: 0 0 12px !important;
    padding-left: 4px !important;
    border-left: 3px solid #0564F5 !important;
  }
  /* 白皮书下载项卡片列表 */
  div[style*="width:310px"]:has(.anniou27a) .anniou27a,
  div[style*="width: 310px"]:has(.anniou27a) .anniou27a {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: block !important;
    margin: 8px 0 !important;
    padding: 12px 14px !important;
    background: #f5f7fa !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
  }
  div[style*="width:310px"]:has(.anniou27a) .anniou27a a,
  div[style*="width: 310px"]:has(.anniou27a) .anniou27a a {
    color: #0564F5 !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  /* 隐藏小方块装饰符号 */
  div[style*="width:310px"]:has(.anniou27a) .anniou27a span,
  div[style*="width: 310px"]:has(.anniou27a) .anniou27a span {
    display: none !important;
  }
  /* 在链接前加下载图标 */
  div[style*="width:310px"]:has(.anniou27a) .anniou27a a::before,
  div[style*="width: 310px"]:has(.anniou27a) .anniou27a a::before {
    content: "↓" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    background: #0564F5 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }
  /* 精彩活动早知道（二维码）—— 文本在子 div 里, style 选择器无法命中文本,
     改用侧边栏最后一个 div 选择器（它在 .anniou27a 列表之后） */
  div[style*="width:310px"]:has(.anniou27a) > div > div:last-of-type,
  div[style*="width: 310px"]:has(.anniou27a) > div > div:last-of-type {
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px 0 0 !important;
    padding: 16px !important;
    background: #f8f9fb !important;
    border-radius: 10px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  div[style*="width:310px"]:has(.anniou27a) > div > div:last-of-type > div:first-child,
  div[style*="width: 310px"]:has(.anniou27a) > div > div:last-of-type > div:first-child {
    width: 100% !important;
    height: auto !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #19355e !important;
    margin-bottom: 10px !important;
  }
  div[style*="width:310px"]:has(.anniou27a) > div > div:last-of-type img,
  div[style*="width: 310px"]:has(.anniou27a) > div > div:last-of-type img {
    width: 100% !important;
    max-width: 200px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* 正文行高/字号 */
  .article-body {
    font-size: 15px !important;
    line-height: 1.8 !important;
  }
  .article-body h1 {
    font-size: 18px !important;
  }
  .article-body h2 {
    font-size: 17px !important;
  }
  .article-body table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ========================================================================
     三、白皮书详情页专属 (D 类)
     ======================================================================== */
  /* 标题行 .banaa4 */
  .banaa4 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px 0 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .banaa4::after { content: ""; display: block; clear: both; }

  /* 顶部 .banab7 (书名 + 封面图 + 简介 + 下载按钮) */
  .banab7 {
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 16px 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .banab7 .anniou27 {
    margin-bottom: 12px !important;
  }
  /* 封面图 float:left → 居中块 */
  .banab7 > div[style*="float:left"],
  .banab7 > div[style*="float: left"] {
    text-align: center !important;
    margin-top: 0 !important;
  }
  .banab7 img {
    width: 200px !important;
    max-width: 70% !important;
    height: auto !important;
  }
  /* 简介区 float:right 380px → 单列 */
  .banab7 > div[style*="float:right"],
  .banab7 > div[style*="float: right"] {
    text-align: center !important;
    margin-top: 16px !important;
  }
  .banab7 .big {
    width: 132px !important;
    height: 40px !important;
    margin: 0 auto !important;
  }
  /* 正文容器 960px → 100% */
  .banab7 + div,
  div[style*="width:960px"] {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
  /* 相关白皮书区 .banab7b
     2026-09-09: 补 height:auto —— style.css 里 .banab7b{height:350px} + overflow:hidden,
     单列化后内容远超 350px 会被整段裁掉 (「相关白皮书」卡片 + 二维码区消失)。 */
  .banab7b {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .banab7b .anniou277 {
    margin-top: 16px !important;
    margin-left: 0 !important;
  }
  /* 相关白皮书卡片区 (.paper1/.paper2/.paper3 同 index.html) */
  .body-paper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    /* 2026-09-09: index.css 里 .body-paper{display:flex}, 两个子项 (.paper1 卡片区 +
       「精彩活动早知道」二维码区) 都被压成 width:100% → flex-shrink 把它们各砍到
       175px, 白皮书卡片只剩 82px 宽。移动端改 block 让两块各占整行。 */
    display: block !important;
  }
  .paper1 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding-right: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .paper2 {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
  .paper2 img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  .paper3 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 4px 2px !important;
    margin: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
    /* 2026-09-10 用户反馈「层嵌套太多」:
       它只是白皮书卡 .paper2 内部的标题条, 不该有自己的卡片外观。
       mobile-hf.css 已把它移出「玻璃组」; 这里再显式声明为无背景/无边框/无圆角/无阴影,
       回落成「白卡片里的一行居中标题」。桌面端 index.css 的 282×70 白底标题条不受影响。 */
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .paper3 p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
  }
  /* 「精彩活动早知道」二维码区 */
  .banab7b div[style*="float:right"],
  .banab7b div[style*="float: right"] {
    float: none !important;
    width: 100% !important;
    text-align: center !important;
    margin: 20px 0 0 !important;
  }
  .banab7b img {
    width: 200px !important;
    max-width: 70% !important;
    height: auto !important;
  }
}