@charset "utf-8";
/* ==========================================================================
   得宝月子中心 · 移动端体验改造 V4（2026-09-17）
   --------------------------------------------------------------------------
   定位：V1–V3 已清掉结构性硬伤（抽屉、工具条、横向溢出、Banner 裁切）之后，
         第二轮「全站观感」修补。独立成文件，便于单独回滚：
           回滚 = 删掉 pc/header.htm 中本文件的引入行，并删除本文件。
   生效范围：≤1100px / ≤767px；≥1101px 桌面端零改动。
   依据：19 类页面在 390px 真实视口的无头实测（横向溢出 / 可点元素尺寸 /
         文字截断 / 区块轮廓），逐条定位到具体 CSS 规则，非推测。
   --------------------------------------------------------------------------
   §1 盒模型：修「百分比宽 + 左右 padding」把包裹层撑出屏外
   §2 列表页：解除标题省略号截断 + 提升信息密度
   §3 内页首屏：页头图与标题块瘦身（17 个内页共用同一套壳）
   §4 AI 客服面板宽度收敛到视口内
   §5 抽屉导航：确保 header 全部 8 个栏目（含「问答」）一屏可见
   ========================================================================== */

/* ==========================================================================
   §1 盒模型补齐（≤1100px）
   --------------------------------------------------------------------------
   根因：style.css 全站从未声明 box-sizing:border-box，保持浏览器默认的
         content-box —— 于是「百分比宽度」与「左右 padding」是相加而不是包含。
   铁证：.wrap{width:96%}（≤420px 断点）叠加 .ui_list .list .wrap{padding:0 20px}
         → 390px 视口下实测宽 374.4 + 40 = 414px，右侧多出 24px；
         同一机制还有 .news_details .tags{width:90%; padding:0 24px}
         → 337 + 48 = 385px，右侧多出 3px（详情页实测 docWidth 393）。
   实测受影响：搜索结果页（唯一产生横向滚动的页面，溢出 24px）、
               服务项目页 6 处、品牌故事页 3 处、详情页标签块 1 处。
   处方：只给这些包裹层补 border-box，不改动宽度语义（.wrap 仍为 94% / 96%），
         因此各断点的留白节奏与改动前完全一致。
   ========================================================================== */
@media only screen and (max-width: 1100px) {
  .wrap,
  .ui_list .list .wrap,
  .ui_list.svc_editorial .list .wrap,
  .search_wrap .wrap,
  .news_list .wrap,
  .news_list ul,
  .news_details .tags {
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   §2 列表页（企业动态 / 企业新闻 / 标签页，三者同构）
   --------------------------------------------------------------------------
   实测问题（390px）：单条高 533px，6 条合计 3405px、10 条合计 5579px；
   且标题被省略号截断——桌面版是靠
       h3{height:15px; white-space:nowrap; text-overflow:ellipsis}
       h3 span{overflow:hidden; white-space:nowrap}
   把标题「压在」一条 2px 分隔线上的一种视觉手法，手机端这套写法直接把
   核心标题吃掉（实测截图：显示为「【国学熏陶】国学氛围，以优秀传统…」）。
   处方：① 图片由「右侧浮动大图」改为「整宽顶图」，统一高度后再无参差；
         ② 标题解除 15px 定高 / nowrap / ellipsis，允许换行完整显示；
         ③ 摘要由固定 88px 改为 2 行截断；日期提到标题下方，更易扫读；
         ④ 条目间距由 56px 收到 22px，改用细分隔线区隔。
   ========================================================================== */
@media only screen and (max-width: 767px) {

  .news_list { margin-top: 18px !important; }
  .news_list ul { padding: 0 4px !important; }
  .news_list ul li {
    margin-bottom: 0 !important;
    padding: 20px 0 22px !important;
    border-bottom: 1px solid rgba(196, 181, 170, 0.45);
  }
  .news_list ul li:last-child { border-bottom: 0; }

  /* ① 图片：整宽、统一高度、不再浮动 */
  .news_list .img {
    float: none !important;
    margin: 0 0 12px 0 !important;
    width: 100% !important;
  }
  .news_list .img img {
    display: block;
    width: 100% !important;
    height: calc(100vw * 0.56) !important;
    max-height: 230px;
    object-fit: cover;
    border-radius: 8px;
  }

  /* 文本容器：撤掉桌面版用于「压分隔线」的 62px 上内边距与上边框，
     改为纵向流并显式排序（标题 → 日期 → 摘要） */
  .news_list .text {
    padding: 0 !important;
    border-top: 0 !important;
    overflow: visible !important;
    position: static !important;
    display: flex !important;
    -webkit-flex-direction: column;
    flex-direction: column !important;
  }
  .news_list .text > span {
    position: static !important;
    display: inline-block !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
  }

  /* ② 标题：核心修复 —— 解除定高 / nowrap / 省略号 */
  .news_list h3 {
    order: 1 !important;
    height: auto !important;
    border-bottom: 0 !important;
    margin: 0 0 8px 0 !important;
    font-size: 18px !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .news_list h3 span {
    display: inline !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    background: transparent !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* ③ 日期 · 摘要 */
  .news_list .p_time {
    order: 2 !important;
    margin: 0 0 8px 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #9A8B7C !important;
  }
  .news_list .d_text {
    order: 3 !important;
    height: auto !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #6B6259 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .news_list .span_btn {
    position: static !important;
    display: inline-block !important;
    margin-top: 8px !important;
    font-size: 13px !important;
  }
}

/* ==========================================================================
   §3 内页首屏瘦身（≤767px）
   --------------------------------------------------------------------------
   实测：17 个内页顶部都挂着同一张 1920×320 的页头拼图（.banner_page 150px），
         加上 64px 顶栏与 128px 标题块（.page_tit 的 padding-top:20 + margin-bottom:70），
         375×844 的首屏里有 342px（40%）不是正文。
   处方：页头图 150 → 118px（容器越矮，cover 的横向可见范围越大：
         原 150px 只能看到原图中间约 41%，收到 118px 后可看到约 53%，
         而拼图正中的「13000+ 家庭的信赖之选」始终在正中，不受裁切影响）；
         标题块下边距 70 → 32px、上内边距 20 → 4px。
   合计每个内页首屏省出约 86px，且不删任何元素。
   ========================================================================== */
@media only screen and (max-width: 767px) {
  .banner_page,
  .banner_page .item,
  .banner_page2 { height: 118px !important; }

  .page_tit {
    margin-bottom: 32px !important;
    padding-top: 4px !important;
  }
  .page_tit h4 {
    font-size: 22px !important;
    letter-spacing: 2px !important;
    margin-bottom: 4px !important;
  }
  /* ⚠️ 此处刻意不改 .page_tit h3 的字号：
     内页 .page_tit 内只有一个 <h3>，结构为 <img 装饰线><span>标题</span><img 装饰线>，
     390px 下可用宽度约 360px，「七大自营自培专业团队」这一级长度的标题
     在 20px 字号时刚好一行（44px），一旦提到 23px 就会折成两行（88px）
     —— 反而把首屏撑高，与「瘦身」目标相反（实测 .page_tit 64→92px）。
     因此只瘦身留白，不动字号。 */

  /* 栏目切换条（全部 / 企业新闻 …）：原 45px 下边距 */
  .tag_tit ul { margin-bottom: 18px !important; }
  .tag_tit ul li { margin: 0 4px !important; }
  .tag_tit ul li span {
    padding: 0 12px !important;
    line-height: 32px !important;
    font-size: 13px !important;
  }
}

/* ==========================================================================
   §4 AI 客服悬浮面板（≤767px）
   --------------------------------------------------------------------------
   实测：插件面板固定宽 380px，在 390px 视口下横跨 5–385（比屏幕还宽）。
   处方：宽度改为「视口宽 − 24px」，上限仍为 380px，平板与 PC 不受影响。
   ========================================================================== */
@media only screen and (max-width: 767px) {
  body .ai-chat-box {
    width: calc(100vw - 24px) !important;
    max-width: 380px !important;
  }
}

/* ==========================================================================
   §5 抽屉导航：确保 header 全部 8 个栏目（含「问答」）一屏可见（≤1100px）
   --------------------------------------------------------------------------
   问题（真机反馈）：手机端展开汉堡菜单，只看到 7 项，最后的「问答」不见了。
   实测（390×844，抽屉展开，逐条量取 .menu ul li 的 getBoundingClientRect）：
       行高 84px（标题 17px + 英文副标题独占一行 12px/行高 30px）
       顶部留白 76 + 8×84 + 底部留白 96 = 844px
       → 正好占满、零余量。iPhone SE 一类 667px 高的屏必然溢出，
         最后一条「问答」被推出屏外；用户不会想到抽屉还能滚，只会认为
         「问答入口没了」。
   处方（只压行高与留白，不改结构、不删元素、不动配色）：
       行高 84 → 61（内边距 15→11、英文副标题改 11px/行高 14px）
       → 8 条合计 488px；顶部 70 + 底部 92（含刘海安全区）= 650px，
       在 667~844px 的全屏高下均一屏展示，无需滚动。
       .menu 的 overflow-y:auto 兜底保留，极端小屏仍可滚动。
   实测（390×844）：8 条 bottom 依次 131/192/253/314/375/436/497/558，
       全部 < 844；工具条顶边 788 —— 最后一条与工具条之间留出 230px 净空。
   ========================================================================== */
@media only screen and (max-width: 1100px) {
  .menu > ul {
    padding: 70px 0 calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .menu ul li a {
    padding: 11px 26px !important;
    font-size: 17px !important;
    line-height: 24px !important;
  }
  .menu ul li a span {
    display: block !important;
    font-size: 11px !important;
    line-height: 14px !important;
    letter-spacing: 1px !important;
    margin: 1px 0 0 0 !important;
  }
  .menu > ul > li:last-child { margin-bottom: 0 !important; }
}