/* guide.html 专属样式（文章页）。
   通用外壳——token、导航、hero、卡片、按钮、表格、页脚——全在 rainyun-base.css，这里只放文章页独有的组件：
   章节间距、四级小标题、折叠按钮、场景网格、厂商网格、总结块、行内提示链接。
   改动请直接改本文件，不要再往 HTML 里写 <style>。 */

/* ---------- 章节：每节一段间距，锚点跳转时留出吸顶导航的高度 ---------- */
.article-section {
    padding: 48px 0 8px;
    scroll-margin-top: 84px;
}

.article-section + .article-section {
    border-top: 1px solid var(--line);
}

/* 文章页卡片之间留间距（产品页卡片是网格排列，不需要） */
.article-section .card + .card {
    margin-top: 20px;
}

/* ---------- 四级小标题（工作原理这类） ---------- */
.sub-head {
    margin: 24px 0 6px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
}

/* ---------- 表格折叠按钮 ---------- */
.table-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-btn);
    background: #fbfcfd;
    color: var(--body);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.table-toggle:hover {
    border-color: var(--primary);
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.table-toggle i {
    font-size: 11px;
    color: var(--muted);
}

/* 折叠区：默认展开由 JS 写入 maxHeight，这里只负责过渡与裁切 */
.table-collapse {
    overflow: hidden;
    transition: max-height 0.3s ease;
}

/* ---------- 总结块（浅灰底，和表格隔开） ---------- */
.summary {
    margin-top: 20px;
    padding: 18px 20px;
    border-radius: var(--r-card);
    background: #f8f9fb;
}

.summary h3 {
    margin-bottom: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
}

.summary p {
    font-size: 0.92rem;
    line-height: 1.75;
    color: var(--body);
}

.summary p + p {
    margin-top: 8px;
}

/* ---------- 正文行内提示链接 ---------- */
.article-link {
    margin-top: 16px;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--body);
}

.article-link a {
    color: var(--primary-dark);
    font-weight: 600;
    border-bottom: 1px solid rgba(44, 144, 153, 0.35);
}

.article-link a:hover {
    border-bottom-color: var(--primary-dark);
}

/* ---------- 应用场景：三列卡片 ---------- */
.scenario-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.scenario-card {
    padding: 20px;
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.scenario-card:hover {
    box-shadow: var(--shadow-card);
}

.scenario-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.4;
}

.scenario-card h3 i {
    color: var(--primary);
    font-size: 0.9rem;
}

.scenario-card p {
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--body);
}

.scenario-card p + p {
    margin-top: 8px;
}

.scenario-card strong {
    color: var(--ink);
    font-weight: 600;
}

/* ---------- 厂商技术栈：三列卡片 ---------- */
.vendor-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.vendor-card {
    padding: 20px;
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    border-top: 3px solid var(--primary);
}

.vendor-card h3 {
    margin-bottom: 10px;
    font-size: 1rem;
    font-weight: 600;
}

.vendor-card h3 a {
    color: var(--ink);
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.vendor-card h3 a:hover {
    color: var(--primary-dark);
    border-bottom-color: var(--primary-dark);
}

.vendor-card ul {
    list-style: none;
}

.vendor-card li {
    position: relative;
    padding: 5px 0 5px 14px;
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--body);
}

.vendor-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--muted);
}

.vendor-card li strong {
    color: var(--ink);
    font-weight: 600;
}

/* ---------- 尾部 CTA 的补充说明（site.css 只有 hero-note，这里补一条） ---------- */
.final-note {
    margin-top: 18px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
}

/* ---------- 响应式 ---------- */
@media (max-width: 991px) {
    .scenario-grid,
    .vendor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .article-section {
        padding-top: 36px;
    }

    .scenario-grid,
    .vendor-grid {
        grid-template-columns: 1fr;
    }

    /* 手机端表格横向滚动时给一点视觉提示，避免以为被裁掉 */
    .table-wrap {
        -webkit-overflow-scrolling: touch;
    }

    .summary {
        padding: 16px;
    }
}