/* ==========================================================================
   知识分类 Hub 页专属样式 · category-hub.css V1.0
   --------------------------------------------------------------------------
   作用域：#tsHubMain（由 generatepress-child/category.php 输出）
   适用页：/price-guide/  /material-design/  /event-knowledge/（WordPress 分类归档）
   加载：functions.php 1L 段，无条件全站入队 + 空依赖（与 1c/1d/1e 同架构）
   依赖：子主题 style.css（--ts-gutter / --ts-container）

   ★ 本文件全部规则位于 #tsHubMain 作用域内，零全局裸选择器
     （唯一例外是下面第 0 节的 body.archive.category 容器零化，
       该选择器带分类页专用 body class，只在分类归档页命中）。
     因此全站加载也不会影响任何其它页面。

   ★ 遵循的既有约定：
     R4  左右内边距零化、不动上下；出血用 width:100vw + margin-left:calc((100% - 100vw)/2)
     R5  --ts-* / 本地令牌一律声明在容器 id 内
     R6  h2/h3 居中须带容器 id 前缀（根因 style.css:111 margin-left:0）
     R9  卡片同宽、dl/dd 默认 margin-inline-start 归零
     R10 橙为纯强调色；底色只用白与深墨；字号 8 级；两个深色锚点（Hero / CTA）
     R11 按钮显式三态，特异度 ≥(0,2,0)
     R12 橙色文字用 #B83E00
     R14 间距取 8px 基准令牌，禁硬编码
     R44 图片用 aspect-ratio 时须同时写 height:auto
     R48 hover 包进 @media (hover:hover)，focus/active 全设备
     R65 禁用 margin/padding 简写做局部覆盖
     R66 section 自身 margin:0;padding:0，留白全交给 __inner
   ========================================================================== */


/* ==========================================================================
   0. 页面级对齐：把 GP 的三层左右内边距归零
   --------------------------------------------------------------------------
   GP 默认给 .site-content / .inside-article / .entry-content 加左右内边距，
   会让全宽出血区块算不准、内容比页脚窄一圈。
   特异性：body.archive.category .site-content = (0,3,0)，
   高于 GP 的 .separate-containers .inside-article = (0,2,0)，无需 !important。
   只零左右，不动上下（R4）。
   ========================================================================== */
body.archive.category .site-content,
body.archive.category .content-area,
body.archive.category .site-main{
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    /* ★ 上下 margin 必须一并归零（R51 / 2026-09-20 线上实测修复）：
       GP separate-containers 布局给 .site-main 默认 margin-top:20px / margin-bottom:20px，
       会在「导航 ↔ Hero」和「CTA ↔ 页脚」之间各留一条 20px 白条。
       实测：header 底 110 → Hero 顶 130（白 20）；CTA 底 3834 → 页脚顶 3854（白 20）。
       Hub 页自己管间距，故此处全部归零，让 Hero 贴导航、CTA 贴页脚。 */
    margin-top: 0;
    margin-bottom: 0;
}

body.archive.category .site-main{
    padding-top: 0;
}


/* ==========================================================================
   1. 本地设计令牌（只在本容器作用域内）
   ========================================================================== */
#tsHubMain{
    /* 颜色：底色只用白与深墨，橙只作强调 */
    --hub-ink:        #14203A;
    --hub-ink-soft:   #23314E;
    --hub-ink-mute:   #5B6880;
    --hub-line:       rgba(20, 32, 58, .10);
    --hub-line-soft:  rgba(20, 32, 58, .06);
    --hub-paper:      #FFFFFF;
    --hub-paper-warm: #FFF1E5;
    --hub-brand:      #B83E00;

    /* CTA 专属深色（2026-09-20 用户反馈：CTA 原本用 --hub-ink 跟页脚 --ts-primary
       （#0B1F3A）几乎一样深蓝，CTA↔页脚两块深色贴在一起像一整块，识别不出收尾。
       改成接近纯黑的中性深炭 #16161E，与 Hero/footer 的蓝色形成色相对比，
       同时保留"深色锚点"角色（亮度 ~25，比 Hero ~36 和 Footer ~33 都更深，
       视觉上是"夜里最深"的一层）。白字对比度 17.6:1，远高于 WCAG AAA 7:1。 */
    --hub-cta-bg:     #16161E;

    /* 间距刻度：8px 基准（R14「紧凑」）
       ★ 单方向规则（R67 修复）：相邻 section 之间只保留一份间距。
         中间 section 用 padding-bottom 推下一节；首节 Hero / 末节 CTA 自己另给。
         旧版 __inner 上下都给 padding-top/bottom + Hero/CTA inner 上下也都给，
         相邻会累加成 168px；新版全部由 section 自身单边提供，最大不超过 88。 */
    --hub-sec-y:   clamp(40px, 5vw, 64px);
    --hub-gap:     clamp(16px, 2vw, 24px);
    --hub-head-y:  clamp(24px, 3.2vw, 40px);
    --hub-card-p:  clamp(16px, 1.8vw, 24px);

    /* 圆角 */
    --hub-r-sm: 10px;
    --hub-r-md: 16px;
    --hub-r-lg: 22px;

    /* 阴影：基于墨色，不用纯黑 */
    --hub-sh-1: 0 1px 2px rgba(20, 32, 58, .04),
                0 10px 24px -18px rgba(20, 32, 58, .28);
    --hub-sh-2: 0 2px 6px rgba(20, 32, 58, .05),
                0 22px 44px -24px rgba(20, 32, 58, .36);

    --hub-ease: cubic-bezier(.22, 1, .36, 1);

    /* 字号：8 级（R10） */
    --hub-fs-1: clamp(30px, 4.4vw, 46px);   /* Hero h1 */
    --hub-fs-2: clamp(22px, 2.6vw, 30px);   /* 区块 h2 */
    --hub-fs-3: 18px;                        /* 卡片 h3 */
    --hub-fs-4: 17px;                        /* Hero 导语 */
    --hub-fs-5: 16px;                        /* 正文 */
    --hub-fs-6: 14px;                        /* 次要说明 */
    --hub-fs-7: 13px;                        /* 日期 / 元信息 */
    --hub-fs-8: 12px;                        /* eyebrow / 标签 */

    font-size: var(--hub-fs-5);
    line-height: 1.75;
    color: var(--hub-ink-soft);
    background: var(--hub-paper);

    /* ★ 归零主题给 .site-main 内子容器的默认 margin-bottom:20px
       （2026-09-20 线上实测：#tsHubMain mb=20px → CTA 与页脚之间出现 20px 白条。
        该值来自 GP/主题默认规则，本文件与 style.css 均未声明，故必须在此显式覆盖。） */
    margin-bottom: 0;
}


/* ==========================================================================
   2. 区块骨架：section 自身不留白，留白交给 __inner（R66）
   ========================================================================== */
#tsHubMain .ts-hub__section{
    margin: 0;
    padding: 0;
}

#tsHubMain .ts-hub__inner,
#tsHubMain .ts-hub__heroInner,
#tsHubMain .ts-hub__ctaInner{
    max-width: var(--ts-container, 1280px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--ts-gutter, 24px);
    padding-right: var(--ts-gutter, 24px);
}

/* 中间 section 的内层：仅 padding-bottom 提供到下一节的距离。
   padding-top = 0 让内容贴近上一节的下边界，避免与上一节 padding-bottom 累加。
   ★ 唯一例外：紧接 Hero 的 S2（intro）。
     Hero 的 padding-bottom 落在**深色块内部**，深色块结束后不会再产生白色间距，
     若 S2 也 padding-top:0，「深色 Hero ↔ 暖色导语卡」会 0px 贴死
     （2026-09-20 用户反馈「与上方相邻区块之间缺失的上下间距」）。
     故 S2 必须自己给 padding-top，取同一枚 --hub-sec-y 令牌，保证节奏一致。
   ★ 参照 R66：同类页 about.css 的 .tsab-section 本来就是 padding-top/bottom 对称的。 */
#tsHubMain .ts-hub__inner{
    padding-top: 0;
    padding-bottom: var(--hub-sec-y);
}

#tsHubMain .ts-hub__intro .ts-hub__inner{
    padding-top: var(--hub-sec-y);
}


/* ==========================================================================
   3. S1 Hero（深色锚点 1）
   ========================================================================== */
#tsHubMain .ts-hub__hero{
    width: calc(100vw - var(--ts-sbw, 0px));
    margin-left: calc((100% - (100vw - var(--ts-sbw, 0px))) / 2);
    padding: 0;                  /* 纯容器，深色延展 + 间距全交给 heroInner */
    background: var(--hub-ink);
}

#tsHubMain .ts-hub__heroInner{
    /* 上下都提供 64：深色背景延伸到 padding-bottom 64 处，让深色块自身有呼吸。
       ★ 这 64 落在深色块**内部**，不构成与 S2 之间的白色间距；
         与 S2 的白色间距由 S2 自己的 padding-top 提供（见 .ts-hub__intro .ts-hub__inner）。 */
    padding-top: clamp(40px, 5vw, 64px);
    padding-bottom: clamp(40px, 5vw, 64px);
    text-align: center;
}

#tsHubMain .ts-hub__crumbs{
    margin-bottom: 24px;
}

#tsHubMain .ts-hub__crumbs ol{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    font-size: var(--hub-fs-7);
}

#tsHubMain .ts-hub__crumbs li + li::before{
    content: "/";
    margin-right: 8px;
    color: rgba(255, 255, 255, .45);
}

#tsHubMain .ts-hub__crumbs a{
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
}

#tsHubMain .ts-hub__crumbs span{
    color: rgba(255, 255, 255, .95);
}

#tsHubMain .ts-hub__eyebrow{
    display: inline-block;
    margin-bottom: 16px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    font-size: var(--hub-fs-8);
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .88);
}

#tsHubMain .ts-hub__title{
    margin-top: 0;
    margin-bottom: 16px;
    font-size: var(--hub-fs-1);
    font-weight: 500;
    line-height: 1.3;
    color: #FFFFFF;
}

#tsHubMain .ts-hub__lede{
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    font-size: var(--hub-fs-4);
    line-height: 1.8;
    color: rgba(255, 255, 255, .82);
}

#tsHubMain .ts-hub__stats{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(24px, 4vw, 56px);
    list-style: none;
    margin: 32px 0 0;               /* R-S1-1：覆盖 GP 父主题 ul/ol 的 margin-left:3em(48px)，
                                       让三个统计项在 heroInner 内真正水平居中（基线 dev=+24px） */
    padding: 0;
}

#tsHubMain .ts-hub__stat{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#tsHubMain .ts-hub__statNum{
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 500;
    line-height: 1.3;
    color: #FFFFFF;
}

#tsHubMain .ts-hub__statLabel{
    margin-top: 4px;
    font-size: var(--hub-fs-7);
    color: rgba(255, 255, 255, .62);
}

#tsHubMain .ts-hub__note{
    margin-top: 20px;
    margin-bottom: 0;
    font-size: var(--hub-fs-7);
    color: rgba(255, 255, 255, .55);
}


/* ==========================================================================
   4. S2 分类导语
   ========================================================================== */
#tsHubMain .ts-hub__introCard{
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
    /* 桌面上下 40px / 左右 56px，窄屏统一压到 24–28px（最后一条 @media 单独覆盖） */
    padding-top: clamp(28px, 3.4vw, 40px);
    padding-right: clamp(28px, 4.2vw, 56px);
    padding-bottom: clamp(28px, 3.4vw, 40px);
    padding-left: clamp(28px, 4.2vw, 56px);
    /* 圆角 16px（r-md）比之前的 22px（r-lg）更克制，不抢 Hero/CTA 的视觉重量 */
    border-radius: var(--hub-r-md);
    background: var(--hub-paper-warm);
    /* 边框 alpha 提到 12%（之前 10%）让卡片轮廓更明显 */
    border: 1px solid rgba(184, 62, 0, .12);
    /* ★ 顶部 2px 橙色细线（inset box-shadow）：
       视觉锚点，呼应品牌而不引入额外 padding —— 与 S3/S5 等其它节同样"深底首→白底"的过渡区分。
       ★ 与上方相邻区块统一节奏：上方 Hero padding-bottom 提供 64px 间距，此处不重复给。 */
    box-shadow: inset 0 2px 0 0 var(--hub-brand);
}

#tsHubMain.ts-hub.ts-hub .ts-hub__introTitle{
    margin-top: 0;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    /* 字号 17 → 20px：抬升一级与"全部文章/常见问题/相关服务"h2 视觉权重一致；
       clamp 避免在窄屏压字时跨级 */
    font-size: clamp(17px, 2vw, 20px);
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    color: var(--hub-ink);
}

#tsHubMain .ts-hub__introBody p{
    margin-top: 0;
    margin-bottom: 0;
    /* 正文 16 → 17px：与 Hero lede 同字重，建立层级（H1 标题 32+/ 标题 20 / 正文 17） */
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.85;
    color: var(--hub-ink-soft);
}

/* 响应式：≤640px 进一步压缩内边距 + 字号，保持移动端阅读舒适 */
@media (max-width: 640px){
    #tsHubMain .ts-hub__introCard{
        padding-top: 24px;
        padding-right: 24px;
        padding-bottom: 24px;
        padding-left: 24px;
    }
}


/* ==========================================================================
   5. 区块标题（居中，R6：须带容器 id 前缀）
   ========================================================================== */
#tsHubMain.ts-hub.ts-hub h2{
    margin-left: auto;
    margin-right: auto;
}

#tsHubMain .ts-hub__head{
    margin-bottom: var(--hub-head-y);
    text-align: center;
}

#tsHubMain .ts-hub__headTitle{
    margin-top: 0;
    margin-bottom: 8px;
    font-size: var(--hub-fs-2);
    font-weight: 500;
    line-height: 1.4;
    color: var(--hub-ink);
}

#tsHubMain .ts-hub__headSub{
    margin-top: 0;
    margin-bottom: 0;
    font-size: var(--hub-fs-6);
    color: var(--hub-ink-mute);
}


/* ==========================================================================
   6. S3 文章网格
   ========================================================================== */
#tsHubMain .ts-hub__grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--hub-gap);
}

@media (max-width: 1024px){
    #tsHubMain .ts-hub__grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px){
    #tsHubMain .ts-hub__grid{
        grid-template-columns: minmax(0, 1fr);
    }
}

#tsHubMain .ts-hub__card{
    display: flex;
    border-radius: var(--hub-r-md);
    background: var(--hub-paper);
    border: 1px solid var(--hub-line);
    box-shadow: var(--hub-sh-1);
    overflow: hidden;
    transition: transform .35s var(--hub-ease), box-shadow .35s var(--hub-ease);
}

#tsHubMain .ts-hub__cardLink{
    display: flex;
    flex-direction: column;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

#tsHubMain .ts-hub__cardMedia{
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--hub-line-soft);
}

#tsHubMain .ts-hub__cardImg{
    display: block;
    width: 100%;
    height: auto;            /* R44：必须写，否则 HTML width/height 让 aspect-ratio 失效 */
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

#tsHubMain .ts-hub__cardBody{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: var(--hub-card-p);
}

#tsHubMain .ts-hub__cardDate{
    font-size: var(--hub-fs-7);
    color: var(--hub-ink-mute);
    margin-top: 0;
    margin-bottom: 12px;
    /* 2026-09-20 客户要求：日期居中显示。
       cardBody 是 flex column，此元素作为 flex item 会被 blockify 并拉伸到整行宽，
       所以 text-align 能真正把日期文字居中（若不是 flex 子项，inline 元素加 text-align 无效）。 */
    text-align: center;
}

#tsHubMain .ts-hub__cardTitle{
    /* 2026-09-20 用户反馈：日期放在标题下面更好看（之前是「日期 → 标题」）。
       现在的 DOM 顺序：title → date → excerpt。
       标题作为卡片第一信息行：与卡 body 上沿顶齐（margin-top:0）；
       与下方日期靠紧（margin-bottom:6px），形成"主信息 → 元信息"自然层级。 */
    margin-top: 0;
    margin-bottom: 6px;
    font-size: var(--hub-fs-3);
    font-weight: 500;
    line-height: 1.5;
    color: var(--hub-ink);
    transition: color .25s var(--hub-ease);
}

#tsHubMain .ts-hub__cardExcerpt{
    margin-top: 0;
    margin-bottom: 16px;
    font-size: var(--hub-fs-6);
    line-height: 1.75;
    color: var(--hub-ink-mute);
}

#tsHubMain .ts-hub__cardMore{
    margin-top: auto;
    font-size: var(--hub-fs-7);
    font-weight: 500;
    color: var(--hub-brand);
}

#tsHubMain .ts-hub__empty{
    margin: 0;
    padding-top: 24px;
    padding-bottom: 24px;
    text-align: center;
    font-size: var(--hub-fs-6);
    color: var(--hub-ink-mute);
}

#tsHubMain .ts-hub__pager{
    margin-top: var(--hub-head-y);
    text-align: center;
    font-size: var(--hub-fs-6);
}

#tsHubMain .ts-hub__pager .page-numbers{
    display: inline-block;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: var(--hub-r-sm);
    color: var(--hub-ink-soft);
    text-decoration: none;
}

#tsHubMain .ts-hub__pager .page-numbers.current{
    background: var(--hub-ink);
    color: #FFFFFF;
}


/* ==========================================================================
   7. S4 子话题簇
   ========================================================================== */
#tsHubMain .ts-hub__topicList{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

#tsHubMain .ts-hub__topicItem a{
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 999px;
    border: 1px solid var(--hub-line);
    background: var(--hub-paper);
    font-size: var(--hub-fs-6);
    color: var(--hub-ink-soft);
    text-decoration: none;
    transition: border-color .25s var(--hub-ease), color .25s var(--hub-ease);
}

#tsHubMain .ts-hub__topicCount{
    font-size: var(--hub-fs-8);
    color: var(--hub-ink-mute);
}


/* ==========================================================================
   8. S5 分类 FAQ
   ========================================================================== */
#tsHubMain .ts-hub__faqList{
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}

#tsHubMain .ts-hub__faqItem{
    padding-top: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--hub-line);
}

#tsHubMain .ts-hub__faqItem:first-child{
    border-top: 1px solid var(--hub-line);
}

#tsHubMain .ts-hub__faqQ{
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0;
    padding: 0;
}

#tsHubMain .ts-hub__faqNum{
    flex: 0 0 auto;
    font-size: var(--hub-fs-8);
    font-weight: 500;
    color: var(--hub-brand);
}

#tsHubMain .ts-hub__faqQText{
    font-size: var(--hub-fs-5);
    font-weight: 500;
    line-height: 1.6;
    color: var(--hub-ink);
}

#tsHubMain .ts-hub__faqA{
    margin: 0;                      /* R9：dd 默认 margin-inline-start:40px 必须归零 */
    margin-inline-start: 0;
    padding: 0;
    padding-top: 8px;
    padding-left: 34px;
}

#tsHubMain .ts-hub__faqA p{
    margin-top: 0;
    margin-bottom: 0;
    font-size: var(--hub-fs-5);
    line-height: 1.8;
    color: var(--hub-ink-soft);
}

#tsHubMain .ts-hub__faqMore{
    padding-top: 8px;
}

#tsHubMain .ts-hub__faqMore a{
    font-size: var(--hub-fs-6);
    font-weight: 500;
    color: var(--hub-brand);
    text-decoration: none;
    border-bottom: 1px solid rgba(184, 62, 0, .30);
}


/* ==========================================================================
   9. S6 关联服务
   ========================================================================== */
#tsHubMain .ts-hub__svcGrid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--hub-gap);
}

@media (max-width: 1024px){
    #tsHubMain .ts-hub__svcGrid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px){
    #tsHubMain .ts-hub__svcGrid{
        grid-template-columns: minmax(0, 1fr);
    }
}

#tsHubMain .ts-hub__svcCard{
    display: flex;
    flex-direction: column;
    padding: clamp(20px, 2.4vw, 32px);
    border-radius: var(--hub-r-md);
    border: 1px solid var(--hub-line);
    background: var(--hub-paper);
    box-shadow: var(--hub-sh-1);
    text-decoration: none;
    color: inherit;
    transition: transform .35s var(--hub-ease), box-shadow .35s var(--hub-ease);
}

#tsHubMain .ts-hub__svcTitle{
    font-size: var(--hub-fs-3);
    font-weight: 500;
    color: var(--hub-ink);
}

#tsHubMain .ts-hub__svcDesc{
    margin-top: 8px;
    font-size: var(--hub-fs-6);
    line-height: 1.75;
    color: var(--hub-ink-mute);
}

#tsHubMain .ts-hub__svcMore{
    margin-top: auto;
    padding-top: 16px;
    font-size: var(--hub-fs-7);
    font-weight: 500;
    color: var(--hub-brand);
}


/* ==========================================================================
   10. S7 CTA（深色锚点 2）
   ========================================================================== */
#tsHubMain .ts-hub__cta{
    width: calc(100vw - var(--ts-sbw, 0px));
    margin-left: calc((100% - (100vw - var(--ts-sbw, 0px))) / 2);
    padding: 0;
    background: var(--hub-cta-bg);
}

#tsHubMain .ts-hub__ctaInner{
    padding-top: clamp(40px, 5vw, 64px);
    padding-bottom: clamp(40px, 5vw, 64px);
    text-align: center;
}

#tsHubMain.ts-hub.ts-hub .ts-hub__ctaTitle{
    margin-top: 0;
    margin-bottom: 12px;
    margin-left: auto;
    margin-right: auto;
    font-size: var(--hub-fs-2);
    font-weight: 500;
    line-height: 1.4;
    color: #FFFFFF;
}

#tsHubMain .ts-hub__ctaText{
    max-width: 640px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    font-size: var(--hub-fs-6);
    line-height: 1.8;
    color: rgba(255, 255, 255, .78);
}

#tsHubMain .ts-hub__ctaBtns{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 28px;
}


/* ==========================================================================
   11. 按钮：显式三态（R11，规避父主题 a.button:hover 染色）
   ========================================================================== */
#tsHubMain .ts-hub__btn{
    display: inline-block;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 24px;
    padding-right: 24px;
    border-radius: 999px;
    font-size: var(--hub-fs-6);
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color .25s var(--hub-ease),
                color .25s var(--hub-ease),
                border-color .25s var(--hub-ease);
}

#tsHubMain .ts-hub__btnPrimary{
    background: #FFFFFF;
    color: var(--hub-ink);
    border: 1px solid #FFFFFF;
}

#tsHubMain .ts-hub__btnGhost{
    background: transparent;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, .45);
}

#tsHubMain .ts-hub__btn:focus,
#tsHubMain .ts-hub__btn:active{
    outline: 2px solid rgba(255, 255, 255, .80);
    outline-offset: 2px;
}

#tsHubMain .ts-hub__btnPrimary:active{
    background: rgba(255, 255, 255, .86);
}

#tsHubMain .ts-hub__btnGhost:active{
    background: rgba(255, 255, 255, .12);
}

@media (hover: hover){
    #tsHubMain .ts-hub__btnPrimary:hover{
        background: var(--hub-paper-warm);
        color: var(--hub-brand);
    }

    #tsHubMain .ts-hub__btnGhost:hover{
        background: rgba(255, 255, 255, .12);
        border-color: rgba(255, 255, 255, .75);
    }

    #tsHubMain .ts-hub__card:hover{
        transform: translateY(-3px);
        box-shadow: var(--hub-sh-2);
    }

    #tsHubMain .ts-hub__card:hover .ts-hub__cardTitle{
        color: var(--hub-brand);
    }

    #tsHubMain .ts-hub__svcCard:hover{
        transform: translateY(-3px);
        box-shadow: var(--hub-sh-2);
    }

    #tsHubMain .ts-hub__topicItem a:hover{
        border-color: rgba(184, 62, 0, .40);
        color: var(--hub-brand);
    }

    #tsHubMain .ts-hub__crumbs a:hover{
        color: #FFFFFF;
        text-decoration: underline;
    }
}


/* ==========================================================================
   12. 降低动效偏好 / 打印（R48 豁免）
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
    #tsHubMain .ts-hub__card,
    #tsHubMain .ts-hub__svcCard,
    #tsHubMain .ts-hub__btn{
        transition: none;
    }
}

@media print{
    #tsHubMain .ts-hub__hero,
    #tsHubMain .ts-hub__cta{
        background: #FFFFFF;
        color: #000000;
    }
}