/* =========================================================
   解决方案页 /solutions/*
   ---------------------------------------------------------
   流程图全部用 CSS 绘制（.sol-flow），无图片依赖，
   可跟随品牌色 / 暗黑 / 明亮三套主题自动切换。
   ========================================================= */

/* ---------- 主题变量 ---------- */
.sol-page {
    --sol-text: #f5f3ff;
    --sol-muted: #b9b7cf;
    --sol-line: rgba(170,163,218,.2);
    --sol-chip: rgba(170,163,218,.1);
    color: var(--sol-text);
}

[data-theme="light"] .sol-page {
    --sol-text: #20253d;
    --sol-muted: #5d657a;
    --sol-line: #dce1eb;
    --sol-chip: #f2f4fa;
}

/* ---------- 页面基础 ---------- */
.sol-wrap { max-width: 1160px; margin: auto; padding: 0 28px; }
.sol-section { padding: 48px 0; scroll-margin-top: 100px; }
.sol-kicker { color: var(--brand-blue); font-size: 13px; font-weight: 600; letter-spacing: .1em; margin-bottom: 16px; }
.sol-section-head { max-width: 780px; margin-bottom: 30px; }
.sol-section-head h2 { font-size: clamp(23px,3vw,32px); line-height: 1.4; margin-bottom: 14px; }
.sol-section-head > p:last-child { color: var(--sol-muted); }

/* ---------- Hero ---------- */
.sol-hero { padding: 80px 0 40px; }
.sol-hero-inner { max-width: 780px; }
.sol-hero h1 { font-size: clamp(32px,4.2vw,50px); line-height: 1.35; letter-spacing: -.03em; }
.sol-hero h1 em { font-style: normal; color: #9eafff; }
[data-theme="light"] .sol-hero h1 em { color: #5755c9; }
.sol-lead { color: var(--sol-muted); font-size: 16px; line-height: 1.9; margin: 24px 0; max-width: 640px; }
.sol-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.sol-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-top: 26px; }
.sol-tags li { font-size: 12px; padding: 5px 12px; border: 1px solid var(--sol-line); border-radius: 8px; color: var(--sol-muted); }

/* ---------- 问题区块 ---------- */
.sol-problem { padding-top: 44px; border-top: 1px solid var(--sol-line); }
.sol-no {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--brand-blue);
    padding: 5px 12px;
    border: 1px solid var(--sol-line);
    border-radius: 8px;
    background: var(--sol-chip);
    margin-bottom: 16px;
}

.sol-problem-head { max-width: 840px; margin-bottom: 30px; }
.sol-problem-head h3 { font-size: clamp(21px,2.6vw,29px); line-height: 1.45; margin-bottom: 14px; }
.sol-problem-head > p { color: var(--sol-muted); font-size: 15px; line-height: 1.95; }

/* ---------- 对应功能 ---------- */
.sol-features { display: grid; grid-template-columns: repeat(auto-fit,minmax(228px,1fr)); gap: 16px; }
.sol-feature { padding: 20px; border: 1px solid var(--sol-line); border-radius: 16px; background: var(--bg-card); }
.sol-feature strong { display: block; font-size: 15px; margin-bottom: 8px; }
.sol-feature p { font-size: 13.5px; color: var(--sol-muted); line-height: 1.85; }

/* ---------- 流程图 ---------- */
.sol-flow-panel {
    margin-top: 26px;
    padding: 26px 24px;
    border: 1px solid var(--sol-line);
    border-radius: 20px;
    background: var(--bg-card);
}

.sol-flow-label { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; color: var(--sol-muted); margin-bottom: 22px; }

/* 列数由节点数量自动决定，增删 <li> 无需改样式 */
.sol-flow {
    --gap: 34px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0,1fr);
    gap: var(--gap);
    list-style: none;
}

.sol-step { position: relative; text-align: center; }

.sol-step-no {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0 auto 14px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 650;
    color: var(--brand-blue);
    background: var(--sol-chip);
    border: 1px solid var(--sol-line);
}

.sol-step strong { display: block; font-size: 14.5px; margin-bottom: 6px; }
.sol-step p { font-size: 12.5px; color: var(--sol-muted); line-height: 1.7; }

/* 节点之间的箭头：随主题线色变化 */
.sol-step::after {
    content: '';
    position: absolute;
    top: 19px;
    right: calc(var(--gap) / -2);
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--sol-line);
    border-right: 2px solid var(--sol-line);
    transform: translate(50%,-50%) rotate(45deg);
}

.sol-step:last-child::after { display: none; }

/* ---------- 角色权限 ---------- */
.sol-roles { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 14px; }
.sol-role { padding: 18px 20px; border: 1px solid var(--sol-line); border-radius: 14px; background: var(--bg-card); }
.sol-role strong { display: block; font-size: 15px; margin-bottom: 7px; }
.sol-role p { font-size: 13.5px; color: var(--sol-muted); line-height: 1.8; }

/* ---------- 补充问题 ---------- */
.sol-extra { display: grid; grid-template-columns: repeat(auto-fit,minmax(248px,1fr)); gap: 16px; }
.sol-extra-item { padding: 20px; border: 1px solid var(--sol-line); border-radius: 16px; background: var(--bg-card); }
.sol-extra-item span { display: inline-block; font-size: 12px; color: var(--brand-blue); font-weight: 600; margin-bottom: 10px; }
.sol-extra-item strong { display: block; font-size: 15px; margin-bottom: 8px; }
.sol-extra-item p { font-size: 13.5px; color: var(--sol-muted); line-height: 1.85; }
.sol-extra-item a { color: var(--brand-blue); text-decoration: none; }
.sol-extra-item a:hover { text-decoration: underline; }

/* ---------- 落地步骤 ---------- */
.sol-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; list-style: none; counter-reset: solStep; }
.sol-steps li { padding: 22px; border: 1px solid var(--sol-line); border-radius: 16px; background: var(--bg-card); }
.sol-steps span { display: block; color: var(--brand-blue); font-size: 24px; font-weight: 650; letter-spacing: -.02em; margin-bottom: 12px; }
.sol-steps h3 { font-size: 18px; margin-bottom: 8px; }
.sol-steps p { font-size: 13.5px; color: var(--sol-muted); line-height: 1.85; }

/* ---------- 底部 CTA ---------- */
.sol-final {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    padding: 38px;
    margin: 32px 0 64px;
    border-radius: 22px;
    background: var(--bg-card);
    border: 1px solid var(--sol-line);
}

.sol-final .btn { flex-shrink: 0; }
.sol-final h3 { font-size: clamp(20px,2.4vw,26px); line-height: 1.4; margin-bottom: 10px; }
.sol-final p { color: var(--sol-muted); }

/* ---------- 可访问性 ---------- */
.sol-page a:focus-visible, .sol-page button:focus-visible, .sol-page summary:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 5px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1000px) {
    .sol-steps { grid-template-columns: minmax(0,1fr); }
    .sol-final { flex-direction: column; align-items: stretch; padding: 26px; margin-bottom: 48px; }
    .sol-final .btn { justify-content: center; }
}

@media (max-width: 900px) {
    .sol-flow { grid-auto-flow: row; grid-template-columns: minmax(0,1fr); gap: 22px; }

    /* 竖排时箭头改为向下 */
    .sol-step::after {
        top: auto;
        bottom: calc(22px / -2);
        right: auto;
        left: 50%;
        transform: translate(-50%,50%) rotate(135deg);
    }
}

@media (max-width: 768px) {
    .sol-wrap { padding: 0 22px; }
    .sol-hero { padding: 40px 0 24px; }
    .sol-hero h1 { font-size: clamp(27px,7.5vw,38px); }
    .sol-lead { font-size: 14px; margin: 18px 0; }
    .sol-actions .btn { padding: 12px 16px; font-size: 13px; }
    .sol-section { padding: 32px 0; }
    .sol-problem { padding-top: 30px; }
    .sol-problem-head h3 { font-size: 19px; }
    .sol-problem-head > p { font-size: 14px; }
    .sol-flow-panel { padding: 20px 18px; border-radius: 16px; }
    .sol-feature, .sol-role, .sol-extra-item, .sol-steps li { padding: 16px; }
}