/**
 * Knowledge Hub — FAQ 模块样式（移动端基础，桌面扩展在 reset.css 底部）
 */

/* 双语显示开关 */
.fh-zh {
    display: none;
}
html.fh-lang-zh .fh-en {
    display: none;
}
html.fh-lang-zh .fh-zh {
    display: block;
}
.hub-breadcrumb .fh-zh,
.hub-cat-count .fh-zh,
.hub-post-nav-label .fh-zh {
    display: none;
}
html.fh-lang-zh .hub-breadcrumb .fh-en,
html.fh-lang-zh .hub-cat-count .fh-en,
html.fh-lang-zh .hub-post-nav-label .fh-en {
    display: none;
}
html.fh-lang-zh .hub-breadcrumb .fh-zh,
html.fh-lang-zh .hub-cat-count .fh-zh,
html.fh-lang-zh .hub-post-nav-label .fh-zh {
    display: inline;
}
/* 标题/链接内的双语 span：中文模式下保持行内，不被全局 block 撑成块级 */
html.fh-lang-zh .hub-post-nav-title .fh-zh,
html.fh-lang-zh .hub-related-title .fh-zh {
    display: inline;
}

.hub-page {
    padding-bottom: 6rem;
}

/* Hub 板块 iconfont 统一 2rem */
.hub-page .iconfont {
    font-size: 2rem;
}

/* 内容区工具条：简介/日期 + 语言切换 */
.hub-toolbar {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    margin: 4rem 0 2.4rem;
}
.hub-intro {
    color: #5A6B7B;
    font-size: 1.6rem;
    line-height: 1.8;
    max-width: 90rem;
}

/* 语言切换：悬浮固定左下角，无需滚回顶部切换 */
.hub-lang-switch {
    position: fixed;
    left: 1.6rem;
    bottom: 7.2rem;
    z-index: 900;
    display: flex;
    box-shadow: 0 0.4rem 1.6rem rgba(27, 38, 49, 0.16);
    border-radius: 0.6rem;
    overflow: hidden;
}
.hub-lang-btn {
    min-width: 6rem;
    height: 4.4rem;
    padding: 0 1.6rem;
    border: 1px solid #E2E8F0;
    background: #fff;
    color: #5A6B7B;
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}
.hub-lang-btn:first-child {
    border-radius: 0.6rem 0 0 0.6rem;
}
.hub-lang-btn:last-child {
    border-radius: 0 0.6rem 0.6rem 0;
    border-left: none;
}
.hub-lang-btn:hover {
    color: #0046C7;
    border-color: #0046C7;
}
.hub-lang-btn.active {
    background: #0046C7;
    border-color: #0046C7;
    color: #fff;
}

/* page-header 内双语标题 */
.page-header h1 .fh-zh {
    display: none;
}
html.fh-lang-zh .page-header h1 .fh-en {
    display: none;
}
html.fh-lang-zh .page-header h1 .fh-zh {
    display: block;
}

/* 入口页模块卡 */
.hub-module-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.4rem;
}
.hub-module-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 1.2rem;
    padding: 3.2rem 2.4rem;
    transition: all 0.3s ease;
}
a.hub-module-card:hover {
    transform: translateY(-4px);
    border-color: #FE7610;
    box-shadow: 0 1.2rem 2.4rem rgba(39, 51, 66, 0.08);
}
.hub-module-icon {
    width: 6.4rem;
    height: 6.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.2rem;
    background: linear-gradient(135deg, #0046C7, #0039A6);
    color: #fff;
}
.hub-module-card.is-coming .hub-module-icon {
    background: linear-gradient(135deg, #34495E, #273342);
}
.hub-module-card h2 {
    margin-top: 2rem;
    font-size: 2.2rem;
    font-weight: 700;
    color: #273342;
}
.hub-module-card p {
    margin-top: 1.2rem;
    color: #5A6B7B;
    font-size: 1.6rem;
    line-height: 1.8;
    flex: 1;
}
.hub-module-more {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 2rem;
    color: #0046C7;
    font-size: 1.6rem;
    font-weight: 600;
    transition: all 0.3s ease;
}
.hub-module-more .iconfont {
    transition: all 0.3s ease;
}
a.hub-module-card:hover .hub-module-more {
    color: #FE7610;
}
a.hub-module-card:hover .hub-module-more .iconfont {
    transform: translateX(4px);
}
.hub-module-badge {
    display: inline-flex;
    align-items: center;
    margin-top: 2rem;
    padding: 0.8rem 1.6rem;
    border-radius: 99rem;
    background: #F4F7FB;
    color: #8B9BAB;
    font-size: 1.4rem;
    font-weight: 600;
    align-self: flex-start;
}

/* FAQ 分类卡（重设计：渐变图标块 + 计数胶囊 + 底部分隔线链接） */
.hub-cat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.4rem;
}
.hub-cat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 1.2rem;
    padding: 3.2rem 2.8rem 2.4rem;
    overflow: hidden;
    transition: all 0.3s ease;
}
.hub-cat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0.4rem;
    background: linear-gradient(135deg, #0046C7, #1A5CD1);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.hub-cat-card:hover {
    transform: translateY(-6px);
    border-color: #FE7610;
    box-shadow: 0 1.6rem 3.2rem rgba(39, 51, 66, 0.1);
}
.hub-cat-card:hover::before {
    opacity: 1;
}
.hub-cat-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.hub-cat-icon {
    width: 5.6rem;
    height: 5.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.4rem;
    background: linear-gradient(135deg, #0046C7, #0039A6);
    color: #fff;
    transition: all 0.3s ease;
}
.hub-cat-card:hover .hub-cat-icon {
    background: linear-gradient(135deg, #FE7610, #E56A0D);
}
.hub-cat-count {
    padding: 0.6rem 1.4rem;
    border-radius: 99rem;
    background: #FFF4EC;
    color: #FE7610;
    font-size: 1.4rem;
    font-weight: 600;
}
.hub-cat-count .fh-en,
html.fh-lang-zh .hub-cat-count .fh-zh {
    display: inline;
}
.hub-cat-card h2 {
    margin-top: 2rem;
    font-size: 2rem;
    font-weight: 700;
    color: #273342;
    line-height: 1.4;
}
.hub-cat-desc {
    margin-top: 1rem;
    color: #5A6B7B;
    font-size: 1.4rem;
    line-height: 1.8;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hub-cat-more {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 2rem;
    padding-top: 1.6rem;
    border-top: 1px solid #F4F7FB;
    color: #0046C7;
    font-size: 1.4rem;
    font-weight: 600;
    transition: all 0.3s ease;
}
.hub-cat-more .iconfont {
    transition: all 0.3s ease;
}
.hub-cat-card:hover .hub-cat-more {
    color: #FE7610;
}
.hub-cat-card:hover .hub-cat-more .iconfont {
    transform: translateX(4px);
}

/* 分类页：chips */
.hub-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-bottom: 2.4rem;
}
.hub-chip {
    display: inline-flex;
    align-items: center;
    min-height: 4.4rem;
    padding: 0 2rem;
    border: 1px solid #E2E8F0;
    border-radius: 99rem;
    background: #fff;
    color: #5A6B7B;
    font-size: 1.4rem;
    font-weight: 600;
    transition: all 0.3s ease;
}
.hub-chip:hover {
    border-color: #0046C7;
    color: #0046C7;
}
.hub-chip.is-active {
    background: #0046C7;
    border-color: #0046C7;
    color: #fff;
}

/* 搜索框 */
.hub-search {
    position: relative;
    margin-bottom: 2.4rem;
}
.hub-search .iconfont {
    position: absolute;
    left: 1.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: #8B9BAB;
}
#hub-search {
    width: 100%;
    height: 5.2rem;
    padding: 0 2rem 0 4.8rem;
    border: 1px solid #E2E8F0;
    border-radius: 99rem;
    background: #fff;
    font-size: 1.6rem;
    color: #273342;
    outline: none;
    transition: all 0.3s ease;
}
#hub-search:focus {
    border-color: #0046C7;
    box-shadow: 0 0 0 3px rgba(0, 70, 199, 0.1);
}

/* 手风琴 */
.hub-faq-list {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}
.hub-faq-item {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 1.2rem;
    overflow: hidden;
    transition: all 0.3s ease;
}
.hub-faq-item.open {
    border-color: #0046C7;
    box-shadow: 0 0.8rem 2rem rgba(39, 51, 66, 0.06);
}
.hub-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    width: 100%;
    min-height: 4.4rem;
    padding: 2rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 1.6rem;
    font-weight: 600;
    color: #273342;
    transition: all 0.3s ease;
}
.hub-faq-q:hover {
    color: #0046C7;
}
/* 问题文字紧跟序号居左：不占满剩余空间时会被 space-between 推到中间 */
.hub-faq-q-text {
    flex: 1;
    text-align: left;
}
.hub-faq-q .iconfont {
    flex-shrink: 0;
    color: #8B9BAB;
    transition: all 0.3s ease;
}
.hub-faq-item.open .hub-faq-q {
    color: #0046C7;
}
/* 问题序号（自动编号 Q01/Q02…） */
.hub-faq-num {
    flex-shrink: 0;
    min-width: 4.4rem;
    padding: 0.4rem 0.8rem;
    border-radius: 0.6rem;
    background: #FFF4EC;
    color: #FE7610;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
}
.hub-faq-item.open .hub-faq-q .iconfont {
    transform: rotate(180deg);
    color: #FE7610;
}
/* 展开/收起由 hub.js slide 动画驱动，不用 max-height（会闪跳） */
.hub-faq-a {
    display: none;
}
.hub-faq-a-inner {
    padding: 0 2rem 2rem;
    color: #5A6B7B;
    font-size: 1.6rem;
    line-height: 1.8;
    border-top: 1px solid #F4F7FB;
    padding-top: 1.6rem;
}
.hub-faq-a-inner p {
    margin-bottom: 1.2rem;
}
/* 答案内“查看详情”入口 */
.hub-faq-more {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.2rem;
    color: #0046C7;
    font-size: 1.4rem;
    font-weight: 600;
    transition: all 0.3s ease;
}
.hub-faq-more:hover {
    color: #0039A6;
    gap: 1rem;
}
.hub-faq-a-inner p:last-child {
    margin-bottom: 0;
}
.hub-no-result,
.hub-empty {
    padding: 4rem 0;
    text-align: center;
    color: #8B9BAB;
    font-size: 1.6rem;
}

/* 详情页 */
/* 正文区问题标题（居中，可直接选中复制） */
.hub-question-title {
    color: #273342;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 2rem;
}
.hub-answer {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 1.2rem;
    padding: 3.2rem 2.4rem;
}
.hub-answer-body {
    color: #5A6B7B;
    font-size: 1.6rem;
    line-height: 1.8;
}
.hub-answer-body p {
    margin-bottom: 1.6rem;
}
.hub-answer-body p:last-child {
    margin-bottom: 0;
}
.hub-answer-body a {
    color: #0046C7;
}
.hub-answer-body a:hover {
    color: #0039A6;
}

/* 上一篇/下一篇 */
.hub-post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
    margin-top: 2.4rem;
}
.hub-post-nav-item {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    min-width: 0;
    padding: 1.6rem 2rem;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 1.2rem;
    transition: all 0.3s ease;
}
a.hub-post-nav-item:hover {
    border-color: #FE7610;
    transform: translateY(-2px);
}
/* 首/尾篇无上一篇下一篇时的友好提示 */
.hub-post-nav-item.is-tip {
    justify-content: center;
    border-style: dashed;
    background: #F4F7FB;
    color: #8B9BAB;
    font-size: 1.4rem;
}
.hub-post-nav-item.is-next {
    text-align: right;
}
.hub-post-nav-label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
    color: #8B9BAB;
    font-size: 1.4rem;
}
.hub-post-nav-label .iconfont {
    color: #FE7610;
}
.hub-post-nav-label .iconfont.is-left {
    transform: rotate(180deg);
}
.hub-post-nav-title {
    color: #273342;
    font-size: 1.6rem;
    font-weight: 600;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
a.hub-post-nav-item:hover .hub-post-nav-title {
    color: #0046C7;
}

/* 相关问题 */
.hub-related {
    margin-top: 4rem;
}
.hub-related h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #273342;
    margin-bottom: 1.6rem;
}
.hub-related-list {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    list-style: none;
}
.hub-related-list a {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    min-height: 4.4rem;
    padding: 1.2rem 2rem;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 0.8rem;
    color: #5A6B7B;
    font-size: 1.6rem;
    transition: all 0.3s ease;
}
.hub-related-list a:hover {
    border-color: #FE7610;
    color: #0046C7;
}
.hub-related-list .iconfont {
    flex-shrink: 0;
    color: #0046C7;
}