/**
 * 文档首页样式
 * 用于 page-doc-home.php 模板
 *
 * @package WordPress
 * @subpackage Doc System
 * @since 1.0.0
 */

/* ========================================
   通用样式
   ======================================== */

.title.excerpts-title {
    border-radius: 6px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
}

.title.excerpts-title h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    line-height: 1;
}

.title.excerpts-title h3 .icon {
    font-size: 16px;
    line-height: 1;
}

.doc-home-doc-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--tb--line, #e0e0e0);
}

.doc-home-doc-heading .icon {
    font-size: 16px;
    line-height: 1;
}

.doc-home-section {
    margin-bottom: 40px;
    padding: 0 0 20px 0;
}

.doc-home-section:last-child {
    margin-bottom: 0;
}

/* ========================================
   首页（模式 C）：文档网格下方的完整列表页入口
   ======================================== */

.doc-home-flat-more {
    margin-top: 18px;
    text-align: center;
}

.doc-home-flat-more-link {
    display: inline-block;
    padding: 8px 22px;
    border: 1px solid var(--tb--main, #007bff);
    border-radius: 4px;
    color: var(--tb--main, #007bff);
    font-size: 14px;
    text-decoration: none;
}

.doc-home-flat-more-link:hover {
    background: var(--tb--main, #007bff);
    color: #fff;
}

/* ========================================
   文章区与 区之间的搜索框
   外层直接复用 .doc-home-category 的白底卡片（无标题行），
   输入框沿用主题 get_search_form() 输出的 .search-field
   ======================================== */

.doc-home-search {
    overflow: hidden;
}

/* 主题给输入框的是白底，而外层卡片也是白底，两者会糊在一起，
 * 故在此作用域内改为浅灰底——与区块内其它内容卡片的处理一致。
 * 限定在 .doc-home-search 内，不影响页头搜索框。 */
.doc-home-search .search-field {
    background-color: var(--tb--tint, #f8f9fa);
}

/* ========================================
   博客文章区域
   ======================================== */

.doc-home-posts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.doc-home-post-card {
    display: flex;
    align-items: stretch;
    background: var(--tb--white, #fff);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid var(--tb--line, #e0e0e0);
}

.doc-home-post-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.doc-home-post-thumb {
    flex-shrink: 0;
    width: 120px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--tb--tint, #f8f9fa);
}

.doc-home-post-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.doc-home-post-card:hover .doc-home-post-thumb img {
    transform: scale(1.05);
}

.doc-home-post-content {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.doc-home-post-title {
    margin: 0 0 6px 0;
    font-size: 14px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 标题色必须带 #primary 提级：插件在 head 内联注入的暗色规则
   html.darking a{color:var(--tb--main)} 特异性是 (0,1,2)，
   而 .doc-home-post-title a 只有 (0,1,1)——暗色下会被它打回主色。
   带上 id 变成 (1,1,1) 才在两套配色下都稳（列表页的标题本来就带 #primary）。 */
#primary .doc-home-post-title a {
    /* 与 tag 页 / 列表页的条目标题一致：正文文字色，悬停才上主色 */
    color: var(--tb--base, #333);
    text-decoration: none;
    transition: color 0.2s ease;
}

#primary .doc-home-post-title a:hover {
    color: var(--tb--main, #007bff);
}

.doc-home-post-meta {
    display: flex;
    gap: 10px;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--tb--gray, #999);
}

.doc-home-post-excerpt {
    flex: 1;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--tb--base, #ccc);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========================================
   文档区域
   ======================================== */

/* 首页各模式的整宽子区块：
   .doc-home-category = 模式 A 的分类分组、模式 C 的「所有文档」
   .doc-home-cat-group = 模式 B 的分类分组
   主栏 #primary 自身已经是白底 + 1px 边框的卡片，这些区块和它同宽同底色，
   再描边就会形成同心多重边框，所以这里不再加边框，靠上下留白和标题分隔。
   网格里的卡片（.doc-home-post-card / .doc-home-doc-card）是卡片单元、
   不与主栏边框相邻，保留各自边框。 */
.doc-home-category,
.doc-home-cat-group {
    margin-bottom: 30px;
    /*padding: 20px;*/
    background: var(--tb--white, #fff);
    border-radius: 6px;
}

.doc-home-category:last-child,
.doc-home-cat-group:last-child {
    margin-bottom: 0;
}

.doc-home-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    border-bottom: 2px solid var(--tb--main, #007bff);
}

.doc-home-category-title {
    margin: 0;
    font-size: 18px;
    color: var(--tb--main, #333);
}

.doc-home-category-count {
    font-size: 14px;
    color: var(--tb--gray, #999);
    font-weight: normal;
}

.doc-home-category-more {
    color: var(--tb--main, #007bff);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.doc-home-category-more:hover {
    color: var(--tb--main, #0056b3);
    text-decoration: none;
}

/* 模式 A（按分类分组）与模式 C（不分组）共用，列数变化统一为 6 → 4 → 3：
 * 6 列（≥1361px）→ 4 列（≤1360px）→ 3 列（≤1024px，侧边栏隐藏）
 * 1360px 沿用分类网格的切换点；1024px 是侧边栏隐藏点，空间变化最大，适合再收一档。 */
.doc-home-doc-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

@media (max-width: 1360px) {
    .doc-home-doc-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.doc-home-doc-card {
    background: var(--tb--tint, #f8f9fa);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--tb--line, #e0e0e0);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.doc-home-doc-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.doc-home-doc-thumb {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--tb--tint, #f0f0f0);
    border-radius: 4px;
}

.doc-home-doc-thumb img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.doc-home-doc-card:hover .doc-home-doc-thumb img {
    transform: scale(1.05);
}

.doc-home-doc-content {
    padding: 8px 10px 10px;
    /* 原来是 center（桌面窄列网格里居中）：现统一靠左 */
    text-align: left;
}

.doc-home-doc-title {
    margin: 0;
    /* 显式靠左：这个元素是 display:-webkit-box（两行截断），
       text-align 在这种盒模型下不一定跟着父级走，写死更保险 */
    text-align: left;
    font-size: 13px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 同上：带 #primary 才能压过暗色下那条 html.darking a{color:var(--tb--main)} */
#primary .doc-home-doc-title a {
    /* 与 tag 页 / 列表页的条目标题一致：正文文字色，悬停才上主色 */
    color: var(--tb--base, #333);
    text-decoration: none;
    transition: color 0.2s ease;
}

#primary .doc-home-doc-title a:hover {
    color: var(--tb--main, #007bff);
}

/* 把首页卡片的上边框压回卡片自己的边框色。
   主题有一条针对首页所有 <article> 的规则（style.css L1845）：
   .twentyseventeen-front-page article:not(.has-post-thumbnail):not(:first-child){
       border-top: 1px solid #ddd; }
   首页这些卡片都是 <article>，而且用的是硬编码 class、天生不带 has-post-thumbnail，
   于是上边框被这条写死的 #ddd 抢走：另外三边是 --tb--line，暗色模式下 #ddd 就是
   一条白线，其它三边几乎看不见——看起来就是「每张卡片多一条白色上边框」。
   主题那条特异性是 (0,3,1)，卡片自身的 (0,1,0) 压不过，所以这里借 #primary
   提一级（1,1,0）把它盖掉，四边恢复同色。 */
#primary .doc-home-post-card,
#primary .doc-home-doc-card {
    border-top: 1px solid var(--tb--line, #e0e0e0);
}

/* 首页文档卡片右栏的文字分三档，显隐全部在这里控制（markup 三样都渲染）：
   >1024px   窄列网格，只有标题；
   ≤1024px   单列左图右文，三行：标题 / 摘要 / 分类（标签在这一档不再显示）；
   ≤600px    两行：标题 / 分类（摘要也去掉，标题不加粗）。 */
.doc-home-doc-summary,
.doc-home-doc-meta {
    display: none;
}

/* ========================================
   响应式设计
   ======================================== */

/* ≤1024px：首页文档区进入「左图右文」形态。
   断点从原来的 768px 上移到 1024px——769–1024px 区间原来仍是 3 列窄卡片，
   挤不下三行文字，这里直接单列。 */
@media (max-width: 1024px) {
    .doc-home-posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .doc-home-doc-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* 右栏三行会比封面高，居中会让封面偏下、标题对不齐封面顶部，改成顶对齐 */
    .doc-home-doc-card {
        flex-direction: row;
        align-items: flex-start;
    }

    .doc-home-doc-thumb {
        flex: 0 0 96px;
        width: 96px;
        height: 128px;
        aspect-ratio: auto;
        border-radius: 0;
    }

    .doc-home-doc-content {
        padding: 10px 14px;
        text-align: left;
        /* 右栏是 flex 项，默认 min-width:auto 会按 min-content 撑开；
           分类那行是 nowrap，min-content 就是整行文字的宽度，
           不加 min-width:0 就会把卡片顶宽、整页横向溢出。 */
        flex: 1;
        min-width: 0;
        /* 列向 flex + stretch：撑到与封面等高，好让分类行贴底 */
        align-self: stretch;
        display: flex;
        flex-direction: column;
    }

    .doc-home-doc-title {
        font-size: 14px;
    }

    /* 第二行：摘要，最多两行 */
    .doc-home-doc-summary {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-top: 6px;
        /* 保底两行高度：文字短的文档也能占满两行，卡片高度才齐 */
        min-height: calc(2 * 1.6em);
        font-size: 12px;
        line-height: 1.6;
        color: var(--tb--base, #333);
        opacity: 0.75;
    }

    /* 第三行：分类，固定一行，超出省略 */
    .doc-home-doc-meta {
        display: block;
        /* auto 推到右栏底部（与封面底边齐），padding-top 保底 8px 间距 */
        margin-top: auto;
        padding-top: 8px;
        font-size: 11px;
        line-height: 1.5;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 这一档不要标签：卡片文字就是「标题 / 摘要 / 分类」。
       列表条目（.doc-list-*）在同一档同样隐藏标签，保持四页一致。 */
    .doc-home-doc-tags,
    #primary .doc-list-item .doc-list-tags {
        display: none;
    }
}

/* ≤600px：再收一档——去掉摘要，标题不加粗，只剩「标题 / 分类」两行 */
@media (max-width: 600px) {
    .doc-home-section {
        margin-bottom: 30px;
        padding: 15px 0;
    }

    .doc-home-posts-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .doc-home-category,
    .doc-home-cat-group {
        /*padding: 15px;*/
        margin-bottom: 20px;
    }

    .doc-home-category-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* 「去掉摘要」和「标题不加粗」不能写在这个块里：
       本文件把 #primary .doc-list-item .entry-title{font-weight:600} 等基础规则
       写在了更后面，而媒体查询不增加特异性——同特异性下后写的赢，
       写在这儿会被后面的基础规则反压回去。这两条统一放在文件末尾那个
       ≤600 块（所有基础规则之后）里。 */
}

/* ========================================
   首页 区：按顶级分类分组，列出下一级分类
   布局参考 bookstack.cn「分类浏览」
   ======================================== */

/* 顶级分类：分组标题 */
.doc-home-cat-group-title {
    display: flex;
    align-items: center;
    margin: 0 0 12px;
    padding-left: 10px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    border-left: 3px solid var(--tb--main, #007bff);
}

.doc-home-cat-group-title a {
    color: var(--tb--base, #333);
    text-decoration: none;
    transition: color 0.2s ease;
}

.doc-home-cat-group-title a:hover {
    color: var(--tb--main, #007bff);
}

/* 下一级分类：左侧封面 + 右侧分类名
 *
 * 列数按内容列实际宽度决定，而不是视口宽度：
 * 容器宽度由主题选项输出为 .container{max-width:1920px}，
 * 所以内容列 ≈ 视口 − 380px（侧边栏）− 40px（容器内边距），随视口线性变化。
 * 4 列时每卡 ≈ (内容列 − 36) / 4：视口 1360px 约 224px、1440px 约 242px。
 * 3 列在 1360px 及以下更宽松（每卡 240~310px），故切换点定在 1360px。
 * 注意：侧边栏要到 1024px 才隐藏，切换点在其之前，侧边栏仍可见时已是 3 列。
 */
.doc-home-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.doc-home-cat-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    /* 与模式 A/C 的 .doc-home-doc-card 一致：白底区块内用浅灰卡片区分层次 */
    background: var(--tb--tint, #f8f9fa);
    border: 1px solid var(--tb--line, #eee);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.doc-home-cat-card:hover {
    border-color: var(--tb--main, #007bff);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.doc-home-cat-card-cover {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 4px;
    overflow: hidden;
    /* 卡片已改为浅灰底，封面框用白色拉开对比 */
    background: var(--tb--white, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
}

.doc-home-cat-card-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.doc-home-cat-card:hover .doc-home-cat-card-cover img {
    transform: scale(1.06);
}

.doc-home-cat-card-empty {
    font-size: 20px;
    line-height: 1;
    font-weight: 600;
    color: var(--tb--gray, #bbb);
}

.doc-home-cat-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

.doc-home-cat-card-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--tb--base, #333);
    transition: color 0.2s ease;
}

.doc-home-cat-card:hover .doc-home-cat-card-name {
    color: var(--tb--main, #007bff);
}

/* ========================================
   分类页：/ 文章分区
   ======================================== */

.doc-split-cover {
    margin: 0 0 20px;
    border-radius: 6px;
    overflow: hidden;
    line-height: 0;
}

.doc-split-cover img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 260px;
    object-fit: cover;
}

.doc-split-section {
    margin-bottom: 32px;
}

.doc-split-section:last-child {
    margin-bottom: 0;
}

.doc-split-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding-bottom: 10px;
    font-size: 16px;
    border-bottom: 1px solid var(--tb--line, #e0e0e0);
}

.doc-split-heading .icon {
    font-size: 15px;
    line-height: 1;
}

.doc-split-empty {
    margin: 0;
    padding: 14px 16px;
    border-radius: 6px;
    background: var(--tb--tint, #f8f9fa);
    color: var(--tb--gray, #999);
    font-size: 13px;
}

/* 分类范围 chips（单选） */
.doc-scope-filter {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    font-size: 12px;
}

.doc-scope-filter li {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
    padding: 0;
}

.doc-scope-filter li a {
    display: inline-block;
    padding: 0 8px;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 6px;
    color: var(--tb--base, #333);
    text-decoration: none;
    transition: all 0.2s ease;
}

.doc-scope-filter li a:hover {
    border-color: var(--tb--main, #007bff);
    color: var(--tb--main, #007bff);
}

.doc-scope-filter li a.active {
    border-color: var(--tb--main, #007bff);
    color: var(--tb--main, #007bff);
}

/* 两段各自分页，用 doc_render_paging() 输出 .pagination。
   必须限定在 .doc-split-section 内：主题自己的分页是
   <nav class="navigation pagination">，无差别选择器会串味。 */
.doc-split-section .pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.doc-split-section .pagination li a,
.doc-split-section .pagination li span {
    display: inline-block;
    min-width: 34px;
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    border: 1px solid var(--tb--line, #e0e0e0);
    border-radius: 4px;
    color: var(--tb--base, #333);
}

.doc-split-section .pagination li a:hover {
    border-color: var(--tb--main, #007bff);
    color: var(--tb--main, #007bff);
}

.doc-split-section .pagination li.active span {
    background: var(--tb--main, #007bff);
    border-color: var(--tb--main, #007bff);
    color: #fff;
}

/* 4 → 3 列：发生在侧边栏隐藏（1024px）之前 */
@media (max-width: 1360px) {
    .doc-home-cat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .doc-home-cat-group-title {
        font-size: 16px;
    }

    .doc-home-cat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .doc-home-cat-card {
        gap: 8px;
        padding: 6px;
    }

    .doc-home-cat-card-cover {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
    }

    .doc-home-cat-card-name {
        font-size: 13px;
    }
}

/* ========================================
   文档列表条目：左封面 + 右文字
   结构见 template-parts/post/content-doc-excerpt.php

   类名沿用主题原生的 entry-header / entry-title / entry-summary。
   标题必须用 #primary 加锁：主题有
   body.page:not(.twentyseventeen-front-page) .entry-title（3 个类）
   会把列表页的标题压成 14px 深灰，仅靠类名叠加赢不了。
   ======================================== */

#primary .doc-list-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--tb--line, #e0e0e0);
}

#primary .doc-list-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* 封面是书籍封面，3:4 竖版 + contain 完整显示不裁剪 */
#primary .doc-list-thumb {
    flex: 0 0 120px;
    width: 120px;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid var(--tb--line, #e0e0e0);
    background: var(--tb--tint, #f0f0f0);
    line-height: 0;
}

#primary .doc-list-thumb img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#primary .doc-list-body {
    flex: 1;
    min-width: 0;
    /* 列向 flex + stretch：右栏撑到与封面等高，
       分类行再用 margin-top:auto 贴到底部（见下面的 .doc-list-meta）。 */
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

/* 主题给「非首页」的 .entry-header 配了 margin-left/right: auto
   （body:not(.twentyseventeen-front-page) .entry-header，style.css L2081），
   配上它自己的 max-width 就把整块居中了，条目里的标题看着像居中/内缩。
   条目里不需要这套：左右 auto 归零、主题那 1em 的上下 padding 也清掉，
   只留 6px 与摘要的间距。 */
#primary .doc-list-item .entry-header {
    margin-bottom: 6px;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
}

#primary .doc-list-item .entry-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--tb--base, #333);
}

#primary .doc-list-item .entry-title a {
    color: var(--tb--base, #333);
    text-decoration: none;
    transition: color 0.2s ease;
}

#primary .doc-list-item .entry-title a:hover {
    color: var(--tb--main, #007bff);
}

/* 摘要用基色 + 透明度：--tb--gray 在浅色下是 #999，
   14px 正文对比度不足；透明度在两套配色下都能保持可读又不过抢眼。 */
#primary .doc-list-item .entry-summary {
    font-size: 14px;
    line-height: 1.7;
    color: var(--tb--base, #333);
    opacity: 0.75;
}

/* 摘要固定两行：模板已给足文字（正文前 120 词）后在这里两行截断，
   宽屏能铺满、窄屏不溢出；min-height 保底两行高度，条目高度才齐。 */
#primary .doc-list-item .entry-summary p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    min-height: calc(2 * 1.7em);
}

/* 「分类 + 标签」行：列表条目固定成「标题 / 摘要 / 分类 + 标签」三行；
   ≤1024px 三行（标题 / 摘要 / 分类，这一档不要标签）；
   ≤600px 两行（标题 / 分类，摘要也去掉、标题不加粗）。 */
#primary .doc-list-item .doc-list-meta {
    /* auto 把这一行推到右栏底部（与封面底边齐）；padding-top 保证
       和上面摘要之间至少留 8px，不会因为没富余空间而贴住。 */
    margin-top: auto;
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 「分类 + 标签」两族（列表条目 .doc-list-* 与首页卡片 .doc-home-doc-*）共用一套：
   分类做成胶囊——1px 边框 + 左右半圆，主色描边配主色文字；
   标签保持灰色纯文字。颜色 + 形状两重区分，一眼能分清哪个是分类。
   统一带 #primary 提一级特异性：这两块都在主栏内，而链接色容易被主题的
   html.darking a 之类的规则改写，带 id 才稳。 */
#primary .doc-home-doc-meta a,
#primary .doc-list-item .doc-list-meta a {
    color: inherit;
    text-decoration: none;
}

#primary .doc-list-item .doc-list-cats a,
#primary .doc-home-doc-cats a {
    border: 1px solid var(--tb--main, #007bff);
    border-radius: 999px;
    color: var(--tb--main, #007bff);
    display: inline-block;
    padding: 1px 8px;
    text-decoration: none;
}

#primary .doc-list-item .doc-list-cats,
#primary .doc-home-doc-cats {
    margin-right: 8px;
}

#primary .doc-list-item .doc-list-tags,
#primary .doc-home-doc-tags {
    color: var(--tb--gray, #999);
}

/* ≤600px：卡片文字只留「标题 / 分类」两行——去掉摘要、标题不加粗，
   外加列表条目的尺寸收紧。

   这一段刻意放在文件最末尾：媒体查询不增加特异性，而
   #primary .doc-list-item .entry-title{font-weight:600} 这类基础规则
   写在本文件更靠前/靠后的位置都有，同特异性下**后写的赢**。
   放在末尾能确保这两条一定盖过它们（选择器也统一带 #primary 再提一级）。 */
@media (max-width: 600px) {
    /* 第一行以外的内容去掉：首页卡片与列表条目一起 */
    #primary .doc-home-doc-summary,
    #primary .doc-list-item .entry-summary {
        display: none;
    }

    /* 标题不加粗（含首页文章卡片、首页文档卡片、列表条目三种标题） */
    #primary .doc-home-post-title,
    #primary .doc-home-doc-title,
    #primary .doc-list-item .entry-title {
        font-weight: normal;
    }

    #primary .doc-home-doc-meta {
        margin-top: 6px;
    }

    #primary .doc-list-item {
        gap: 12px;
    }

    #primary .doc-list-thumb {
        flex-basis: 88px;
        width: 88px;
    }

    #primary .doc-list-item .entry-title {
        font-size: 16px;
    }

    #primary .doc-list-item .doc-list-meta {
        font-size: 11px;
    }
}

/* ========================================
   深色模式支持
   变量由主题（Twenty Seventeen / DUX）的 .darking:root 重新定义，
   此处样式全部基于变量书写，会自动跟随切换
   ======================================== */