/* ============================================================
   专题
   ------------------------------------------------------------
   专题跟标签是两件事，所以这里也就**不复用标签那套样式**：
   标签是一排小胶囊（「讲什么的」），专题是带序号的路线（「先读哪篇」）。
   共用同一批材料：2px 墨线 + 贴纸圆角 + 硬阴影，站里其他地方也是这些。

   三个页面共用这一份：
     · /topic        专题栏（卡片网格）
     · /topic/:slug  专题门面（带序号的篇目）
     · /p/:slug      顶部挂条 + 底部「专题内上下篇」
   ============================================================ */

/* 页头那行「共 N 篇 · 读完约 X 分钟」 */
.topicHead__meta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:.9em 0 0;
  font-size:var(--step-meta); letter-spacing:.08em; color:var(--ink-60);
}
.topicHead__meta .dot{ width:5px; height:5px; border-radius:50%; background:var(--hay); }

/* ---------------- 专题栏：卡片网格 ---------------- */

.topicGrid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:clamp(18px,2.4vw,28px);
}

.topicCard{ display:flex; }
.topicCard__link{
  display:flex; flex-direction:column; gap:14px;
  width:100%; text-decoration:none; color:inherit;
  background:var(--milk);
  border:var(--line) solid var(--ink);
  border-radius:var(--r-sticker);
  box-shadow:5px 6px 0 var(--ink);
  padding:0;                       /* 封面要贴到边，内边距放在 body 上 */
  overflow:hidden;                 /* 圆角生效：封面是方图 */
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.topicCard__link:hover{
  transform:translate(-2px,-3px);
  box-shadow:8px 9px 0 var(--ink);
}
.topicCard__link:active{
  transform:translate(2px,2px);
  box-shadow:1px 2px 0 var(--ink);
}

.topicCard__cover{
  display:block; position:relative;
  aspect-ratio:16/9; overflow:hidden;
  border-bottom:var(--line) solid var(--ink);
  background:var(--mist);
}
.topicCard__cover img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* 没传封面时的占位：不画一张假图，直接把「几篇」写成画面本身 ——
   读者关心的是这个专题有多长，不是配图好不好看。 */
.topicCard__cover--ph{
  display:flex; align-items:center; justify-content:center; gap:4px;
  /* 斜纹底，跟站里 hero 那片的田地是同一种处理 */
  background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--mist) 70%, var(--milk)) 0 10px,
      var(--mist) 10px 20px);
}
.topicCard__cover--ph b{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(2.2rem,5vw,3.2rem); line-height:1;
  color:var(--pasture);
  font-variant-numeric:tabular-nums;
}
.topicCard__cover--ph i{
  font-style:normal; font-size:var(--step-meta); color:var(--pasture);
  align-self:flex-end; padding-bottom:.5em; letter-spacing:.1em;
}

.topicCard__body{
  display:flex; flex-direction:column; gap:8px;
  padding:16px 18px 4px;
}
.topicCard__name{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--step-h3); line-height:1.35;
}
.topicCard__intro{
  font-size:.95rem; line-height:1.75; color:var(--ink-60);
  /* 简介可能写很长，卡片高度不齐会很难看，两行截断 */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;
}
.topicCard__meta{
  font-size:var(--step-meta); letter-spacing:.08em; color:var(--ink-60);
}
.topicCard__go{
  padding:4px 18px 16px;
  font-size:var(--step-meta); letter-spacing:.1em; color:var(--pasture);
}
.topicCard__link:hover .topicCard__go{ color:var(--leaf); }

/* ---------------- 专题门面：带序号的篇目 ---------------- */

.topicItems{
  list-style:none; margin:0; padding:0;
  border-top:var(--line) solid var(--ink);
}

.topicItem{ border-bottom:var(--hair) solid var(--ink); }
.topicItem:last-child{ border-bottom:var(--line) solid var(--ink); }

.topicItem__link{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:baseline;
  gap:0 clamp(16px,2.4vw,30px);
  padding:18px 2px 20px;
  text-decoration:none; color:inherit;
  transition:background .3s var(--ease), padding-left .3s var(--ease);
}
.topicItem__link:hover{ background:var(--leaf-14); padding-left:14px; }

/* 序号：干草黄方块 + 墨线，是这一页最重要的信息 ——
   「第几篇」决定了读者从哪儿开始，比标题本身还先看。 */
.topicItem__no{
  font-family:var(--font-display); font-weight:900;
  font-size:1.15rem; line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  background:var(--hay);
  border:var(--hair) solid var(--ink);
  border-radius:6px;
  min-width:2.4em; padding:.42em .3em;
  text-align:center;
  align-self:start;
}

.topicItem__main{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.topicItem__title{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--step-h3); line-height:1.4;
}
.topicItem__ex{
  font-size:.95rem; line-height:1.75; color:var(--ink-60);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;
}
.topicItem__meta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:var(--step-meta); letter-spacing:.08em; color:var(--ink-60);
}
.topicItem__meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--hay); }

.topicItem__arrow{
  font-size:1.1rem; color:var(--ink-60);
  opacity:0; transform:translateX(-6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.topicItem__link:hover .topicItem__arrow{ opacity:1; transform:none; color:var(--pasture); }

/* 「别的专题」这一行是 article.css 里 .anotherTags 的 flex 容器，
   它的子项默认 stretch —— 胶囊有内边距、这行小字没有，于是文字会顶着上沿、
   跟胶囊里的字错开半行。居中对齐一下就好了。
   （标签页没有这行小字，全是同高的胶囊，所以这条对它没有影响。） */
.anotherTags{ align-items:center; }
.anotherTags__h{
  font-size:var(--step-meta); letter-spacing:.1em; color:var(--ink-60);
}

/* ---------------- 文章页：顶部挂条 ---------------- */

.topicBar{
  display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 16px;
  padding:7px 14px 8px;
  text-decoration:none; color:inherit;
  background:var(--milk);
  border:var(--line) solid var(--ink);
  border-radius:var(--r-pill);
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.topicBar:hover{
  transform:translate(-1px,-1px);
  box-shadow:4px 5px 0 var(--ink);
  background:color-mix(in srgb, var(--leaf) 16%, var(--milk));
}
.topicBar:active{ transform:translate(2px,2px); box-shadow:0 0 0 var(--ink); }

.topicBar__badge{
  font-family:var(--font-display); font-weight:700;
  font-size:.72rem; letter-spacing:.14em;
  color:var(--milk); background:var(--pasture);
  border-radius:var(--r-pill);
  padding:3px 9px 4px;
}
.topicBar__name{ font-weight:700; }
.topicBar__seq{
  font-size:var(--step-meta); letter-spacing:.08em; color:var(--ink-60);
  font-variant-numeric:tabular-nums;
}
.topicBar__go{
  font-size:var(--step-meta); letter-spacing:.08em; color:var(--pasture);
}

/* ---------------- 文章页：专题内上下篇 ---------------- */

/* 跟 .artNav（全站按时间的前后篇）刻意长得不一样：
   那条是「博客里前后发了什么」，这条是「这条路线接着读哪篇」，
   读者要能一眼分清，所以这里多一个标题行、并用深绿底标出所属专题。 */
.topicNav{ margin-top:clamp(38px,6vh,60px); }

.topicNav__h{
  margin:0 0 14px;
  font-size:var(--step-meta); letter-spacing:.1em; color:var(--ink-60);
}
.topicNav__h a{
  color:var(--pasture); text-decoration:none;
  border-bottom:var(--hair) solid currentColor;
}
.topicNav__h a:hover{ color:var(--leaf); }

.topicNav__row{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,3vw,36px);
}
.topicNav__item{
  display:block; text-decoration:none; color:inherit;
  background:var(--milk);
  border:var(--line) solid var(--ink);
  border-radius:var(--r-sticker);
  box-shadow:4px 5px 0 var(--ink);
  padding:14px 18px 16px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.topicNav__item span{
  display:block; font-size:var(--step-meta); letter-spacing:.1em;
  color:var(--ink-60); margin-bottom:6px;
}
.topicNav__item b{
  display:block; font-size:var(--step-h3); font-weight:400; line-height:1.5;
}
.topicNav__item--next{ text-align:right; }
.topicNav__item--prev:hover{ transform:translate(-2px,-2px); background:var(--leaf-14); }
.topicNav__item--next:hover{ transform:translate(2px,-2px); background:var(--hay-30); }
.topicNav__item:active{ transform:translate(2px,2px); box-shadow:1px 2px 0 var(--ink); }

/* ---------------- 空态 ---------------- */

.topicEmpty{
  max-width:52ch; margin:0;
  padding:22px 24px 24px;
  background:var(--milk);
  border:var(--line) solid var(--ink);
  border-radius:var(--r-sticker);
  box-shadow:5px 6px 0 var(--ink);
  line-height:1.9;
}

/* ---------------- 窄屏 ---------------- */

@media (max-width:760px){
  .topicGrid{ grid-template-columns:minmax(0,1fr); }

  /* 序号那一列在窄屏太占地方，改成标题上方的一行小标签 */
  .topicItem__link{
    grid-template-columns:minmax(0,1fr) auto;
    row-gap:8px;
  }
  /* 顺序是 no / main / arrow：no 独占第一行，剩下两个自动落到第二行的两列，
     所以**别**给 arrow 显式指定行列 —— 那样会跟跨列的 no 撞在一起。 */
  .topicItem__no{
    grid-column:1 / -1;
    justify-self:start;
    min-width:0; padding:.32em .7em;
    font-size:1rem;
  }

  .topicNav__row{ grid-template-columns:minmax(0,1fr); }
  .topicNav__item--next{ text-align:left; }

  /* 挂条在窄屏别占两行：把「看全套」收掉，点整条本来就能进专题 */
  .topicBar__go{ display:none; }
}