/* ==========================================================================
   排版修复层 v3
   --------------------------------------------------------------------------
   放在 extblocks.css 之后、主题层之前，作为「兜底修正层」。

   为什么要有这一层：
     前面的 cms.css / layout-v2.css 是分批写的，每批只处理当时看到的问题，
     难免漏掉「长文案撑破盒子」这类通用缺陷。
     而这类缺陷有一个共同根因：flex/grid 子项默认 min-width:auto，
     内容一长就不肯收缩，把盒子顶出去。
     逐处零散打补丁不如在这里统一说清楚规则。

   本文件修的具体问题（都是实测跑出来的，不是推测）：
     1. 首屏右侧配图 .cms-hero-art 横向撑破 546 > 505
     2. 768px 下 .cms-hero-grid 撑到 800 > 768（内容溢到视口外）
     3. 统计卡数字「24」纵向撑破 50 > 46（行高不足，数字被切）
     4. .glw-bd 的 700>620 是弹窗预期的滚动行为，不修
   ========================================================================== */

/* ==========================================================================
   一、根因修复：让 flex/grid 子项允许收缩
   --------------------------------------------------------------------------
   flex 与 grid 子项的默认 min-width 是 auto，等于「内容有多宽就多宽」。
   一句长英文、一个不换行的 URL、或者一个 flex 布局里没设 min-width:0 的
   子元素，都会把整个盒子顶宽——这就是「文字爆出来」的绝大多数成因。

   min-width:0 是唯一可靠的解法。width:100% 没用，
   因为 auto 的底子摆在那里，宽度仍会被内容顶开。
   ========================================================================== */

/* 所有 grid 布局的直属子项统一允许收缩 */
.cms-hero-grid > *,
.cms-fcards > *,
.cms-pr-grid > *,
.cms-tl-list > *,
.cms-tm-grid > *,
.cms-fl-grid > *,
.cms-cp-grid > *,
.cms-clients > *,
.cms-lb-grid > *,
.cms-stats > *,
.cms-menu,
.cms-foot-cols > * {
  min-width: 0;
}

/* flex 容器里承载长文本的典型子元素 */
.cms-hero-main,
.cms-hero-side,
.cms-fcard,
.cms-pr-card,
.cms-art-list li,
.cms-foot-col,
.cms-menu li > a,
.cms-crumb li,
.cms-pagehead,
.cms-sec-head,
.cms-sec-desc {
  min-width: 0;
}

/* ==========================================================================
   二、首屏配图不再撑破
   --------------------------------------------------------------------------
   实测：.cms-hero-art 内容宽 546，容器只有 505，超出 41px。
   原因是内部的 .cms-art-list li 用 flex + space-between，
   左边的行业名没有 min-width:0，可以无限撑长。

   修法：
     行业名给 min-width:0 并允许截断，右侧标签保持 flex:none 不被压缩。
     截断而不是换行，是因为这是一行一行的紧凑列表，
     换行会把行高撑得参差不齐，比截断难看得多。
   ========================================================================== */
.cms-art-list li > .cms-art-nm,
.cms-art-list li > .cms-art-tm,
.cms-art-nm {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 标签类元素永远不被压缩 —— 它们宽度固定，压了会变成省略号乱码 */
.cms-art-tag,
.cms-art-badge,
.cms-stat-num,
.cms-hero-badge,
.cms-btn {
  flex: none;
}

/* 配图容器本身：内容再长也不许越界 */
.cms-hero-art {
  max-width: 100%;
  overflow: hidden;
}

/* ==========================================================================
   三、768px 附近的中间档断裂
   --------------------------------------------------------------------------
   实测：768px 视口下 .cms-hero-grid 的内容宽 800，超出 32px。
   原因是断点设在 1080px 才切单栏，而 769~1080px 这段里
   两栏各占一半，配图内部又是固定宽度的表格样式内容，
   累加之后就顶出去了。

   修法：把断点提前到 900px，让平板竖屏更早进入单栏。
   同时给 wrap 加 max-width:100%，防止任何子元素把它带宽。
   ========================================================================== */
.cms-wrap {
  max-width: 1180px;
  max-width: min(1180px, 100%);
}

/* ==========================================================================
   四、数字被切（实测 50 > 46 / 41 > 37）
   --------------------------------------------------------------------------
   .cms-stat b 用的是 font-size: clamp(30px, 4.4vw, 42px)，
   在 1440px 视口下取到 42px，line-height:1.1 给出 46px 的行框。

   但中文字体与西文字体的「实际墨迹高度」并不等于 em 框高：
   字体内部的 ascender/descender 通常占 em 的 1.15~1.25 倍。
   42px × 1.15 ≈ 48px > 46px，于是内容超出行框 2px，
   表现就是数字顶部或底部被相邻元素压住 / 裁掉。

   修法（三条一起上，缺一不可）：
     1. line-height 提到 1.25 —— 覆盖中文字体的真实行高
     2. 显式 overflow: visible —— 万一还是溢出，不要裁掉而是让它显示
     3. 给上下各 1px padding —— 补足最后一点余量
   ========================================================================== */
.cms-stat-num,
.cms-st-num,
.cms-art-tile b,
.cms-pr-price b,
.cms-kpi b,
.cms-stat b {
  line-height: 1.25;
  padding: 1px 0;
  overflow: visible;
}

/* 大标题同理：
   .cms-hero h1 是 clamp(32px, 6vw, 56px) + line-height:1.15，
   56px 时行框只有 64px，而中文标题的实际墨迹高度约需 1.2 倍（≈67px），
   实测 150 > 146 —— 标题整体被下面 4px。
   中文标题的 line-height 给到 1.25 是通用做法：
   1.15 是给纯西文用的，中文的字面框比西文高。 */
.cms-hero h1 {
  /* 实测 62px 字号下 lh=1.25 时 h1 的 scrollHeight(150) 仍比 clientHeight(146) 多 4px。
     多出来的不是文字，是 em 里的高亮装饰：
       background: linear-gradient(180deg, transparent 66%, rgba(...) 66%)
     这条渐变画在文字下方，从 66% 位置一直铺到元素的盒子底，
     而盒子底 = line-height 行框底，比中文墨迹底低 4px。

     这 4px 不影响阅读，但会让「行与行之间」显得偏紧，
     而且某些主题下 h1 后面紧跟副标题时会视觉粘连。
     所以给 h1 多留一点行高，让装饰落在行框内。 */
  line-height: 1.34;
  padding-bottom: 2px;
}

/* 章节大标题同理，避免同类问题在别的区块复现 */
.cms-sec-t,
.cms-pagehead h1,
.cms-hero .cms-eyebrow {
  line-height: 1.3;
}

/* 数字用等宽数字字体，避免 1 和 11 宽度不同导致的视觉跳动 */
.cms-stat-num,
.cms-st-num,
.cms-art-tile b,
.cms-pr-price b,
.cms-kpi b,
.cms-stat b {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ==========================================================================
   五、长文本通用保护
   --------------------------------------------------------------------------
   任何一段中文/英文/URL 都不该把布局顶破。
   overflow-wrap: break-word 只在「实在放不下」时才断行，
   正常长度的文字不受影响，所以可以安全地广泛使用。
   ========================================================================== */
.cms-body p,
.cms-body li,
.cms-body td,
.cms-body th,
.cms-body dd,
.cms-fcard p,
.cms-hero .cms-lead,
.cms-sec-desc,
.cms-pr-desc,
.cms-tl-txt,
.cms-tm-bio {
  overflow-wrap: break-word;
  word-break: normal;   /* 不用 break-all：会把英文单词从中间劈开 */
}

/* 链接与长标识符（URL、邮箱）允许在分隔符处断行 */
.cms-body a {
  overflow-wrap: break-word;
}

/* ==========================================================================
   六、留资弹窗说明（不是修复，是澄清）
   --------------------------------------------------------------------------
   体检脚本报 .glw-bd 内容高 700 > 容器 620，看着像撑破，
   实际那是设计如此：lead.js 里给它写了
     .glw-bd { padding:...; overflow-y: auto; }
     以及一个 max-height（按视口算）
   也就是「弹窗里的表单区可以滚动」。

   所以这里不做任何覆盖。
   把 max-height 去掉反而会让表单撑出弹窗、
   在小屏上顶到屏幕外再也关不掉——那才是真 bug。
   ========================================================================== */
/* 刻意留空：这个撑破是预期的滚动行为 */

/* ==========================================================================
   七、窄屏兜底
   ========================================================================== */
@media (max-width: 900px) {
  /* 提前切单栏：769~1080px 这段最容易撑破 */
  .cms-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
  /* 单栏时配图不再需要那么宽的留白 */
  .cms-hero-art { padding: 16px; }
}

@media (max-width: 640px) {
  .cms-hero-grid { gap: 32px; }
  /* 手机上列表项更紧凑，但文字仍要能完整显示 */
  .cms-art-list li {
    padding: 10px 13px;
    font-size: 13.5px;
    gap: 10px;
  }
  .cms-art-tag { padding: 3px 9px; font-size: 11px; }
}

/* ==========================================================================
   八、导航条防爆（1440px 下曾出现 11 项挤成乱麻）
   --------------------------------------------------------------------------
   即使后台菜单配置正常，项数一多也可能撑破头部。
   这里加两道保险：
     1. 容器允许收缩并在超宽时隐藏溢出
     2. 超窄屏直接折叠成汉堡菜单（已有 cms.js 处理，这里只保证不溢出）
   ========================================================================== */
.cms-head .cms-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: min(1180px, 100%);
}

.cms-head .cms-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;          /* 项多时不外溢，交给汉堡菜单 */
}

.cms-head .cms-menu > li {
  flex: none;
  white-space: nowrap;
}

.cms-head .cms-menu > li > a {
  display: inline-block;
  padding: 8px 12px;
  white-space: nowrap;
}

/* Logo 永远不被压缩 */
.cms-head .cms-logo {
  flex: none;
  white-space: nowrap;
}

@media (max-width: 1120px) {
  /* 中等屏主动放弃完整菜单，交给汉堡 */
  .cms-head .cms-menu {
    display: none;
  }
}

/* ==========================================================================
   九、极窄屏（≤360px：iPhone SE 竖屏、非主流安卓机）
   --------------------------------------------------------------------------
   实测 320px 下 .cms-hero-main 300 > 284。
   根因是 h1 里那个 <em> 上的 white-space: nowrap ——
   「一次交付，永久授权」9个字在 62px 字号下需要约 340px，
   而 320px 屏减去内边距只剩 284px，nowrap 又不让它断行，
   于是整个盒子被顶宽。

   这里不能直接去掉 nowrap：桌面端 nowrap 是有意为之，
   防止「一次交付，」和「永久授权」被拆到两行、
   让首屏标题变成四行那样难看。
   所以只在极窄屏放开，让它按需换行。
   ========================================================================== */
@media (max-width: 380px) {
  /* 这里的 !important 不是偷懒：
     fix-v3.css 加载在 theme-*.css 之前，
     而主题层里 .cms-hero h1 em { white-space: nowrap } 与本条
     特异性相同（都是 0,0,3,2）却更晚加载，会赢。
     兜底修复层要压过主题层只能加 !important。
     影响范围限定在 380px 以下，不会误伤桌面端。 */
  .cms-hero h1 em {
    white-space: normal !important;
  }
  /* 字号也压一档：320px 下 62px 的标题占满整屏，观感过重 */
  .cms-hero h1 {
    font-size: clamp(26px, 7.4vw, 34px);
    line-height: 1.3;
  }
  .cms-hero .cms-lead { font-size: 15px; }
  .cms-hero-btns { gap: 10px; }
  .cms-hero-btns .cms-btn { flex: 1 1 100%; }   /* 按钮竖排，不再并排挤 */

  /* 引文卡：cms.css 里写的是 minmax(300px, 1fr)，
     最小列宽被硬编码成 300px，而 320px 屏减去内边距只剩 284px，
     grid 放不下这一列时会把整行撑到 300px —— 全页因此横向溢出。
     auto-fit 配合 minmax 时可以写 min(300px, 100%)，
     表示「想用 300px，但屏幕不够时就退让」。 */
  .cms-quotes {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 16px;
  }
  .cms-quote-src { font-size: 12.5px; }
}