/* blog-pages.css — 博客family页（blog / category / author）的**补位**样式表
 *
 * ⭐ 这个文件为什么存在，以及它**刻意不做**什么：
 * 本站 blog.html / category/*.html / author/*.html 各自带一个 3–5KB 的页内 <style>，
 * 真正在生效的版式都在那里面。所以本文件**只补那三个页内块与 blog-card.css 都没定义的东西**，
 * ⛔ 不重复定义它们已有的规则 —— 页内 <style> 在外部 link 之后，级联上外部一律压不过它，
 * 重复定义只会得到一个「加载了但毫无作用」的文件。
 * ⚠️ 1511 的 blog-card.css 就是这个下场（全站 0 处用 .blog-card-* 类名，纯备用件）。
 * 本文件按实测缺口写，逐条都是**当前全站 0 定义**的：
 *   · :focus-visible —— blog family 全部 0，键盘导航无可见焦点圈
 *   · prefers-reduced-motion —— 全部 0，而 blog-card.css 有 transform hover 动效
 *   · @media print   —— 全部 0
 *
 * 色板取自站点既有 token，⛔ 不引入新颜色：
 *   navy #0B3D5C · accent #E8541E · slate #5f6b78 · line #DDE3E8 · wash #F3F5F6
 *
 * ⚠️ 起草时我还加过一条 `.au-ctr` 容器规则，浏览器实测后删掉了：author 页的容器宽度
 *   其实由页内 `.au-wrap{max-width:var(--ctr-w);padding:0 24px}` 负责，我那条要么冗余
 *   要么被页内块压掉 —— 正是本文件开头要避免的「加载了但没作用」。
 *   ⭐ 留下的这四节都在浏览器 CSSOM 里实测确认存在且此前为 0。
 */

/* ── 1. 键盘可达：可见焦点圈（全站 blog family 原本 0 处） ───────────
 * ⛔ 不用 outline:none —— 那是把可达性删掉而不是做设计。
 * 只在键盘态（:focus-visible）显示，鼠标点击不出圈。 */
.blog-card a:focus-visible,
.blog-card-tag:focus-visible,
.blog-card-read-more:focus-visible,
.pg-btn:focus-visible,
.cat-card a:focus-visible,
.au-pcard a:focus-visible,
.blog-sidebar a:focus-visible{
  outline:3px solid #E8541E;outline-offset:2px;border-radius:4px
}
/* 深色底上的焦点圈换白，保证对比度 */
.blog-hero a:focus-visible,
.post-hero a:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* 跳到主内容（屏幕阅读器/键盘用户），默认藏起 */
.skip-to-content{position:absolute;left:-9999px;top:0}
.skip-to-content:focus{left:8px;top:8px;z-index:9999;background:#0B3D5C;color:#fff;
  padding-top:10px;padding-bottom:10px;padding-left:16px;padding-right:16px;border-radius:6px}

/* ── 2. prefers-reduced-motion（全站 blog family 原本 0 处）──────────
 * blog-card.css 有 transition:transform 与 :hover{transform:translateY(-3px)}，
 * 对前庭敏感用户应当停掉位移，⛔ 但不要把 hover 的可感知反馈一起删掉 ——
 * 位移换成边框色变化，信息不丢。 */
@media(prefers-reduced-motion:reduce){
  .blog-card,.blog-card:hover,
  .cat-card,.cat-card:hover,
  .au-pcard,.au-pcard:hover{transition:none;transform:none}
  .blog-card:hover{box-shadow:0 10px 30px rgba(17,24,39,.07);border-color:#E8541E}
  .blog-card-read-more:hover{gap:.4rem}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important}
}

/* ── 3. 打印（全站 blog family 原本 0 处）────────────────────────────
 * B2B 读者会把文章打出来带进会议。去掉导航/页脚/侧栏与转化件，展开链接。 */
@media print{
  .dm-menu,.dm-nav,#dynamic-menu-container,
  #topbar-container,.topbar,
  footer,#footer-container,
  .whatsapp-widget,#whatsapp-widget-container,
  .blog-sidebar,.article-sidebar,
  #rightbar-contactform-container,#rightbar-popularposts-container,
  .post-cta,.cta-banner,.sidebar-cta,.pg-btn{display:none !important}
  body{background:#fff !important;color:#111827 !important}
  .article-content,.post-content{max-width:none !important;width:100% !important}
  .article-content a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#5f6b78}
  .article-content img{max-width:100% !important;page-break-inside:avoid}
  h1,h2,h3{page-break-after:avoid}
  blockquote,table,figure{page-break-inside:avoid}
}

/* ── 4. 空态（列表/分类/作者页无文章时的兜底文案容器）──────────────
 * .empty-state 已在 blog-card.css 定义了基础样式；这里只补它没有的
 * 「作者页/分类页无文章」的次级说明行。 */
.empty-state__hint{display:block;margin-top:.5rem;font-size:.9rem;color:#5f6b78}