/* ============================================================
   Clash中文社区 · home.css(首页专属)
   特性版面表格 tab / 五平台入口网格 / 信任背书 / 源码复制框 /
   博客预览收尾链接。颜色一律引用 base.css 设计令牌。
   ============================================================ */

/* ---------------- 核心特性:论坛子版块列表式 tab ---------------- */
.feat-board{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  border:1px solid var(--line);
  background:var(--paper-raised);
}
.feat-list{
  display:flex;flex-direction:column;
  border-right:1px solid var(--line);
  min-width:0;
}
.feat-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 18px;text-align:left;cursor:pointer;
  background:var(--paper-raised);
  border-bottom:1px solid var(--line);
}
.feat-row:last-child{border-bottom:0}
.feat-row:hover{background:var(--paper)}
.feat-row.is-on{background:var(--paper-sunk)}
.feat-name{display:block;font-size:15px;font-weight:600;color:var(--navy);min-width:0}
.feat-row.is-on .feat-name{color:var(--navy-deep)}
.feat-brief{display:block;margin-top:3px;font-size:12px;font-weight:400;color:var(--ink-soft)}
.feat-fact{
  flex:0 0 auto;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.03em;
  color:var(--ink-soft);text-align:right;white-space:nowrap;
}
.feat-row.is-on .feat-fact{color:var(--navy)}
.feat-detail{min-width:0;background:var(--paper)}
.feat-pane{display:none;padding:22px 24px}
.feat-pane.is-on{display:block}
.feat-pane h3{
  font-size:17px;color:var(--navy-deep);
  border-left:4px solid var(--navy);padding-left:12px;
}
.feat-pane p{margin-top:10px;font-size:14px;line-height:1.85;color:var(--ink)}
.feat-link{display:inline-block;margin-top:14px;font-size:13px;font-weight:600;color:var(--cinnabar)}
.feat-link::after{content:" →"}
.feat-link:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------------- 下载入口:五平台网格 ---------------- */
.os-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.os-grid > *{min-width:0}
.os-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  border:1px solid var(--line);background:var(--paper-raised);
  padding:16px 18px;
}
.os-card:hover{background:var(--paper-sunk)}
.os-ic{width:28px;height:28px;color:var(--navy);flex:0 0 auto}
.os-name{font-size:15px;font-weight:700;color:var(--ink)}
.os-desc{font-size:12px;line-height:1.7;color:var(--ink-soft)}
.os-go{margin-top:auto;font-size:12.5px;font-weight:600;color:var(--cinnabar)}
.os-go::after{content:" →"}
.os-card:hover .os-go{text-decoration:underline;text-underline-offset:3px}
.os-all{margin-top:16px;text-align:right}
.os-all a{font-size:13.5px;font-weight:600;color:var(--navy)}
.os-all a:hover{color:var(--navy-deep);text-decoration:underline;text-underline-offset:3px}

/* ---------------- 信任背书 ---------------- */
.trust-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.trust-grid > *{min-width:0}
.trust-cell{border:1px solid var(--line);background:var(--paper-raised);padding:16px 18px}
.trust-cell:hover{background:var(--paper)}
.trust-cell h3{font-size:15px;color:var(--navy)}
.trust-cell p{margin-top:8px;font-size:13px;line-height:1.8;color:var(--ink-soft)}

/* 源码仓库复制框 */
.clone-box{margin-top:14px;border:1px solid var(--line);background:var(--paper-raised)}
.clone-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 14px;border-bottom:1px solid var(--line);background:var(--paper-sunk);
}
.clone-title{font-size:13px;font-weight:700;color:var(--ink)}
.clone-title::before{
  content:"";display:inline-block;width:7px;height:7px;
  background:var(--navy);margin-right:8px;vertical-align:1px;
}
.clone-copy{
  font-size:12px;font-weight:600;color:var(--navy);
  border:1px solid var(--navy);background:var(--paper-raised);
  padding:4px 12px;min-height:30px;white-space:nowrap;
}
.clone-copy:hover{background:var(--navy);color:var(--paper-raised)}
.clone-copy.is-done{color:var(--ok);border-color:var(--ok)}
.clone-copy.is-done:hover{background:var(--paper-raised);color:var(--ok)}
.clone-cmd{
  margin:0;padding:14px 16px;border:0;background:var(--paper);
  font-family:var(--font-mono);font-size:13px;line-height:1.7;
  overflow-x:auto;max-width:100%;
}
.clone-cmd code{background:none;padding:0;font-size:inherit}

/* ---------------- 快速上手 bar 内链接 ---------------- */
.peek-steps a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.peek-steps a:hover{color:var(--navy-deep)}

/* ---------------- 博客预览收尾链接 ---------------- */
.blog-all{margin-top:16px;text-align:right}
.blog-all a{font-size:13.5px;font-weight:600;color:var(--navy)}
.blog-all a:hover{color:var(--navy-deep);text-decoration:underline;text-underline-offset:3px}

/* ---------------- 响应式 ---------------- */
@media (max-width:980px){
  .os-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .feat-board{grid-template-columns:1fr}
  .feat-list{border-right:0;border-bottom:1px solid var(--line)}
  .trust-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .os-grid{grid-template-columns:1fr}
  .feat-row{padding:12px 14px}
  .feat-fact{display:none}
  .feat-pane{padding:16px 16px 18px}
  .os-all,.blog-all{text-align:left}
}