/* =============================================================================
   首页 9 张分类卡片的专属背景图（2026-09-03）
   -----------------------------------------------------------------------------
   · 只被 index.html 引用，作用域也只有 .wiki-card，所以子页面各自的整页背景
     （css/module-bg.css，按 body[data-mbg] 绑定）一点关系都没有，不会互相覆盖。
   · 图层顺序：卡片原 background-color（兜底） → 背景图 → 半透明遮罩 → 图标/文字。
     用 background-image 的多层写法而不是伪元素，是为了不去动 .wiki-card::before
     ——那条 3px 顶部色条是 hover 效果，占着伪元素。
   · 图片是 840×510（卡片实测 370.7×228.3，dpr2 也够），已裁掉源图右下角「豆包AI生成」水印，
     生成/换绑脚本：_dev/卡片背景图-生成.js
   ============================================================================= */

.wiki-card {
  /* cover + center：等比铺满、居中裁切，绝不拉伸变形 */
  background-image: var(--wc-scrim), var(--wc-img);
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat;

  /* 浅色主题卡片上的字是深色的，所以遮罩用白纱；深色主题用深色纱。
     150deg 是从左上到右下渐轻：图标与标题压在左上那一段，右下角留一点空隙让图露出来。
     量过的结果（截图取卡片右侧空档——遮罩最轻、文字边缘最近的位置，9 张里的最差值）：
       2026-09-03 17:25 加深后：
         暗色 标题 14.7:1（加深前 12.9）/ 说明 6.3:1（5.5）/ 计数 3.4:1（3.0）
         亮色 标题 16.3:1（16.5）/ 说明 4.4:1（4.4）/ 计数 2.3:1（2.4）
       工具：node _dev/卡片可读性.js <截图> <light|dark>
     想要图更明显，就把下面六个 alpha 同比例往下调（每个减 0.04 ≈ 图明白显一档；
     注意 alpha 在浏览器里按 1/255 取整，小于 0.004 的改动会被舍掉）。 */
  --wc-scrim: linear-gradient(150deg,
      rgba(255, 255, 255, .96) 0%,
      rgba(250, 251, 254, .94) 52%,
      rgba(243, 247, 252, .895) 100%);
}

[data-theme="dark"] .wiki-card {
  --wc-scrim: linear-gradient(150deg,
      rgba(4, 7, 15, .955) 0%,
      rgba(6, 9, 18, .925) 52%,
      rgba(3, 5, 12, .88) 100%);
}

/* 九张卡各自的图 —— 按卡片自带的颜色类绑定（class 由 renderWikiCards() 写死，JS 一行没改） */
.wiki-card.indigo   { --wc-img: url("../img/cards/indigo.jpg"); }   /* 大模型图鉴 */
.wiki-card.violet   { --wc-img: url("../img/cards/violet.jpg"); }   /* AI工具库 */
.wiki-card.fuchsia  { --wc-img: url("../img/cards/fuchsia.jpg"); }  /* 算法架构 */
.wiki-card.sky      { --wc-img: url("../img/cards/sky.jpg"); }      /* Agent世界 */
.wiki-card.emerald  { --wc-img: url("../img/cards/emerald.jpg"); }  /* 开发框架 */
.wiki-card.amber    { --wc-img: url("../img/cards/amber.jpg"); }    /* 数据集 */
.wiki-card.orange   { --wc-img: url("../img/cards/orange.jpg"); }   /* AI发展史 */
.wiki-card.rose     { --wc-img: url("../img/cards/rose.jpg"); }     /* 伦理安全 */
.wiki-card.pink     { --wc-img: url("../img/cards/pink.jpg"); }     /* 产业观察 */

/* 手机端（≤768px）卡片变单列，图跟着 cover 缩放即可；只把遮罩收紧一档，
   因为单列卡更宽、图的细节露得更多，正文行更容易被打扰。 */
@media (max-width: 768px) {
  .wiki-card {
    --wc-scrim: linear-gradient(150deg,
        rgba(255, 255, 255, .972) 0%,
        rgba(250, 251, 254, .952) 55%,
        rgba(243, 247, 252, .915) 100%);
  }
  [data-theme="dark"] .wiki-card {
    --wc-scrim: linear-gradient(150deg,
        rgba(4, 7, 15, .965) 0%,
        rgba(6, 9, 18, .94) 55%,
        rgba(3, 5, 12, .905) 100%);
  }
}