/* ============================================================
   分类页改版（XZ · 2026-10-28）
   作用域挂在两个由模板输出的 class 上，而不是 body：
   · .pattern-center.xz-cat-hero —— 分类页横幅（inc/theme-plus.php 输出）
   · .xz-cat-scope              —— 分类页内容区 #primary（archive.php 输出）
   原因：主题的 PJAX 只换内容、不更新 body 的 class，用 body.category 会在
   PJAX 跳转后失效；挂在内容自带的 class 上则随内容一起替换，始终正确。
   视觉与主题同源：玻璃白卡 / 圆角 10px / 0 1px 30px -4px #e8e8e8
   ============================================================ */
.xz-cat-scope,
.pattern-center.xz-cat-hero{--xz-accent:#5aa7f4;--xz-ink:#3d3d3d;--xz-sub:#8b96a1;--xz-line:rgba(0,0,0,.09)}

/* ---------- 1. 横幅：高度自适应 + 遮罩 + 信息层次 ---------- */
.pattern-center.xz-cat-hero{
  display:flex;align-items:center;justify-content:center;
  height:auto!important;min-height:420px;position:relative;overflow:hidden;
}
.pattern-center.xz-cat-hero .pattern-attachment{
  position:absolute;inset:0;height:auto!important;width:100%;
  background-size:cover;background-position:center;
}
.pattern-center.xz-cat-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,13,21,.58) 0%,rgba(8,13,21,.44) 38%,rgba(8,13,21,.82) 100%);
}
.pattern-center.xz-cat-hero header.pattern-header{
  position:relative!important;top:auto!important;left:auto!important;right:auto!important;
  z-index:2;width:100%;max-width:860px;margin:0 auto;
  padding:104px 24px 58px;display:flex;flex-direction:column;align-items:center;
}

/* 面包屑 */
.pattern-center.xz-cat-hero .xz-crumb{
  display:flex;align-items:center;gap:8px;margin-bottom:14px;
  font-size:13px;letter-spacing:.4px;color:rgba(255,255,255,.82);
}
.pattern-center.xz-cat-hero .xz-crumb a{color:rgba(255,255,255,.82);text-decoration:none}
.pattern-center.xz-cat-hero .xz-crumb a:hover{color:#fff}
.pattern-center.xz-cat-hero .xz-crumb i{font-size:9px;opacity:.55}
.pattern-center.xz-cat-hero .xz-crumb .cur{color:#fff;font-weight:500}

/* 标题 */
.pattern-center.xz-cat-hero h1.cat-title{
  width:auto!important;margin:0!important;font-size:42px;line-height:1.3;
  letter-spacing:3px;color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.4);
}

/* 描述：限宽 + 3 行截断 */
.pattern-center.xz-cat-hero .cat-des{
  display:block;width:100%;max-width:720px;margin-top:16px;
}
.pattern-center.xz-cat-hero .cat-des p{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  margin:0;font-size:14.5px;line-height:1.95;letter-spacing:.35px;
  color:rgba(255,255,255,.94);text-align:center;text-shadow:0 1px 12px rgba(0,0,0,.5);
}

/* 横幅底部小字 */
.pattern-center.xz-cat-hero .xz-hero-foot{
  display:flex;align-items:center;gap:12px;margin-top:20px;
  font-size:12px;color:rgba(255,255,255,.66);letter-spacing:.3px;
}
.pattern-center.xz-cat-hero .xz-hero-foot i{margin-right:6px;font-size:11px;opacity:.85}
.pattern-center.xz-cat-hero .xz-hero-foot .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5}

/* ---------- 1.5 横幅内：本栏目高频主题（2026-10-28 由米白卡移入横幅） ---------- */
.pattern-center.xz-cat-hero .xz-hero-tags{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;
  max-width:780px;margin-top:26px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.14);
}
.pattern-center.xz-cat-hero .xz-hero-tags-label{
  font-size:12px;color:rgba(255,255,255,.72);letter-spacing:.3px;margin-right:2px;
}
.pattern-center.xz-cat-hero .xz-hero-tags-label i{font-size:10px;margin-right:5px;opacity:.75}
.pattern-center.xz-cat-hero .xz-hero-tag{
  font-size:12.5px;line-height:1;padding:6px 12px;border-radius:999px;text-decoration:none;
  color:#fff;background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.36);text-shadow:0 1px 6px rgba(0,0,0,.35);
  transition:background .25s ease,border-color .25s ease;
}
.pattern-center.xz-cat-hero .xz-hero-tag:hover{
  background:rgba(255,255,255,.34);border-color:rgba(255,255,255,.6);color:#fff;
}
.pattern-center.xz-cat-hero .xz-hero-tag em{font-style:normal;margin-left:5px;font-size:11px;opacity:.62}

/* ---------- 2. 数据卡：落在横幅下方的白色区域 ---------- */
.xz-cat-scope .xz-overview{
  position:relative;margin:0;
  background:rgba(255,255,255,.92);
  /* 方案 A（2026-10-28）：去掉 backdrop-filter。
     原因：祖先 .wrapper / .pattern-center 有 filter:blur() 入场动画，
     filter 落下那一帧会让本卡片的背板缓存作废并重新采样，出现单帧丢底的闪烁；
     而这个 backdrop-filter 被下方 90% 白底挡住，实测视觉差仅 1.9/255。 */
  border:1px solid rgba(31,45,61,.06);border-radius:14px;
  box-shadow:0 2px 20px -12px rgba(31,45,61,.30);
  padding:20px 26px 18px;
}
.xz-cat-scope .xz-stats{display:grid;grid-template-columns:repeat(4,1fr)}
.xz-cat-scope .xz-stat{text-align:center;position:relative}
.xz-cat-scope .xz-stat+.xz-stat::before{
  content:"";position:absolute;left:0;top:14%;height:72%;width:1px;background:var(--xz-line);
}
.xz-cat-scope .xz-stat b{
  display:block;font-size:27px;line-height:1.2;font-weight:600;letter-spacing:.5px;
  color:var(--xz-ink);font-variant-numeric:tabular-nums;
}
.xz-cat-scope .xz-stat b em{font-style:normal;font-size:14px;margin-left:2px;opacity:.7}
.xz-cat-scope .xz-stat span{display:block;margin-top:6px;font-size:12px;color:var(--xz-sub);letter-spacing:.3px}

/* ---------- 3. 列表头 ---------- */
.xz-cat-scope .xz-list-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin:38px 2px 4px;
}
.xz-cat-scope .xz-list-head h2{
  font-size:19px;font-weight:600;letter-spacing:1.5px;color:var(--xz-ink);margin:0;
}
.xz-cat-scope .xz-list-head h2::before{
  content:"";display:inline-block;width:4px;height:15px;border-radius:2px;
  background:var(--xz-accent);margin-right:10px;vertical-align:-2px;
}
.xz-cat-scope .xz-list-head .xz-count{font-size:12.5px;color:var(--xz-sub);letter-spacing:.3px}

/* ---------- 4. 卡片：把 152px 的摘要列放宽（奇偶镜像都要改） ---------- */
@media (min-width:768px){
  .xz-cat-scope .post-list-thumb{height:300px}

  /* 奇数卡：图左 56% / 文右 41% */
  .xz-cat-scope .post-list-thumb .post-thumb{left:0;right:auto;width:56%}
  .xz-cat-scope .post-list-thumb .post-excerpt{
    position:absolute;left:57%;top:0;bottom:0;width:41%;
    max-height:none;height:auto;margin:0;padding:0 20px 0 18px;
    display:flex;flex-direction:column;justify-content:center;
  }
  .xz-cat-scope .post-list-thumb .post-excerpt p{
    max-height:none;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;
    overflow:hidden;font-size:13.5px;line-height:1.85;color:#707b86;
    width:100%;align-self:stretch;text-align:left;
  }
  .xz-cat-scope .post-list-thumb .ai-excerpt-tip{margin:0 0 10px;font-size:11.5px;color:#a7b1bb}
  .xz-cat-scope .post-list-thumb .post-title{bottom:7%;left:2%;max-width:52%;padding:10px 14px}
  .xz-cat-scope .post-list-thumb .post-title h3{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    font-size:17px;line-height:1.5;letter-spacing:1px;
  }
  .xz-cat-scope .post-list-thumb .post-date{left:2%}
  .xz-cat-scope .post-list-thumb .post-meta{right:45.5%;left:auto;max-width:52%}

  /* 偶数卡：文左 41% / 图右 56% */
  .xz-cat-scope .post-list-thumb:nth-child(2n) .post-thumb{left:auto;right:0}
  .xz-cat-scope .post-list-thumb:nth-child(2n) .post-excerpt{left:2%}
  .xz-cat-scope .post-list-thumb:nth-child(2n) .post-title{left:45%}
  .xz-cat-scope .post-list-thumb:nth-child(2n) .post-date{left:45%}
  .xz-cat-scope .post-list-thumb:nth-child(2n) .post-meta{left:auto;right:2%;max-width:50%}
}

.xz-cat-scope .xz-readmore-wrap{margin-top:12px}
.xz-cat-scope .xz-readmore{
  display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  font-size:12px;color:var(--xz-accent);text-decoration:none;letter-spacing:.3px;
}
.xz-cat-scope .xz-readmore i{font-size:10px;transition:transform .25s ease}
.xz-cat-scope .xz-readmore:hover i{transform:translateX(3px)}

/* ---------- 5. 列表之后的区块 ---------- */
.xz-cat-scope .xz-block{margin-top:44px}
.xz-cat-scope .xz-block-head{
  display:flex;align-items:baseline;gap:12px;margin:0 2px 16px;
}
.xz-cat-scope .xz-block-head h2{
  margin:0;font-size:17px;font-weight:600;letter-spacing:1.2px;color:var(--xz-ink);
}
.xz-cat-scope .xz-block-head h2::before{
  content:"";display:inline-block;width:4px;height:14px;border-radius:2px;
  background:var(--xz-accent);margin-right:10px;vertical-align:-1px;
}
.xz-cat-scope .xz-block-head span{font-size:12px;color:var(--xz-sub)}

.xz-cat-scope .xz-cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.xz-cat-scope .xz-cat-card{
  display:block;text-decoration:none;border-radius:10px;overflow:hidden;
  background:rgba(255,255,255,.86);border:1.5px solid #fff;
  box-shadow:0 1px 30px -4px #e8e8e8;transition:transform .3s ease,box-shadow .3s ease;
}
.xz-cat-scope .xz-cat-card:hover{transform:translateY(-3px);box-shadow:0 1px 30px -2px #dcdcdc}
.xz-cat-scope .xz-cat-cover{
  display:block;height:82px;background-size:cover;background-position:center;
}
.xz-cat-scope .xz-cat-name{
  display:block;padding:10px 12px 0;font-size:13.5px;color:var(--xz-ink);letter-spacing:.5px;
}
.xz-cat-scope .xz-cat-num{display:block;padding:3px 12px 11px;font-size:11.5px;color:var(--xz-sub)}

.xz-cat-scope .xz-explore{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.xz-cat-scope .xz-exp-item{
  display:flex;gap:12px;align-items:center;text-decoration:none;
  background:rgba(255,255,255,.86);border:1.5px solid #fff;border-radius:10px;
  padding:10px;box-shadow:0 1px 30px -4px #e8e8e8;transition:transform .3s ease,box-shadow .3s ease;
}
.xz-cat-scope .xz-exp-item:hover{transform:translateY(-2px);box-shadow:0 1px 30px -2px #dcdcdc}
.xz-cat-scope .xz-exp-thumb{
  flex:0 0 76px;height:54px;border-radius:7px;background-size:cover;background-position:center;
  background-color:#eef1f4;
}
.xz-cat-scope .xz-exp-body{min-width:0}
.xz-cat-scope .xz-exp-body strong{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:13px;line-height:1.55;color:var(--xz-ink);font-weight:500;
}
.xz-cat-scope .xz-exp-body em{
  display:block;margin-top:5px;font-style:normal;font-size:11.5px;color:var(--xz-sub);
}

/* ---------- 6. 分页：仅保留按钮，计数已上移到列表头 ---------- */
.xz-cat-scope #pagination{margin-top:34px;padding-bottom:8px}

/* ---------- 7. 移动端 ---------- */
@media (max-width:768px){
  .pattern-center.xz-cat-hero{min-height:300px}
  .pattern-center.xz-cat-hero header.pattern-header{padding:56px 20px 64px}
  .pattern-center.xz-cat-hero h1.cat-title{font-size:27px;letter-spacing:2px}
  .pattern-center.xz-cat-hero .cat-des{margin-top:12px}
  .pattern-center.xz-cat-hero .cat-des p{font-size:13.5px;line-height:1.85;-webkit-line-clamp:4}
  .pattern-center.xz-cat-hero .xz-hero-foot{margin-top:14px;font-size:11.5px}
  .xz-cat-scope .xz-overview{margin:0;padding:16px 12px 14px;border-radius:12px}
  .xz-cat-scope .xz-stats{grid-template-columns:repeat(2,1fr);row-gap:16px}
  .xz-cat-scope .xz-stat:nth-child(3)::before{display:none}
  .xz-cat-scope .xz-stat b{font-size:22px}
  .pattern-center.xz-cat-hero .xz-hero-tags{margin-top:14px;padding-top:12px;gap:6px}
  .pattern-center.xz-cat-hero .xz-hero-tag{font-size:11.5px;padding:5px 10px}
  .xz-cat-scope .xz-list-head{margin-top:26px}
  .xz-cat-scope .xz-cat-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .xz-cat-scope .xz-cat-cover{height:70px}
  /* 5 个分类在两列网格里最后一个占满整行，避免留空 */
  .xz-cat-scope .xz-cat-grid > :last-child:nth-child(odd){grid-column:1 / -1}
  .xz-cat-scope .xz-explore{grid-template-columns:1fr}
  .xz-cat-scope .xz-block{margin-top:34px}
  /* 移动端卡片标题限两行，避免被卡片下沿切掉 */
  .xz-cat-scope .post-list-thumb .post-title h3{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    font-size:16px;line-height:1.45;letter-spacing:1px;
  }
}

/* ---------- 8. 深色模式（body.dark） ---------- */
body.dark .xz-cat-scope .xz-overview,
body.dark .xz-cat-scope .xz-cat-card,
body.dark .xz-cat-scope .xz-exp-item{
  background:rgba(38,44,52,.86);border-color:rgba(255,255,255,.08);
  box-shadow:0 10px 40px -14px rgba(0,0,0,.6);
}
body.dark .xz-cat-scope .xz-stat b,
body.dark .xz-cat-scope .xz-list-head h2,
body.dark .xz-cat-scope .xz-block-head h2,
body.dark .xz-cat-scope .xz-cat-name,
body.dark .xz-cat-scope .xz-exp-body strong{color:#d7dde4}
body.dark .xz-cat-scope .xz-stat span,
body.dark .xz-cat-scope .xz-cat-num,
body.dark .xz-cat-scope .xz-exp-body em,
body.dark .xz-cat-scope .xz-list-head .xz-count,
body.dark .xz-cat-scope .xz-block-head span{color:#8b96a1}
body.dark .xz-cat-scope .post-list-thumb .post-excerpt p{color:#9aa4ad}
body.dark .xz-cat-scope .post-list-thumb .post-excerpt .ai-excerpt-tip{color:#7c8791}