/**
 * Janus 两份教程（janus-guide.html、janus-secureboot.html）共用的页面版式。
 *
 * 业务定位：Owner 11-02「教程意思不变，布局、显示效果、截图的展示方式、亮度都可以全面优化」。
 * 骨架（目录 + 正文栏、步骤导轨、截图框、提示块、上下篇）全部来自 mx-doc.css，
 * 这里只补两份教程特有的排布：首屏的路线卡、正文里的「标签 + 小标题 + 列表」块、步骤和竖长截图并排、
 * 三张截图一行、FAQ 列表、BIOS 品牌路径。
 *
 * 截图亮度：Janus 自己的界面是浅色（实测平均亮度约 220/255），在黑底上刺眼；
 * 压暗和悬停恢复全站统一，由 mx-doc.css 的 .shot-frame 定义，这里不再自定；
 * 主板 BIOS 截图本来就暗（约 10～35/255），在 figure 上加 is-dark，不压暗。
 */

/* 首屏：导语下面一行路线卡，三张（使用教程）或四张（证书导入）等宽，同行底边由 grid 拉齐 */
.jg-start { margin-top: clamp(44px, 5vw, 72px); }
.jg-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 18px; }
.jg-paths.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jg-paths .card-head { margin-bottom: 18px; }
.jg-paths h3 { margin-bottom: 10px; font-size: clamp(20px, 1.7vw, 24px); }
.jg-paths p:last-child { font-size: 15px; }

/* 证书导入页的标题是一整句，按内页标题字号会把末尾的「db」甩成单独一行；字号收一档，按句子平衡折行 */
.sb-title { max-width: 18em; font-size: clamp(36px, 4vw, 64px); text-wrap: balance; }
/* 目录项只在空格处折行，不把「复检」拆成「复 / 检」 */
.toc a { word-break: keep-all; }
/* 「ForgeXJanusDeploy.exe」这类长文件名在手机上比一行还宽，允许在词内断开，不撑出版心 */
.doc-sec h2 { overflow-wrap: break-word; }

/* 正文里的块：小标签 + 小标题 + 列表，框出来和正文段落区分开 */
.jg-block { margin: 28px 0; padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.jg-tag { font: 500 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--text-3); }
.doc-sec .jg-block h3 { margin-top: 8px; }
.jg-block > ul, .jg-block > ol { margin-bottom: 0; }
.jg-block .steps { margin: 22px 0 4px; gap: 18px; }
.jg-block p:not(.jg-tag) { color: var(--text-2); }

/* 两种模式：两张卡并排，等高 */
.jg-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 28px 0; }
.jg-modes .card { padding: clamp(20px, 2.2vw, 28px); }
.jg-modes .card-head { margin-bottom: 14px; }
.doc-sec .jg-modes h3 { margin-top: 0; }
.jg-modes .card p:last-child { margin: 0; font-size: 15px; }

/* 步骤和竖长截图并排，装在同一个块里：左边照着点，右边看界面；
   两栏各自高度不同，分开放会出现「同行底边不齐」，合进一个框后只剩一条外框底边 */
.jg-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 240px); gap: 28px; align-items: start; }
.jg-pair .shot { margin: 0; }
.jg-block .steps > li { color: var(--text-2); }
.jg-pair .shot.is-tall .shot-frame { width: auto; }
.jg-pair .shot.is-tall .shot-frame img { width: 100%; max-height: none; }

/* 一行三张截图（Advisor 推荐 → 高级选项 → 预留工作区，按操作顺序） */
.jg-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jg-fig { margin-right: 10px; font: 500 12px/1.6 var(--mono); color: var(--text-3); opacity: .8; }

/* 常见问题：一问一答，细线分隔；问题用宋体小标题，答案是正文 */
.jg-faq { margin-top: 28px; border-top: 1px solid var(--line); }
.jg-q { padding: 22px 0 18px; border-bottom: 1px solid var(--line); }
.doc-sec .jg-q h3 { margin-top: 0; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.5; }
.jg-q p { margin: 8px 0 0; }

/* 收尾一句：沉在正文最后，宋体，不抢正文 */
.jg-closing { margin-top: clamp(56px, 6vw, 88px); padding-top: clamp(40px, 4vw, 56px); border-top: 1px solid var(--line); }
.jg-closing blockquote { margin: 0; font: 500 clamp(26px, 2.6vw, 36px) / 1.35 var(--display); color: var(--text); }
.jg-closing figcaption { margin-top: 14px; font: 500 12px/1.4 var(--mono); color: var(--text-3); }
/* 11-11 第十三轮孤字（本文件现在只有安全启动证书页在用）：收尾一句在 1440 / 1920 宽末行只剩两个字、左侧目录一项在 1024 起末行两个字；
   两者都是一两行的短句，按行平衡 */
.jg-closing blockquote, .toc a { text-wrap: balance; }

/* 证书导入页 --------------------------------------------------------------- */
/* 黄金规则放在正文最上面，和左侧目录顶边对齐（目录有同样的上内边距） */
.doc-body > .sb-golden { margin-top: clamp(28px, 3vw, 44px); margin-bottom: 0; }
.sb-rules > li > h3 { margin: 3px 0 0; font-size: 18px; line-height: 1.5; }
.sb-rules > li > p { margin: 6px 0 0; }
.sb-code { margin: 14px 0 0; }
/* 品牌路径：每个品牌一块，菜单路径做成面包屑，官方截图整栏宽、上下排，宽图不再被挤成两小张 */
.sb-brand { margin: 28px 0 0; }
.sb-brand .shot { margin: 18px 0 0; }
.sb-brand .shot figcaption { margin-top: 8px; }
.sb-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin-top: 16px; font: 500 12.5px/1.6 var(--mono); color: var(--text-2); }
.sb-path span + span::before { content: "›"; margin: 0 10px; color: var(--text-3); }
.sb-path span:last-child { color: var(--text); }
.sb-row { margin: 18px 0 0; }
.sb-refs { margin-top: 18px; }
.doc-sec .note .sb-check-title { margin: 4px 0 2px; font-size: 18px; }
.note ul { margin: 10px 0 4px; }

/* 窄屏 ------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .jg-paths.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  /* 截图都是竖长界面：窄屏下仍保持两张（三张）一行，单张撑满整栏会比一屏还高 */
  .doc-body .shot-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-body .jg-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .jg-paths, .jg-paths.is-4, .jg-modes { grid-template-columns: minmax(0, 1fr); }
  .jg-pair { grid-template-columns: minmax(0, 1fr); }
  .jg-pair .shot.is-tall .shot-frame { width: fit-content; margin-inline: auto; }
  .jg-pair .shot.is-tall .shot-frame img { width: auto; max-height: min(70vh, 520px); }
}
@media (max-width: 560px) {
  .doc-body .sb-row { grid-template-columns: minmax(0, 1fr); }   /* 横向的 BIOS 截图两张并排在手机上太小 */
  .doc-body .jg-row-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-body .jg-row-3 .shot:last-child { grid-column: 1 / -1; width: calc(50% - 8px); justify-self: center; }
}