/* ==========================================================================
   EOC 共创社区 — 中文下载页样式（zh-download.css）
   设计语言与 /index.html、/zh/index.html、/zh/about/about.html 保持一致：
   变量体系、间距节奏、圆角、阴影、断点规范全部沿用全站变量，无硬编码色值。
   ========================================================================== */

/* ============================== 一、设计令牌 ============================== */
:root {
  /* 断点：与 zh-about.css 对齐 */
  --bp-tablet: 768px;
  --bp-desktop: 1200px;

  /* 布局宽度 */
  --layout-w-mobile: 420px;
  --layout-w-tablet: 720px;
  --layout-w-desktop: 1440px;

  /* 栅格列数：与 about 页快捷入口一致（1 / 2 / 4） */
  --cols-cat-mobile: 1;
  --cols-cat-tablet: 2;
  --cols-cat-desktop: 4;

  /* 间距节奏 */
  --gap-stack-mobile: 20px;
  --gap-stack-tablet: 24px;
  --gap-stack-desktop: 28px;

  --gap-grid-mobile: 12px;
  --gap-grid-tablet: 14px;
  --gap-grid-desktop: 16px;

  /* 内边距 */
  --pad-hero-mobile: 20px 14px 18px;
  --pad-hero-tablet: 28px 22px 24px;
  --pad-hero-desktop: 36px 30px 30px;

  --pad-card-mobile: 18px 16px;
  --pad-card-tablet: 22px 20px;
  --pad-card-desktop: 24px 22px;

  /* 图标 */
  --icon-color: var(--text);
  --icon-size-card: 34px;
  --icon-size-inline: 16px;

  /* 主舞台 */
  --stage-max-w: var(--layout-w-mobile);
  --stack-gap: var(--gap-stack-mobile);
}

@media (min-width: 768px) {
  :root {
    --stage-max-w: var(--layout-w-tablet);
    --stack-gap: var(--gap-stack-tablet);
  }
}
@media (min-width: 1200px) {
  :root {
    --stage-max-w: var(--layout-w-desktop);
    --stack-gap: var(--gap-stack-desktop);
  }
}

/* ============================== 二、页面骨架 ============================== */
/* 页面骨架：横向留白沿用全站 body 的 padding（css/base/index.css: 20px），
   本页不再清零。
   此前此处写了 padding: 0，把全站横向留白一并抹掉；而下方
   .zh-download-stack 的注释却写着「左右留白由 body 全局 padding 承担」——
   前后自相矛盾，结果是下载页卡片直接贴到视口边缘，
   与 about / index 等页面明显不一致。现改为只保留纵向归零的既有意图，
   横向交回全局，与 .zh-about-stack 同源同距。 */
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: var(--bg);
}

/* 主舞台容器：与 about 页 zh-about-stack 同构 */
.zh-download-stack {
  position: relative;
  width: 100%;
  max-width: var(--stage-max-w);
  margin: 0 auto;
  /* 横向留白：与 about 页 .zh-about-stack 对齐 —— 不自带横向内边距，
     左右留白统一由 body 的全局 padding 承担，避免双重留白导致
     内容区偏窄、两侧露白过多。 */
  padding: 16px 0 28px;
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
  z-index: 1;
}
@media (min-width: 768px) {
  .zh-download-stack { padding: 22px 0 34px; }
}
@media (min-width: 1200px) {
  .zh-download-stack { padding: 28px 0 40px; }
}

/* 通用卡片：沿用全站 surface 变量体系 */
.zh-dl-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: var(--pad-card-mobile);
  background: var(--surface-card);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--surface-card-shadow);
  transition:
    transform var(--dur-base) var(--elastic-soft),
    box-shadow var(--dur-base) var(--smooth),
    border-color var(--dur-quick) var(--smooth),
    background var(--dur-quick) var(--smooth);
}
@media (min-width: 768px) { .zh-dl-card { padding: var(--pad-card-tablet); } }
@media (min-width: 1200px) { .zh-dl-card { padding: var(--pad-card-desktop); } }

/* 顶部高亮条：hover 时点亮 */
.zh-dl-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--blue-light), var(--orange), var(--gold));
  opacity: 0;
  transition: opacity var(--dur-quick) var(--smooth);
}
.zh-dl-card:hover::before { opacity: 1; }
.zh-dl-card:hover {
  transform: translateY(-4px);
  border-color: var(--card-hover-border);
  background: var(--surface-card-raised);
  box-shadow: var(--shadow-card);
}

/* 入场渐显：脚本补 .show 后可见 */
.zh-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-panel) var(--smooth),
    transform var(--dur-panel) var(--elastic-soft);
}
.zh-reveal.show {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .zh-reveal { opacity: 1; transform: none; transition: none; }
  .zh-dl-card { transition: none; }
}

/* ============================== 三、页头区 ============================== */
.zh-dl-hero {
  padding: var(--pad-hero-mobile);
  background: var(--surface-card);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--surface-card-shadow);
  text-align: center;
}
@media (min-width: 768px) { .zh-dl-hero { padding: var(--pad-hero-tablet); } }
@media (min-width: 1200px) { .zh-dl-hero { padding: var(--pad-hero-desktop); } }

.zh-dl-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 8px;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--text);
}

.zh-dl-title-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  background-color: var(--blue);
  -webkit-mask-image: url("/svg/icon-download.svg");
          mask-image: url("/svg/icon-download.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

.zh-dl-subtitle {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-dim);
}
@media (min-width: 768px) { .zh-dl-subtitle { font-size: 14px; } }

/* ============================== 四、分类卡片网格 ============================== */
.zh-dl-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols-cat-mobile), minmax(0, 1fr));
  gap: var(--gap-grid-mobile);
  width: 100%;
}
@media (min-width: 768px) {
  .zh-dl-grid {
    grid-template-columns: repeat(var(--cols-cat-tablet), minmax(0, 1fr));
    gap: var(--gap-grid-tablet);
  }
}
@media (min-width: 1200px) {
  .zh-dl-grid {
    grid-template-columns: repeat(var(--cols-cat-desktop), minmax(0, 1fr));
    gap: var(--gap-grid-desktop);
  }
}

/* 卡片图标：外链 SVG + mask 着色，跟随主题变量 */
.zh-dl-card-icon {
  width: var(--icon-size-card);
  height: var(--icon-size-card);
  margin-bottom: 12px;
  background-color: var(--blue);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.zh-dl-icon-mod {
  -webkit-mask-image: url("/svg/icon-toolbox.svg");
          mask-image: url("/svg/icon-toolbox.svg");
}
.zh-dl-icon-cp {
  -webkit-mask-image: url("/svg/icon-server.svg");
          mask-image: url("/svg/icon-server.svg");
}
.zh-dl-icon-apk {
  -webkit-mask-image: url("/svg/icon-upload.svg");
          mask-image: url("/svg/icon-upload.svg");
}
.zh-dl-icon-game {
  -webkit-mask-image: url("/svg/icon-game.svg");
          mask-image: url("/svg/icon-game.svg");
}

.zh-dl-card-title {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
}

.zh-dl-card-desc {
  flex: 1 1 auto;
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-dim);
}

/* 跳转按钮：沿用全站主按钮变量 */
.zh-dl-card-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  color: var(--btn-primary-text);
  background: var(--btn-primary-bg);
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--btn-primary-shadow);
  transition:
    background var(--dur-base) var(--smooth),
    transform var(--dur-base) var(--elastic-out),
    box-shadow var(--dur-base) var(--smooth);
}
.zh-dl-card-link::after {
  content: '→';
  transition: transform var(--dur-base) var(--smooth);
}
.zh-dl-card-link:hover {
  background: var(--btn-primary-bg-hover);
  transform: translateY(-2px);
}
.zh-dl-card-link:hover::after { transform: translateX(3px); }
.zh-dl-card-link:active {
  transform: translateY(0) scale(0.97);
  transition-duration: var(--dur-instant);
}
.zh-dl-card-link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ============================== 五、提示条 ============================== */
.zh-dl-tip {
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.75;
  text-align: center;
  color: var(--highlight-text);
  background: var(--highlight-bg);
  border: 1px solid var(--highlight-border);
  border-radius: var(--radius-md);
}
.zh-dl-tip a {
  font-weight: 600;
  color: var(--blue);
  text-decoration: underline;
  transition: color var(--dur-quick) var(--smooth);
}
.zh-dl-tip a:hover { color: var(--blue-light); }

/* ============================== 六、页脚 ============================== */
.site-footer {
  margin-top: 8px;
  padding: 16px 12px 20px;
  text-align: center;
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-faint);
}
.site-footer a {
  color: var(--text-dim);
  text-decoration: none;
  margin: 0 4px;
  transition: color var(--dur-quick) var(--smooth);
}
.site-footer a:hover { color: var(--blue); text-decoration: underline; }

/* ============================== 七、窄屏适配 ============================== */
@media (max-width: 640px) {
  .zh-download-stack { padding: 14px 0 24px; }
  .zh-dl-card { padding: 16px 14px; }
  .zh-dl-card-title { font-size: 1rem; }
}