@charset "utf-8";
/* ==========================================================================
   得宝月子中心 · 移动端体验改造 V2 + V3（2026-09-17）
   --------------------------------------------------------------------------
   生效范围：视口 ≤1100px（平板 + 手机）；≥1101px 完全不受影响
   引入位置：pc/header.htm 首行（位于 style.css 之后，保证优先级）
   回滚方式：删除本文件 + 移除 header.htm 中的引入行即可（线上零残留）
   --------------------------------------------------------------------------
   V3 追加（见文末追加段）：① Banner 按原图比例完整展示；② 首页「新闻动态」
   手机端两栏改单列、标题完整可见；③ 移动端隐藏页脚快捷导航（与抽屉重复）。
   --------------------------------------------------------------------------
   V2 相对 V1 的修正（均依据真机截图 + 浏览器实测定位，非猜测）：

   ① 抽屉打开后“整体乱掉、下方漏出页面内容”
      根因：.header 同时带 backdrop-filter（会为 fixed 后代建立包含块）与
            overflow:hidden（会裁剪 fixed 后代），两者叠加使抽屉的 fixed
            定位在各内核表现不一致；且 .menu 原为 display:table + height:100vh，
            表格盒高度在部分内核会退化为内容高度 → 抽屉只盖住上半屏。
      处方：解除 .header 的 backdrop-filter / overflow；.menu 改
            display:block + 四边贴边定位（top/right/bottom/left 全 0），
            彻底不依赖 100vh 与表格盒。
      实测：修正后 .menu = 390 × 844、x=0，整屏覆盖。

   ② 底部工具条下方留出白色空档
      根因：.m_bar 高 56px 定位正确，但两个 <a> 在部分内核未被拉伸，
            只占内容高度（实测约 26px），下方 30px 露出 .m_bar 的白底。
      处方：.m_bar 子项显式 height:100% + align-self:stretch（不依赖
            align-items:stretch）；.m_bar 自身用品牌深棕打底，
            即使仍有残余缝隙也是品牌色而非白色。

   ③ 全站横向溢出（文档宽被撑到 854px，视口仅 390px）
      根因：.room_carousel 三处（base / 平板 / 手机）都写了 overflow:visible，
            而卡片是 position:absolute + JS 位移 ±430px → 卡片逃出容器，
            把整个文档撑宽。横向溢出会连带影响 fixed 元素在各内核的定位。
      处方：.room_carousel{ overflow:hidden }（箭头在容器内 left/right 4~10px，
            不受裁剪影响）。

   保留 V1 已修好的项：汉堡按钮尺寸、420px 断点误隐藏的核心板块、
   服务卡片文案裁切、AI 客服悬浮球避让。
   出具日期：2026-09-17
   ========================================================================== */

/* ---------- 移动端专属控件：PC 端（≥1101px）一律不显示 ---------- */
.m_tel,
.m_bar { display: none; }

/* ==========================================================================
   ① 平板与手机共用（≤1100px）
   ========================================================================== */
@media only screen and (max-width: 1100px) {

  /* --- 关键修正：解除 .header 对 fixed 后代的「包含块 + 裁剪」双重影响 ---
     backdrop-filter 会让 .header 成为 fixed 后代的包含块；
     overflow:hidden 会裁剪这些后代。二者叠加即抽屉错乱的根因。
     移动端 .header 本就是实色白底（≤550px 为 #fff，≤1100px 为 97% 白），
     去掉毛玻璃没有任何视觉损失。 */
  .header {
    overflow: visible !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* 原顶栏电话块 .h_btn 是 <div> 不可点击，统一由可拨号的 .m_tel 取代 */
  .header .h_btn { display: none; }
  .header .logo { float: none; }

  /* ---- 汉堡按钮：补齐 width / height / position / background ----
       （原模板只写了 top 微调，从未定义尺寸，实测 0×0 → 不可见不可点） */
  .menu_wrap {
    display: block;
    position: fixed;
    right: 16px;
    top: 24px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 1002;
    border-radius: 8px;
    background-color: var(--brand-primary, #5D3A1A);
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%3E%3Cpath%20d='M3%206h18M3%2012h18M3%2018h18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }
  /* 抽屉展开时同一按钮切换为关闭态，一个按钮兼作开与关 */
  .header.h_menu .menu_wrap {
    background-color: var(--brand-primary-dark, #3D2515);
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%3E%3Cpath%20d='M6%206l12%2012M18%206L6%2018'/%3E%3C/svg%3E");
  }

  /* ---- 顶栏拨号按钮（纯图标，省空间） ---- */
  .m_tel {
    position: fixed;
    right: 64px;
    top: 24px;
    width: 40px;
    height: 40px;
    z-index: 1002;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    text-decoration: none;
    background: var(--brand-gold, #C9A96E);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }
  .m_tel svg { width: 20px; height: 20px; display: block; fill: #fff; }

  /* ---- 抽屉导航 ----
     四边贴边（top/right/bottom/left 全 0）+ display:block：
       · 不用 height:100vh —— iOS Safari 的 100vh 是「大视口」，会超出可视区；
       · 不用 height:100%  —— .header 若成为包含块，100% 只等于顶栏高度；
       · 不用 display:table —— 表格盒高度在部分内核会被内容撑定，导致抽屉只盖半屏。
     改用 transform 做滑入滑出，比 left 百分比在各内核更稳定。 */
  .menu {
    margin: 0 !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    background: #fff !important;
    z-index: 1000 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: transform .28s ease, visibility .28s;
    transition: transform .28s ease, visibility .28s;
  }
  .header.h_menu .menu {
    visibility: visible;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  /* 列表底部留出工具条高度 + 刘海屏安全区，避免最后一项被工具条挡住 */
  .menu > ul {
    display: block !important;
    margin: 0 !important;
    padding: 76px 0 calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
  }
  .menu ul li {
    display: block !important;
    margin: 0 !important;
    text-align: left !important;
  }
  .menu ul li a {
    display: block !important;
    width: auto !important;
    padding: 15px 26px !important;
    font-size: 17px !important;
    line-height: 24px !important;
    text-align: left !important;
  }

  /* ---- 房型轮播：根治全站横向溢出 ----
     卡片为 position:absolute + JS 位移 ±430px，容器三处均为 overflow:visible
     → 卡片逃出容器把文档撑宽（实测 390 → 854）。箭头位于容器内
     left/right 4~10px，加 hidden 不会被裁。 */
  .room_carousel { overflow: hidden !important; }

  /* ---- 底部固定工具条：定位、层级与打底 ---- */
  .m_bar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1001 !important;
    height: 56px;
    box-sizing: content-box !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--brand-primary-dark, #3D2515) !important;
    box-shadow: 0 -2px 12px rgba(44,36,22,0.14) !important;
    align-items: stretch !important;
  }
  /* 子项显式给高度：不依赖 align-items:stretch（部分内核不生效，
     会导致按钮只有内容高、下方露出白底） */
  .m_bar > a {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    height: 100% !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    padding: 0 4px;
    font-size: 15px;
    letter-spacing: 1px;
    color: #fff !important;
    text-decoration: none !important;
  }
  .m_bar > a svg { width: 18px; height: 18px; display: block; flex: none; }
  .m_bar .m_bar_call { background: var(--brand-gold, #C9A96E) !important; }
  .m_bar .m_bar_book { background: var(--brand-primary, #5D3A1A) !important; }
}

/* ==========================================================================
   ② 手机（≤767px）：顶栏收敛、工具条启用、服务卡片自适应
   ========================================================================== */
@media only screen and (max-width: 767px) {

  /* 防止残留元素造成横向滚动（移动端验收不变量之一） */
  body { overflow-x: hidden; }

  /* 顶栏 88 → 64，logo 垂直居中；主内容区上边距同步，消除首屏空隙 */
  .header { height: 64px; }
  .header .logo {
    position: absolute;
    left: 4%;
    top: 50%;
    margin: 0;
    margin-top: -22px;
    width: 150px;
    height: 44px;
    -webkit-transform: none;
    transform: none;
    float: none;
  }
  .mainer { padding-top: 64px; }

  /* 图标按钮随顶栏高度上移，保持垂直居中 */
  .menu_wrap { top: 12px; }
  .m_tel { top: 12px; }

  /* 启用底部固定工具条；页脚预留与工具条等高的安全区
     （实测：备案号完整可见无遮挡）。工具条高度含刘海屏安全区，
     故此处同步加 env()，避免带 home indicator 的设备上最后一行被遮。 */
  .m_bar { display: flex !important; }
  .footer { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

  /* 核心服务卡片：取消说明文字固定高度（原 54px 导致两行以上文案被截断） */
  .page_list1 ul li .list { padding: 34px 20px 30px; }
  .page_list1 ul li .list h3 {
    padding-top: 76px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 19px;
    letter-spacing: 1px;
  }
  .page_list1 ul li .list p { height: auto; overflow: visible; }

  /* AI 客服悬浮球避让：抬高到工具条之上，避免压住「在线预约」
     插件样式以 !important 声明，故此处用 body .xxx 提升选择器权重
     （(0,1,1) > (0,1,0)），同样带 !important 即可稳定覆盖。
     bottom 值同样叠加刘海屏安全区，与工具条高度保持一致。 */
  body .chat-button { bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important; }
  body .ai-chat-box {
    bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
    height: calc(100vh - 136px) !important;
  }
}

/* ==========================================================================
   ③ 恢复旧版「精简手机版」误隐藏的核心内容板块
   ========================================================================== */
@media only screen and (max-width: 420px) {
  .page2 { display: block; }
  .page4 { display: block; }
  /* 该板块为深色底图 + 白字（.page_tit.on h3 为 #fff），
     而旧规则在此断点把 .page_tit 刷成白底 → 白底白字。
     此处改为透明，露出深色底图，标题恢复可读。 */
  .page4 .page_tit { background: transparent; }
}

/* ==========================================================================
   V3 追加（2026-09-17）—— 首页三处细节调整
     ① Banner 按原图比例完整展示（不再左右裁切）
     ② 首页「新闻动态」标题完整可见：平板保留两栏、手机改单列
     ③ 页脚快捷导航在移动端隐藏（抽屉菜单已提供同一套，重复）
   生效范围：①② 的 ≤1100px 段 + ③ 的 ≤767px 段。
   PC（≥1101px）不受任何影响 —— 实测 1440px 下 .banner 高 650、
   background-size:cover、.page_news 为两栏、标题不换行，均与改前逐项一致。
   ========================================================================== */

/* ---------- ① Banner：完整展示原图 ----------
   原图 1920×890（比例 2.1573）。原样式三处（base / ≤900px / ≤550px）用
   background-size:cover 且高度写死 650 / 420 / 300px —— 窄屏下 cover 必然裁掉
   左右两侧，视觉上就是"图片超出 banner 被切掉"。
   处方：高度改为按视口宽等比推算（100vw × 890 ÷ 1920），背景改 contain。
   容器比例与图片比例一致 → 整图可见且无留白（实测比例 0.4633~0.4641）。 */
@media only screen and (max-width: 1100px) {
  .banner_owl,
  .banner,
  .banner .item {
    height: calc(100vw * 890 / 1920) !important;
  }
  .banner .item {
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #FAF7F2 !important;
  }
  /* 轮播指示点随新高度贴底居中 */
  .banner.owl-theme .owl-controls { bottom: 6px !important; }

  /* ---------- ②-A 新闻标题不再被省略号截断（平板两栏区间同样适用） ----------
     实测：768~1050px 区间左卡标题可用宽仅 159~279px，而整条标题需约 300px
     → 被 nowrap + ellipsis 截成「【国…」。改为允许换行（2 行内必然放下），
     并把日期列由 176px（60 + 左右各 58）压到 70px 让位给标题。
     1024px 及以下右卡标题也会截断，故一并处理。 */
  .page_news .list h3,
  .page_news .item.frt .text h3 {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .page_news .list .text span,
  .page_news .list .lt {
    float: left !important;
    width: 58px !important;
    margin: 0 12px 0 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }
}

/* ---------- ②-B 手机（≤767px）：两栏改上下单列，卡片占满整宽 ----------
   原 ≤600px / ≤550px 只写了 .page_news .item{width:100%}，但父级仍是
   display:flex 行布局 + 子项 flex-shrink:1 → 两块各被挤成约半宽，
   标题自然只剩几十像素（真机截图即为此现象）。 */
@media only screen and (max-width: 767px) {

  .page_news { flex-direction: column !important; gap: 18px !important; }
  .page_news .item,
  .page_news .item.flt,
  .page_news .item.frt {
    width: 100% !important;
    min-height: 0 !important;
  }

  /* 左卡标题栏：撤掉左侧 187px 深色竖栏与绝对定位，改为整宽横栏 */
  .page_news .item .tit1 { padding-left: 0 !important; }
  .page_news .item .tit1 .tit_text {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    display: block !important;
    padding: 15px 20px !important;
    border-radius: 8px 8px 0 0 !important;
  }
  /* 整宽横栏下不需要右缘竖金线（标题上方的金色短横仍保留） */
  .page_news .item .tit1 .tit_text::before { display: none !important; }
  .page_news .item .tit1 .tit_text label { width: 30px !important; }
  .page_news .item .tit1 .tit_text h3 { font-size: 20px !important; line-height: 1.5 !important; }
  .page_news .item .tit1 .tit_text p { font-size: 12px !important; letter-spacing: 1px; opacity: .82; }
  /* 该头图是模板自带演示图（笔记本+咖啡杯，与月子中心无关），移动端不显示。
     注意：必须同时把 .tit1 的 padding-left 归零，否则会留出 187px 空白。 */
  .page_news .item .tit .img { display: none !important; }

  /* 左卡列表：收紧内边距与日期字号，标题 15px 两行内可完整呈现 */
  .page_news .list { margin-top: 4px !important; }
  .page_news .list ul li { padding: 13px 16px !important; line-height: 1.6 !important; }
  .page_news .list ul li:hover { padding-left: 16px !important; background: transparent !important; }
  .page_news .list .text { overflow: hidden; }
  .page_news .list .text span,
  .page_news .list .lt { font-size: 12px !important; line-height: 1.9 !important; }
  .page_news .list h3 { font-size: 15px !important; line-height: 1.6 !important; }
  /* 展开项：大号日期与摘要 */
  .page_news .list .lt .drop p { font-size: 28px !important; line-height: 1.1 !important; height: auto !important; }
  .page_news .list .lt .drop label { width: 18px !important; }
  .page_news .list .drop .rt { padding-top: 4px !important; min-height: 0 !important; }
  .page_news .list .drop .rt p {
    height: auto !important;
    font-size: 13px !important;
    line-height: 1.75 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* 右卡（企业新闻）：收紧内边距与头图高度 */
  .page_news .item .tit2 { min-height: 0 !important; }
  .page_news .item .tit2 .tit_text { padding: 15px 20px 13px !important; }
  .page_news .item .tit2 .tit_text h3 { font-size: 20px !important; }
  .page_news .item.frt .img { height: 178px !important; }
  .page_news .item.frt .text { padding: 15px 18px 18px !important; }
  .page_news .item.frt .text h3 { font-size: 16px !important; line-height: 1.5 !important; margin-bottom: 6px !important; }
  .page_news .item.frt .text p { max-height: none !important; -webkit-line-clamp: 4; }

  /* ---------- ③ 页脚快捷导航 ----------
     移动端抽屉菜单（.menu）已提供完全相同的一套栏目，页脚再列一次属重复。
     PC（≥1101px）不受影响，页脚四栏布局保持原样。 */
  .footer .f_quick { display: none !important; }
}