/* ============================================================
   GHUB.help —— 首页专用样式

   只在 is_front_page() 时加载（见 functions.php）。
   设计令牌、氛围层、页眉、页脚、正文排版都在 base.css 里，
   和这里共用一套变量 —— 改颜色只改 base.css 一处。

   本文件只剩「首页才有」的东西：
   首屏非对称版式 / 检索条 / 诊断面板 / 分类筛选 / 故障索引 / 下载 / 联系
   ============================================================ */

/* ============================================================
   1. 首页专用强重置
   —— 首页版式完全自绘，不需要区块编辑器那套段间距，
      所以这里可以放心把默认 margin 全部清零。
      （base.css 里刻意没做，因为内页要靠它排正文）
   ============================================================ */
h1,h2,h3,p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}

/* ============================================================
   2. 首屏：非对称 62 / 38，右面板轻微破格
   ============================================================ */
.hero{position:relative; z-index:1; padding-block:var(--space-7) var(--space-6)}
.hero__in{
  display:grid;
  /* 右栏从 1fr 提到 1.35fr —— 右栏放的是动画面板，太窄会显小气 */
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:var(--space-6);
  align-items:start;
}

h1{
  font-size:clamp(2.3rem, 5.2vw, 4.1rem);
  line-height:1.04;
  letter-spacing:-.035em;
  font-weight:800;
  margin-bottom:var(--space-4);
  text-wrap:balance;
}
h1 .q{color:var(--accent)}
.hero__lede{
  font-size:16px; line-height:1.8; color:var(--ink-2);
  max-width:34em; margin-bottom:var(--space-5);
}
.hero__lede b{color:var(--ink); font-weight:600}

/* ============================================================
   3. 检索条：像终端过滤器
   ============================================================ */
.search{
  display:flex; align-items:stretch;
  border:1px solid var(--line-strong); background:var(--paper);
  max-width:560px;
  transition:border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.search:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(11,86,224,.14);
}
.search__prompt{
  display:grid; place-items:center; padding-inline:14px;
  color:var(--ink-3); border-right:1px solid var(--line);
  font-family:var(--font-mono); font-size:13px; user-select:none;
}
.search__input{
  flex:1; min-width:0;
  border:0; background:transparent;
  padding:15px 14px; font-size:15px;
  outline:none;
}
.search__input::placeholder{color:var(--ink-3)}
.search__btn{
  border:0; background:transparent; color:var(--ink-3);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase;
  padding:0 16px; cursor:pointer;
  transition:color var(--dur-fast) ease-out, background var(--dur-fast) ease-out;
}
.search__btn:hover{color:var(--accent); background:rgba(11,86,224,.06)}
.search__btn[hidden]{display:none}
.search__hint{
  display:flex; gap:var(--space-3); flex-wrap:wrap;
  margin-top:10px; color:var(--ink-3);
}
.search__hint kbd{
  font-family:var(--font-mono); font-size:10.5px;
  border:1px solid var(--line); padding:1px 5px; border-radius:2px;
}

/* ============================================================
   4. 右侧诊断面板
   ============================================================ */
.panel{
  border:1px solid var(--line-strong);
  background:var(--paper);
  margin-top:8px;
  /* 破格：故意向右上方溢出栅格一点点 */
  transform:translate(6px,-6px);
  box-shadow:10px 10px 0 -1px var(--paper-2), 10px 10px 0 0 var(--line);
}
/*
 * 右栏改放 G HUB 启动动画（替代原来的诊断面板）。
 *
 * 两处清理都在 CSS 做，不动原图：
 *   1. 录屏四周有 1–2px 的彩色描边 —— container overflow:hidden + img scale(1.02) 裁掉
 *   2. 右上角带进了「最小化 / 最大化 / 关闭」三个按钮（实测 x[939,1009] y[11,20]，
 *      即距右边 1.4%–8.3%、距顶 1.4%–2.6%）—— 用一块纯黑盖住。
 *      周围本来就是纯黑，遮块看不出边界。
 */
.panel--media{
  padding:0;
  background:#000;
  border-color:var(--ink);
  overflow:hidden;

  /*
   * 比文字栏宽一截，向右探出去 —— 左边是大标题，右边如果只占一栏会显得小气。
   * 探出量随视口自适应：宽屏最多 100px，窄屏自动收到 0，
   * 所以不会顶出横向滚动条（html 上还有 overflow-x:clip 兜底）。
   */
  --panel-out:clamp(0px, calc((100vw - var(--page-max)) / 2 + 8px), 64px);
  width:calc(100% + var(--panel-out));
  margin-right:calc(-1 * var(--panel-out));

  /* 原来是"硬偏移"阴影（向右下错开 10px）。这里是一块悬浮的黑窗口，
     软阴影更贴切；配着位移会看着歪，所以把破格位移也去掉。 */
  transform:none;
  box-shadow:
    0 0 0 1px rgba(22,21,15,.06),        /* 极细的一圈，勾出边界 */
    0 0 30px rgba(22,21,15,.16),         /* 对称环境光：四周都有，不是只往下 */
    0 10px 24px -10px rgba(22,21,15,.28),/* 中景 */
    0 30px 60px -24px rgba(22,21,15,.34);/* 远景，给悬浮感 */
}
.panel__media{
  position:relative;
  background:#000;
  aspect-ratio:1024 / 768;
  overflow:hidden;
}
.panel__media img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.02);   /* 放大一点点，把边缘那圈描边挤出可视区 */
}
.panel__mask{
  position:absolute;
  top:0; right:0;
  width:11%; height:3.6%;
  background:#000;
}

.panel__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-bottom:1px solid var(--line);
  color:var(--ink-2);
}
.panel__dot{
  width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 3px rgba(11,86,224,.16);
}
.panel__rows{padding:6px 14px 14px}
.panel__row{
  display:flex; align-items:baseline; gap:6px;
  padding:9px 0; border-bottom:1px dashed var(--line);
  font-family:var(--font-mono); font-size:12px;
}
.panel__row:last-child{border-bottom:0}
.panel__key{color:var(--ink-3); letter-spacing:.06em}
.panel__dots{
  flex:1; min-width:8px;
  border-bottom:1px dotted var(--line-strong);
  transform:translateY(-3px);
}
.panel__val{color:var(--ink); letter-spacing:.02em; text-align:right}
.panel__val a{color:var(--accent); text-decoration:none}
.panel__val a:hover{text-decoration:underline}

/* ============================================================
   5. 分类筛选
   ============================================================ */
.filters{
  display:flex; flex-wrap:wrap; gap:var(--space-2);
  padding-block:var(--space-4);
  border-top:1px solid var(--line);
}
.chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 13px; min-height:38px;
  border:1px solid var(--line); background:transparent;
  border-radius:999px; cursor:pointer;
  font-size:13px; color:var(--ink-2);
  transition:background var(--dur-fast) ease-out,
             border-color var(--dur-fast) ease-out,
             color var(--dur-fast) ease-out;
}
.chip:hover{border-color:var(--line-strong); color:var(--ink)}
.chip__n{
  font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.chip[aria-pressed="true"]{
  background:var(--ink); border-color:var(--ink); color:var(--paper);
}
.chip[aria-pressed="true"] .chip__n{color:rgba(244,242,237,.62)}

/* ============================================================
   6. 索引表：本页的记忆点
   ============================================================ */
.index{position:relative; z-index:1; padding-bottom:var(--space-7)}
.index__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-4);
  padding-bottom:var(--space-3);
  border-bottom:2px solid var(--ink);
  margin-bottom:0;
}
.index__title{font-size:20px; font-weight:700; letter-spacing:-.01em}
.index__count{color:var(--ink-3)}

.rows{border-bottom:1px solid var(--line)}
.row{
  display:grid;
  grid-template-columns:3.6rem minmax(0,max-content) minmax(12px,1fr) 8.5rem 1.6rem;
  align-items:center; gap:var(--space-3);
  padding:18px 8px 18px 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  position:relative;
  transition:background var(--dur-fast) ease-out, padding-left var(--dur-base) var(--ease-out);
}
.row:last-child{border-bottom:0}
.row__no{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.06em;
  color:var(--ink-3); font-variant-numeric:tabular-nums;
  transition:color var(--dur-fast) ease-out;
}
.row__text{
  font-size:15.5px; line-height:1.6; color:var(--ink);
  letter-spacing:.005em;
}
.row__text mark{
  background:rgba(11,86,224,.14); color:var(--accent-ink);
  padding:0 2px; border-radius:2px;
}
.row__leader{
  height:1px; align-self:center; margin:0 6px;
  background:repeating-linear-gradient(to right,
    var(--line-strong) 0 2px, transparent 2px 5px);
  transform:translateY(5px);
  opacity:.75;
}
.row__tag{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em;
  color:var(--ink-2); text-transform:uppercase;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:3px 7px; justify-self:start; white-space:nowrap;
}
.row__go{
  font-family:var(--font-mono); font-size:13px; color:var(--ink-3);
  justify-self:end;
  transition:transform var(--dur-base) var(--ease-out), color var(--dur-fast) ease-out;
}
.row::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--accent); transform:scaleY(0); transform-origin:top;
  transition:transform var(--dur-base) var(--ease-out);
}
.row:hover{background:rgba(22,21,15,.028); padding-left:10px}
.row:hover::before{transform:scaleY(1)}
.row:hover .row__no{color:var(--accent)}
.row:hover .row__go{transform:translateX(4px); color:var(--accent)}
.row:focus-visible{padding-left:10px}
.row:focus-visible::before{transform:scaleY(1)}

/* 空态 */
.empty{
  display:none; padding:var(--space-6) 0;
  border-bottom:1px solid var(--line);
}
.empty[data-on="true"]{display:block}
.empty__title{font-size:18px; font-weight:700; margin-bottom:6px}
.empty__body{color:var(--ink-2); font-size:14.5px}
.empty__body a{color:var(--accent); text-decoration-thickness:1px; text-underline-offset:3px}

/* ============================================================
   7. 下载入口：三列但用发丝线分隔，不做卡片
   ============================================================ */
.dl{
  position:relative; z-index:1;
  border-top:1px solid var(--ink);
  padding-block:var(--space-6);
}
.dl__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
}
.dl__item{
  padding:0 var(--space-4) 0 0;
  border-right:1px solid var(--line);
  text-decoration:none;
  display:block;
}
.dl__item:last-child{border-right:0; padding-right:0}
.dl__item:not(:first-child){padding-left:var(--space-4)}
.dl__k{color:var(--ink-3); display:block; margin-bottom:10px}
.dl__v{
  font-size:19px; font-weight:700; letter-spacing:-.01em;
  display:flex; align-items:center; gap:8px;
}
.dl__v span{transition:transform var(--dur-base) var(--ease-out)}
.dl__d{font-size:13.5px; color:var(--ink-2); margin-top:4px; line-height:1.6}
.dl__item:hover .dl__v{color:var(--accent)}
.dl__item:hover .dl__v span{transform:translate(3px,-3px)}

/* ============================================================
   8. 未收录 → 邮件
   ============================================================ */
.contact{
  position:relative; z-index:1;
  border-top:1px solid var(--ink);
  padding-block:var(--space-6);
}
.contact__in{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:var(--space-5);
  /* 右列是「二维码 + 按钮」一整摞，比左边三行文字高得多。
     底部对齐会把文字压得很低，改成垂直居中，整体重心才在一条线上。 */
  align-items:center;
}
.contact h2{font-size:clamp(1.5rem,2.6vw,2rem); letter-spacing:-.02em; line-height:1.2; margin-bottom:10px}
.contact p{color:var(--ink-2); font-size:14.5px; max-width:36em}
.mail{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--ink); padding:14px 20px; min-height:48px;
  text-decoration:none; font-weight:700; font-size:15px;
  background:var(--ink); color:var(--paper);
  transition:background var(--dur-fast) ease-out, color var(--dur-fast) ease-out;
  white-space:nowrap;
}
.mail:hover{background:var(--accent); border-color:var(--accent)}

/* 联系区右侧：二维码在上、邮箱按钮在下，竖排成一组 */
.contact__side{
  display:flex;
  flex-direction:column;
  align-items:center;          /* 二维码在邮箱按钮上方居中 */
  gap:var(--space-3);
  margin-right:var(--space-5); /* 整组往左收 40px，和左边文字靠拢一些 */
}
/* 二维码下面那行 SCAN · 微信 也跟着居中，否则会挂在图片左边缘 */
.contact__side .foot-qr{align-items:center}

/* ============================================================
   9. 入场编排（一次，4 组，80ms 间隔）
   ============================================================ */
@keyframes rise{
  from{opacity:0; transform:translateY(18px)}
  to{opacity:1; transform:none}
}
@media (prefers-reduced-motion: no-preference){
  .anim{animation:rise 620ms var(--ease-out) both}
  .anim--1{animation-delay:0ms}
  .anim--2{animation-delay:80ms}
  .anim--3{animation-delay:170ms}
  .anim--4{animation-delay:270ms}
  .rows .row{animation:rise 420ms var(--ease-out) both}
  .rows .row:nth-child(-n+10){animation-delay:calc(300ms + var(--i,0) * 26ms)}
  .rows .row:nth-child(n+11){animation-delay:calc(300ms + var(--i,0) * 12ms)}
}

/* ============================================================
   10. 响应式：375 / 768 / 1440
   （页眉页脚的行内折行规则在 base.css，这里只管首页组件）
   ============================================================ */
@media (max-width:1000px){
  .hero__in{grid-template-columns:1fr; gap:var(--space-5)}
  .panel{transform:none; box-shadow:6px 6px 0 -1px var(--paper-2),6px 6px 0 0 var(--line)}
  .panel--media{
    width:100%; margin-right:0;
    box-shadow:0 0 0 1px rgba(22,21,15,.06),0 0 30px rgba(22,21,15,.16),0 10px 24px -10px rgba(22,21,15,.28),0 30px 60px -24px rgba(22,21,15,.34);
  }
  .dl__grid{grid-template-columns:1fr}
  .dl__item{border-right:0; border-bottom:1px solid var(--line); padding:var(--space-4) 0}
  .dl__item:first-child{padding-top:0}
  .dl__item:last-child{border-bottom:0; padding-bottom:0}
  .dl__item:not(:first-child){padding-left:0}
  .contact__in{grid-template-columns:1fr; align-items:start}
  .contact__side{align-items:center; margin-right:0}
}
@media (max-width:720px){
  .hero{padding-block:var(--space-6) var(--space-5)}
  h1{font-size:clamp(1.95rem,8.6vw,2.6rem); letter-spacing:-.03em}
  .row{
    grid-template-columns:2.9rem minmax(0,1fr) 1.4rem;
    grid-template-areas:"no text go" ". tag go";
    row-gap:6px; padding:16px 4px 16px 0;
  }
  .row__leader{display:none}
  .row__no{grid-area:no; align-self:start; padding-top:2px}
  .row__text{grid-area:text; font-size:15px}
  .row__tag{grid-area:tag; justify-self:start; margin-top:2px}
  .row__go{grid-area:go; align-self:center}
  .search__prompt{display:none}
  .search__btn{padding:0 16px; font-size:13px}
  .index__head{flex-direction:column; gap:2px; align-items:flex-start}
  .contact{padding-block:var(--space-5)}
  .mail{width:100%; justify-content:center}
  .filters{gap:6px}
  .chip{padding:7px 11px; font-size:12.5px}
}