@charset "utf-8";
/* ==========================================================================
   white-paper/index-mobile.css — 资源中心首页 移动端适配 (≤768px)
   --------------------------------------------------------------------------
   2026-09-07 新建。本页正文大量使用「内联 style 固定宽」(1200px 容器 / 383px 图片 /
   588px 卡片 / 282px 卡片), 桌面 3 列 → 手机必须改成流式 2 列网格。
   仅本页引入, 不改动 style.css / index.css。

   ⚠️ 覆盖技巧: 内联样式带 !important 时 (如 <div class="banaa4" style="width:1200px !important">),
      同属性的 !important 覆盖不掉 (行内 !important 优先级最高), 必须改用
      max-width:100% !important —— 盒模型里 max-width 能压住 width, 与优先级无关。
   ========================================================================== */

@media (max-width: 768px) {

  /* ---------- 1. 区块标题行 (.banaa4) ---------- */
  .banaa4 {
    width: 100% !important;
    max-width: 100% !important;          /* 压制内联 width:1200px!important */
    margin: 24px 0 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    overflow: hidden;                    /* 子 div float:left 的清除 */
  }
  .banaa4::after {
    content: "";
    display: block;
    clear: both;
  }
  .banaa4 > div {
    float: none !important;
    display: block !important;
    line-height: 1.4 !important;
    font-size: 20px !important;
  }
  .look-more {
    float: none !important;
    display: block !important;
    margin-top: 6px !important;
    padding-right: 0 !important;
    text-align: right !important;
    font-size: 13px !important;
  }

  /* ---------- 2. 顶部 Banner ---------- */
  .bg-banner {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 12px 0 0 !important;
    padding: 26px 16px 24px !important;
    box-sizing: border-box !important;
    background-size: cover !important;
    background-position: center center !important;
    box-shadow: none !important;
  }
  .bg-banner > div {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .bg-banner > div > div {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  /* 说明文案 */
  .bg-banner > div > div:first-child {
    padding: 22px 0 0 !important;
    line-height: 1.75 !important;
  }
  .bg-banner font {
    font-size: 15px !important;
  }
  /* 「免费试用」按钮行 */
  .bg-banner > div > div:last-child {
    margin-top: 18px !important;
  }
  .big,
  .big2 {
    width: 132px !important;
    height: 40px !important;
    margin: 0 !important;
    border-radius: 6px !important;
  }

  /* ---------- 3. 白皮书卡片区 ---------- */
  .body-paper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }
  .paper1 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !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 > div:first-child {
    height: auto !important;
  }
  .paper2 img {
    display: block;
    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 与 blog-mobile.css 对齐 (用户反馈「层嵌套太多」):
       .paper3 只是 .paper2 白底卡片内部的标题条, 不该有自己的卡片外观 (原 index.css 给的是
       白底 + 4px 圆角 + 2px 浅灰边框, 在移动端白卡片里再浮一个小白框)。
       改为无背景/无边框/无圆角/无阴影。桌面端 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;
  }

  /* ---------- 4. 知识干货 (两行 flex) ---------- */
  /* 内联: style="display: flex; width:1200px;margin: auto;" */
  div[style*="display: flex; width:1200px"],
  div[style*="display: flex; width: 1200px"] {
    /* 每行只有 3 张卡, 2 列会出现「2+1」孤儿格 → 手机端改单列 (图片宽度 ≈ 桌面 383px) */
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }
  .paper-kuang,
  .paper-kuang3 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: block !important;
    /* 2026-09-10 用户反馈「层嵌套太多」+ 与列表页卡片统一:
       原结构是「裸图 + 2px 灰边框文字条」, 既没有卡片外观, 图又紧贴文字框边。
       这里把它做成和 .blog-card / .paper2 同一套白底卡片 (四边 12px 内边距)。 */
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid rgba(5,100,245,0.10) !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 24px rgba(5,100,245,0.10) !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  div[style*="height: 200px"] {
    height: auto !important;
  }
  /* 卡片里的图片容器 (脚本 2026-09-10 起同时带 .pk-thumb class, 旧页靠属性选择器兜底) */
  .pk-thumb,
  .paper-kuang > div:first-child,
  .paper-kuang3 > div:first-child {
    height: auto !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }
  div[style*="height: 200px"] img,
  div[style*="height: 180px"] img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  .pk-body,
  div[style*="height: 110px"] {
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 2px 2px !important;
    box-sizing: border-box !important;
    /* 去掉脚本原结构里的 2px #f2f3f2 边框 —— 外层已是白底卡片,
       里面再套一个边框框就是用户说的「层嵌套太多」。 */
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  .pk-text,
  div[style*="margin-left: 18px"] {
    margin: 0 !important;
  }
  div[style*="margin-top:16px"] {
    margin-top: 0 !important;
  }
  .theme-title {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin-top: 6px !important;
  }
  div[style*="height: 110px"] p:first-child {
    font-size: 13px !important;
    margin: 0 !important;
  }

  /* ---------- 5. 底部「CRM学院 / 在线帮助」双卡 ---------- */
  /* 内联: style="height: 200px;width: 588px;..." */
  .paper1 > div[style*="588px"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 12px !important;
    padding: 14px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08) !important;
  }
  .paper1 > div[style*="588px"] > div {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  .paper1 > div[style*="588px"] img {
    width: 110px !important;
    max-width: 60% !important;
    height: auto !important;
  }
  .book-text {
    display: block !important;
    margin-top: 4px !important;
    padding-left: 0 !important;
    font-size: 14px !important;
    text-align: left !important;
  }
  .book-text p,
  .book-text P {
    height: auto !important;
    line-height: 1.9 !important;
    margin: 0 !important;
  }
  .help {
    font-size: 13px !important;
    margin: 8px 0 0 !important;
  }
  /* 卡片下方的「免费试用」按钮 */
  .paper1 > div[style*="margin: auto"] {
    margin: 6px auto 0 !important;
    text-align: center !important;
  }
}