/* ============================================================
   Clash开源社区 · home.css(首页专属)
   Hero 热力图容器 / 状态栏装饰条 / 平台入口网格 / 快速上手 /
   信任背书两栏 / 常见问题精选 / 博客预览网格
   ============================================================ */

/* ---------- Hero 细节 ---------- */
.hero-copy .labels{margin-top:24px}
.hero-visual{min-width:0}

/* ---------- 状态栏装饰条 ---------- */
.statusbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-panel);padding:10px 18px;font-family:var(--font-mono);font-size:12.5px;color:var(--text-muted)}
.sb-item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.sb-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0}
.sb-sep{color:var(--hash)}
@media (max-width:640px){
  .statusbar .sb-sep{display:none}
}

/* ---------- 平台入口网格 ---------- */
.plat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.plat-grid>*{min-width:0}
.plat-card{display:flex;flex-direction:column;gap:8px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);padding:18px 20px;transition:border-color .15s ease,background-color .15s ease}
.plat-card:hover{border-color:var(--heat-1);background:var(--bg-panel)}
.plat-ico{width:36px;height:36px;color:var(--accent-dark);flex-shrink:0}
.plat-ico svg{width:100%;height:100%}
.plat-name{font-weight:700;font-size:15.5px}
.plat-note{font-size:13px;color:var(--text-muted);line-height:1.75;flex:1}
.plat-go{font-family:var(--font-mono);font-size:12.5px;color:var(--accent-dark);margin-top:2px}
.plat-card-all{background:var(--bg-panel2);border-color:var(--heat-1)}
.plat-card-all:hover{border-color:var(--heat-2)}
@media (max-width:900px){
  .plat-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .plat-grid{grid-template-columns:1fr}
}

/* ---------- 快速上手预览 ---------- */
.qs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.qs-grid>*{min-width:0}
.qs-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);padding:20px 22px}
.qs-num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--bg-panel2);border:1px solid var(--heat-1);color:var(--accent-dark);font-weight:700;font-size:14px}
.qs-title{font-weight:700;font-size:15px;margin-top:12px}
.qs-text{font-size:13.5px;color:var(--text-muted);line-height:1.85;margin-top:6px}
@media (max-width:820px){
  .qs-grid{grid-template-columns:1fr}
}

/* ---------- 信任背书两栏 ---------- */
.trust-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:28px;align-items:start}
.trust-grid>*{min-width:0}
.trust-text p{color:var(--text-muted);line-height:1.95;margin-bottom:1em;max-width:44em}
.trust-text p:last-of-type{margin-bottom:14px}
.trust-side{display:flex;flex-direction:column;gap:14px}
.tf-head{font-size:12px;color:var(--text-muted);letter-spacing:.06em;margin-bottom:10px}
.tf-list{list-style:none;font-size:12.5px;line-height:2.1;color:var(--text)}
.tf-list li{display:flex;gap:8px;flex-wrap:wrap}
.tf-list span{color:var(--text-muted);flex-shrink:0}
.tn-text{font-size:13px;color:var(--text-muted);line-height:1.85}
@media (max-width:900px){
  .trust-grid{grid-template-columns:1fr}
}

/* ---------- 常见问题精选 ---------- */
.mini-faq{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);overflow:hidden}
.mf-item{padding:14px 18px;font-size:13.5px;color:var(--text-muted);line-height:1.9}
.mf-item + .mf-item{border-top:1px solid var(--border)}
.mf-item:hover{background:var(--bg-panel)}
.mf-q{display:block;font-weight:700;color:var(--text);font-size:14px;margin-bottom:2px}
.mf-item a{color:var(--accent-dark);border-bottom:1px solid var(--heat-1)}
.mf-item a:hover{border-bottom-color:var(--accent-dark)}

/* ---------- 博客预览网格 ---------- */
.home-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.home-posts>*{min-width:0}
@media (max-width:900px){
  .home-posts{grid-template-columns:1fr}
}