/**
 * IOMMU 方案介绍页（iommu.html）的页面版式。
 *
 * 业务定位：介绍页按首页的语言重排：内页首屏 + 两栏交替的章节，论点旁边配动画。
 * 令牌、按钮、卡片、状态标签都来自 mx.css，这里只写这一页特有的排布。
 *
 * 对齐约定（Owner：同列左右边、同行底边、同行控件高度一致）：
 *   - 首屏和「纵深」章节都用 mx.css 的两栏骨架（文 5 图 7），版心左右边与顶栏一致；
 *   - 三张分支卡同一行等宽，同行底边由 grid 拉齐，标签行用 margin-top:auto 沉到卡底；
 *   - 分支索引四行等高，左侧深度轴的刻度由 page-iommu.js 按每行的实际位置画，不写死。
 */


/* 首屏 ------------------------------------------------------------------- */
.im-head-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
/* 三段小字一行排开，竖线分隔，不做胶囊（导航和标签都不加边框胶囊） */
.im-runner { display: flex; flex-wrap: wrap; gap: 6px 0; }
.im-runner span + span { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--line-2); }
.im-line { display: block; }
.im-head .lead { margin-top: 4px; }
.im-dma { aspect-ratio: 8 / 5; }

/* 纵深章节 --------------------------------------------------------------- */
/* 「每一层权限，都是一套独立的控制方式」：右栏 5fr 只有约 500px，52px 的字一行放不下后半句（11 字），
   标题按标点折行时后半句被硬切成「…的控制 / 方式」。字号收到 44px 以内，两个分句各占一行，不切词 */
.im-sec .chapter-copy h2 { margin-top: 16px; font-size: clamp(30px, 3vw, 44px); }
.im-body { max-width: 38em; margin-top: 22px; }
.im-index-head { display: flex; align-items: baseline; gap: 14px; padding-bottom: 18px; }
.im-index-head span { font: 500 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--text-3); }
.im-index-head strong { font: 500 22px/1.3 var(--display); color: var(--text); }
/* 分支索引：左边 92px 留给深度轴（画布画刻度和层级名），每行一条链接，整行可点 */
.im-routes { position: relative; }
.im-routes a { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; column-gap: 16px; min-height: 96px; padding: 18px 8px 18px 92px; transition: background-color .25s var(--ease); }
.im-routes a:hover { background: rgba(var(--ink-rgb), .03); }
/* 行间细线从深度轴右边开始画：左边的层级名不被横线穿过 */
.im-routes a::after, .im-routes li:first-child a::before { content: ""; position: absolute; left: 92px; right: 0; bottom: 0; height: 1px; background: var(--line); }
.im-routes li:first-child a::before { top: 0; bottom: auto; }
.route-num { font: 500 12px/1.4 var(--mono); color: var(--text-3); }
.route-body { display: grid; gap: 2px; min-width: 0; }
.route-body strong { font: 500 clamp(24px, 2.2vw, 30px) / 1.2 var(--display); color: var(--text); }
.route-body em { font: 500 12.5px/1.4 var(--mono); font-style: normal; color: var(--text-3); }
.im-routes small { max-width: 15em; font-size: 13.5px; line-height: 1.6; text-align: right; color: var(--text-2); }
.im-routes small.tag { max-width: none; height: 24px; line-height: 1; white-space: nowrap; }
/* Janus 是主角：名字用强调色，其余三行保持中性 */
.im-routes .is-janus strong { color: var(--accent); }

/* 三张分支卡 + Janus 横幅 ------------------------------------------------- */
.im-h2 { margin: 0; }
.im-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.im-route h3 { margin-bottom: 12px; }
.im-route p:not(.card-head) { font-size: 15px; line-height: 1.8; }
.im-traits { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin-top: auto; padding-top: 28px; font: 500 12.5px/1.4 var(--mono); color: var(--text-3); }
.im-traits li + li { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--line-2); }
.im-traits li.tag { margin-left: 14px; padding: 0 10px; border: 1px solid rgba(217, 178, 95, .35); }
.im-route.is-janus { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 48px; }
/* Janus 横幅去油：原先靠暖金染色的渐变底和暖金边框突出，现在与其余分支卡相同：中性发丝边框加平底（继承 .card，悬停边线提一级）。
   不加 2px 暖金线：那条线只表示「选中、当前」，装饰性位置用了会冲淡它的意思（主线 11-11 定） */
.im-route.is-janus .card-head span { color: var(--accent); }
.im-route.is-janus p:not(.card-head) { max-width: 44em; }
.im-route.is-janus .im-traits { margin-top: 0; padding-top: 0; }

/* 四项对照：每项一条细线开头，标签、值、说明三层 */
.im-proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 2.4vw, 36px); }
.im-proof-item { display: grid; grid-template-rows: auto auto 1fr; justify-items: start; gap: 10px; padding-top: 26px; border-top: 1px solid var(--line-2); }
.im-proof-label { font: 500 12px/1.4 var(--mono); color: var(--text-3); }
.im-proof-value { font: 500 clamp(26px, 2.4vw, 34px) / 1.2 var(--display); color: var(--text); }
.im-proof-note { font-size: 14px; line-height: 1.6; color: var(--text-2); }
.im-proof-note.tag { height: 24px; line-height: 1; color: var(--warn); }
/* 11-11 第十三轮孤字：英文的数值行和说明比中文长，1024–1920 宽末行只剩一个短词；只在英文下按行平衡，中文一行放得下，不动 */
html[lang="en-US"] .im-proof-value, html[lang="en-US"] .im-proof-note { text-wrap: balance; }
/* 英文第四栏的数值是一个带连字符的长词，34px 放不下只能在连字符处断开、末行一个词；英文下数值字号收一档，一行放下 */
html[lang="en-US"] .im-proof-value { font-size: clamp(19px, 1.9vw, 28px); }
.im-proof-item.is-janus { border-top-color: rgba(var(--accent-rgb), .6); }
.im-proof-item.is-janus .im-proof-value { color: var(--accent); }

/* 收尾一句：沉在页面最后，宋体，不抢正文 */
/* 对照条紧跟分支卡：上一节已经留了底部空白，这里不再叠加，否则两节之间空出两屏的感觉 */
.im-sec.sec-tight { padding-block: 0; }
.im-closing { margin: clamp(72px, 8vw, 120px) 0 clamp(40px, 4vw, 64px); padding-top: clamp(40px, 4vw, 56px); border-top: 1px solid var(--line); }
.im-closing blockquote { margin: 0; font: 500 clamp(28px, 3vw, 44px) / 1.35 var(--display); color: var(--text); }
.im-closing figcaption { margin-top: 14px; font: 500 12px/1.4 var(--mono); color: var(--text-3); }

/* 窄屏 ------------------------------------------------------------------- */
@media (max-width: 960px) {
  .im-head-in { grid-template-columns: minmax(0, 1fr); }
  .im-dma { aspect-ratio: 4 / 3; }
  .im-board { grid-template-columns: minmax(0, 1fr); }
  .im-route.is-janus { grid-template-columns: minmax(0, 1fr); }
  .im-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px; }
}
@media (max-width: 560px) {
  .im-dma { aspect-ratio: 1 / 1; }
  .im-routes a { grid-template-columns: 28px minmax(0, 1fr); padding: 16px 0 16px 80px; row-gap: 8px; }
  .im-routes a::after, .im-routes li:first-child a::before { left: 80px; }
  .im-runner { gap: 4px 16px; }
  .im-runner span + span { margin-left: 0; padding-left: 0; border-left: 0; }
  .im-routes small { grid-column: 2; text-align: left; max-width: none; }
  .im-proof { grid-template-columns: minmax(0, 1fr); }
  /* 11-11 第十三轮：英文的停运标签比中文长一倍，不折行的胶囊在 360 宽越出版心 22px，把移动端布局视口撑宽（顶栏跟着变宽、整页横向滚动）。
     只在英文下放开折行：中文标签一行放得下，保持原样（中文模式逐像素不变）。折成两行时胶囊圆角改小，免得变成一根粗管子 */
  html[lang="en-US"] .im-routes small.tag { justify-self: start; max-width: 100%; height: auto; min-height: 24px; padding-block: 4px; line-height: 1.4; white-space: normal; border-radius: 8px; }
}