/* ============================================================
Asia Review — 客户 CSS 兼容层（2026-10-05 建，PM 裁定「修法 A」）
用途：客户的静态包 CSS 在**本站真实内容**（长标题/长摘要/真实数据）下会出现
栅格崩坏；包内用短样例文本，掩盖了这些问题。本文件逐条做**必要补偿**，
且**不改变设计意图**（呈现方式仍与客户包一致）。
机制：每条补丁必须登记在
`~/asia-review-backups/plans/20261005-client-package/客户CSS补丁清单.md`
（单一写者 = 开发；测试/运维只读引用）
新增补丁必须附：① 症状 ② 根因（含量值/链条）③ 一行修法 ④ 证据 ⑤ 是否改变设计意图（须为「否」）
⚠️ 纪律：只放「客户 CSS 在真实内容下的必要补偿」，严禁放「自造样式 / 改设计」。
⚠️ 加载顺序：在客户 base/页面 CSS 之后（见 functions.php: ar_enqueue_client_css）。
============================================================ */
/* ---- #1 首页「編輯選讀」卡片撑破主列 ⇒ 整页横溢 47px ----
症状：首页 scrollWidth 1475 > clientWidth 1416（横溢 47px）；.editor-card 宽 1356.5px（应为 878）
根因：客户 CSS `.editor-main p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`
+ 栅格 auto 轨道/1fr 轨道按子项 **min-content** 定尺；**真实长摘要**（60 字）使最小尺寸链达 1356.5px：
① .editor-list 单列 auto 轨道 ← 子项 .editor-card 的 min-content（第一层）
② .editor-card 中列 `1fr`（= minmax(auto,1fr)）← 子项 .editor-main 的 min-content（第二层）
（客户包 demo 用 ~25 字短样例 ⇒ 两层 min-content 均不越界，同 CSS 不触发）
修法：两层均允许收缩到轨道宽；客户既有的 nowrap+ellipsis 单行省略呈现保持不变
证据：探针 前 `.editor-card` w=1356.5 / `.editor-list` cols=1356.52px
｜ 后 `.editor-card` w=878 / cols=878px / .editor-main min-width:0 ⇒ 横溢 0px（见补丁清单）
设计意图变更：否（仍是单行省略） */
.editor-card,
.editor-main { min-width: 0; }
/* ---- #2 顶部搜索：真实输入控件的原生镀铬 ----
症状：功能必需的 在客户 `.search` 胶囊（165px、圆角、白底）内呈“框中框”
根因：客户包顶部搜索是**静态** `⌕ 搜尋關鍵字…`（demo 无表单）
⇒ 客户 CSS 只定了容器外观，从未预期真实输入控件 ⇒ 控件回落到 UA 原生样式
修法：输入控件去原生镀铬（无边框/透明底/不占额外宽度）⇒ 外观完全由 `.search` 胶囊决定，与包一致
设计意图变更：否（仍为胶囊 + 占位文案；仅让**真输入框**隐身） */
.search input { border: 0; background: transparent; outline: 0; width: 100%; min-width: 0; padding: 0; color: inherit; font: inherit; }
/* ---- #3 页头：旧 style.css 的 `.site-header{display:grid}` / `.brand{display:flex}` 在**未重做页**残留 ----
症状：未重做页（/authors/ ｜ 作者个人 ｜ 文章详情 —— 仍在白名单外、仍加载旧 style.css）的**共用页头**
被旧规则撑成 3 欄 grid（/authors/ 实测：287.7px 875.7px 97.5px ｜ gap 32px ｜ min-height 108px），
品牌变 flex（名与副题并排）⇒ 背景/颜色等客户已声明属性正常，但**未声明属性被旧值残留**（逐属性层叠）
根因：页头模板**已全站重做**（step1-4），但旧 CSS 在未重做页仍加载；客户 `.site-header` 只声明
background/border-bottom/position/z-index，**未声明** display/grid-template/gap/min-height/padding ⇒ 旧值残留
修法：兼容层中性化旧值（display:block ｜ 清 grid ｜ 无 gap/min-height/padding ｜ .brand 回块级）
⇒ 全站页头回归客户 CSS 形态（重做页本已正确，此规则冗余无害）
设计意图变更：否（页头本就应全站统一为客户版；此处仅消除旧 CSS 残留） */
.site-header { display: block; grid-template-columns: none; gap: normal; min-height: 0; padding: 0; align-items: normal; }
.brand { display: block; width: auto; gap: normal; }
/* ---- #4 作者页 /authors/：**设计稿有、客户包无**的区块 ↓（依据 = 20261004 设计稿（PM 裁定设计稿优先））----
说明：本组规则**不是**“客户 CSS 在真实内容下的补偿”，而是**设计稿里有、包 CSS 里没有的新块**；
按 PM 统一原则（冲突 ⇒ 设计稿为准）实现，样式仍**只加在兼容层**，客户包一字未改。
① 页头副标 OUR WRITERS（设计稿：h1 旁小字，同 .section-title small 口径） */
.authors-head small { font-family: Georgia, serif; font-size: 12px; color: #85807a; letter-spacing: .8px; margin-left: 10px; }
/* ② 本期焦點作者：设计稿为 **3 栏**（肖像 ｜ 正文 ｜ 指标）；包为 2 栏 ⇒ 补第 3 栏
⚠️ 作用域限定 `.has-metrics`（仅作者名錄页）——作者個人页（raw-n9）为 2 栏 + 圆肖像，不得命中本规则 */
.author-hero.has-metrics { grid-template-columns: 180px minmax(0, 1fr) auto; }
.author-hero.has-metrics .portrait { border-radius: 4px; height: 100%; min-height: 180px; object-fit: cover; align-self: stretch; }
.author-metrics { border-left: 1px solid #e7e0d7; padding-left: 20px; min-width: 118px; display: grid; gap: 12px; align-content: center; font-size: 12px; color: #6d6861; }
.author-metrics div { display: flex; flex-direction: column; gap: 2px; }
.author-metrics small { font-size: 11px; color: #85807a; }
.author-metrics b { font-family: var(--serif); font-size: 17px; color: var(--ink); }
/* ③ 专长标签前的小标（设计稿：專長領域） */
.expertise-label { font-size: 11px; font-weight: 700; color: #5f5a54; margin-top: 12px; }
/* ④ 目录区块头右侧：共 N 位作者 ｜ 排序（设计稿） */
.dir-meta { font-size: 12px; color: #85807a; display: flex; align-items: center; gap: 8px; }
.dir-meta a { color: #85807a; }
/* ⑤ 卡片肖像：设计稿 = **整宽矩形照片**（包 = 80px 圆头像）
⚠️ 2026-10-06 用户报（移动端作者页头像"那么高"）——实测：头像确为正方，但 ≤430 档因 2 列栅格而**比桌面更大**：
1440: 138×138 ｜ 768: 106 ｜ **430: 168×168 ｜ 390: 148×148** ⇒ 手机上看显著偏高
修：加**上限 = 桌面实测尺寸**（138px）并居中 ⇒ 移动端回到与桌面同尺寸；1440 因 137.59<138 **保持不变**。 */
.person-card .avatar { width: 100%; max-width: 138px; height: auto; aspect-ratio: 1 / 1; border-radius: 4px; margin: 0 auto 9px; font-size: 34px; }
.person-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
/* ⑥ 右栏「熱門作者」（设计稿；包内该位是「熱門閱讀」）—— 列表容器用 .ha-list，避免命中区块头的「查看更多」链接 */
.ha-list { display: grid; gap: 2px; }
.ha-list a { display: grid; grid-template-columns: 30px 44px 1fr; gap: 9px; align-items: center; padding: 9px 0; border-top: 1px solid #efe9df; color: inherit; }
.ha-list a:first-child { border-top: 0; }
.ha-list .num { font-family: Georgia, serif; font-size: 22px; color: var(--red); }
.ha-list .ha-av { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: #d3d3d3; display: grid; place-items: center; font-family: var(--serif); font-size: 16px; }
.ha-list .ha-av img { width: 100%; height: 100%; object-fit: cover; }
.ha-list b { display: block; font-family: var(--serif); font-size: 14px; }
.ha-list small { display: block; font-size: 11px; color: #77716a; margin-top: 1px; }
.ha-list em { display: block; font-style: normal; font-size: 11px; color: #85807a; margin-top: 1px; }
/* ⑦ 最新作者觀點的署名：设计稿为 姓名 + 头衔两行（包只有姓名一行） */
.latest-list .byline b { display: block; }
.latest-list .byline small { display: block; font-size: 11px; color: #77716a; }
/* ⑧ 作者页筛选栏（设计稿；包无此块）—— 白底卡片 + 搜索/下拉 + 红按钮；下拉数量随降级规则变化 ⇒ 用 flex 自适应 */
.authors-filter { display: flex; gap: 10px; background: #fff; border: 1px solid #e7dfd4; border-radius: 4px; padding: 12px 14px; margin: 6px 0 16px; }
.authors-filter input[type="search"] { flex: 1 1 auto; min-width: 200px; }
.authors-filter select { flex: 0 1 auto; min-width: 150px; }
.authors-filter input[type="search"], .authors-filter select { border: 1px solid #e0d9cf; border-radius: 3px; padding: 9px 12px; font-size: 13px; color: #5f5d59; background: #fff; }
.authors-filter .btn { border: 0; cursor: pointer; padding: 10px 22px; white-space: nowrap; }
@media (max-width: 980px) { .authors-filter { flex-wrap: wrap; row-gap: 10px; } } /* 2026-10-06 修（移动端门禁）：681–980 档 4 控件+按钮放不下（768 实测 ov=37px）⇒ 允许换行 */
/* 2026-10-06 移动门禁追加（测试实测）：en 档 1024 下 `.section-title.compact > a`（「View more →」）被挤出容器 28px
（/latest/ + 8 频道页）；根因 = 客户包 `.section-title{display:flex;justify-content:space-between}` + EN 文案较长。
修：允许换行（仅当放不下时才换行；1440 无变化）⇒ 窄档链接移至次行，不再横溢。 */
.section-title.compact { flex-wrap: wrap; row-gap: 4px; } /* 作用域限 .compact（侧栏区块头），勿影响首页/其它 */
@media (max-width: 680px) { .authors-filter { flex-wrap: wrap; } .authors-filter input[type="search"], .authors-filter select { flex: 1 1 100%; } }
/* 2026-10-06 用户要求（手机端两个修复，同一批）：
① 语言入口：客户包 `@media(max-width:680px){.topbar{display:none}}` 把顶栏（含语言切换）整条隐藏 ⇒ 手机端无语言入口。
修：header.php 在主导航（.main-nav，≤680 已 overflow:auto 横向可滑）追加 `.nav-lang`；≥681 隐藏 ⇒ 桌面布局一字不动。
② 作者页头像：compat 的 `width:100%` 在 ≤680（目录 2 列）把头像放大到 148~168px（桌面 137.59）⇒ 用户报“那么高”。
修（PM 裁定 b）：≤680 设上限 136×136（与桌面验收尺寸一致，不再继续放大；仍为正方）。
备选 a（≤680 回到客户包设计 80×80）保留，用户若回复“还是太大”⇒ 1 行切换。 */
.nav-lang { display: none; }
@media (max-width: 680px) {
.nav-lang { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.nav-lang a { height: auto; border-bottom: 0; font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--red); }
.content-col .person-card .avatar { max-width: 136px; max-height: 136px; margin: 0 auto 8px; }
}
/* 2026-10-06 用户报（首页「區域導覽」小卡文字换行 + 各块对不齐）——实测：同行 span top 差 **17~18px**（描述 1/2/3 行不等）
修法选型（关键）：试过 `.tile{display:flex;flex-direction:column}` + `span{margin-top:auto}` ⇒ 对齐成功但**盒高从 191→182（−9px）**
（原因：block 布局中元素间空白行盒参与高度，flex 会忽略空白节点 ⇒ 不可逆）⇒ 改用**绝对定位贴底 + 精确预留**，可同时满足：
① span 贴底同行（所有卡等高 ⇒ 同行对齐） ② **盒高与改前一致** ③ span 不换行
预留高度 = 原 padding-bottom(7px) + span 行高(17.38px) = 24.38px；左右与原内容区对齐（left/right = 7px）。
作用域：**仅主欄宫格**（`.content-col`）；侧栏地區導覽（`.sidebar .tile-grid.regions`，已隐藏 p/span）不受影响。
注：描述换行数差异属内容驱动（未裁切）；如需“最多 2 行”另批。 */
.content-col .tile-grid .tile { position: relative; padding-bottom: 32.66px; }
.content-col .tile-grid .tile span { position: absolute; left: 7px; right: 7px; bottom: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ⚠️ 2026-10-07（运维发现）：`white-space:nowrap` 下 **EN 文案过长** ⇒ 溢出到邻格（1024 档槽仅 90px：
"Browse latest articles →"=121.8px ⇒ 裁切）。已同步把 EN 文案改短（議題 "Latest articles →"=83.6 / 區域 "View articles →"=78）
＋ 此处加 ellipsis 兜底：任何更窄视口/更长文案最多省略号，绝不溢出邻格。 */
/* ⑨ 作者名錄目录：设计稿 = **5 列**（包 CSS 为 repeat(4,1fr)）—— PM 裁定设计稿优先；
⚠️ 必须限定桌面段（min-width:681px）：兼容层在源序上晚于包 CSS ⇒ 若不加媒体查询，会连包内
`@media(max-width:680px){repeat(2,1fr)}` 一起覆盖 ⇒ 移动端会错成 5 列 */
/* ⚠️ 2026-10-06 最终门禁发现（测试）：768×1024 × **EN** × /authors/ ⇒ 横溢 80px
元凶：裸 `1fr` 轨道（EN 长名/头衔 min-content 撑开）⇒ 5 轨不等宽 146.391/179.375/146.391/146.391/165.828（总 784 > 容器 720）
教训：早先"其余 34 条裸 1fr = CJK 可断 ⇒ 低风险"对 **EN 不成立**（长词不可断 ⇒ 撑轨道）；今后同类审计需三语分别代入。
修：minmax(0,1fr) 使轨道可收缩 + 卡片兜底 min-width:0（防卡内长串再顶宽）。 */
@media (min-width: 681px) { .authors-directory { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.person-card { min-width: 0; }
/* ---- #5 作者個人页（依据 = raw-n9 设计稿；包内该页用的呈 3 列卡片网格，设计稿为竖列行） ----
① 文章竖列行：大图左 + 文本右（kicker/标题/导言/日期），白底卡片 */
.author-rows { display: grid; gap: 10px; }
.author-row { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; padding: 10px; background: var(--card); border: 1px solid #ebe5db; box-shadow: var(--shadow); border-radius: var(--radius); }
.author-row img { width: 100%; height: 100%; object-fit: cover; min-height: 150px; }
.author-row h3 { font-family: var(--serif); font-size: 21px; margin: 4px 0 6px; }
.author-row p { font-size: 13px; color: #77716a; margin: 0 0 8px; }
.author-row time { font-size: 12px; color: #999; }
@media (max-width: 680px) { .author-row { grid-template-columns: 1fr; } .author-row img { min-height: 0; height: 190px; } }
/* ② 右栏「熱門閱讀」带缩略图+日期（设计稿；包内为纯文字 ） */
.hot-media { display: grid; gap: 2px; }
.hot-media a { display: grid; grid-template-columns: 30px 96px minmax(0, 1fr); gap: 9px; align-items: center; padding: 9px 0; border-top: 1px solid #efe9df; color: inherit; }
.hot-media a:first-child { border-top: 0; }
.hot-media .num { font-family: Georgia, serif; font-size: 22px; color: var(--red); }
.hot-media img { width: 96px; height: 62px; object-fit: cover; border-radius: 3px; }
.hot-media b { display: block; font-size: 13px; line-height: 1.45; }
.hot-media small { display: block; font-size: 11px; color: #999; margin-top: 3px; }
/* ③ 右栏「其他作者」（设计稿；包内无此块） */
.other-authors { display: grid; gap: 2px; }
.other-authors a { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid #efe9df; color: inherit; }
.other-authors a:first-child { border-top: 0; }
.other-authors .oa-av { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: #d3d3d3; display: grid; place-items: center; font-family: var(--serif); font-size: 20px; }
.other-authors .oa-av img { width: 100%; height: 100%; object-fit: cover; }
.other-authors b { display: block; font-family: var(--serif); font-size: 15px; }
.other-authors small { display: block; font-size: 11px; color: #77716a; margin-top: 2px; }
.other-authors em { display: block; font-style: normal; font-size: 11px; color: #999; margin-top: 3px; line-height: 1.5; }
/* 客户 #17（2026-10-07）：議題页「推薦作者」**作者简介不用全部展示** —— 设计稿该行为**单行**（如「長期關注中美關係、亞太安全與地緣政治。」）
⇒ 长简介（ar_full_bio）截断为单行省略号；**完整简介仍在作者個人页呈现**（不丢信息） */
.sidebar .other-authors em { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .other-authors small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---- #6 频道页（A 案；依据 = 3-議題.png ／ raw-n6 设计稿）----
a) 频道头：标题 + 6 项子导航**同行**（当前项红下划线）—— 包内为“独立白条” ⇒ 重排
b) C2 本期精選：设计稿 = 3 列**竖排卡**（图在上）—— 与 home.css 的 .editor-card（横向 3 欄）不同 ⇒ 垂直变体（仅 .ch-picks 作用域）
c) C3 列表右栏：头像+姓名+头衔+日期竖排
d) C4b 側栏地區導覽：3 列×2 行 + 当前项红框 */
.channel-head { display: flex; align-items: flex-end; gap: 26px; border-bottom: 1px solid #e8e2d9; margin-bottom: 14px; }
.channel-title { margin-bottom: 0; }
.channel-tabs { background: none; border: 0; margin: 0 0 0 auto; gap: 20px; flex-wrap: nowrap; }
.channel-tabs a { padding: 4px 0 10px; border-right: 0; font-family: var(--sans); font-size: 14px; font-weight: 600; color: #5f5d59; }
.channel-tabs a.active, .channel-tabs a:hover { color: var(--red); box-shadow: inset 0 -3px var(--red); }
@media (max-width: 980px) { .channel-head { flex-wrap: wrap; gap: 10px; } .channel-tabs { margin-left: 0; flex-wrap: wrap; gap: 14px; } }
/* b) 本期精選（仅議題页） */
.ch-picks .editor-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ch-picks .editor-card { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 0 10px; align-items: start; }
.ch-picks .editor-card > img { height: 150px; }
.ch-picks .editor-main { padding: 10px 12px 6px; }
.ch-picks .editor-main p { white-space: normal; overflow: visible; }
.ch-picks .editor-card .author-chip { border-left: 0; padding: 0 12px; grid-template-columns: 38px minmax(0, 1fr); }
.ch-picks .editor-card .author-chip .avatar { width: 38px; height: 38px; }
.ch-picks .editor-card .chip-date { grid-column: 2; font-style: normal; font-size: 11px; color: #999; }
@media (max-width: 680px) { .ch-picks .editor-list { grid-template-columns: 1fr; } }
/* c) 列表右栏（作者+头衔+日期）
❗ 2026-10-06 修复（测试 P1 移动端横溢 10 页）：客户包 channel.css 有 `@media(max-width:680px){.article-row .row-author{display:none}}`，
本组 compat 规则无媒体查询且最后加载 ⇒ 同权重后声明优先 ⇒ 移动端把客户包"该隐藏的块"渲染出来 ⇒ nowrap 内容撑爆行（ov 72~992px）。
修：全部 row-author 规则**限定到客户包显示该块的区间**（min-width:681px）⇒ ≤680 自动回落客户包 display:none。
通用原则：compat 覆盖客户包"某档才生效/才隐藏"的规则时，必须用同一媒体查询区间限定。 */
@media (min-width: 681px) {
.article-row .row-author { display: flex; align-items: center; gap: 8px; }
.article-row .row-author b { display: block; font-size: 12px; }
.article-row .row-author small { display: block; font-size: 11px; color: #77716a; }
}
/* c2) 真实数据下「头衔」过长（实测 17–22 字，栏宽 ~105px）⇒ 换 2–3 行 ⇒ 列表行高被撑大。
设计稿（3-議題.png）该处用短头衔（7 字级）⇒ 该槽位为 **1 行**；侧栏「推薦作者」的头衔与简介同样各 1 行（设计实测）⇒ PM 裁定**统一 1 行省略**（设计优先于推断）。
作用域：`.article-row .row-author small`（12 频道页 + /latest/ 列表）＋ `.other-authors small/em`（右栏推薦作者/其他作者，实测同病）｜ 不改变设计意图（仍单行显示，仅超长省略）*/
@media (min-width: 681px) { .article-row .row-author > span + span { min-width: 0; } } /* 与 c 同区间（≤680 该块隐藏） */
.other-authors a > span + span { min-width: 0; }
/* c2-b) ⚠️ 溢出修复（测试实测 P0）：`.article-list` 是**单 auto 轨道 grid** ⇒ 轨道按行 max-content 定尺；
c2 的 nowrap 让作者头衔成"不可断长串" ⇒ 某页（/topics/society-culture/）行宽被顶到 1131px（容器 878）⇒ 压右栏
修：容器轨道改 minmax(0,1fr) ⇒ 行宽回到容器宽；c2 的省略号仍生效（测试已对照实验确证因果）
作用域：`.article-list`（频道页/最新页列表容器）｜ 设计意图：否（仅让 1fr 轨道可收缩，同 #1 手法）*/
.article-list { grid-template-columns: minmax(0, 1fr); }
/* c4) 无特色图的行 ⇒ 少一个 grid item ⇒ 文本/作者块**整体前移一列**（运维实测：.row-author 宽 105→552→805）
修：显式固定列位（缩略图缺位时第 1 列留空，列位不串；不改模板与设计）
作用域：`.article-row`（频道页/最新页列表）｜ 设计意图：否（有图时布局与原先完全一致）*/
.article-row > div:not(.row-author) { grid-column: 2; }
.article-row > .row-author { grid-column: 3; }
/* c5) 列表行里的作者头像被撑高（用户直报"只见额头/头发"）
根因：客户包 `.article-row img{height:105px}` 命中**行内所有 img**（含 38×38 头像框内的头像）
⇒ 实测 img 盒 = 36×105（框 38×38，overflow:hidden）⇒ object-fit:cover 只露出顶部一条 ⇒ 只见额头/头发
修：头像框内 img 高度回归 100%（其余 img 的 105px 规则不动）
作用域：`.article-row .row-author .avatar img`（频道页/最新页列表）｜ 设计意图：否（头像本就应填满圆框）*/
@media (min-width: 681px) { .article-row .row-author .avatar img { height: 100%; } } /* 与 c 同区间 */
/* c6) 議題页「本期精選」三卡文字块起点不齐（用户直报；测试复现+实测修法）
现象：卡高 478/478/478 等高 ✅，但卡内 `.editor-main` top = 162/187/150（差 37px）⇒ 文字参差
机制：`.editor-card` 单列 grid + align-content:normal ⇒ 被最高卡撑高后，多余空间按 auto 轨道分配 ⇒ 内部块下移不等
修：`.ch-picks .editor-card{align-content:start}` ⇒ 实测 `.editor-main` top = 150/150/150 ✅（测试实测）
作用域：`.ch-picks`（仅議題页本期精選）｜ 设计意图：否（只让文字块起点对齐）*/
.ch-picks .editor-card { align-content: start; }
@media (min-width: 681px) { .article-row .row-author small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* 与 c 同区间 */
.other-authors small,
.other-authors em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* c3) 右栏「熱門閱讀」标题：实测 1–3 行天然不同 ⇒ 第 44 条要求固定槽位显式声明上限（取 3：只封顶不砍信息）*/
.hot-media b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 681px) { .article-row .row-author .row-date { display: block; font-style: normal; font-size: 11px; color: #999; margin-top: 2px; } } /* 与 c 同区间 */
/* d) 側栏地區導覽（3×2，当前项红框） */
.sidebar .tile-grid.regions { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sidebar .tile-grid.regions .tile { padding: 6px; }
.sidebar .tile-grid.regions .tile img { height: 58px; margin-bottom: 6px; }
.sidebar .tile-grid.regions .tile b { font-size: 12px; }
.sidebar .tile-grid.regions .tile p, .sidebar .tile-grid.regions .tile span { display: none; }
.sidebar .tile-grid.regions .tile.is-current { border: 2px solid var(--red); }
/* e) C6 地區频道标题区第二行（term 名 + 简介；设计稿 raw-n6；議題页无此行） */
.channel-sub { display: flex; align-items: baseline; gap: 18px; margin: 2px 0 14px; }
.channel-sub h2 { font-family: var(--serif); font-size: 30px; margin: 0; }
.channel-sub p { color: #6d6861; font-size: 14px; margin: 0; }
@media (max-width: 680px) { .channel-sub { flex-direction: column; gap: 6px; } }
/* ---- #7 文章详情页（依据 = raw-n8 设计稿；包内 article.html 为“文本演示”形态）----
说：本组同样是**设计稿有、包 CSS 无/简** 的部分；仅在兼容层实现，客户包一字未改。
⚠️ 作用域纪律（第 36 条）：本条每条规则均**只命中文章详情页**（`.article-*` / `.author-intro` / `.related-mini`）
—— 其中 `.related-mini` 仅 variant 3/8（文章页）使用，`.article-*` 仅 single.php 使用（已 grep 全模板核实）
① M2 分類標籤：设计稿 = 红竖线 + 红字（包 `.kicker` 只有颜色）—— 作用域 = `.article-header`（仅文章页）
② M5 工具条：设计稿为**真控件**（分享/收藏/字号）⇒ 按钮去原生镀铬；分組间加细分割线—— 作用域 = `.article-meta-line` / `.article-tools`（仅文章页）
③ M5c 字号调节生效（基础可用：fs-1/2/3 仅改正文字号，不改客戶声明）—— 作用域 = `.article-body`
④ M8 引用块：设计稿 = **红色大引号 + 右侧署名行**—— 作用域 = `.article-body blockquote`
⑤ R2 相關文章日期：复用包 `.meta`（零新增规则）⇒ 仅把它放到标题列的第二行—— 作用域 = `.related-mini`
⑥ R4 作者介紹（变体 8）：设计稿 = **大圆肖像（包 44px）+ 长简介（包只有一行式 .person）**—— 作用域 = `.side-box.author-intro`（文章页专属类）*/
/* ① */
.article-header .kicker { padding-left: 9px; border-left: 4px solid var(--red); line-height: 1.25; }
/* ② */
.article-meta-line > .meta { border-left: 1px solid #e0d9cf; padding-left: 12px; }
.article-tools button { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.article-tools button:hover { color: var(--red); }
.article-tools .tool-save,
.article-tools .tool-save + .tool-fs { border-left: 1px solid #e0d9cf; padding-left: 10px; }
.article-tools .tool-fs.is-on,
.article-tools .tool-save.is-on { color: var(--red); }
/* ③ */
.article-body.fs-1 { font-size: 16px; }
.article-body.fs-3 { font-size: 21px; }
/* ④（标记不占正文宽度：引号定位在左侧留白；署名右对齐）*/
.article-body blockquote { position: relative; padding-left: 74px; }
.article-body blockquote::before { content: "❝"; position: absolute; left: 24px; top: 10px; font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--red); }
.article-body blockquote cite, .article-body blockquote .wp-block-quote__citation { display: block; text-align: right; font-style: normal; font-family: var(--sans); font-size: 13px; color: #6d6861; margin-top: 10px; }
.article-body blockquote p:last-of-type { margin-bottom: 0; }
@media (max-width: 680px) { .article-body blockquote { padding-left: 56px; } .article-body blockquote::before { left: 16px; font-size: 36px; } }
/* ⑤ */
.related-mini .meta { grid-column: 2; align-self: start; }
/* 客户 #22（2026-10-07）：文章内页「相關文章」显示问题 —— 实测缩略图（60px 高）占满 grid 第 1 行 ⇒
标题与日期被撑开一道大空档（现状截图：日期远离标题）。修：缩略图**跨两行**（grid-row:1/span 2）
⇒ 第 1 行高 = 标题高、日期紧贴标题下方（与设计稿 raw-n8 一致：缩略图 92×60 居左，标题 2 行 + 日期紧凑）。 */
.side-box .related-mini img { grid-row: 1 / span 2; }
.side-box .related-mini b { line-height: 1.35; }
/* ⑥（⚠️ 必须限定 .author-intro：`.side-box.authors .person .avatar` 会同时命中**首页/最新/频道页（变体1）的推薦作者 3 行**——2026-10-05 测试报回首页回归，已修）*/
.side-box.author-intro .person .avatar { width: 76px; height: 76px; font-size: 26px; }
.side-box.author-intro .author-bio { font-size: 13px; line-height: 1.9; color: #5f5a54; margin: 6px 0 0; }
/* ⑧ 页脚法务三项成链（2026-10-06 用户要求，PM 裁定 D 类偏离；补丁清单 #8）——
症状：包内 `.copyright` 法务三项为纯文本，用户要求可点击；直接加 会被
`.footer a{display:block;font-size:12px;color:#bdbdbd}` 命中 ⇒ 换行 + 变灰变大。
修法：限定作用域还原为与纯文本现值逐值一致（rgb(155,155,155) / 11px / inline；无下划线）。
作用域：仅 `.copyright` 内三项；快速連結/熱門議題/熱門地區 仍按包内 display:block 不变。 */
.footer .copyright a { display: inline; color: rgb(155, 155, 155); font-size: 11px; text-decoration: none; line-height: inherit; }
/* ══ 2026-10-07 客户 #19 / #28（长作者名显示异常 / 英文版字溢出框外）══
根因（运维定量）：最长英文名 `Anna Rosario Malindog-Uy`(24 字符) / `Chanakarn Suwancharoen`(22) 在**窄列**
内撑破容器（裸 `1fr` / 无 min-width 同族；测试首个可复现坐标 = 768×1024×en 首页 編輯選讀卡 ov=19px）。
PM 裁定 = **按容器语义分两类**（名字不得不可辨认）：
A 类【紧凑 chip：編輯選讀卡 / 卡片内联署名 / 窄列】⇒ 省略号 + **title 悬浮全名**（卡高不变）
B 类【有纵向空间：作者名錄页卡片 / 作者個人頁 / 文章頁署名】⇒ 折行完整显示（允许自然变高）
⚠️ 配合：A 类元素的 PHP 侧已补 `title="全名"`（front-page / page-latest / sidebar / page-authors） */
/* —— A 类：省略号（名称不可辨认时靠 title 兜底） —— */
.content-col .editor-card .author-chip { min-width: 0; grid-template-columns: 46px minmax(0, 1fr); }
.content-col .editor-card .author-chip > div { min-width: 0; }
.content-col .editor-card .author-chip b,
.content-col .editor-card .author-chip small,
.content-col .byline b,
.content-col .byline small,
.content-col .row-author b,
.sidebar .person b,
.sidebar .other-authors b,
.sidebar .ha-list b,
.sidebar .author-intro b { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content-col .byline,
.content-col .byline > span:last-child,
.content-col .row-author { min-width: 0; }
.sidebar .person > div,
.sidebar .other-authors a > span:last-child,
.sidebar .ha-list a > span:last-child { min-width: 0; }
/* —— B 类：折行完整显示（不截断人名） —— */
.content-col .person-card { min-width: 0; }
.content-col .person-card h3,
.content-col .person-card .expertise,
.content-col .article-author b,
.content-col .author-hero h1,
.content-col .author-head h1,
.content-col .author-rows b { white-space: normal; overflow-wrap: anywhere; }
/* ══ 2026-10-07 客户 #26（英文版存在中文）：未译文章的英文提示块（single.php）══
英文视图 + 无 `ar_content_en` ⇒ 不出中文正文，改出本提示 + 「读中文版」链接（PM 裁定 b）。
样式按本站卡片语言（白底 + 阴影 + 圆角），零依赖客户包类名。 */
.ar-en-notice { background: var(--card, #fff); border: 1px solid #ebe5db; border-radius: var(--radius, 4px); box-shadow: var(--shadow, 0 1px 2px rgba(0,0,0,.06)); padding: 22px 24px; margin: 6px 0 4px; }
.ar-en-notice p { margin: 0 0 8px; font-size: 15px; color: #5c5a56; }
.ar-en-notice p strong { font-family: var(--serif); font-size: 18px; color: #222; display: block; margin-bottom: 6px; }
.ar-en-notice-btn { display: inline-block; margin-top: 4px; padding: 8px 16px; background: var(--red, #a52a2a); color: #fff; border-radius: 3px; font-size: 13px; font-weight: 700; text-decoration: none; }
.ar-en-notice-btn:hover { opacity: .9; }
.content-col .latest-list .byline > div { min-width: 0; }
.content-col .latest-list .byline small { display: block; font-size: 11px; color: #86817a; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content-col .latest-list article p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ⚠️ 2026-10-07 回归修复（开发自检发现）：上面的「摘要单行截断」= nowrap ⇒ 该列的 min-content = 整段文字宽
⇒ 在**裸 `1fr`** 轨道下会把 `.latest-list article` 撑破（实测 390 档 EN：article 496 > 视口 390，ov=118px）
⇒ 同族修法：轨道改 `minmax(0, 1fr)` + 文本列 `min-width:0`（允许收缩 ⇒ ellipsis 正常生效，桌面逐值不变）
注：≤680 档包内为 `85px 1fr`（两列），需各自覆盖 */
.content-col .latest-list article { grid-template-columns: 120px minmax(0, 1fr) 110px; }
.content-col .latest-list article > div { min-width: 0; }
@media (max-width: 680px) {
.content-col .latest-list article { grid-template-columns: 85px minmax(0, 1fr); }
}
.content-col .latest-list article .meta { margin-top: 4px; font-size: 12px; color: #999; }
/* ══ 2026-10-07 客户 #11 / #12（首頁「最新作者觀點」）══
#11 头像展示不完全：包内 `.latest-list article img{height:64px}` 误命中头像 img ⇒ 实测 36×64（容器 38×38 + overflow:hidden）
⇒ 头像被压扁裁切。修：头像层回正方形 + object-fit:cover + 圆形。
#12 短标题偏上 + 增加日期：设计稿此行 = kicker/标题/摘要一行/日期（+ 右侧 姓名+头衔）
⇒ 摘要改单行截断（行高统一 ⇒ 标题位置不随摘要行数漂移）+ 补 .meta 日期 + 右侧补头衔。 */
.content-col .latest-list .byline .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
/* ══ 2026-10-07 客户 #2：文章页工具按钮反馈 toast（分享/收藏/字号）══
固定底部居中胶囊；`.is-on` 淡入上浮；`prefers-reduced-motion` 时不做位移。 */
.ar-toast { position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 12px); z-index: 9999;
background: rgba(24, 28, 36, .94); color: #fff; font-size: 13px; line-height: 1; padding: 11px 18px;
border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.22); opacity: 0; pointer-events: none;
transition: opacity .18s ease, transform .18s ease; white-space: nowrap; max-width: calc(100vw - 32px); }
.ar-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .ar-toast { transition: opacity .01s linear; transform: translate(-50%, 0); } }
/* ══ 2026-10-07 客户 #24：长文分页 UI（「约一页 A4 正文量」分页）══
上/下一页 + 「第 N / M 頁」计数；沿用本站卡片配色与红色主色。 */
.ar-pager { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
margin: 26px 0 6px; padding-top: 18px; border-top: 1px solid #ebe5db; }
.ar-pager-nav { display: inline-block; padding: 8px 16px; border: 1px solid #e2dbd0; border-radius: 3px;
background: var(--card, #fff); color: var(--red-d); font-size: 13px; font-weight: 700; text-decoration: none;
box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.ar-pager-nav:hover { border-color: var(--red-d); }
.ar-pager-num { font-size: 13px; color: #86817a; letter-spacing: .02em; }
@media (max-width: 680px) { .ar-pager { gap: 10px; } .ar-pager-nav { padding: 7px 13px; font-size: 12px; } }
/* 客户 #20：作者页翻页的当前页高亮（复用 .ar-pager 基础样式） */
.ar-pager-nav.is-current { background: var(--red, #a52a2a); border-color: var(--red, #a52a2a); color: #fff; }
/* ══ 2026-10-07 客户 #18（議題页「本期精選」重新修改）：摘要限 2 行 + 省略号（对齐设计稿）══
设计稿该卡 = kicker / 标题 / **摘要约 2 行（末尾省略）** / 头像+姓名+头衔 / 日期
⚠️ 同步约束：2 行截断会改变卡片高度 ⇒ 需保证**同行等高**（卡片默认 stretch ⇒ 自然等高）；
Firefox 对 -webkit-line-clamp 支持良好（116+）；若异常 ⇒ 兜底方案：max-height + overflow:hidden */
.ch-picks .editor-main p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
/* 客户 #23：多作者并排（文章页署名） */
.article-meta-line { flex-wrap: wrap; row-gap: 6px; }
.article-meta-line .article-author + .article-author { border-left: 1px solid #e7e0d7; padding-left: 12px; }
.article-meta-line .article-author b { overflow-wrap: anywhere; }
/* ══ 2026-10-07 客户 #21（作者页「最新作者觀點」按 UI 调整）—— PM 裁定 (a)：**头衔折行完整显示** ══
依据既有规则（#19/#28）：**有纵向空间的列表/头部 = 类别 B ⇒ 折行、不截断人名/头衔**（名单里截断 = 内容损伤）
⚠️ 仅作用于作者页该块（`.authors-latest` 标记类）；首页「最新作者觀點」与各紧凑 chip **保持省略号 + title 不变** */
/* ⚠️ 提权：上面的 `.content-col .latest-list .byline small`（0,3,1）会压过 `.authors-latest .byline small`（0,2,1）
⇒ 这里用同权级 + 后声明覆盖（同权级下后者胜） */
.content-col .authors-latest .byline small,
.content-col .authors-latest .byline b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.authors-latest .latest-list article { align-items: center; }
/* 客户 #22（测试定点，2026-10-07）：相關文章**标题限 2 行**（设计稿 raw-n8 = 缩略图 + 标题 2 行 + 日期）
现状：未 clamp ⇒ 长标题折 3 行 ⇒ 条目高度不齐（实测 [77,77,77,77,93]，标题行数 1.5/2/2/2/3）
依据：设计稿 + 本项目**已登记偏离 B-04/D17**「设计稿 2 行 ｜ 我方 ~3.2 行 ⇒ 部署后 clamp 2」⇒ 立即执行 */
.side-box .related-mini b {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
/* ⚠️ 2026-10-07 测试复验补修（#21 EN）：作者列宽仅 110px ⇒ **英文名被压成逐音节竖排**（实测 `Wu Nan-Jiang` 盒 65×76 / 3 行）
修：① 作者列给最小宽度 ② 姓名**不断行**（`overflow-wrap: normal` + nowrap）③ 头衔保持折行但限 3 行 ⇒ 三语皆稳、同排等高 */
.authors-latest .latest-list article { grid-template-columns: 120px minmax(0, 1fr) minmax(170px, 200px); align-items: center; }
/* 2026-10-13 PM 令 P0-3（用户点名「那思爾· 阿里·沙·布科哈里」被裁）：**判据①"姓名单行"作废**
⇒ 新判据 = **完整显示且不越界** ⇒ 长名可**换行**（不裁切、不溢出）✅ */
.content-col .authors-latest .byline b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; word-break: break-word; }
/* 同排等高（PM 裁定二选一：按最高卡对齐）——EN 姓名/头衔更长 ⇒ 统一最小高，避免 93/120 参差 */
.authors-latest .latest-list article { min-height: 120px; }
.authors-latest .byline b { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; }
.authors-latest .byline small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
@media (max-width: 680px) {
.authors-latest .latest-list article { grid-template-columns: 85px minmax(0, 1fr) minmax(120px, 150px); }
}
/* 2026-10-07（PM/运维定位 · h1 唯一性修复的样式补偿）：
「本期焦點作者」名原为 、受客户包 `.author-hero h1{font-family:var(--serif);font-size:38px;margin:0}` 控制；
改为 后**必须复用同一套值**，保证视觉逐值不变 ✅ */
.author-hero .featured-author-name { font-family: var(--serif); font-size: 38px; margin: 0; }
@media (max-width: 680px) { .author-hero .featured-author-name { font-size: 30px; } }
/* 2026-10-07 h1 唯一性修复的样式补偿（議題页/地區页焦点文章标题原为 、受客户包 `.hero h1` 控制）：
改为 后必须复用同一套值，保证视觉逐值不变 ✅ */
.hero .hero-title { font-family: var(--serif); font-size: 38px; line-height: 1.25; margin: 8px 0 14px; letter-spacing: -.6px; }
@media (max-width: 680px) { .hero .hero-title { font-size: 30px; } }
/* 2026-10-08 用户报两处视觉问题（PM 令）：
① 卡片内「作者行」左起点比「摘要」更靠左 ⇒ 对齐（.editor-main 内边距 12px ⇒ 元信息行同）
② 议题/地区页「焦点文章」首篇大卡：摘要偏短 ⇒ 下部大块留白 ⇒ 取更长正文并**行夹填充**（超出行数以 … 结束）
作用域限定：`.ch-picks` 与 `.feature-card.large`（不动其他卡片） */
.ch-picks .editor-card > .meta { margin: 0 12px; } /* 用 margin（非 padding）⇒ getBoundingClientRect().left 与摘要一致，可测量差 = 0 */
.feature-card.large .copy p { display: -webkit-box; -webkit-line-clamp: 21; -webkit-box-orient: vertical; overflow: hidden; }
/* 2026-10-08（用户需求）：焦点大卡「作者块」上移至标题与正文之间 —— 复用 .row-author 结构，仅补"介绍"行与间距（不新造样式） */
.feature-card.large .copy .pick-author { margin: 6px 0 8px; gap: 8px; padding-left: 0; border-left: 0; }
.feature-card.large .copy .pick-author .author-bio { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; color: #77726b; font-style: normal; flex-basis: 100%; }
/* 2026-10-08 PM 令·用户"头像显示不完整"（口径甲）：**圆形只裁四角空白** —— 统一 .avatar 图片规则（width+height+object-fit） */
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* 本期精選作者行（新增头像；复用 .row-author 结构） */
.ch-picks .editor-card .row-author.picks-author { padding: 0 12px; gap: 7px; font-size: 12px; }
.ch-picks .editor-card .row-author.picks-author .avatar { width: 30px; height: 30px; font-size: 13px; }
.ch-picks .editor-card .row-author .picks-date { color: #999; font-size: 11px; margin-left: auto; }
/* 2026-10-08 PM 令（用户："精選三篇摘要统一成两行"）：clamp 2 行 + **min-height 两行** ⇒ 三篇等高、底边对齐 ✅ */
.ch-picks .editor-card .editor-main p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; line-height: 1.3; }
/* 2026-10-08 PM 令（用户要求）：
① 本期精選**标题两行对齐**（min-height 保底 ⇒ 仅一行也占两行高）
② 焦点区**压矮**：左大卡只放摘要（4 行）｜右小卡标题 2 行 + 摘要 2 行 ⇒ 左右等高、整体下降 */
.ch-picks .editor-card .editor-main h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; line-height: 1.3; }
.feature-card.large .copy p { -webkit-line-clamp: 7; min-height: 0; } /* PM 2026-10-08：4~7 行自适应 */ /* 2026-10-08 PM 裁定(c′)：摘要 4~6 行自适应（填满可用高度、上限 6 行；图高保持 140px 不再偏离客户包）*/
.feature-card:not(.large) h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feature-card:not(.large) .copy p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 2026-10-08 用户"只露额头"**真因修复**（运维实渲染铁证：img 框 42x270 ≠ 容器 44x44）：
客户包 CSS `.feature-card.large img{height:270px}` 会**命中卡内头像**（特异性 0,2,1 高于 `.avatar img` 0,1,1）
⇒ 头像被撑到 270px 高 + overflow:hidden ⇒ **只露一条竖条** ⚠️
修：以**更高特异性**限定卡内头像 img 撑满其圆形容器（禁 height:270 生效）✅ */
.feature-card .row-author .avatar img,
.feature-card .pick-author .avatar img,
.feature-card .author-chip .avatar img,
.ch-picks .editor-card .avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* 作者名录头像（另案：源图非方形 ⇒ img 框 136x167）⇒ 容器等比 + img 撑满 + 居中裁四角 */
.person-card .avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* 2026-10-08 作者名录（非方形源图）：容器 height:auto ⇒ img 的 height:100% 不解析（实测 img 130x160 ≠ 容器 132x132）
⇒ 容器 position:relative + img 绝对定位填满 ⇒ 任何比例都等比裁四角、不变形 ✅ */
.person-card .avatar { position: relative; overflow: hidden; }
.person-card .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* 2026-10-08 PM 裁定(乙)：执行用户令"两个模块都压矮一些，左侧只放摘要就行"
⇒ 右列小卡图高 170px(客户包) → **140px**（等比压缩 ~18%，非重排版）⇒ 整块变矮 ⇒ 左卡 4 行摘要即可填满 */
.feature-card:not(.large) img { height: 140px; }
/* 2026-10-08 补修：右两小卡**内容不等高**（如 diplomacy 295/329）⇒ 网格行高被撑 ⇒ 左卡出现 72px 余量 ⚠️
⇒ 使右卡内容区等高（flex column + copy 撑满）⇒ 两卡等高 ⇒ 左卡 4 行摘要即可填满 ✅ */
.feature-grid .feature-card:not(.large) { display: flex; flex-direction: column; }
.feature-grid .feature-card:not(.large) .copy { flex: 1 1 auto; display: flex; flex-direction: column; }
.feature-grid .feature-card:not(.large) .copy p { flex: 0 0 auto; }
/* 2026-10-08 兜底（运维实测：精選第3卡 img 28x34 > 容器 30x30 ⇒ 同型残留）
全站头像 img 一律撑满其圆形容器；用 !important 压过客户包/其它高度的 img 规则（本处仅限 .avatar 作用域，风险可控） */
.avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; display: block !important; }
/* 2026-10-08 PM 令（P2·全站头像统一）：**桌面侧兜底** ——
上述 489 行同款规则写在 `@media (max-width:680px)` 内（仅对窄档生效）⇒ 桌面 1440 下竖图仍走 height:auto ⚠️
⇒ 此处**置于文件末尾、无媒体查询**，一次覆盖全站 137 个 `.avatar`：
竖图源（如 1179×1450）在 img 框 28×34 / 36×44 的问题 ⇒ 统一撑满圆形容器 ✅
判据：全站 `.avatar` 的 img 框 ≈ 容器框（差 ≤2px） */
.avatar img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
max-width: 100% !important;
max-height: 100% !important;
}
/* 2026-10-08 PM 令（P2·收尾）：**grid 容器内 height:100% 失效** ⇒ 改 absolute+inset（= 作者名录已验证有效的写法）
实测：`.avatar` 为 `display:grid` 时，子 img 的 `height:100%` / `max-height:100%` 因父高"不确定"而**不生效**
⇒ 竖图源（1179×1450）仍按比例撑高（28×34 / 36×44）⚠️
修法：`.avatar` 设 `position:relative`；img `position:absolute; inset:0` ⇒ 宽高**必然**等于容器内容框 ✅
范围：仅 `.avatar`（不动其它 img）｜ 判据：全站 137 个 `.avatar` 的 img 框 ≈ 容器框（差 ≤2px） */
.avatar { position: relative; }
.avatar img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
}
/* 2026-10-08 右两卡不等高（297/330 等）真因 = **网格两行行高不等**（各自按内容）
⇒ grid-auto-rows:1fr ⇒ 两行等分 ⇒ 右两卡严格等高 ⇒ 左卡（span 2）同步等高 ✅ */
.feature-grid { grid-auto-rows: 1fr; }
/* 2026-10-08 第一批（PM 令·用户已批准"按推荐执行"）
① #9 本期精選/作者行 ⇒ **真横排**（此前 display:block，日期仅 margin-left:auto ⇒ 未真正同行）
② #8-③ 首页議題/區域導覽宫格 ⇒ **方案(b) 压矮卡片**（原 tile 192px 高、图仅 74px ⇒ 卡内大片留白） */
.ch-picks .row-author.picks-author { display: flex; flex-direction: row; align-items: center; gap: 8px; }
/* 2026-10-11 批次15·P0 补修（测试定位）：首页「編輯選讀」`.author-chip b` 长名仍 nowrap+ellipsis ⇒ 同款修复 ✅ */
.content-col .editor-card .author-chip small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-picks .row-author.picks-author .picks-date { margin-left: auto; }
.tile-grid.topics .tile, .tile-grid.regions .tile { padding-bottom: 4px; }
/* 2026-10-14 用户报（第二次）：描述与「瀏覽最新文章」仍互相影响 —— 实测两者**同一行高**（描述 2019-2036 ／ 链接 2020-2037）
根因：卡片内容盒底部 = 描述行底部，而链接行**绝对定位**在 bottom:7px ⇒ 与描述末行重叠（重叠 16.4px）
修法（**卡高不变**）：图片 60→44px（腾出 16px）+ padding-bottom 4→20px（把链接行下移 16px）
⇒ 卡高 = 图60+4 = 图44+20 = 64px **不变** ✅，描述行与链接行**分别成行、不再重叠** ✅ */
.tile-grid.topics .tile img, .tile-grid.regions .tile img { height: 44px; }
/* 2026-10-14 用户报（20261012#7/#8）：手机端議題/區域導覽的**封面图**没填满宽度 ⇒ 图两侧出现大片灰白空白
实测（390）：卡宽 ~150px、图高 60px，而图按 contain 只占约 79px 宽 ⇒ **左右各约 35px 空白**（截图已证）
修法：图 **撑满卡宽 + object-fit:cover**（高度不变 ⇒ 卡高 148px 不变）⇒ 空白消除 ✅ */
.tile-grid.topics .tile img, .tile-grid.regions .tile img { width: 100%; object-fit: cover; }
.tile-grid.topics .tile, .tile-grid.regions .tile { padding-bottom: 20px; }
.tile-grid.topics .tile img, .tile-grid.regions .tile img { height: 60px; }
/* 2026-10-08 第一批·#20（PM 令·用户手机截图 #143）：`/authors/`「本期焦點作者」在 ≤680px 被挤成竖排
根因实测：`.author-hero` 为 grid，列 = `180px 0px 118px`（**中间列 0px**）⇒ 文字列仅 118px ⇒ 逐字换行 ⚠️
修法：窄档改**单列竖排**（图在上、文在下），并适度缩小头像 ⇒ 消除挤压 ✅ */
@media (max-width: 680px) {
.author-hero, .author-hero.has-metrics { grid-template-columns: minmax(0, 1fr); row-gap: 12px; text-align: left; } /* ⚠️ 必须带 .has-metrics：包版媒体查询只写 .author-hero ⇒ 被 2 类选择器压过 */
.author-hero .portrait { width: 132px; height: 132px; margin: 0 auto; }
.author-hero h1 { font-size: 28px; }
}
/* 2026-10-08 批次2·#10（PM 令·用户"文字居左 + 两行对齐"）：作者名录卡**由居中改居左**（多行简介参差 + 两行未对齐） */
.authors-directory .person-card { text-align: left; }
.authors-directory .person-card h3, .authors-directory .person-card p, .authors-directory .person-card a { text-align: left; }
.authors-directory .person-card .avatar { margin: 0 0 8px; }
/* 2026-10-08 批次3·#1（PM 纠正判据后确认）：`/latest/` 侧栏「推薦作者」标题**折 2 行**
实测：容器 258px ｜ 标题（推薦作者 + RECOMMENDED AUTHORS，21px）单行需 ~290px ⇒ 必折 ⚠️
修法：该栏标题**缩字号 + 收紧字距**使单行放得下（不 nowrap ⇒ 不会横向溢出）✅ */
.side-box:has(.other-authors) .section-title.compact > div { letter-spacing: -0.2px; }
.side-box:has(.other-authors) .section-title.compact > div { font-size: 19px; }
.side-box:has(.other-authors) .section-title.compact small { font-size: 10px; letter-spacing: 0; }
/* #1 追加：英文标题更长（Recommended Authors + 小标）⇒ 再缩（en 专用），确保单行 ✅ */
html[lang^="en"] .side-box:has(.other-authors) .section-title.compact > div { font-size: 17px; }
html[lang^="en"] .side-box:has(.other-authors) .section-title.compact small { font-size: 9px; letter-spacing: 0; }
/* #1 终修（PM 首选方案）：该栏标题 **nowrap**（保证单行）＋ 允许轻微溢出由父容器裁切
⚠️ 已复核：3 语 × {1440,390} 文档无横向溢出（ov=0）✅ */
.side-box:has(.other-authors) .section-title.compact > div { white-space: nowrap; overflow: hidden; }
/* 2026-10-08 批次4·#1 终修（PM 令·消除"半截字"）：
现状 en @1440：clientW 258 ｜ scrollW 338 ⇒ nowrap 后被 overflow:hidden **裁成半截字** ⚠️
⚠️ 侧栏列宽仅 280px ⇒ **"放宽容器"不可行** ⇒ 改为**缩到放得下**（标题 16px + 小标 8px ⇒ ~250px ≤ 258）✅ */
.sidebar .section-title, .side-box .section-title { white-space: nowrap; }
.sidebar .section-title > div, .side-box .section-title > div { overflow: hidden; text-overflow: ellipsis; }
html[lang^="en"] .sidebar .section-title > div, html[lang^="en"] .side-box .section-title > div { font-size: 16px; letter-spacing: -0.2px; }
html[lang^="en"] .sidebar .section-title small, html[lang^="en"] .side-box .section-title small { font-size: 8px; letter-spacing: 0; }
/* ⚠️ 2026-10-09 PM：修复侧栏小标题「推薦作者 RECOMMENDED AUTHORS」英文小标被容器裁出"半截字"
做法：在真正溢出的元素上启用省略号（overflow+ellipsis），并允许其收缩（min-width:0）⇒ 不再出现半截字符 */
.side-box .section-title.compact > div{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.side-box .section-title.compact > div > small{ overflow:hidden; text-overflow:ellipsis; }
/* ⚠️ 2026-10-09 PM 优化：侧栏小标题的英文小标在窄容器内只能显示"RECO…"（观感差）
⇒ 侧栏场景直接隐藏该小标，仅保留主标题（1 行、无裁切、更干净） */
.side-box .section-title.compact > div > small{ display:none; }
/* 2026-10-09 批次5（PM 令·自行修复，不问用户）
#4「文章与文章有阴影、现在的网页没有」⇒ 客户包 --shadow 过淡（rgba(...,.07) / 18px）⇒ 增强至 .12 / 20px
#19「手机版首页封面图展示不完全」⇒ 窄档 .hero-img 高 220px ⇒ 加高至 270px（少裁切、减少"不完全"观感） */
/* #4 (PM 裁定甲): 保持客户包原值 --shadow 0 4px 18px rgba(37,31,24,.07) (客户文档注: 设计的效果) => 不改 */
@media (max-width: 680px) { .hero-img { height: 270px; min-height: 270px; } }
/* 2026-10-09 批次6（PM 令·自行修复）
#15 熱門閱讀：序号与标题**顶部对齐**（原 grid 默认 stretch ⇒ 两行标题时序号下沉/悬空）
#18 手机端补回页头副标题「全亚洲新闻评论与情势研判」（包版 ≤680px 隐藏了 .tagline）
#19 手机版封面图 ⇒ **(甲) contain 完整显示**（替换 270px 高度方案；上下可出现底色） */
/* 2026-10-10 #15 修正（PM 纠正·用户指出）：原 `flex-start` 仅治"两行下沉"，**一行时序号仍偏上/未居中** ⚠️
⇒ 正确目标 = 序号与标题**垂直居中**（一行=标题中线；两行=整块中线）✅
⇒ ① `align-items:center` ② 序号列**固定宽 28px + 不压缩/不换行** ③ 不设 min-height（高度随内容）✅ */
.hot li { align-items: center; }
.hot li > span, .hot li > em, .hot li > b:first-child { flex: 0 0 28px; width: 28px; text-align: center; line-height: 1; }
.hot li span { line-height: 1.15; }
.hot-media a { align-items: start; }
@media (max-width: 680px) {
.tagline { display: block !important; font-size: 12px; }
.hero-img { height: 270px; min-height: 270px; object-fit: contain; background: #f3efe8; }
}
/* 2026-10-09 #12-③：latest 列表行**多作者头像叠放**（原只 1 头像） */
.row-author .avatar + .avatar { margin-left: -10px; border: 2px solid #fff; }
.row-author b + .avatar { margin-left: 6px; }
.row-author .sep { color: #999; margin: 0 2px; }
/* 2026-10-09 batch8·#3（PM 令）：卡片 meta 行 → 「閱讀全文 →」按钮**紧贴（gap=0）** ⇒ 按客户图 128 补 14px 间距
⚠️ 覆盖**所有**同类位置（首页焦点卡/头条卡等，凡 .meta 后紧跟 .btn）✅ */
.meta + .btn { margin-top: 14px; }
.card .meta + .btn, .hero .meta + .btn, .latest-lead .meta + .btn { margin-top: 14px; }
/* 2026-10-09 batch8·#20（PM 裁定乙+修裁切）：区域图位比例渲染比 2.07 vs 源图 1.42 ⇒ cover **上下被切** ⚠️
⇒ 改 `object-fit: contain`（**完整显示、零裁切**）；侧边留白用浅底 + 居中，避免构图主体被切 ✅ */
.tile-grid.regions .tile img { object-fit: contain; background: #f4f4f2; }
/* 2026-10-09 batch8 附带（测试发现，与 #20 同因）：**议题图** topic-1..6 原 90×68 但渲染 ~124×60
⇒ ①2× 重采样 → 180×136 ②cover 上下裁切 ⇒ 改 `object-fit: contain`（与 #20 同法）✅ */
.tile-grid.topics .tile img { object-fit: contain; background: #f4f4f2; }
/* 2026-10-09 batch10·#4：早前批量选择器方案已废弃 —— 改用下方令牌级覆盖（一处覆盖全部容器，且不动客户包）✅ */
/* 2026-10-09 batch10·#4（PM 令·改档·变量级）：客户「文章与文章要有阴影（现太淡）」⇒ 把**常态阴影令牌**提升为客户包自带第二档
`--shadow` : 0 4px 18px rgba(37,31,24,.07) ⇒ **0 10px 28px rgba(28,23,18,.10)**（= 包内 `--shadow2` 原值）
⇒ **一处覆盖全部容器**：.card .side-box .tile .hero .article-row .latest-lead .feature-card .channel-hero .author-hero ✅
注：不动客户包 base.css（保持包文件原样）；本例为令牌覆盖，改后与 hover 档同值（原 hover 亦极淡，可接受）✅ */
:root { --shadow: 0 10px 28px rgba(28,23,18,.10); }
/* ⚠️ `.editor-card`（編輯選讀卡）**客户包设计即无阴影**（home.css 未挂 box-shadow，也不在 base.css 阴影容器列表内）
⇒ 测试依包核实 ⇒ **不纳入本批**（保持与客户包一致）；若客户图例显示该卡有阴影 ⇒ 以图例为准另议 ✅ */
/* 2026-10-10 batch12·#14：分頁「跳轉至 N 頁」控件樣式（與包內分頁一致的字距/色調；手機端自動換行）✅ */
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ar-jump { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 13px; color: var(--muted, #6c6964); }
.ar-jump input[type="number"] { width: 62px; padding: 5px 6px; text-align: center; border: 1px solid var(--line, #ddd6cc);
border-radius: var(--radius, 4px); background: #fff; font-size: 13px; -moz-appearance: textfield; }
.ar-jump input[type="number"]::-webkit-outer-spin-button,
.ar-jump input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ar-jump button { padding: 5px 12px; border: 1px solid var(--line, #ddd6cc); border-radius: var(--radius, 4px);
background: var(--card, #fff); color: var(--ink, #171818); font-size: 13px; cursor: pointer; }
.ar-jump button:hover { background: var(--red, #b41624); border-color: var(--red, #b41624); color: #fff; }
@media (max-width: 680px) {
.pagination { justify-content: center; }
.ar-jump { margin-left: 0; width: 100%; justify-content: center; }
}
/* 2026-10-11 批次14·#9（PM 定案）：作者卡**簡介統一 2 行**（一行内容也占两行高）⇒ 卡片等高、「文章數/查看文章」两行对齐 ✅
原状：3 行×2 ｜ 2 行×1 ｜ 1 行×3（高低参差）⚠️ */
.person-card p, .person-card .bio, .person-card .expertise {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
min-height: calc(2 * 1.55em); line-height: 1.55;
}
.person-card .person-meta, .person-card .person-foot { min-height: 2.1em; }
/* 2026-10-17 客户 124（EN 作者页卡片排版）：与 122 中文卡**同一套规则** ✅
根因实测：名字长 ⇒ h3 换 2 行 ⇒ 卡高 334 vs 362（390）/ 336 vs 364（1440）；"View articles →" 随内容浮动
修法：① 卡 flex 列 + grid 拉伸等高 ② 姓名最多 2 行（1 行也占 2 行高）③ 简介已 2 行 clamp ④ 链接 margin-top:auto 固定卡底 */
.authors-directory .person-card { display: flex; flex-direction: column; height: 100%; }
.authors-directory .person-card h3 {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
min-height: 3.16em; line-height: 1.58;
}
.authors-directory .person-card > a { margin-top: auto; }
.authors-directory .person-card > p:last-of-type { margin-bottom: 6px; }
/* 2026-10-17 客户 122（作者卡设计稿 1:1 复刻）—— 逐项对齐图稿 ✅
图稿：大方形**圆角人像**(≈8-10px, 占卡宽≈80%) → **姓名 22-24px 粗体** → 专长 13px 灰 → 简介 13-14px 灰、**严格2行+…**
→ 「N 篇文章」13px 灰（**上方留较大间距**）→ 「查看文章 →」**红色加粗**（卡底）
现状（生产实测 390）：人像 radius 4px ｜ 姓名 18px ｜ 简介/专长/条数 11px ｜ 链接 11px ｜ 条数无额外间距 */
.authors-directory .person-card .avatar { border-radius: 9px; }
.authors-directory .person-card h3 { font-size: 22px; font-weight: 700; margin: 8px 0 4px; }
.authors-directory .person-card > p { font-size: 13px; line-height: 1.55; color: #77716a; }
.authors-directory .person-card > p:last-of-type { margin-top: 10px; }
/* 2026-10-17 客户 122（测试复核指出）：① 条数被 clamp 成 2 行高（多 20px 空白）② 专长被截断 ⇒ 与设计稿不符
修：专长**单行完整**（不 clamp）、简介 **2 行**、条数**单行**（不 clamp）⇒ 文本块 1+2+1 = 4 行 ✅ */
.authors-directory .person-card > p.pc-ex,
.authors-directory .person-card > p.pc-cnt {
display: block; -webkit-line-clamp: unset; -webkit-box-orient: initial;
overflow: visible; min-height: 0; height: auto;
}
.authors-directory .person-card > p.pc-bio {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; min-height: calc(2 * 1.55em); line-height: 1.55;
}
/* 2026-10-17 客户 122「文字间距必须按附件」—— 运维/我双方像素级量图一致（ink 间距 30/18/16/16/**52**/26 @447 卡宽）
换算到 178 卡宽：人像↓姓名 **12px** ｜ 姓名↓专长 **7** ｜ 专长↓简介 **6** ｜ 简介↓条数 **20**（= 卡宽 11.6%，普通行距 3.6% 的 **3.2 倍** ⚠️客户重点）｜ 条数↓链接 **10** ✅ */
/* 行高统一 1.45（≈19px）：贴近 122 的"ink 间距 6px"行距 ✅ */
.authors-directory .person-card > p { line-height: 1.45; }
.authors-directory .person-card .avatar { margin-bottom: 7px; }
.authors-directory .person-card h3 { margin: 0; line-height: 1.3; }
.authors-directory .person-card > p.pc-ex { margin-top: 2px; }
.authors-directory .person-card > p.pc-bio { margin-top: -18px; } /* 抵消 -webkit-box 首行下沉 ⇒ ink 6px ✅ */
.authors-directory .person-card > p.pc-cnt { margin-top: 42px; } /* ⭐ 客户强调的"较大间距"（目标 ink 20px）✅ */
.authors-directory .person-card > a { margin-top: 12px; } /* 「N 篇文章」上方留白（图稿）✅ */
.authors-directory .person-card > a { font-size: 13px; font-weight: 700; color: #b41624; }
@media (max-width: 680px) {
.authors-directory .person-card h3 { font-size: 20px; } /* 小屏略收，避免长名挤爆 ✅ */
}
/* 2026-10-11 批次14·#7（客户红字："可按照 8 的樣式調，現在空擋過大"）：
議題/地區頻道頁**焦点大卡**的 `.row-author` 原为 `display:block` ⇒ 头像(44) + 姓名(25) + 简介(19) **竖排 = 88px** ⚠️
⇒ 按 **#8 横排紧凑样式** 改为一行（头像 + 姓名 + 简介 同行）⇒ 高度 88 → ~44px（省 ≈44px）✅
⚠️ 沿用既有约定：仅 ≥681px 生效（≤680 客户包隐藏该块）✅ */
@media (min-width: 681px) {
.channel-hero .row-author,
.feature-card .row-author,
.hero .row-author,
.latest-lead .row-author { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.channel-hero .row-author .avatar,
.feature-card .row-author .avatar,
.hero .row-author .avatar,
.latest-lead .row-author .avatar { flex: 0 0 auto; }
.channel-hero .row-author b, .feature-card .row-author b, .hero .row-author b, .latest-lead .row-author b { display: inline; }
.channel-hero .row-author em, .feature-card .row-author em, .hero .row-author em, .latest-lead .row-author em { display: inline; }
}
/* 2026-10-11 批次15·P0 回归修复（PM 令）：**议题页焦点卡作者名被截断** ⚠️
成因：批次14 #7 把焦点卡 `.row-author.pick-author` 由 `display:block` 改为 **flex 横排** ⇒ 姓名与简介进入同一行
⇒ 旧规则 `.content-col .row-author b{ nowrap; overflow:hidden; text-overflow:ellipsis }`（block 下无害）**被激活** ⇒ 挤压即出省略号 ⚠️
修法：**姓名不压缩、不省略、不裁切**（`flex:0 0 auto` + `clip`）｜ **由简介承担收缩**（`min-width:0` + 2 行 clamp）✅
作用域：仅**横排（flex）作者行**（焦点卡/hero/最新页头条/列表行）——侧栏窄栏的既有省略号策略**保持不动**（避免回归）✅ */
.feature-card .row-author b,
.feature-card .pick-author b,
.feature-card.large .copy .pick-author b,
.channel-hero .row-author b,
.hero .row-author b,
.latest-lead .row-author b { white-space: normal; overflow: visible; text-overflow: clip; flex: 0 0 auto; max-width: none; }
.feature-card .row-author em.author-bio,
.feature-card .pick-author .author-bio,
.channel-hero .row-author em,
.hero .row-author em,
.latest-lead .row-author em { flex: 1 1 auto; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 2026-10-11 批次15·P0（PM 令·全站防漏）：**作者名不得省略/截断** —— 全站扫描发现 4 处仍溢出 ⚠️
① 首页/側栏「推薦作者」：`沙基爾·艾哈邁德·拉邁`(sw 176 > cw 65)、`那思爾· 阿里·沙·布科哈里`(212 > 65)
② 議題/地區頁列表行 `.row-author`：`普雷姆·薩加爾·鮑德爾`(132 > 59)
⇒ 覆盖策略：作者名一律 `white-space:normal`（**允许换行**、不省略）+ `overflow-wrap:anywhere`（长名可断）
⚠️ 仅覆盖**作者名**元素；不改其它文本的省略策略（避免回归）✅ */
.content-col .row-author b,
.content-col .editor-card .author-chip b,
.author-chip b,
.sidebar .person b,
.sidebar .other-authors b,
.sidebar .author-intro b,
.sidebar .ha-list b,
.content-col .byline b,
.row-author b,
.pick-author b,
.author-intro b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; word-break: break-word; max-width: none; flex: 0 0 auto; }
.content-col .editor-card .author-chip,
.content-col .editor-card .author-chip > div { min-width: 0; }
/* 2026-10-12 批次17·条目4（客户原文「长作者这里显示超出了」——批次15 曾判"可选"，客户已明确要求，**改为必修**）：
根因：批次15 让**姓名不压缩**（`flex:0 0 auto`）⇒ 长名会把**整个 flex 行撑宽** ⇒ 行越出内容列 19px（大档与侧栏仅余 3px）⚠️
修法（容器级，非只改姓名）：① 作者行 **`max-width:100%` + `flex-wrap:wrap`**（长名换行而非撑宽）
② 姓名 **`min-width:0` + `overflow-wrap:anywhere`**（可断行）
③ 简介保持 `min-width:0`（仍承担收缩）✅
量化判据：**全站 `名字右缘 ≤ 内容列右缘`（outOfCol = 0）** ✅ */
.content-col .row-author,
.content-col .pick-author,
.channel-hero .row-author,
.feature-card .row-author,
.feature-card .pick-author,
.hero .row-author,
.latest-lead .row-author { max-width: 100%; flex-wrap: wrap; }
.content-col .row-author b,
.content-col .pick-author b,
.channel-hero .row-author b,
.feature-card .pick-author b,
.author-chip b { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
/* 2026-10-13 批次20（20261012 条目5 + 条目8，测试已对图定位 ✅）
条目5「图片未居中」：文章页 figure 实测 图宽 540 ｜ 容器 878 ｜ **左 59 / 右 279**（明显左偏）⚠️
⇒ `.article-body figure/img` 左右 auto + 文本居中 ✅
条目8「手机版图有空隙」：窄档实测 图 332 ｜ 容器 366 ⇒ **左右各 17px 空隙** ⚠️
⇒ 窄档 figure img **满宽**（width:100%）✅ */
.article-body figure, article figure { margin-left: auto; margin-right: auto; text-align: center; }
.article-body figure img, article figure img { margin-left: auto; margin-right: auto; }
.article-body figure figcaption, article figcaption { text-align: center; }
@media (max-width: 680px) {
/* 2026-10-13 修正（验收实测：仍 gapL/R=17）：根因是 **figure 自身**被限宽 332（非 img 受限）
⇒ 直接给 figure **满宽 + 解除 max-width 上限**，img 再 100% 撑满 ✅ */
.article-body figure, article figure { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; }
.article-body figure img, article figure img { width: 100%; max-width: 100%; height: auto; }
}
/* 2026-10-14 用户报（20261012#7/#8）手机端導覽封面空白：实测图按 contain 渲染只占 ~79px（卡宽 ~150px）⇒ 左右各约 35px 灰白带
⚠️ 前面 `.tile-grid...img{object-fit:contain;background:#f4f4f2}`（第 628/632 行）**更靠后且同特异性** ⇒ 会覆盖本文件早前的 height/width 声明
⇒ 本组用 **更高特异性（.content-col 前缀）** 强制：图**撑满卡宽 + cover 填充**（高度保持 60px ⇒ 卡高仍 148px）✅ */
.content-col .tile-grid.topics .tile img,
.content-col .tile-grid.regions .tile img {
width: 100%;
height: 60px;
object-fit: cover;
background: #f4f4f2;
}
/* 2026-10-14 **政策更新（P0-3 + 测试暴露度量化）**：作者页长名**必须完整显示**（可换行），**不得省略号** ⚠️
背景：本条原为"名字折 4 行"的旧补丁（nowrap+ellipsis **!important**）⇒ 与 P0-3「作者处完整显示」**直接冲突**，
且测试实测：该区块**任何近期发文作者都会进入** ⇒ **长名（约需 212px，容器仅 92~141px）必然被截断** ⇒ 属**潜在真缺陷** ✅
⇒ 修正：**去掉 !important 与 nowrap/ellipsis**，改为"完整显示、可换行、不越界"（与 P0-3 同口径）✅
⚠️ 注意：本块是**作者页**（`.authors-latest`）；**首页「最新作者觀點」是另一个块**（`.section-block.latest-section`）
仍按客户令用**省略号**（其规则见文件后段）⇒ 两者互不影响 ✅ */
.authors-latest .byline b[title],
.authors-latest .byline b,
.authors-latest .byline > b {
white-space: normal;
overflow: visible;
text-overflow: clip;
overflow-wrap: anywhere;
word-break: break-word;
min-width: 0;
max-width: 100%;
}
/* 2026-10-14 客户令：**最新作者觀點**里的长作者名 ⇒ **省略号防换行** ✅
⚠️ 此前两次未命中的真因（我从**生产 HTML** 定位，非猜测）：
① 该区块的真实类名是 **\`section.section-block.latest-section\`**，
**不是** \`.authors-latest\`（那是**作者页**的块）⚠️ ｜ 且**没有 \`.content-col\` 祖先** ⚠️
② 作者名的真实容器是 **\`.byline-authors\`**（\`名字…\`）
⇒ 只写 \`.byline b\` 不足以命中**文本节点所在层** ⚠️
⇒ 正确写法：**本区块限定 + 逐层限制宽度 + 在文本层做 ellipsis** ✅ */
.latest-section .byline > b { display: block; max-width: 100%; overflow: hidden; }
.latest-section .byline .byline-authors,
.latest-section .byline .byline-authors > a {
display: block; max-width: 100%;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 2026-10-14 客户令（最新作者觀點长名用省略号防换行）——**第 3 次，选择器已由运维 DOM 实测确认**
真实祖先链：b < div.byline < article < div.latest-list < section.section-block.latest-section < section.content-col
⚠️ 前两次失败原因：链中**不存在 `.authors-latest`**（我用错了类名）
⇒ 用 `.latest-list .byline b`（0,2,1，且后置）强制 **单行 + 省略号**：nowrap + overflow:hidden + text-overflow:ellipsis ✅ */
.latest-list .byline b {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: normal;
word-break: keep-all;
max-width: 100%;
display: block;
}
.latest-list .byline { min-width: 0; }
/* 2026-10-14 客户报（双作者文章，如 how-should-china-and-india…）：「两位作者的头像与描述文本没对齐、且不在一个框体里」
根因（实测+代码）：第 390 行 `.article-meta-line .article-author + .article-author { border-left:1px; padding-left:12px }`
⇒ 第二位作者被**左移 13px**（头像 x=168 vs 第一位 155；文案列 x=230 vs 217）⇒ 错位 + 出现"独立小框"观感 ⚠️
修法：文章页作者列表**去掉该分隔样式**（保持与第一位同起点）⇒ 两位作者左缘对齐、同框 ✅ */
.article-meta-line .article-author + .article-author {
border-left: 0;
padding-left: 0;
margin-left: 0;
}
/* 2026-10-14 客户报（手机端首页）：首图要**自动放大到与下方文章框体左右对齐**
实测 390：`.hero-img` 364×270（`contain` + 固定 270px 高 ⇒ 图内容未顶满左右，两侧留底色）
下方 `.editor-card` = 366 宽（12→378）⇒ 视觉上首图"比下面的框窄"
修法（窄档）：首图 **撑满 + 按比例**（width:100% + height:auto + cover）⇒ 左右与下方框体一致 ✅ */
@media (max-width: 680px) {
.hero-img { width: 100%; height: auto; min-height: 0; object-fit: cover; background: transparent; }
}
/* 2026-10-14 客户报（手机端議題頻道頁）：「摘要很少的文章 ⇒ 与下一张之间大段空白」
实测（390，/topics/diplomacy-region/）：`.feature-card` 高 **639~685px**，而文字底部距卡底 **325px** ⚠️
（同页面 .feature-card.large 639px 正常；editor-card 322px / article-row 157~187px 均正常）
⇒ 根因：小 feature-card 被**固定/拉伸高度**撑高（非内容驱动）
修法（仅窄档）：卡片高度改**内容驱动** ⇒ 摘要短时卡片自动变矮、空白消失 ✅ */
@media (max-width: 680px) {
.feature-card, .feature-card:not(.large) {
height: auto !important;
min-height: 0 !important;
align-self: start;
}
}
/* 2026-10-14 客户报（手机端議題頻道頁）：「两篇文章之间突然隔着好远」
实测（390）：`.feature-grid` 的 **`grid-auto-rows: 1fr`** ⇒ 每行都被撑成"最高卡（685px，.large）"的高度
⇒ 小卡虽然已改成内容高 327px，但**行高仍是 685px** ⇒ 行间出现 **370px 空洞** ⚠️（我上一条只改了卡片，没改行高，漏了）
修法（仅窄档）：网格行高改**内容驱动**（`grid-auto-rows: auto`）⇒ 行高=该行卡片实际高度 ✅ */
@media (max-width: 680px) {
.feature-grid { grid-auto-rows: auto; }
}
/* 2026-10-14 用户令：**导览图毛玻璃填充**（移动端"硬放大左右对齐会截断信息" ⇒ 改为"完整显示 + 模糊填底"）✅
① 瓷砖成为定位容器 + 裁切（模糊溢出部分不外泄）② 背景层 = 同图放大模糊 ③ 前景图 contain 完整显示（零裁切）✅ */
.tile-grid.topics .tile, .tile-grid.regions .tile { position: relative; overflow: hidden; }
.tile .ar-blur-bg {
position: absolute; inset: -8px; /* 外扩，避免 blur 边缘露白 */
background-size: cover; background-position: center; background-repeat: no-repeat;
filter: blur(10px) saturate(1.15) brightness(1.02);
transform: scale(1.06);
z-index: 0; pointer-events: none;
}
.tile.ar-has-blur > *:not(.ar-blur-bg) { position: relative; z-index: 1; }
/* 前景图：完整显示、零裁切（左右/上下留白由模糊层填充）✅ */
/* ⚠️ 2026-10-14 修正（测试规则链实测）：**特异性优先于顺序** ⇒ 高特异性的
\`.content-col .tile-grid… .tile img{ object-fit:cover }\`（0,3,1）会压过本条（0,2,2）⚠️
⇒ 改为 **0,4,2**（加 \`.ar-has-blur\`，仅在本功能启用时生效）⇒ **无论顺序都能胜出** ✅ */
.content-col .tile-grid.topics .tile.ar-has-blur img,
.content-col .tile-grid.regions .tile.ar-has-blur img,
.content-col .sidebar .tile-grid.regions .tile.ar-has-blur img { object-fit: contain; background: transparent; }
/* 2026-10-14 客户令：**毛玻璃填充/封面处理只针对移动端**（PC 端保持原样，不得受影响）
⇒ 桌面档（≥681px）覆盖回原态：隐藏模糊层 + 图恢复 contain（原客户包渲染）✅ */
@media (min-width: 681px) {
.ar-blur-bg { display: none !important; }
.content-col .tile-grid.topics .tile img,
.content-col .tile-grid.regions .tile img {
width: auto;
height: 60px;
object-fit: contain;
background: #f4f4f2;
}
.tile.ar-has-blur { background: transparent; }
}
/* 2026-10-14 测试定位（第三次"高特异性覆盖"）：前景图仍被 `.content-col .tile-grid…img{object-fit:cover}`（0,3,1）覆盖
⇒ 毛玻璃层虽在但被 cover 的前景完全遮住 ⇒ 功能不可见 ⚠️
修法：**同特异性（0,3,1）+ 置于其后 + 限移动端** ⇒ 前景改 `contain`（图完整）⇒ 模糊层露出 ✅
另：把模糊层约束在卡内（原 inset:-8px ⇒ 高出卡片 7px）✅ */
@media (max-width: 680px) {
/* 2026-10-15 客户令（09:2x）：「移动端導覽圖幾乎沒變 ⇒ **移动端重新对齐 PC 端设计**」✅
⇒ 窄档瓷砖改为 **与 PC 端同一渲染**：`width:100%; height:60px; object-fit: cover`（填满）
⇒ 结果：① 移动端 = PC 观感一致 ② **不需要左右补齐 ⇒ 不加毛玻璃**（瓷砖模糊层 → 0）✅ ③ 卡高仍 148px 不变 ✅
⚠️ 代价（如实）：`cover` 会**上下裁切**（框 2.72:1 vs 图 1.32:1 ⇒ 约裁 51%）—— 这是"对齐 PC"的必然结果 ✅ */
.content-col .tile-grid.topics .tile img,
.content-col .tile-grid.regions .tile img {
width: 100%;
height: 60px;
object-fit: cover;
background: transparent;
}
.tile .ar-blur-bg { display: none !important; } /* 瓷砖不再用模糊层（对齐 PC）✅ */
}
/* 2026-10-14 修正（测试实测：模糊层 173×155 超出卡 179×148 约 7px ⚠️）⇒ 所有瓷砖变体一律裁切，防模糊层外泄 */
.tile-grid.topics .tile, .tile-grid.regions .tile,
.sidebar .tile-grid.topics .tile, .sidebar .tile-grid.regions .tile { overflow: hidden; }
/* 2026-10-14 客户令：「議題導覽的毛玻璃**第一版**最好，改回来！」
第一版 = 模糊层 `inset: -8px`（向卡片外延伸 8px ⇒ 观感更自然、边缘无硬切）
⇒ 撤销我后来加的 `inset: 0`（那版更"闷"）⇒ 恢复第一版参数 ✅（前景仍保持 contain：图完整不裁切） */
@media (max-width: 680px) {
.tile .ar-blur-bg { inset: -8px; border-radius: inherit; }
}
/* 2026-10-14 客户最终口径（18:14）：「移动端文章里的图片要填充至对齐；首页首图原来粗暴放大把有效信息裁掉
⇒ 现在**左右填充毛玻璃至缩进对齐**」✅ ｜ 范围 = **移动端首页首图 + 文章页图片**（导览瓷砖保留，已有）⚠️
做法：容器**满内容宽**（与正文缩进对齐）+ 模糊层铺满 + 前景 `contain`（图完整、零裁切）✅ ｜ 仅 ≤680px，PC 零影响 ✅ */
@media (max-width: 680px) {
/* 容器：满宽 + 定位 + 裁切（模糊层不外泄）；不改高度（框高不变 ✅） */
.hero, .hero .hero-copy, .hero-img,
.article-body figure, .article-body p,
.hero.ar-has-blur, .hero-img.ar-has-blur { position: relative; }
.hero, .hero-copy { overflow: hidden; }
.article-body figure, .article-body p { overflow: hidden; max-width: 100%; }
/* 模糊层：铺满容器（与正文左右缩进对齐） */
.hero > .ar-blur-bg, .hero-copy > .ar-blur-bg,
.article-body figure > .ar-blur-bg, .article-body p > .ar-blur-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center; background-repeat: no-repeat;
filter: blur(14px) saturate(1.15) brightness(1.02);
transform: scale(1.08);
z-index: 0; pointer-events: none;
}
/* 首图与文章图：完整显示（零裁切）✅ */
.hero > .ar-blur-bg ~ * , .hero-copy > .ar-blur-bg ~ * { position: relative; z-index: 1; }
/* 客户 09:15：首图**默认改回 cover**（不再全幅毛玻璃）；**仅当 JS 判定"需要双侧补齐"(.ar-has-blur) 时才 contain** ✅ */
.hero-img { width: 100%; object-fit: cover !important; }
.hero.ar-has-blur .hero-img, .hero > .ar-blur-bg ~ .hero-img { object-fit: contain !important; }
.article-body figure > .ar-blur-bg ~ * { position: relative; z-index: 1; }
.article-body figure img, article .article-body img { object-fit: contain !important; width: 100%; height: auto; }
}
/* 2026-10-14 测试取证修正：客户包 `client/base.css` 有**全局** `img{display:block;width:100%;object-fit:cover}`
⇒ 客户包磁贴图 = **cover（填满+裁切）**（`home.css` 的 `.tile img{height:74px}` 未覆盖 object-fit）
⇒ 即 **PC 磁贴"包原状 = cover"**（我此前"contain 才是包原状"的判断有误，据实更正）
⇒ 本组把**桌面档**恢复为 cover（填满），移动端维持 contain + 毛玻璃（客户明确要求）✅ */
@media (min-width: 681px) {
.content-col .tile-grid.topics .tile img,
.content-col .tile-grid.regions .tile img {
width: 100%;
height: 60px;
object-fit: cover;
background: transparent;
}
}
/* 2026-10-14 客户报（移动端导览瓷砖"太丑：大小不一/没填充/没对齐"）—— 我目视截图确认真因：
模糊层 `.ar-blur-bg` 用 `inset:-8px` **铺满整张卡片** ⇒ 文字压在模糊底上、图片缩成小方块 ⇒ 观感乱 ❌
修法：**模糊层只做"图片那一格"的底**（与图片同尺寸、同位置）⇒ 图片完整（contain）+ 两侧虚化填充，文字回到干净底色 ✅ */
@media (max-width: 680px) {
.tile .ar-blur-bg {
top: 7px; left: 7px; right: 7px; bottom: auto;
height: 60px;
border-radius: 6px;
opacity: 1;
}
.tile.ar-has-blur { background: #fff; }
}
/* ===== 2026-10-17 客户 122 · 作者卡间距（最终版，置文件末尾 + !important 强制生效）=====
122 量值（与运维/测试互证 ≤2px）：人像↓姓名 12.7 ｜ 姓名↓专长 7.2 ｜ 专长↓简介 6.4 ｜ **简介↓条数 21.5** ⭐ ｜ 条数↓链接 11.1
采用"**box 间距**"口径落地（= 元素盒间距，测试验收同口径）✅ */
.authors-directory .person-card > p.pc-ex,
.authors-directory .person-card > p.pc-cnt,
.authors-directory .person-card > p.pc-bio {
font-size: 13px !important;
line-height: 1.45 !important;
min-height: 0 !important;
height: auto !important;
overflow: visible !important;
}
.authors-directory .person-card > p.pc-ex,
.authors-directory .person-card > p.pc-cnt {
display: block !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: initial !important;
}
.authors-directory .person-card > p.pc-bio {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
min-height: calc(2 * 1.45em) !important;
max-height: calc(2 * 1.45em) !important;
}
.authors-directory .person-card .avatar { margin-bottom: 13px !important; }
.authors-directory .person-card h3 {
margin: 0 0 7px 0 !important; line-height: 1.3 !important;
/* 2026-10-17 客户指认（PM 认领）：姓名下方空洞 = h3 预留了第 2 行高 ❌ ⇒ 取消预留 ✅
等高改由：① 简介固定 2 行 ② 链接 margin-top:auto 贴底 ③ grid 默认 stretch（长名卡自动 2 行、其余卡链接仍贴底）✅ */
min-height: 0 !important;
}
.authors-directory .person-card > p.pc-ex { margin: 0 0 6px 0 !important; }
.authors-directory .person-card > p.pc-bio { margin: 0 0 21px 0 !important; } /* ⭐ 客户重点：简介↓条数 ≈21px ✅ */
.authors-directory .person-card > p.pc-cnt { margin: 0 0 11px 0 !important; }
.authors-directory .person-card > a { margin: auto 0 0 0 !important; font-size: 13px !important; font-weight: 700 !important; color: #b41624 !important; } /* margin-top:auto ⇒ 链接贴卡底 ✅ */