/* ============================================================
   中文站「关于我们」页专属模块
   ------------------------------------------------------------
   基座（品牌栏 / 主舞台 / 卡片 / 页脚 / 主题变量）来自 /css/index.css
   与本目录的 zh-index.css，本文件只补充 about 页独有的：
     1) 设备视图切换面板（沿用旧版 about.html 的功能）
     2) 分组跳转入口栅格
     3) 核心理念列表
     4) 服务器信息事实卡
     5) 管理团队段落
   所有色值、间距、栅格参数一律取 CSS 变量，禁止硬编码字面量，
   便于后续多主题换肤时只改变量、不改规则。
   ============================================================ */

/* ============================================================
   本模块变量层（全部带兜底值，未定义时优雅降级）
   —— 断点、最大宽度、栅格列数、间距、圆角、字号统一在此声明
   ============================================================ */
:root {
  /* 断点：与 js/layout-mode.js 的 BREAKPOINTS 三方保持一致。
     说明：CSS 规范禁止 @media 条件使用 var()，故下方 @media 仍需写
     768px / 1200px 字面量；此变量作为集中配置契约与文档用途，
     改断点时须同步修改：本变量、@media 字面量、layout-mode.js。 */
  --bp-tablet: 768px;
  --bp-desktop: 1200px;

  /* 各布局模式下的阅读区最大宽度 */
  --layout-w-mobile: 420px;
  --layout-w-tablet: 720px;
  --layout-w-desktop: 1440px;

  /* 栅格列数（各断点） */
  --cols-jump-mobile: 1;
  --cols-jump-tablet: 2;
  --cols-jump-desktop: 4;

  --cols-principle-mobile: 1;
  --cols-principle-tablet: 2;
  --cols-principle-desktop: 3;

  --cols-fact-mobile: 1;
  --cols-fact-tablet: 2;
  --cols-fact-desktop: 4;

  /* 团队段落分栏 */
  --cols-team-mobile: 1;
  --cols-team-desktop: 2;

  /* 间距 */
  --gap-stack-mobile: 20px;
  --gap-stack-tablet: 24px;
  --gap-stack-desktop: 28px;
  --gap-grid-mobile: 10px;
  --gap-grid-tablet: 12px;
  --gap-grid-desktop: 14px;
  --gap-team-col: 28px;

  /* 页头内边距 */
  --pad-hero-mobile: 20px 14px 18px;
  --pad-hero-tablet: 28px 22px 24px;

  /* 图标着色：走 --text（深色 #f2f5fa / 浅色 #141c2e），随主题自动反转。
     新图标均为外部 .svg 文件，通过 CSS mask 着色，故不再依赖
     文件内硬编码 stroke，也不再需要 --icon-filter 二次处理。 */
  --icon-color: var(--text);
  --icon-size-jump: 15px;
  --icon-size-section: 18px;
}

/* ===== 布局模式（由菜单「布局模式」锁定，auto 时完全交给媒体查询） =====
   锁定态通过 [data-layout] 覆盖响应式默认，仅用于预览，不写死缩放比例。 */
[data-layout="mobile"]  .zh-about-stack { max-width: var(--layout-w-mobile); }
[data-layout="tablet"]  .zh-about-stack { max-width: var(--layout-w-tablet); }
[data-layout="desktop"] .zh-about-stack { max-width: var(--layout-w-desktop); }

.zh-about-stack {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack-mobile);
  transition: max-width var(--dur-panel) var(--smooth);
}

/* ===== 与公共壳（/css/zh-page-shell.css）的协同 =====
   本页容器同时带 .zh-stack 与 .zh-about-stack 两个类：
     .zh-stack        → 复用公共壳的宽度解锁、吸顶、顶部让位
     .zh-about-stack  → 保留本页自身的纵向单列（平铺由内部多列栅格
                        .zh-about-jump-groups / .zh-principle-list /
                        .zh-fact-grid 负责，与 index 页的双栏策略不同）

   必须显式中和公共壳的大屏分栏规则，原因：
     公共壳在 ≥1200px 写了 .zh-stack{flex-direction:row;flex-wrap:wrap}
     与 .zh-stack > *{flex:1 1 calc(50% - 10px)}；
     而本文件后加载、同特异度，其 flex-direction:column 会胜出，
     于是 flex-basis 的主轴由「宽度」反转为「高度」，
     50% 会从「半栏」变成「半高」—— 板块高度被压扁错乱。
   这里把子项显式改回整宽，column 方向下即为「按内容自然高度」，
   与改造前完全一致。 */
@media (min-width: 1200px) {
  .zh-about-stack > * { flex: 0 0 auto; }
}

/* ===== 页头 ===== */
.zh-about-hero { text-align: center; padding: 30px var(--padding-md, 20px) 26px; }

.zh-about-kicker {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 14px;
  border: 1px solid var(--bg-card-border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--blue);
  font-size: 12px;
  letter-spacing: 2px;
}

.zh-about-hero .intro-title { margin-bottom: 10px; }

.zh-about-hero .intro-lead { margin: 0 auto; max-width: 720px; }

/* ===== 分组跳转入口 ===== */
.zh-jump-group + .zh-jump-group { margin-top: 22px; }

/* ===== 搜索框 ===== */
.zh-jump-search {
  position: relative;
  margin-bottom: 14px;
}

.zh-jump-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--bg-card-border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.zh-jump-search-box:focus-within {
  border-color: var(--blue);
  background: var(--accent-tint-md);
}

/* 放大镜：外部 .svg + dark/light 双文件，由 theme.js 的 syncThemeIcons 换 src，
   不使用 CSS filter 二次叠加 */
.zh-jump-search-icon {
  width: 20px;
  height: 20px;
  flex: none;
  opacity: 0.85;
}

.zh-jump-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
}
.zh-jump-search-input::placeholder { color: var(--text-faint); }

.zh-jump-search-clear {
  flex: none;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.zh-jump-search-clear:hover { background: var(--accent-tint-md); color: var(--blue); }
.zh-jump-search-clear[hidden] { display: none; }

/* ===== 历史记录下拉 ===== */
.zh-jump-history {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--bg-card-border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  box-shadow: 0 10px 26px var(--ink-soft);
  max-height: 244px;
  overflow-y: auto;
}
.zh-jump-history[hidden] { display: none; }

.zh-jump-history-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.zh-jump-history-item:hover,
.zh-jump-history-item:focus-visible {
  background: var(--accent-tint-md);
  color: var(--text);
  outline: 0;
}
.zh-jump-history-icon {
  width: 16px;
  height: 16px;
  flex: none;
  opacity: 0.7;
}

/* ===== 无结果提示 ===== */
.zh-jump-empty {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px dashed var(--bg-card-border);
  border-radius: var(--radius-md);
  color: var(--text-faint);
  font-size: 13px;
  text-align: center;
}
.zh-jump-empty[hidden] { display: none; }

/* ===== 板块标题 + 折叠控件 ===== */
.zh-jump-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.zh-jump-group-head:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 折叠箭头：明暗双文件由 syncThemeIcons 切换，仅做旋转动画 */
.zh-jump-chevron {
  width: 16px;
  height: 16px;
  flex: none;
  margin-left: auto;
  opacity: 0.8;
  transition: transform var(--dur-base) var(--elastic-soft);
}
.zh-jump-group.is-collapsed .zh-jump-chevron { transform: rotate(-90deg); }

/* 折叠动画：max-height 过渡。
   注意：.zh-jump-grid 是多列网格（auto-fill），条目换行会产生多行，
   用 grid-template-rows:0fr 只能折叠第一行、其余行仍可见，
   故改用 max-height 一次性折叠全部行。 */
.zh-jump-grid {
  overflow: hidden;
  max-height: 2000px; /* 足够容纳单板块全部条目 */
  transition: max-height var(--dur-base) var(--elastic-soft),
              opacity var(--dur-base) ease,
              margin-top var(--dur-base) var(--elastic-soft);
}
.zh-jump-group.is-collapsed .zh-jump-grid {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}

/* 搜索过滤：隐藏不匹配的条目 */
.zh-jump-link.is-hidden { display: none; }
/* 整组无结果时隐藏该组（避免留下空标题） */
.zh-jump-group.is-empty { display: none; }

.zh-jump-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
}

.zh-jump-group-title::before {
  content: '';
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--blue), var(--blue-light));
}

.zh-jump-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.zh-jump-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--bg-card-border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text);
  font-size: 14px;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--elastic-soft),
              border-color var(--dur-fast), background var(--dur-fast);
}

.zh-jump-link::after {
  content: '';
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-top: 1.5px solid var(--text-faint);
  border-right: 1.5px solid var(--text-faint);
  transform: rotate(45deg);
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}

.zh-jump-link:hover {
  transform: translateY(-2px);
  border-color: var(--blue);
  background: var(--accent-tint-md);
}

.zh-jump-link:hover::after { border-color: var(--blue); transform: rotate(45deg) translate(2px, -2px); }
.zh-jump-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.zh-jump-link .zh-jump-icon {
  width: 26px;
  height: 26px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--accent-tint-md);
}

/* ===== 图标着色（CSS mask 方案）=====
   新图标为外部 .svg 独立文件，通过 mask 以 --icon-color 着色，
   颜色完全由 CSS 变量驱动 → 明暗主题自动切换，且不在文件内硬编码颜色。
   注意：mask 只取 SVG 的 alpha 形状，故 SVG 描边必须为「不透明纯色」，
   半透明或 none 会导致图标不可见。 */
.zh-icon {
  display: inline-block;
  background-color: var(--icon-color);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  /* 兜底：不支持 mask 的浏览器仍显示原始 SVG */
}

/* 尺寸：span 为空元素，必须显式给宽高，否则 mask 无渲染区域 */
.zh-icon { width: var(--icon-size-jump); height: var(--icon-size-jump); }
.zh-jump-icon .zh-icon { width: var(--icon-size-jump); height: var(--icon-size-jump); }
.zh-about-section-title .zh-icon,
.zh-chart-title .zh-icon { width: var(--icon-size-section); height: var(--icon-size-section); }

/* 各图标 mask 源：span 为空元素，仅靠 mask 形状 + background-color 着色 */
.zh-icon-bbs {
  -webkit-mask-image: url("/svg/icon-bbs.svg");
  mask-image: url("/svg/icon-bbs.svg");
}
.zh-icon-chart {
  -webkit-mask-image: url("/svg/icon-chart.svg");
  mask-image: url("/svg/icon-chart.svg");
}
.zh-icon-console {
  -webkit-mask-image: url("/svg/icon-console.svg");
  mask-image: url("/svg/icon-console.svg");
}
.zh-icon-credits {
  -webkit-mask-image: url("/svg/icon-credits.svg");
  mask-image: url("/svg/icon-credits.svg");
}
.zh-icon-doc {
  -webkit-mask-image: url("/svg/icon-doc.svg");
  mask-image: url("/svg/icon-doc.svg");
}
.zh-icon-faq {
  -webkit-mask-image: url("/svg/icon-faq.svg");
  mask-image: url("/svg/icon-faq.svg");
}
.zh-icon-feedback {
  -webkit-mask-image: url("/svg/icon-feedback.svg");
  mask-image: url("/svg/icon-feedback.svg");
}
.zh-icon-game {
  -webkit-mask-image: url("/svg/icon-game.svg");
  mask-image: url("/svg/icon-game.svg");
}
.zh-icon-globe {
  -webkit-mask-image: url("/svg/icon-globe.svg");
  mask-image: url("/svg/icon-globe.svg");
}
.zh-icon-intro {
  -webkit-mask-image: url("/svg/icon-intro.svg");
  mask-image: url("/svg/icon-intro.svg");
}
.zh-icon-music {
  -webkit-mask-image: url("/svg/icon-music.svg");
  mask-image: url("/svg/icon-music.svg");
}
.zh-icon-principle {
  -webkit-mask-image: url("/svg/icon-principle.svg");
  mask-image: url("/svg/icon-principle.svg");
}
.zh-icon-privacy {
  -webkit-mask-image: url("/svg/icon-privacy.svg");
  mask-image: url("/svg/icon-privacy.svg");
}
.zh-icon-release {
  -webkit-mask-image: url("/svg/icon-release.svg");
  mask-image: url("/svg/icon-release.svg");
}
.zh-icon-rules {
  -webkit-mask-image: url("/svg/icon-rules.svg");
  mask-image: url("/svg/icon-rules.svg");
}
.zh-icon-server {
  -webkit-mask-image: url("/svg/icon-server.svg");
  mask-image: url("/svg/icon-server.svg");
}
.zh-icon-social {
  -webkit-mask-image: url("/svg/icon-social.svg");
  mask-image: url("/svg/icon-social.svg");
}
.zh-icon-sponsor {
  -webkit-mask-image: url("/svg/icon-sponsor.svg");
  mask-image: url("/svg/icon-sponsor.svg");
}
.zh-icon-toolbox {
  -webkit-mask-image: url("/svg/icon-toolbox.svg");
  mask-image: url("/svg/icon-toolbox.svg");
}
.zh-icon-upload {
  -webkit-mask-image: url("/svg/icon-upload.svg");
  mask-image: url("/svg/icon-upload.svg");
}
.zh-icon-users {
  -webkit-mask-image: url("/svg/icon-users.svg");
  mask-image: url("/svg/icon-users.svg");
}
.zh-icon-welfare {
  -webkit-mask-image: url("/svg/icon-welfare.svg");
  mask-image: url("/svg/icon-welfare.svg");
}
.zh-icon-wordpress {
  -webkit-mask-image: url("/svg/icon-wordpress.svg");
  mask-image: url("/svg/icon-wordpress.svg");
}

/* ===== 核心理念列表 ===== */
.zh-principle-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.zh-principle-item {
  position: relative;
  padding: 14px 16px 14px 40px;
  border: 1px solid var(--bg-card-border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.75;
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}

.zh-principle-item:hover { border-color: var(--blue); transform: translateY(-2px); }

.zh-principle-item::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
}

/* 作者小记：占满整行以示区分 */
.zh-principle-item.is-note {
  grid-column: 1 / -1;
  border-style: dashed;
  color: var(--text);
}

/* ===== 服务器信息事实卡 ===== */
.zh-fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.zh-fact-card {
  padding: 16px;
  border: 1px solid var(--bg-card-border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  text-align: center;
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}

.zh-fact-card:hover { border-color: var(--blue); transform: translateY(-2px); }

.zh-fact-label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-faint);
  font-size: 12px;
  letter-spacing: 1px;
}

.zh-fact-value {
  display: block;
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  word-break: break-all;
  line-height: 1.5;
}

.zh-fact-note {
  display: block;
  margin-top: 10px;
  color: var(--text-faint);
  font-size: 12px;
  line-height: 1.7;
  text-align: left;
}

/* ===== 管理团队 ===== */
.zh-team-body p {
  margin: 0 0 12px;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.9;
}

.zh-team-body p:last-child { margin-bottom: 0; }

.zh-team-body a { color: var(--blue); text-decoration: none; }
.zh-team-body a:hover { text-decoration: underline; }

/* ===== 区块小标题 ===== */
.zh-about-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
}

/* 图标尺寸已统一由上方 .zh-icon / .zh-about-section-title .zh-icon 规则处理 */

/* ===== 侧边栏「布局模式」按钮组 =====
   色值/间距全部取主题变量，多主题换肤时无需改动本段 */
.menu-layout { flex-wrap: wrap; }
.menu-layout-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-grid-mobile, 8px);
  margin-top: var(--gap-grid-mobile, 8px);
}
.menu-layout-btn {
  font-size: var(--fs-menu-btn, 12px);
  padding: var(--pad-menu-btn, 5px 11px);
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--toggle-border);
  background: var(--toggle-bg);
  color: var(--text-dim, var(--text));
  cursor: pointer;
  transition: background var(--dur-base, 0.3s) ease,
              border-color var(--dur-base, 0.3s) ease,
              color var(--dur-base, 0.3s) ease;
}
.menu-layout-btn:hover { background: var(--toggle-bg-hover); }
.menu-layout-btn.is-active {
  background: var(--toggle-bg-hover);
  border-color: var(--blue);
  color: var(--blue);
  font-weight: 600;
}

/* ===== 响应式断点布局 =====
   mobile  (<768px) ：单列紧凑，隐藏附加详情
   tablet  (768–1199px)：适度展开，卡片间距放宽
   desktop (>=1200px)：多栏并排，展开全部详情，消除横向留白 */

/* ---------- 基础（mobile first，<768px）---------- */
.zh-about-hero { padding: var(--pad-hero-mobile); }
.zh-jump-grid {
  grid-template-columns: repeat(var(--cols-jump-mobile), minmax(0, 1fr));
  gap: var(--gap-grid-mobile);
}
.zh-principle-list {
  grid-template-columns: repeat(var(--cols-principle-mobile), minmax(0, 1fr));
}
.zh-fact-grid {
  grid-template-columns: repeat(var(--cols-fact-mobile), minmax(0, 1fr));
}

/* 附加详情：移动端折叠隐藏，仅大屏展示 */
.zh-about-detail { display: none; }

/* ---------- 快捷入口响应式补充（搜索框/双栏）---------- */
/* 手机端(<768px)：搜索框占满 100% 宽度，快捷入口维持单列 */
.zh-jump-search { width: 100%; }
.zh-jump-grid { grid-template-rows: 1fr; }

/* ---------- tablet：≥ 768px（= --bp-tablet）----------
   注意：CSS 规范不允许 @media 条件使用 var()，故断点在此写字面量，
   并与 :root 的 --bp-tablet 保持同步，便于集中维护时对照。
   适度展开：入口/理念/事实卡改为多列，放宽间距 */
@media (min-width: 768px) {
  .zh-about-stack { gap: var(--gap-stack-tablet); }
  .zh-about-hero { padding: var(--pad-hero-tablet); }
  .zh-jump-grid {
    grid-template-columns: repeat(var(--cols-jump-tablet), minmax(0, 1fr));
    gap: var(--gap-grid-tablet);
  }
  .zh-principle-list {
    grid-template-columns: repeat(var(--cols-principle-tablet), minmax(0, 1fr));
  }
  .zh-fact-grid {
    grid-template-columns: repeat(var(--cols-fact-tablet), minmax(0, 1fr));
  }
}

/* ---------- desktop：≥ 1200px（= --bp-desktop）----------
   断点字面量同上，与 --bp-desktop 同步维护。
   完全取消手机紧凑布局：多栏并排 + 展开全部折叠内容 + 显示附加详情 */
@media (min-width: 1200px) {
  .zh-about-stack { max-width: var(--layout-w-desktop); gap: var(--gap-stack-desktop); }

  /* 快捷入口：多组并排，充分利用横向空间。
     列数统一由 --cols-jump-desktop 主题变量控制（默认 4）。
     此前本块内紧接着又写了一条 `repeat(2, ...)` 的同名规则，
     因同 specificity、后者靠前而直接覆盖了变量版本，
     导致 --cols-jump-desktop 永久失效（改变量不生效）。
     已删除该条重复定义，恢复变量驱动。 */
  .zh-jump-grid {
    grid-template-columns: repeat(var(--cols-jump-desktop), minmax(0, 1fr));
    gap: var(--gap-grid-desktop);
  }

  /* 大屏：四个板块两两并排，减少纵向滚动 */
  .zh-about-jump-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-grid-desktop);
    align-items: start;
  }
  .zh-jump-group + .zh-jump-group { margin-top: 0; }

  /* 大屏：搜索框限宽，避免横跨整屏 */
  .zh-jump-search { max-width: 420px; }

  /* 核心理念：多栏 */
  .zh-principle-list {
    grid-template-columns: repeat(var(--cols-principle-desktop), minmax(0, 1fr));
  }

  /* 服务器信息：多栏事实卡 */
  .zh-fact-grid {
    grid-template-columns: repeat(var(--cols-fact-desktop), minmax(0, 1fr));
  }

  /* 展开移动端隐藏的附加详情 */
  .zh-about-detail { display: block; }

  /* 管理团队 / 反馈：分栏，避免长段落独占一行 */
  .zh-team-body { columns: var(--cols-team-desktop); column-gap: var(--gap-team-col); }
}

/* ---------- 菜单「布局模式」锁定态：覆盖上述媒体查询 ----------
   仅用于预览；列数、间距仍由变量驱动，新增断点只需扩变量。 */
[data-layout="mobile"] .zh-jump-grid {
  grid-template-columns: repeat(var(--cols-jump-mobile), minmax(0, 1fr));
  gap: var(--gap-grid-mobile);
}
[data-layout="mobile"] .zh-principle-list {
  grid-template-columns: repeat(var(--cols-principle-mobile), minmax(0, 1fr));
}
[data-layout="mobile"] .zh-fact-grid {
  grid-template-columns: repeat(var(--cols-fact-mobile), minmax(0, 1fr));
}
[data-layout="mobile"] .zh-about-detail { display: none; }
[data-layout="mobile"] .zh-team-body { columns: var(--cols-team-mobile); }

[data-layout="tablet"] .zh-jump-grid {
  grid-template-columns: repeat(var(--cols-jump-tablet), minmax(0, 1fr));
  gap: var(--gap-grid-tablet);
}
[data-layout="tablet"] .zh-principle-list {
  grid-template-columns: repeat(var(--cols-principle-tablet), minmax(0, 1fr));
}
[data-layout="tablet"] .zh-fact-grid {
  grid-template-columns: repeat(var(--cols-fact-tablet), minmax(0, 1fr));
}
[data-layout="tablet"] .zh-about-detail { display: none; }
[data-layout="tablet"] .zh-team-body { columns: var(--cols-team-mobile); }

[data-layout="desktop"] .zh-jump-grid {
  grid-template-columns: repeat(var(--cols-jump-desktop), minmax(0, 1fr));
  gap: var(--gap-grid-desktop);
}
[data-layout="desktop"] .zh-principle-list {
  grid-template-columns: repeat(var(--cols-principle-desktop), minmax(0, 1fr));
}
[data-layout="desktop"] .zh-fact-grid {
  grid-template-columns: repeat(var(--cols-fact-desktop), minmax(0, 1fr));
}
[data-layout="desktop"] .zh-about-detail { display: block; }
[data-layout="desktop"] .zh-team-body { columns: var(--cols-team-desktop); column-gap: var(--gap-team-col); }