/* ===== COM 站问答页专属样式 ===== */
/*
 * 设计约束：
 * 1) 不覆盖 body 级 font-family / color / line-height，
 *    否则 .navbar / .footer 会被撑高，与 index.html 对不齐；
 * 2) 不覆盖 .breadcrumb-nav / .faq-* / .entity-card 等首页通用组件样式，
 *    这些统一继承 styles.css，保证与其它内页视觉一致；
 * 3) 问答区自身内容使用本站深蓝科技风配色。
 */

.qa-page {
    /* com 站 .navbar 为 position:fixed;height:71px，此处做首屏补偿 */
    --qa-nav-h: 71px;
}

/* ===== 顶部问答横幅 ===== */
.qa-page .qa-hero {
    background: linear-gradient(135deg, #1e3a8a 0%, #0e7490 100%);
    color: #fff;
    /* 顶部留出固定导航的高度，避免 H1 被遮挡 */
    padding: calc(var(--qa-nav-h) + 44px) 24px 52px;
    position: relative;
    overflow: hidden;
}
.qa-page .qa-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 20%, rgba(56, 189, 248, .18), transparent 55%);
    pointer-events: none;
}
.qa-page .qa-hero-inner { max-width: 960px; margin: 0 auto; position: relative; z-index: 1; }
.qa-page .qa-hero h1 {
    font-size: 30px;
    line-height: 1.4;
    margin: 0 0 16px;
    font-weight: 700;
    color: #fff;
}
.qa-page .qa-hero .qa-answer-lead {
    font-size: 17px;
    line-height: 1.9;
    margin: 0;
    color: #e0f2fe;
    max-width: 780px;
}
.qa-page .qa-hero .qa-updated {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 22px;
    padding: 6px 14px;
    font-size: 13px;
    color: #bae6fd;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
}
.qa-page .qa-hero .qa-updated::before {
    content: "\1F4C5";
    font-size: 12px;
}

/* ===== 正文容器 ===== */
.qa-page .qa-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 24px 56px;
    color: #cbd5e1;
}

/* ===== 面包屑（继承 styles.css 浅色条样式，仅调整圆角与间距） ===== */
.qa-page .qa-wrap .breadcrumb-nav {
    margin: 0 0 24px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

/* ===== 索引说明块 ===== */
.qa-page .qa-index-intro {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(56, 189, 248, .25);
    border-left: 4px solid #38bdf8;
    border-radius: 10px;
    padding: 20px 24px;
    margin: 0 0 26px;
    font-size: 14.5px;
    line-height: 1.85;
    color: #e2e8f0;
}
.qa-page .qa-index-intro strong { color: #7dd3fc; }

/* ===== 卡片网格 ===== */
.qa-page .qa-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
    margin: 0 0 36px;
}
.qa-page .qa-index-card {
    position: relative;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    padding: 22px 24px;
    background: rgba(255, 255, 255, .05);
    transition: border-color .2s, box-shadow .2s, transform .2s;
    display: flex;
    flex-direction: column;
}
.qa-page .qa-index-card:hover {
    border-color: #38bdf8;
    box-shadow: 0 8px 26px rgba(56, 189, 248, .2);
    transform: translateY(-3px);
}
.qa-page .qa-index-card h3 {
    margin: 0 0 10px;
    font-size: 16.5px;
    line-height: 1.55;
    font-weight: 700;
}
.qa-page .qa-index-card h3 a { color: #7dd3fc; text-decoration: none; }
.qa-page .qa-index-card h3 a:hover { color: #bae6fd; }
.qa-page .qa-index-card p {
    margin: 0;
    font-size: 14px;
    color: #cbd5e1;
    line-height: 1.8;
    /* CSS 视觉截断（保留完整文本供爬虫/AI 抓取） */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.qa-page .qa-index-tag {
    display: inline-block;
    font-size: 12px;
    color: #38bdf8;
    background: rgba(56, 189, 248, .14);
    border: 1px solid rgba(56, 189, 248, .28);
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 12px;
    align-self: flex-start;
}
/* 卡片 h3 链接在整卡可点 */
.qa-page .qa-index-card h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* ===== CTA ===== */
.qa-page .qa-cta {
    margin-top: 36px;
    text-align: center;
    padding: 32px;
    background: linear-gradient(135deg, #1e3a8a 0%, #0e7490 100%);
    border-radius: 14px;
    color: #fff;
}
.qa-page .qa-cta h3 { margin: 0 0 8px; font-size: 19px; }
.qa-page .qa-cta p { margin: 0 0 20px; font-size: 14.5px; color: #e0f2fe; }
.qa-page .qa-cta a.qa-btn {
    display: inline-block;
    padding: 12px 28px;
    background: #fff;
    color: #1e3a8a;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    margin: 0 6px;
    transition: transform .15s, box-shadow .15s;
}
.qa-page .qa-cta a.qa-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.qa-page .qa-cta a.qa-btn.ghost { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .65); }

/* ===== 通用排版（问答正文页用） ===== */
.qa-page .qa-h2 {
    font-size: 21px;
    margin: 40px 0 16px;
    padding-left: 13px;
    border-left: 4px solid #38bdf8;
    font-weight: 700;
    color: #f1f5f9;
}
.qa-page .qa-h3 { font-size: 17px; margin: 26px 0 10px; font-weight: 700; color: #7dd3fc; }
.qa-page .qa-p { margin: 0 0 14px; font-size: 15.5px; color: #cbd5e1; }
.qa-page .qa-ul { margin: 0 0 18px; padding-left: 22px; font-size: 15.5px; color: #cbd5e1; }
.qa-page .qa-ul li { margin-bottom: 8px; }
.qa-page .qa-table { width: 100%; border-collapse: collapse; margin: 18px 0 26px; font-size: 14.5px; }
.qa-page .qa-table th, .qa-page .qa-table td {
    border: 1px solid rgba(255, 255, 255, .16);
    padding: 11px 14px;
    text-align: left;
    vertical-align: top;
}
.qa-page .qa-table th { background: rgba(255, 255, 255, .07); font-weight: 700; color: #f1f5f9; white-space: nowrap; }
.qa-page .qa-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .03); }
.qa-page .qa-note {
    background: rgba(56, 189, 248, .08);
    border-left: 4px solid #38bdf8;
    padding: 16px 20px;
    margin: 22px 0;
    font-size: 14.5px;
    border-radius: 0 8px 8px 0;
    color: #cbd5e1;
}
.qa-page .qa-note strong { color: #7dd3fc; }
.qa-page .qa-faq { border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; margin-bottom: 14px; overflow: hidden; }
.qa-page .qa-faq-q { background: rgba(255, 255, 255, .07); padding: 15px 20px; font-weight: 700; font-size: 16px; color: #f1f5f9; }
.qa-page .qa-faq-a { padding: 16px 20px; font-size: 15px; border-top: 1px solid rgba(255, 255, 255, .12); color: #cbd5e1; }
.qa-page .qa-author {
    margin-top: 40px;
    padding: 22px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    font-size: 14px;
    color: #94a3b8;
}
.qa-page .qa-author .qa-author-name { font-weight: 700; color: #f1f5f9; }
.qa-page .qa-author .qa-author-meta { color: #94a3b8; margin-top: 6px; }
.qa-page .qa-related { margin-top: 38px; padding-top: 24px; border-top: 2px solid rgba(255, 255, 255, .14); }
.qa-page .qa-related h3 { font-size: 17px; margin: 0 0 14px; color: #f1f5f9; }
.qa-page .qa-related ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
.qa-page .qa-related li a {
    display: block;
    padding: 11px 15px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    color: #7dd3fc;
    text-decoration: none;
    font-size: 14.5px;
}
.qa-page .qa-related li a:hover { background: rgba(56, 189, 248, .12); }

/* ===== 移动端 ===== */
@media (max-width: 768px) {
    .qa-page { --qa-nav-h: 70px; }
    .qa-page .qa-hero { padding: calc(var(--qa-nav-h) + 32px) 16px 40px; }
    .qa-page .qa-hero h1 { font-size: 23px; }
    .qa-page .qa-wrap { padding: 24px 16px 44px; }
    .qa-page .qa-index-grid { grid-template-columns: 1fr; }
    .qa-page .qa-table { font-size: 13.5px; }
    .qa-page .qa-table th, .qa-page .qa-table td { padding: 8px 10px; }
    .qa-page .qa-cta { padding: 24px 16px; }
}