/*
 * truban 的本站补丁样式。**只补，不重写主题** ——
 * 加载顺序排在 CDN 上那套主题 CSS 之后（见 layouts/Base.astro）。
 *
 * 每一条都写清为什么。别往这里堆东西。
 */

/* ------------------------------------------------------------------
 * 1. 列表封面统一比例
 *
 * 原站列表用的是 EyouCMS 生成的缩略图 /uploads/thumb/1429_880/xxx，
 * 全部裁成 1429×880，所以卡片高度整齐。我们用的是**原图**
 * （理由见 components/CoverImg.astro），各种比例都有，不管就会参差不齐。
 *
 * 1429/880 就是原站缩略图的比例，别改成 16/9 —— 那会让卡片高度和老站差一截。
 *
 * 选择器只认 .wj-cover，那个类由 CoverImg.astro 统一挂上。
 * 按容器类名列的话（.art-list img、.two img …），每加一处列表就要记得
 * 回来补一条，迟早漏一个 —— kenibaimei 就漏过首页那个宫格。
 * ------------------------------------------------------------------ */
.wj-cover {
  display: block;
  width: 100%;
  aspect-ratio: 1429 / 880;
  object-fit: cover;
}

/* aspect-ratio 在很老的浏览器上不认（iOS < 15）。退化成固定比例的内边距，
   总比高矮不齐好；支持的浏览器会用上面那条覆盖掉它。 */
@supports not (aspect-ratio: 1 / 1) {
  .wj-cover {
    height: 0;
    padding-bottom: 61.58%;   /* 880 / 1429 */
  }
}

/* ------------------------------------------------------------------
 * 2. 视觉隐藏但屏幕阅读器和搜索引擎读得到
 *
 * 用在「本页确实有主题、但原版面上没有任何可见标题元素」的地方
 * （列表页顶部只有一排 tab，首页顶端直接是轮播）。
 *
 * 不是 display:none / visibility:hidden —— 那两种搜索引擎会当作
 * 刻意隐藏的内容打折甚至判为作弊，屏幕阅读器也读不到。
 * ------------------------------------------------------------------ */
.wj-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------
 * 3. 正文里的 h1 降级成 h2 之后的补差（packages/core/seo-text.mjs 的 demoteH1）
 *
 * 详情页模板自己有一个 h1（文章标题），编辑在富文本里又敲 h1 当小标题，
 * 那些语义上就该是 h2，但**不能因此变小**。
 *
 * 值是**从源站的 resize.css 里读出来的**，不是照别的站推的：
 *     h1  font-size: 2.4rem
 *     h2  font-size: 1.8rem + letter-spacing: 1px
 * 其余（margin / padding / line-height / font-weight）被文件后面那条
 * `h1,h2,…,h6{margin:0;padding:0;line-height:1.5}` 拉平了，两者一致。
 * 所以只需还原这两项，渲染与降级前完全一致。
 * ------------------------------------------------------------------ */
h2.wj-was-h1 {
  font-size: 2.4rem;
  letter-spacing: normal;
}