/* assets/css/sections/help.css — 帮助中心专用：左侧目录 + 右侧教程与问答。
   原站把三组内容做成三套 DOM 用两个 tab 切换；这里保留同一个交互，
   但目录与内容都写死在 HTML 里（不用 JS 渲染），保证爬虫与无脚本环境都能读到。 */

.help-layout{ display:grid; grid-template-columns:minmax(0,2.6fr) minmax(0,9.4fr); gap:56px; align-items:start; }

/* ============ 左侧目录 ============ */
.help-side{ position:sticky; top:96px; }
.help-side-section{ padding:18px 0; border-top:1px solid var(--line); }
.help-side-section:last-child{ border-bottom:1px solid var(--line); }
.help-side-section h3{ font-size:15px; font-weight:700; margin-bottom:10px; }
.help-side-section li + li{ margin-top:7px; }
.help-side-section a{ font-size:13.5px; color:var(--muted); text-decoration:none; }
.help-side-section a:hover{ color:var(--cinnabar); }

/* ============ 右侧内容 ============ */
.help-section + .help-section{ margin-top:56px; }
.help-section > h2{ font-size:24px; font-weight:700; padding-bottom:14px; border-bottom:2px solid var(--ink); }

/* 视频教程卡：缩略图由 CSS 画（渐变 + 播放三角），不依赖任何图片文件 */
.video-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; margin-top:26px; }
.video-card{
  display:block; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--line);
  transition:border-color .15s ease;
}
.video-card:hover{ border-color:var(--line-dark); }
.video-thumb{
  position:relative; aspect-ratio:16/9;
  background:linear-gradient(135deg, #1E3A5C 0%, #17324F 55%, #0F2338 100%);
  display:grid; place-items:center;
}
.video-thumb::after{
  content:""; width:0; height:0;
  border-left:16px solid rgba(255,255,255,.92);
  border-block:10px solid transparent;
  margin-left:4px;
}
.video-duration{
  position:absolute; right:8px; bottom:8px; padding:1px 7px;
  background:rgba(15,35,56,.78); color:#fff; font-size:11.5px;
}
.video-body{ padding:16px 16px 18px; }
.video-body h3{ font-size:15.5px; font-weight:700; }
.video-body p{ margin-top:8px; font-size:13px; color:var(--muted); }

/* 待上线：不可点，点击弹提示（原站是同一种处理） */
.video-card--pending{ cursor:not-allowed; }
.video-card--pending .video-thumb{ background:var(--line); }
.video-card--pending .video-thumb::after{ border-left-color:var(--muted); opacity:.5; }

/* ============ 常见问题卡（可点击，跳转对应条目） ============ */
.q-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px; margin-top:26px; background:var(--line); border:1px solid var(--line); }
.q-item{
  display:flex; gap:12px; align-items:flex-start; width:100%; text-align:left;
  padding:18px 20px; background:var(--surface); font-size:14.5px;
  transition:background-color .15s ease;
}
.q-item:hover{ background:var(--surface-2); }
.q-item .ico{ margin-top:3px; color:var(--cinnabar); }
.q-item span{ flex:1; }

/* 轻提示的排版在 components/toast.css（全站共用），这里不再重复定义 */

@media (max-width:1020px){
  .help-layout{ grid-template-columns:1fr; gap:32px; }
  .help-side{ position:static; }
  .video-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:680px){
  .video-grid,.q-grid{ grid-template-columns:1fr; }
}