/**
 * KBG UI 3.0 —— Archive页面专属样式（Stage 5.5.2：Category / Tag）
 *
 * 只放Archive Header/Breadcrumb挂载/主栏宽度这类Archive专属覆盖，News
 * Card/Pagination/Empty State/Sidebar的真实样式已经在kbg-ui3-components.css
 * 里作为全站共用A类组件存在，本文件不重复定义，也不新造平行规则
 * （D-027/D-028/D-030原则的CSS落地）。
 */

body.kbg-ui-preview .kbg-archive-main {
    padding: var(--kbg-space-8) 0 var(--kbg-space-16);
}

/* ---------- Breadcrumb ----------
   直接复用真实wpcom_breadcrumb()输出的DOM（<ol>/<li>结构），跟Single
   Article Stage 5.4.6用的是同一份真实函数、同一套视觉，见DECISIONS.md
   D-029——这里只是换一个挂载class，规则本身不重新发明。 */
body.kbg-ui-preview .kbg-archive-breadcrumb {
    margin-bottom: var(--kbg-space-5);
}

/* ---------- Archive Header：方案A（D-022），极简 ---------- */
body.kbg-ui-preview .kbg-archive-header {
    margin-bottom: var(--kbg-space-6);
}
body.kbg-ui-preview .kbg-archive-title {
    font-size: var(--kbg-fs-h1);
    font-weight: var(--kbg-fw-bold);
    line-height: var(--kbg-lh-heading);
    color: var(--kbg-text-1);
    margin: 0 0 var(--kbg-space-2);
}
body.kbg-ui-preview .kbg-archive-count {
    font-size: var(--kbg-fs-sm);
    color: var(--kbg-text-3);
    margin: 0;
}

/* ---------- 无Sidebar时主栏Grid可以再密一点（真实数据显示部分Category
   历史上是关闭Sidebar的，Stage 5.5.1已批量清理统一为开启，但机制上仍需
   支持这个状态，不能假设Sidebar永远存在，D-023执行细节见RUNTIME.md§9.5） ---------- */
body.kbg-ui-preview .kbg-content-layout--no-sidebar {
    grid-template-columns: 1fr;
}

@media (max-width: 767px) {
    body.kbg-ui-preview .kbg-archive-main {
        padding: var(--kbg-space-5) 0 var(--kbg-space-10);
    }
    body.kbg-ui-preview .kbg-archive-title {
        font-size: var(--kbg-fs-h2);
    }
}

/* ============================================================
 * Topic Aggregation Adapter（Stage 5.5.3，kbg_topic专属，非A类全站组件）
 * ------------------------------------------------------------
 * 真实DOM（archive-template.php用输出缓冲截获`KBG_Topic_Archive::
 * render_on_loop_start`真实echo的原始HTML，不是本主题拼的）：
 *   .kbg-topic-aggregation（本文件唯一新增的挂载容器，Category/Tag
 *     不会输出这个class，见archive-template.php真实判断逻辑）
 *     > .kbg-topic-desc（插件真实class，词条描述，可能为空不渲染）
 *     > .kbg-topic-section（插件真实class，1~5个，每个内含<h3>+<ul><li><a>）
 *
 * 只对这两个真实存在的插件class定义样式，不臆测/不新造DOM结构。
 * 层级参照.kbg-related-articles"轻量容器"token组合（DESIGN_SYSTEM.md
 * §8.5：--kbg-bg-1+--kbg-border-neutral，无hover抬升），但这是一个新的、
 * 单独命名的Adapter，不是复制粘贴.kbg-related-articles的规则、也不注册
 * 进COMPONENT_LIBRARY.md的A类组件清单——真实复用范围目前只有kbg_topic
 * 一种场景，按你的要求先归类为页面/taxonomy专属Adapter。
 * ============================================================ */
body.kbg-ui-preview .kbg-topic-aggregation {
    background: var(--kbg-bg-1);
    border: var(--kbg-border-width) solid var(--kbg-border-neutral);
    border-radius: var(--kbg-radius-md);
    padding: var(--kbg-space-5);
    margin-bottom: var(--kbg-space-6);
}
body.kbg-ui-preview .kbg-topic-desc {
    font-size: var(--kbg-fs-sm);
    line-height: var(--kbg-lh-relaxed);
    color: var(--kbg-text-2);
    margin: 0 0 var(--kbg-space-5);
    padding-bottom: var(--kbg-space-5);
    border-bottom: var(--kbg-border-width) solid var(--kbg-border-neutral);
    /* 中文长句/英文长单词/长URL在Mobile下都不能撑破容器 */
    overflow-wrap: break-word;
    word-break: break-word;
}
body.kbg-ui-preview .kbg-topic-desc:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
/* 多个.kbg-topic-section用纵向堆叠+相邻兄弟选择器控制间距，天然满足
   "只有1个Section时不留不自然空白"（不用Grid/多列，1个或5个视觉上都是
   自然的纵向列表，不存在"空列"这个问题，比Category/Tag News Card那种
   固定4列.kbg-grid-4更适合"内容量不固定的链接列表"这个真实场景）。 */
body.kbg-ui-preview .kbg-topic-section {
    display: block;
}
body.kbg-ui-preview .kbg-topic-section + .kbg-topic-section {
    margin-top: var(--kbg-space-5);
}
body.kbg-ui-preview .kbg-topic-section h3 {
    font-size: var(--kbg-fs-sm);
    font-weight: var(--kbg-fw-semibold);
    color: var(--kbg-text-2);
    margin: 0 0 var(--kbg-space-3);
}
body.kbg-ui-preview .kbg-topic-section ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--kbg-space-2);
}
body.kbg-ui-preview .kbg-topic-section li a {
    display: block;
    padding: var(--kbg-space-1) 0;
    font-size: var(--kbg-fs-sm);
    line-height: var(--kbg-lh-body);
    color: var(--kbg-text-2);
    text-decoration: none;
    overflow-wrap: break-word;
    word-break: break-word;
}
body.kbg-ui-preview .kbg-topic-section li a:hover {
    color: var(--kbg-gold-1);
}
body.kbg-ui-preview .kbg-topic-section li a:focus-visible {
    outline: 2px solid var(--kbg-gold-1);
    outline-offset: 2px;
}