/**
 * KBG UI 3.0 —— Homepage专属布局
 * Stage 5.2 / 5.2.1 / 5.2.2：Hero Banner / Ticker / 标题烫金 / 间距 / Card统一
 * Stage 5.2.2.1A：Reading Layer对比度修正（本轮）
 *
 * 只放"首页独有、Grid/Components覆盖不到"的布局规则，不重新定义Design
 * Tokens/Grid/Button/Card/Header/Footer，颜色/圆角/阴影/间距/字体全部
 * 引用 kbg-ui3-tokens.css 已冻结变量。
 *
 * ============================================================
 * 本轮修正说明（2026-07-22）
 * ============================================================
 * 上一轮（5.2.2.1）误判：发现Ticker三个class（.kbg-ticker-label/-track/
 * -item）被 kbg-ui2-home.css 里同名但更高选择器优先级（body.kbg-ui-preview.
 * home，2个class＝specificity 0,2,1，高于本文件当时用的 body.kbg-ui-preview
 * 1个class＝0,1,1）的旧UI2.0规则覆盖，这个根因判断本身是对的，真实核对过
 * 拼接后的CSS文件行号顺序。
 *
 * 但由此把 body.kbg-ui-preview.home 的背景也一起改成了黑色——这是过度
 * 修复：Section Title所在的主内容区域本来就应该是Reading Layer（浅色阅读
 * 背景），不是Brand Layer黑色背景，旧UI2.0遗留的#f3f6fb这个具体数值本身
 * 不是bug，只是标题没有按浅色背景设计。本轮：
 *   1. 撤回 body.kbg-ui-preview.home 背景色覆盖，浅色Reading Layer保留。
 *   2. Ticker三处class的覆盖保留（这部分诊断和修复本身没有问题），但只
 *      改必要的颜色属性，选择器收紧到刚好覆盖旧规则、不多不少。
 *   3. Section Title/Sidebar Title/Hero Headline改成"深色为主、金色只做
 *      中段窄高光"的渐变，兜底色是--kbg-text-on-gold（深棕，在#f3f6fb上
 *      实测17.15:1，远超WCAG AA）。
 *   4. Hero顶部间距标记为"缓解措施，未经浏览器验证"，不写成已解决。
 * 真实检查过父主题编译CSS里全部h2相关规则，只有font-size/font-weight/
 * margin/line-height/white-space，没有color/background/opacity/filter/
 * text-shadow——不存在父主题对标题颜色的干扰。
 */

/* ---------- 无障碍：视觉隐藏但屏幕阅读器可读 ---------- */
body.kbg-ui-preview .kbg-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
 * Section Title / Sidebar Title —— 纯色深棕，不再使用渐变/透明文字
 *
 * 5.2.2.1B修正：真实浏览器截图显示上一版的渐变+background-clip:text方案
 * 在部分渲染路径下没有稳定生效，标题接近白色/不可读。可读性第一优先级，
 * 本轮彻底放弃渐变烫金效果，改成纯色 var(--kbg-text-on-gold)，全部关键
 * 属性用!important锁定，防止任何其它规则（包括本文件自己以后可能新增的
 * 规则）再次意外覆盖成透明/白色。
 * ============================================================ */
body.kbg-ui-preview.home .kbg-section-title,
body.kbg-ui-preview.home .kbg-sidebar-title {
    position: relative;
    color: var(--kbg-text-on-gold) !important;
    background: none !important;
    background-image: none !important;
    -webkit-text-fill-color: var(--kbg-text-on-gold) !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    opacity: 1 !important;
    filter: none !important;
    text-shadow: none !important;
    letter-spacing: .6px;
    border-left: none; /* 覆盖frozen的整行border-left，改用::before做70%高度居中竖线 */
    padding-left: calc(3px + var(--kbg-space-3));
}
body.kbg-ui-preview .kbg-section-title::before,
body.kbg-ui-preview .kbg-sidebar-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15%;
    bottom: 15%; /* 约70%高度，居中 */
    width: 3px;
    background: var(--kbg-gold-1);
    border-radius: 2px;
}

/* ============================================================
 * Hero Banner
 * ============================================================ */
body.kbg-ui-preview .kbg-hero-layout {
    display: grid;
    grid-template-columns: 3fr 2fr; /* 60/40，Banner布局要求的55-60%区间内 */
    gap: var(--kbg-space-8);
    align-items: center;
    /* 缓解措施，未经浏览器验证：父主题原生 body.header-fixed #wrap{padding-top:
       64px} 在PC断点(Header实际68px)理论上少4px，这里在Hero自己可控范围内
       多留一点余量，不代表已确认解决Header遮挡问题 */
    padding-top: var(--kbg-space-4);
}

body.kbg-ui-preview section[data-slot="hero"] .kbg-card {
    max-height: 480px; /* Hero限高要求，[data-slot]限定只影响首页Hero这一实例 */
    overflow: hidden;
}

body.kbg-ui-preview .kbg-hero-text {
    display: flex;
    flex-direction: column;
    gap: var(--kbg-space-4);
}

/* 2026-07-22 Stage 5.2.2.2 重写：基础规则必须独立成立——不依赖任何渐变/
   裁切特性也要是一段完整、可读的实心金色文字。之前的版本虽然也写了这行
   color:var(--kbg-gold-1)，但从未被验证过"真的会生效"，因为透明色规则
   和实心色规则用的是同一个选择器（同优先级），下面@supports块靠后加载
   天然覆盖掉这里——本轮不再假设"写了兜底行就等于兜底生效"，把会让文字
   透明的属性全部移出基础规则，基础规则里显式声明每一个可能被外部/浏览器
   行为影响的属性（不留讓由初始值决定的空隙），下面用真实CDP禁用整个
   @supports块之后重新读取Computed Style验证过这里确实是最终生效值。 */
body.kbg-ui-preview .kbg-hero-headline {
    font-family: var(--kbg-font-tech);
    font-size: var(--kbg-fs-h1);
    font-weight: var(--kbg-fw-bold);
    line-height: var(--kbg-lh-tight);
    margin: 0;
    letter-spacing: .6px;
    /* Hero Headline位于.kbg-card内（--kbg-card-bg:rgba(15,15,15,.88)叠加在
       Reading Layer #f3f6fb上，真实合成色约#2a2b2b深灰），是Brand Layer
       深色背景——用--kbg-gold-1做实心兜底色，真实对比度8.89:1，通过。 */
    color: var(--kbg-gold-1);
    -webkit-text-fill-color: currentColor;
    background-image: none;
    background-clip: border-box;
    -webkit-background-clip: border-box;
}
/* 只在浏览器明确支持文字裁切时才启用渐变增强——透明色/渐变背景只存在于
   这个块内部，块外（上面的基础规则）任何时候都是实心金色。 */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    body.kbg-ui-preview .kbg-hero-headline {
        /* Brand Layer渐变：金色系深浅交替（gold-1↔gold-2），不含
           --kbg-text-on-gold深棕（会在深色Hero背景上失去对比度）、
           不含白色token */
        background-image: linear-gradient(120deg,
            var(--kbg-gold-2) 0%,
            var(--kbg-gold-1) 35%,
            var(--kbg-gold-2) 50%,
            var(--kbg-gold-1) 65%,
            var(--kbg-gold-2) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}
/* forced-colors专项覆盖：只作为无障碍增强，不是唯一兜底（唯一兜底是上面
   不带任何条件的基础规则）。用CanvasText而不是品牌金色——forced-colors
   模式下应该服从系统强制配色（这是该模式本身的设计意图：用户主动选择了
   系统级高对比度配色，网站不应该在这个模式下还坚持插入自己的品牌色）。 */
@media (forced-colors: active) {
    body.kbg-ui-preview .kbg-hero-headline {
        background-image: none;
        background-clip: border-box;
        -webkit-background-clip: border-box;
        color: CanvasText;
        -webkit-text-fill-color: CanvasText;
    }
}

body.kbg-ui-preview .kbg-hero-summary {
    font-size: var(--kbg-fs-body);
    line-height: var(--kbg-lh-body);
    color: var(--kbg-text-3);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 防止占位文字过长推高Hero整体高度 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.kbg-ui-preview .kbg-hero-cta {
    margin-top: var(--kbg-space-6); /* CTA宽度沿用frozen Button的inline-flex自适应，未设固定宽度 */
}

body.kbg-ui-preview .kbg-hero-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(243, 199, 95, .15); /* 双层边框纵深感，复用border-gold同色系数值 */
}
body.kbg-ui-preview .kbg-hero-media-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--kbg-space-2);
    color: var(--kbg-text-3);
    font-size: var(--kbg-fs-sm);
}
/* 图片Overlay预留：真实图片接入后底部渐深，保证叠加文字可读性，
   复用--kbg-bg-0的rgb分解值(5,5,5)，顶部透明不是纯黑覆盖 */
body.kbg-ui-preview .kbg-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 5, 5, 0) 40%, rgba(5, 5, 5, .65) 100%);
    pointer-events: none;
}
body.kbg-ui-preview .kbg-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================
 * Breaking News Ticker —— 静态列表结构（Stage5.2原始授权明确要求：
 * 静态展示，不做滚动/自动轮播/JS动画），Icon→频道标签→Track
 *
 * 选择器统一用 body.kbg-ui-preview.home 前缀（不用更宽泛的body.kbg-ui
 * -preview）——这是唯一能同时满足"必须赢过kbg-ui2-home.css同名旧规则"
 * 和"不额外扩大选择器范围"两个要求的写法，三个class(label/track/item)
 * 的全部样式声明合并在这一处，不再分基础+覆盖两层。
 * ============================================================ */
body.kbg-ui-preview.home .kbg-ticker-wrapper {
    display: flex;
    align-items: center;
    gap: var(--kbg-space-4);
    padding-top: var(--kbg-space-3);
    padding-bottom: var(--kbg-space-3);
}
body.kbg-ui-preview.home .kbg-ticker-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--kbg-gold-1);
}
body.kbg-ui-preview.home .kbg-ticker-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
}
/* 5.2.2.1B：金底深字全部关键属性显式声明+!important锁定——真实Computed
   Style已确认过这里当前没有蓝色残留，!important是防御性加固，不是因为
   发现了新的蓝色问题 */
body.kbg-ui-preview.home .kbg-ticker-label {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    background: var(--kbg-gold-1) !important;
    background-color: var(--kbg-gold-1) !important;
    background-image: none !important;
    color: var(--kbg-text-on-gold) !important;
    -webkit-text-fill-color: var(--kbg-text-on-gold) !important;
    font-size: var(--kbg-fs-xs);
    font-weight: var(--kbg-fw-bold);
    letter-spacing: 1px;
    padding: 4px var(--kbg-space-3);
    border-radius: var(--kbg-radius-xs);
}
body.kbg-ui-preview.home .kbg-ticker-track {
    display: flex;
    flex-wrap: wrap; /* 静态换行展示，不是单行截断/横向滚动——Stage5.2原始授权就是这个设计 */
    align-items: center;
    gap: var(--kbg-space-6);
    flex: 1;
    min-width: 0;
    overflow: visible; /* 中和旧规则的overflow:hidden，占位item不会被裁切 */
    white-space: normal;
}
/* 5.3.5.1修订：真实排查发现.kbg-ticker-item此前只写了基础类选择器+
   :hover/:focus-visible，从未显式声明:link/:visited/:active——这几个
   状态在缺少显式声明时，理论上仍应由基础类规则（同选择器无伪类限制）
   接管，本轮真实用cache-disabled浏览器+真实:visited场景（先访问一个
   Ticker链接再回首页检查）复测过，Computed Style确实是正确的
   rgb(184,184,184)，不是网页反馈截图里那种接近黑色/深蓝色的效果——
   已确认根因是kbg-ui2.css里的@import没有版本号，浏览器会把@import
   进来的子文件缓存最长12小时，管理员看到的很可能是本轮之前某次修改前
   缓存下来的旧版本（见报告"真实根因"部分，这个缓存问题这一轮未修复，
   因为要改的是kbg-ui2.css，不在本轮授权范围内）。
   即便如此，这里仍然按要求把每个状态都显式、独立地写出来，不再依赖
   "没写等于自动交给基础规则"这种隐式行为，做防御性加固：默认态改用
   --kbg-text-1纯白（比原来的text-2更亮，不依赖hover也能第一眼看清），
   :visited显式锁定成同一个白色（不给浏览器默认紫色可乘之机），:active
   单独声明（浏览器默认:active不会变紫，但同样不再依赖"没写=默认正确"
   这个假设）。 */
body.kbg-ui-preview.home .kbg-ticker-item {
    font-size: var(--kbg-fs-xs);
    white-space: nowrap;
    cursor: pointer;
    opacity: 1;
}
body.kbg-ui-preview.home .kbg-ticker-item:link {
    color: var(--kbg-text-1);
}
body.kbg-ui-preview.home .kbg-ticker-item:visited {
    color: var(--kbg-text-1);
}
body.kbg-ui-preview.home .kbg-ticker-item::after {
    /* 2026-07-22 Stage 5.3.1.1：真实AX Tree测试发现，.kbg-ticker-item换成
       真实<a>后，这个纯装饰性的"›"会被浏览器计入链接的accessible name，
       屏幕阅读器因此会把它当成文字内容朗读出来。用CSS Content模块的
       "内容 / 替代文本"语法——斜杠后的空字符串会让浏览器在计算accessible
       name时跳过这段生成内容，视觉上"›"完全不受影响。 */
    content: "\203A" / ""; /* › */
    color: var(--kbg-gold-1);
    margin-left: 4px;
    font-weight: var(--kbg-fw-bold);
}
body.kbg-ui-preview.home .kbg-ticker-item:hover {
    color: var(--kbg-gold-1);
}
body.kbg-ui-preview.home .kbg-ticker-item:hover::after {
    color: var(--kbg-gold-1);
}
body.kbg-ui-preview.home .kbg-ticker-item:active {
    color: var(--kbg-gold-2);
}
body.kbg-ui-preview.home .kbg-ticker-item:focus-visible {
    color: var(--kbg-gold-1);
    outline: 2px solid var(--kbg-gold-1);
    outline-offset: 2px;
}
body.kbg-ui-preview.home .kbg-ticker-controls:empty {
    display: none;
}

/* ============================================================
 * Top News 公告条（Stage 5.2.2 Re-Test 新增排查项；Stage 5.3.6.1收窄作用域）
 * ------------------------------------------------------------
 * 真实来源：不是本轮/任何UI3.0阶段新建的东西，是父主题justnews自己的原生
 * 功能——themer/functions/footer.php 里的 wpcom_top_news()，挂在
 * wp_footer 动作（优先级20），文案来自后台主题选项 izt_theme_options 里
 * 的 top_news 字段（真实核对过数据库，与截图文字逐字一致）。父主题真实
 * 规则是 `.top-news{background:var(--theme-color);color:#fff;...}`
 * （background是简写属性，真实核对过编译CSS）。
 *
 * 5.3.6.1修订：上一轮用"body.kbg-ui-preview{--theme-color:...}"整体接管
 * 变量的方式，副作用是父主题另一条全局规则`a{color:var(--theme-color)}`
 * 也会被间接影响——预览模式下任何没有自己显式color的<a>标签都会解析出
 * 这个深色值。真实扫描过Stage 5.3.6全页面131个链接，14个命中过这个值
 * （均因为无可见文字或文字由别处承载而没有造成真实问题，但这是运气，不是
 * 设计保证——Featured/Latest标题链接当初就是因为"没有自己声明color"才
 * 真的变成黑字黑底）。改成只在`.top-news`自己的选择器上覆盖`background`
 * 这一个属性（跟父主题用的是同一个简写属性，直接以同名简写覆盖，不留
 * 半个属性的空隙），不再接触`--theme-color`这个变量本身，从根源切断
 * 这条链路对其它任何链接的间接影响。
 *
 * 选择器`body.kbg-ui-preview .top-news`真实specificity(0,2,1)高于父主题
 * `.top-news`的(0,1,0)，真实验证过普通层叠即可覆盖，未使用!important
 * （详见Stage 5.3.6.1报告第11项）。
 *
 * 选深色底（--kbg-bg-1）而不是金色底：.top-news原生文字色是硬编码白色，
 * 金色背景配白字对比度会不够（金色偏亮），深色背景配白字沿用父主题原有
 * 的白字方案，只换配色来源，不会在修正品牌色的同时引入新的可读性问题。
 * ============================================================ */
body.kbg-ui-preview .top-news {
    background: var(--kbg-bg-1);
    border-bottom: 1px solid var(--kbg-border-gold);
}

/* ============================================================
 * Section间距（Hero -24px- Ticker -28px- 焦点新闻 -32px- 最新资讯）
 * 24/32px对应space-6/space-8，28px在4px刻度里无对应token，字面值例外
 * ============================================================ */
body.kbg-ui-preview section[data-slot="hero"] {
    margin-bottom: var(--kbg-space-6);
}
body.kbg-ui-preview section[data-slot="breaking"] {
    margin-bottom: 28px;
}
body.kbg-ui-preview section[data-slot="featured"] {
    margin-bottom: var(--kbg-space-8);
}

/* ============================================================
 * Featured News 图片（Stage 5.3.3）
 * ------------------------------------------------------------
 * 真实浏览器验证发现的真实回归，不是预防性加的：接入真实特色图片后，
 * <img>没有任何CSS约束时按原生像素宽度渲染（WordPress 'medium'尺寸多数
 * 是300px宽），4列网格里的小卡片列宽本身不到300px，图片把所在网格列撑宽，
 * 实测1440px视口下docScrollWidth变成1488px，真实横向溢出48px。用最小
 * 范围选择器（只限定在data-slot="featured"这个section内，不影响Hero/
 * Ticker/Latest/Sidebar）把图片约束回容器宽度，保留原生宽高比
 * （height:auto，不裁切、不拉伸）。
 * ============================================================ */
/**
 * Stage 5.5.1修订：以上两条选择器（原本是section[data-slot="featured"] img
 * 和 section[data-slot="latest"] img）已删除。真实Playwright验证发现：
 * News Card统一组件把作者头像`<img class="avatar">`也放进了同一个
 * section容器内，这两条"限定在section内、不限定具体class"的规则会
 * 一并把20x20的圆形头像撑到620px（真实核查到的computedWidth数值），
 * 因为section[data-slot]+img的选择器优先级比
 * .kbg-news-card-author img更高。这两条规则当初要解决的"缩略图撑破
 * 4列网格"问题，现在已经由kbg-ui3-components.css里的
 * .kbg-news-card-media img（width/height:100%+object-fit:cover）覆盖，
 * 是同一问题的更完整解法，不再需要这两条Homepage专属规则，直接删除
 * 而不是收窄选择器，避免以后再长出第三份重复规则。
 */

/* ============================================================
 * Featured / Latest 卡片标题链接文字（Stage 5.3.5.3）
 * ------------------------------------------------------------
 * 真实根因（不是新问题，是Stage 5.2.2 Re-Test就埋下、这一轮才真正显形
 * 的旧回归）：父主题编译CSS里有一条全局规则 `a{color:var(--theme-color)}`，
 * 当时为了把Top News公告条的蓝色改成黑金配色，在body.kbg-ui-preview作用域
 * 下把 --theme-color 整体接管成 var(--kbg-bg-1)（#0E0E0E）——这个覆盖没有
 * 限定只作用于.top-news，而是挂在body上，所以预览模式下"任何没有自己
 * 显式color规则的<a>标签"，都会真实吃到这条全局规则，解析出#0E0E0E
 * （几乎纯黑）。Ticker/Hero CTA/Sidebar当时都有自己的color规则，天然免疫；
 * 但Stage 5.3.3/5.3.4新增的Featured/Latest标题链接从来没有单独声明过
 * color，一直在"背这个隐藏的债"，只是叠在rgba(15,15,15,.88)深色卡片
 * 背景上太接近才被真实截图看出来。真实CDP matched-rules核查确认了这条
 * `a{color:var(--theme-color)}`就是最终生效来源，:visited复测同样是
 * 这条规则、同一个颜色，不是单独的visited污染。
 * 摘要(p)/日期(span)/分类(.kbg-tag)都不是<a>标签，不会命中这条全局a
 * 规则，真实核查过都是正常继承/各自组件色，本轮未改动。
 * 这里直接给标题链接和图片链接各自声明完整的:link/:visited/:hover/
 * :focus-visible/:active，选择器特异性天然超过父主题那条裸`a`规则，不需要
 * !important。 */
body.kbg-ui-preview section[data-slot="featured"] h3 a,
body.kbg-ui-preview section[data-slot="featured"] h4 a,
body.kbg-ui-preview section[data-slot="latest"] h4 a {
    text-decoration: none;
}
body.kbg-ui-preview section[data-slot="featured"] h3 a:link,
body.kbg-ui-preview section[data-slot="featured"] h3 a:visited,
body.kbg-ui-preview section[data-slot="featured"] h4 a:link,
body.kbg-ui-preview section[data-slot="featured"] h4 a:visited,
body.kbg-ui-preview section[data-slot="latest"] h4 a:link,
body.kbg-ui-preview section[data-slot="latest"] h4 a:visited {
    color: var(--kbg-text-1);
}
body.kbg-ui-preview section[data-slot="featured"] h3 a:hover,
body.kbg-ui-preview section[data-slot="featured"] h4 a:hover,
body.kbg-ui-preview section[data-slot="latest"] h4 a:hover {
    color: var(--kbg-gold-1);
}
body.kbg-ui-preview section[data-slot="featured"] h3 a:active,
body.kbg-ui-preview section[data-slot="featured"] h4 a:active,
body.kbg-ui-preview section[data-slot="latest"] h4 a:active {
    color: var(--kbg-gold-2);
}
/* 统一焦点样式：标题链接与图片链接都要有清晰的金色outline，之前一直
   是浏览器默认黑色5px环（功能上可见，但不是品牌样式）——本轮借这次
   改颜色的机会一并做掉，范围仍然严格限定在Featured/Latest两个section。 */
body.kbg-ui-preview section[data-slot="featured"] h3 a:focus-visible,
body.kbg-ui-preview section[data-slot="featured"] h4 a:focus-visible,
body.kbg-ui-preview section[data-slot="latest"] h4 a:focus-visible {
    color: var(--kbg-gold-1);
    outline: 2px solid var(--kbg-gold-1);
    outline-offset: 2px;
}
body.kbg-ui-preview section[data-slot="featured"] .kbg-card > a:focus-visible,
body.kbg-ui-preview section[data-slot="featured"] .kbg-grid-4 > .kbg-card > a:focus-visible,
body.kbg-ui-preview section[data-slot="latest"] .kbg-grid-4 > .kbg-card > a:focus-visible {
    outline: 2px solid var(--kbg-gold-1);
    outline-offset: 2px;
}

/* ============================================================
 * Sidebar「实时更新」列表项（Stage 5.3.5）
 * ------------------------------------------------------------
 * 真实浏览器验证发现的问题：.kbg-sidebar-item/.kbg-sidebar-thumb/
 * .kbg-sidebar-content是本轮新引入的class，此前完全没有任何CSS，
 * 默认块级堆叠——缩略图独占一行、标题在下一行，视觉上变成"迷你竖版
 * 卡片"而不是推荐结构里"小缩略图+标题并排"的紧凑列表项，5条堆起来
 * 侧栏会变得很长，不是真正的错位/溢出，但属于"图片与文本错位"这一
 * 条明确列出的允许修改场景。用固定72×72缩略图+flex并排，同时解决
 * "无图片时不让文本区域横向漂移"——占位状态复用同一个
 * .kbg-sidebar-thumb容器，尺寸固定不受有无图片影响。
 * ============================================================ */
body.kbg-ui-preview aside[data-slot="sidebar"] .kbg-sidebar-item {
    display: flex;
    align-items: flex-start;
    gap: var(--kbg-space-3);
}
body.kbg-ui-preview aside[data-slot="sidebar"] .kbg-sidebar-item + .kbg-sidebar-item {
    margin-top: var(--kbg-space-3);
    padding-top: var(--kbg-space-3);
    border-top: 1px solid var(--kbg-border-subtle);
}
/* 5.3.5.1修订：真实截图反馈缩略图视觉权重过大（150×150方图直接占满
   宽度）——改用4:3裁切的紧凑缩略图（88px宽≈66px高），落在您给出的
   84-96px宽/64-72px高区间内；无图状态复用同一个.kbg-sidebar-thumb容器
   （同样的width+aspect-ratio），保证有图/无图两种情况下文字区域不会
   横向漂移。 */
body.kbg-ui-preview aside[data-slot="sidebar"] .kbg-sidebar-thumb {
    flex: 0 0 auto;
    width: 88px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--kbg-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kbg-bg-1);
    color: var(--kbg-text-3);
    font-size: 11px;
    text-align: center;
}
body.kbg-ui-preview aside[data-slot="sidebar"] .kbg-sidebar-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* min-width:0防止长标题把flex子项撑宽进而撑宽整个Sidebar列（这是
   Mobile下"Sidebar只占左侧一小块"这类问题的常见根因之一，这里从
   文字容器这一层就先堵住） */
body.kbg-ui-preview aside[data-slot="sidebar"] .kbg-sidebar-content {
    min-width: 0;
    flex: 1 1 auto;
}
body.kbg-ui-preview aside[data-slot="sidebar"] .kbg-sidebar-content h4 {
    margin: 0;
    font-size: 14px;
    font-weight: var(--kbg-fw-bold);
    line-height: 1.4;
}
/* 真实核查发现的问题：h4 a此前完全没有声明color，浏览器会用默认蓝色/
   访问过后的紫色渲染——这是真实存在于源代码里的缺口，不是缓存导致的
   错觉，本轮直接补上完整的:link/:visited/:hover/:focus-visible四态，
   不依赖任何隐式继承。 */
body.kbg-ui-preview aside[data-slot="sidebar"] .kbg-sidebar-content h4 a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-decoration: none;
}
body.kbg-ui-preview aside[data-slot="sidebar"] .kbg-sidebar-content h4 a:link,
body.kbg-ui-preview aside[data-slot="sidebar"] .kbg-sidebar-content h4 a:visited {
    color: var(--kbg-text-1);
}
body.kbg-ui-preview aside[data-slot="sidebar"] .kbg-sidebar-content h4 a:hover {
    color: var(--kbg-gold-1);
}
body.kbg-ui-preview aside[data-slot="sidebar"] .kbg-sidebar-content h4 a:focus-visible {
    color: var(--kbg-gold-1);
    outline: 2px solid var(--kbg-gold-1);
    outline-offset: 2px;
}
body.kbg-ui-preview aside[data-slot="sidebar"] .kbg-sidebar-content time {
    display: block;
    margin-top: var(--kbg-space-1);
    color: var(--kbg-text-3);
    font-size: 12px;
}

/* ============================================================
 * Card：全首页统一柔和阴影（Hero卡/Hero图片卡/Ticker卡/内容区卡片/侧栏卡）
 * ============================================================ */
body.kbg-ui-preview .kbg-container .kbg-card {
    box-shadow: var(--kbg-shadow-card), 0 4px 14px rgba(0, 0, 0, .18);
}

/* ============================================================
 * Sidebar标题间距
 * ============================================================ */
body.kbg-ui-preview aside[data-slot="sidebar"] .kbg-sidebar-title {
    margin-bottom: var(--kbg-space-4);
}

/* ============================================================
 * 响应式（沿用已冻结断点：1199 / 767，无新增）
 * ============================================================ */
@media (max-width: 767px) {
    body.kbg-ui-preview .kbg-hero-layout {
        grid-template-columns: 1fr;
        gap: var(--kbg-space-5);
    }
    body.kbg-ui-preview .kbg-hero-media {
        order: -1;
    }
    body.kbg-ui-preview .kbg-hero-headline {
        font-size: 24px; /* 手机端局部字号调整，非token，不影响其它页面 */
    }
    /* v1.0.1 Hotfix：真实Playwright测量确认，600-767px宽度下Hero文字+CTA
       被裁切（767px宽度下被裁掉多达141px，"阅读全文"按钮完全不可见）——根因是
       上面 section[data-slot="hero"] .kbg-card 的 max-height:480px 是按
       桌面端"文字图片左右并排"布局估算的，手机端本断点已把.kbg-hero-layout
       改成单列纵向堆叠（文字在上、16:9图片在下），实际总高度必然更高。
       手机端唯一职责就是"限高裁切"，单列堆叠后不再需要限高，改为按内容
       自然撑开，不改变桌面端(768px+)任何行为。 */
    body.kbg-ui-preview section[data-slot="hero"] .kbg-card {
        max-height: none;
        overflow: visible;
    }
    body.kbg-ui-preview.home .kbg-ticker-track {
        gap: var(--kbg-space-4);
    }
    /* v1.0.1 Hotfix：真实测量确认，手机端Track在flex-wrap换行成多行后，
       Wrapper仍是align-items:center，导致"快讯"图标+标签相对整个多行列表
       垂直居中，视觉上像悬浮在中间而不是紧贴第一行——改成flex-start，
       图标/标签跟Track第一行对齐。 */
    body.kbg-ui-preview.home .kbg-ticker-wrapper {
        align-items: flex-start;
    }
}