/* ==========================================================================
   博客列表版式（blog-03）
   --------------------------------------------------------------------------
   只按需加载：inc/enqueue.php 里 blog 版式才会引这个文件。
   对应模板：home.php / archive.php / search.php。

   结构是两栏：主列（文章卡片）+ 右侧栏（广告位、分类）。
   .aib-layout 那个 grid 在 style.css 的共用层里，这里只管两栏里面装什么。

   ── 两条贯穿全文件的约束 ──────────────────────────────────────────────

   一、**元信息级的次要文字（--ink-3）只准出现在白面上。**
   这一版的页面底是浅灰 #e9ecee。--ink-3（#647280）压在上面只有 4.26:1，
   不合格（见 style.css 令牌那段的推导）。所以带 --ink-3 的东西
   ——卡片下的时间戳、分类计数——都必须落在 .aib-card / .aib-panel
   这类白面里面。标题和正文用的 --ink / --ink-2 在灰底上是合格的
   （--ink-2 在 #e9ecee 上 7.0:1），所以 .blog-head 直接压在页面底上没问题。

   二、**强调色当文字用时一律取 --accent-dk，不取 --accent。**
   --accent 是为了"看得见"选的，不是为"读得清"选的：
   博客这一版的 #e8590c 在白底上只有 3.58:1，正文级字号过不了 AA。
   --accent-dk（#c94b06）是 4.68:1，合格。--accent 留给描边和填充。
   这不是这一版特有的问题，style.css 里有同样一批用法，见本文件末尾的待办。
   ========================================================================== */

/* ==========================================================================
   1. 主列
   ========================================================================== */

/* 整个两栏区的上下留白。
   用 padding-top / padding-bottom 这两个**长写属性**，不能用 padding 简写：
   这个元素同时带着 .aib-shell，而 .aib-shell 的左右内边距是 padding 简写写的。
   简写会一次性清掉四个方向，这里再写一次简写就等于把 .aib-shell 的
   左右留白抹成 0——而 blog.css 在 style.css 之后加载，会赢。 */
.aib-layout {
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-9);
}

.blog-main { min-width: 0; }

.blog-head {
  padding: var(--sp-6) 0 var(--sp-5);
}

.blog-head-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.35;
  color: var(--ink);
}

.blog-head-desc {
  margin-top: var(--sp-3);
  max-width: 46em;
  font-size: 14.5px;
  line-height: 1.75;
  /* 和标题一样直接压在浅灰页面底上，所以是 --ink-2 不是 --ink-3。
     --ink-2（#41525f）在 #e9ecee 上是 7.0:1。 */
  color: var(--ink-2);
}

/* --- 卡片列表 ----------------------------------------------------------- */

.blog-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.blog-card {
  overflow: hidden;      /* 缩略图贴到圆角上时不要溢出 */
  transition: border-color .16s ease, box-shadow .16s ease;
}
.blog-card:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow-1);
}

/* 缩略图。比例必须和 add_image_size('aish-card', 480, 300, true) 一致，
   否则图片加载完成时会撑一下卡片（CLS）。 */
.blog-card-thumb {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-2);
}
.blog-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.blog-card:hover .blog-card-thumb img { transform: scale(1.02); }

.blog-card-body {
  padding: var(--sp-5);
}

/*
 * 分类徽标改成**实底**，而不用 .aib-badge 默认的「强调色字 + 浅强调底」。
 * 原因还是对比度：--accent-dk（#c94b06）压在 --accent-soft（#fdeee4）
 * 上只有 4.12:1，差 0.38 不合格；而它当**底**、白字压上去是 4.68:1，合格。
 * 同一个色值，当底比当字多出半个档——这是浅色系里很常见的一个反直觉点。
 *
 * 不做 hover 变色：能过 AA 的两个橙之间空间太窄，任何变色都会跌回 4.5 以下。
 * 分类徽标本来就是"标签"不是"按钮"，不需要 hover 反馈来提示可点，
 * 靠下划线不该出现在这种方块上。
 */
.blog-cat {
  margin-bottom: var(--sp-3);
  background: var(--accent-dk);
  color: var(--on-accent);
}

/* 但是——**必须**显式把 hover 钉住，这不是"加个效果"，是"别被改坏"。
   全局那条 a:hover 的权重是 (0,1,1)，比 .blog-cat 的 (0,1,0) 高。
   不管的话，鼠标一移上去文字就被改成 --accent，也就是橙字压橙底，
   整个标签上的字直接看不见了。
   这个坑是"全局元素选择器 + 组件类"混用时的通病：组件类写得再对，
   也压不过一条针对元素本身的 hover。 */
a.blog-cat:hover {
  background: var(--accent-dk);
  color: var(--on-accent);
}

.blog-card-title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
}
.blog-card-title a { color: inherit; }
.blog-card-title a:hover { color: var(--accent-dk); }

.blog-card-excerpt {
  margin-top: var(--sp-3);
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink-2);
}
.blog-card-excerpt > * + * { margin-top: var(--sp-2); }
/* 摘要是从正文截的，里面可能带上正文的标题或超大图片。
   不在这里收一道，卡片会被一篇排版夸张的文章撑破。 */
.blog-card-excerpt h1,
.blog-card-excerpt h2,
.blog-card-excerpt h3 { font-size: 15px; font-weight: 600; }
.blog-card-excerpt img { display: none; }

.blog-card-meta {
  margin-top: var(--sp-4);
  font-size: 13px;
  /* 白面上，--ink-3 在这里是合格的（4.93:1）。
     这一条能在卡片里用，恰恰是因为卡片是白面。 */
  color: var(--ink-3);
}
.blog-card-meta > * + * { margin-left: var(--sp-3); }

/* --- 窄屏：卡片改成横排会挤，图直接不要了 ------------------------------- */

@media (max-width: 640px) {
  .blog-head { padding: var(--sp-5) 0 var(--sp-4); }
  .blog-head-title { font-size: 21px; }
  .blog-card-body { padding: var(--sp-4); }
  .blog-card-title { font-size: 17px; }
}

/* ==========================================================================
   2. 侧栏
   ========================================================================== */

/* .aib-side 的纵向堆叠、以及面板（.aib-panel）和分类列表的样式
   都在 style.css 的共用层里——文章页用的是同一个侧栏，
   那些规则不能只活在这一版的样式表里。

   这里只改**这一版的观感**，不动结构。

   两条关于位置的事实，改结构前先看这两条：
   1. 侧栏在 DOM 里排在主列**之后**，是网格把它放到右边的。
      用键盘 Tab 走一遍页面时，顺序是"所有文章 → 侧栏链接"，
      和视觉顺序不一致。这是有意的：主列是内容，侧栏是附属，
      读屏和爬虫该先拿到内容。
   2. 窄屏（≤900px）网格塌成一列，侧栏掉到页面最底下，
      那时候它顶部的广告位就不在首屏了。这是移动端的固有限制，
      不是 bug——手机上首屏本来就该留给内容和搜索框。 */

/* 这一版的页面底是浅灰，白面板自己就分得开，不必再画一圈线。
   用 border-color 而不是 border: 0——后者会少掉 2px 高度，
   侧栏里两个面板之间的间距会和别处对不上。 */
.layout-blog .aib-panel {
  border-color: transparent;
}

/* 侧栏里的广告位**一条尺寸都不覆写**。
   栏宽 280–320px，减掉面板内边距还剩 240px 左右，
   40px 图标 + 一行标题 + 两行描述放得下，没有"改成小一号"的必要。
   这种覆写最坑的地方在于：写的时候看着合理，等栏宽或字号变了，
   它就成了一条没人记得去改的硬编码，而且它藏在版式文件里、
   和共享层的那份规则隔着几百行。

   有一个要看真东西才知道的点：海报形态（.aib-ad--poster）用的是
   object-fit: cover，16:10 的框。上传的是竖版海报（比如 750×1000）时，
   上下会被裁掉，海报上的字可能被切。等后台真的投进来第一批海报时
   要实际看一眼——真被切了就改成 contain（会留灰边，但整张看得见），
   或者要求投放方按 16:10 出图。现在不预先猜。 */

/* ==========================================================================
   3. 搜索结果
   ========================================================================== */

/* 搜索页顶部再放一份完整的搜索区（输入框 + 三种搜索）。

   为什么不是只放三个类型按钮：搜完发现方向不对是常态，
   用户十有八九要**改词**而不是只换类型。只给类型按钮的话，
   改词还得滚回站头那个小输入框——而站头那个是紧凑版，
   在手机上滚回去之后它可能已经被浏览器地址栏的变化挤出视口了。

   这不是"多一个搜索框会让人不知道用哪个"的那个问题：
   搜索结果页上，用户已经不处在"我该从哪开始"的状态了。 */
.blog-types {
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
  background: var(--surface);
  border-radius: var(--radius);
}

/* ==========================================================================
   4. 空状态
   ========================================================================== */

.blog-empty {
  padding: var(--sp-9) var(--sp-5);
  text-align: center;
  background: var(--surface);
  border-radius: var(--radius);
}
.blog-empty-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.blog-empty-desc {
  margin-top: var(--sp-3);
  font-size: 14.5px;
  color: var(--ink-2);
}
.blog-empty .aib-btns {
  margin-top: var(--sp-6);
  justify-content: center;
}

/* ==========================================================================
   5. 待办：同样的对比度问题在 :root（首页 / 文章页）上还没解决
   --------------------------------------------------------------------------
   博客这一版是靠**调低强调色的明度**一次解决的（见 style.css 的 .layout-blog：
   --accent 从 #e8590c 改成 #c94b06）。因为 .layout-blog 覆写了令牌值，
   这一版里所有"强调色当文字 / 强调色当底压白字"的地方自动都合格了，
   不需要逐条去改：

     .aib-search-submit           白字压 --accent   4.68:1 ✓
     .aib-pager .page-numbers.current  同上          4.68:1 ✓
     .aib-pager .page-numbers:hover    强调色当文字   4.68:1 ✓
     .aib-nav a:hover                 同上          4.68:1 ✓
     .aib-list-title a:hover 等       同上          4.68:1 ✓

   **首页和文章页没有覆写 --accent，用的是 :root 的 #de3f27，
   那个值有两个地方不够：**

     白字压 #de3f27（.aib-btn--primary、.aib-search-submit、
     .aib-pager .page-numbers.current）          4.33:1，差 0.17
     #de3f27 当文字压在白底上（a:hover、
     .aib-list-title a:hover、.aib-crumb a:hover …） 4.33:1，同样不够

   修法和博客一样：把 :root 的 --accent 下调到 --accent-dk 那一档
   （#bf3220，5.69:1），--accent-dk 再往下一档。

   没直接改，是因为 :root 的红色是整站的主色——按钮、导航、焦点环、
   选中文字全跟着它走，改完首页的观感会有可见变化，这个该用户拍板。
   顺带一提它同时会修好 home.css 里那两条（home.css:47 的热词 hover、
   home.css:236 的介绍区链接）。
   ========================================================================== */