/* === 专题列表页 & 详情页样式（规约骨架 + 杂志加料） ===
   前提：复用 style.css 的全局变量与已有组件
   --bg / --bg2 / --panel / --panel2 / --card / --line / --line2
   --text / --muted / --dim / --shadow
   --amber / --blue / --green / --coral / --cyan / --purple / --pink / --lime
   --disp / --body / --mono
   已复用组件：.sec / .sec-head / .sites / .site / .coll / .fab / .reveal
   规约 class：.collection-detail-hero / .editor-note / .coll-section / .coll-sec-no
              / .coll-sec-head / .coll-sec-body / .section-tools / .collection-footer-count
   杂志加料：水印编号、引号卷首语、hover 上浮+箭头、连载落版、scroll reveal、亮暗主题氛围底
*/

/* ================= 0. 页面结构件 ================= */
.page-main{
  max-width:1360px;margin:0 auto;padding:32px 28px 90px;
}
.page-main .sec{margin-top:0}

/* ================= 1. 专题列表页 (Collections Hub) ================= */
/* .colls / .coll 复用 style.css，此处只补充骨架屏与空态 */
.colls.is-loading{pointer-events:none}

/* 骨架屏 */
.coll-skeleton{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
.skel-card{
  height:150px;border-radius:16px;
  background:color-mix(in srgb,var(--panel) 60%,transparent);
  border:1px solid var(--line);position:relative;overflow:hidden;
}
.skel-card::after{
  content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,
    color-mix(in srgb,var(--text) 8%,transparent),transparent);
  animation:skelShimmer 1.4s infinite;
}
@keyframes skelShimmer{100%{transform:translateX(100%)}}

/* loading / 错误 / 空态文字 */
.coll-status{
  padding:48px 20px;text-align:center;color:var(--muted);
  font-size:14px;border:1px dashed var(--line2);border-radius:18px;
  background:color-mix(in srgb,var(--panel) 40%,transparent);
}

/* ================= 2. 专题详情页首屏 (Hero) ================= */
/* 规约1: 首屏第一个内容元素是 lede/标题文本块，工具卡不得出现在其上方
   规约2: 禁止任何 cover img / banner <img>，首屏仅 大数字 + accent + lede 文本
   杂志加料: hero 给 accent 径向渐变氛围底（亮/暗主题都可见） */
.collection-detail-hero{
  max-width:1100px;margin:0 auto;padding:28px 32px 32px;
  border-bottom:1px solid var(--line);
  border-radius:0 0 20px 20px;
  position:relative;overflow:hidden;
  /* accent 径向渐变氛围底 */
  background:
    radial-gradient(ellipse 70% 80% at 15% 0%,color-mix(in srgb,var(--c) 12%,transparent),transparent 60%),
    radial-gradient(ellipse 60% 60% at 90% 100%,color-mix(in srgb,var(--c) 7%,transparent),transparent 50%);
}
/* CSS 强制：禁止任何 cover/banner 图片 */
.collection-detail-hero img{display:none !important}

/* 面包屑 */
.coll-crumb{
  font:600 12px/1 var(--mono);letter-spacing:1.5px;
  color:var(--muted);margin:0 0 24px;position:relative;z-index:1;
}
.coll-crumb a{color:var(--muted);transition:color .2s}
.coll-crumb a:hover{color:var(--c)}

/* hero 元数据行：水印编号 + 色块 tag + kicker */
.coll-hero-meta{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:14px;position:relative;z-index:1;
}
/* 水印编号（大数字，13% 透明 accent） */
.coll-hero-watermark{
  font-family:'Space Grotesk',var(--mono);font-weight:700;
  font-size:clamp(3rem,7vw,5rem);line-height:.8;
  color:color-mix(in srgb,var(--c) 18%,transparent);
  letter-spacing:-.04em;
}
/* 色块 tag（主分类图标 + accent 底色） */
.coll-hero-tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600;
  color:var(--c);border:1px solid color-mix(in srgb,var(--c) 35%,transparent);
  background:color-mix(in srgb,var(--c) 12%,transparent);
}
/* kicker（主分类 EN · CURATED） */
.coll-hero-kicker{
  font:600 11px/1 var(--mono);letter-spacing:.22em;
  color:var(--dim);text-transform:uppercase;
}

/* h1 展示字体大标题 */
.coll-title{
  font-family:var(--disp);font-weight:400;
  font-size:clamp(32px,5vw,56px);line-height:1.1;letter-spacing:1px;
  margin:0 0 20px;color:var(--text);position:relative;z-index:1;
}

/* ===== lede 卷首语 (.editor-note) ===== */
/* 杂志加料: 左 3px accent 实色竖线 + 左上装饰大引号伪元素 + 首句 lead 加粗上色 */
.editor-note{
  position:relative;font-size:16px;line-height:1.85;
  color:color-mix(in srgb,var(--text) 86%,var(--muted));
  max-width:62ch;margin:0 0 28px;padding:22px 24px 22px 28px;border-radius:14px;
  background:color-mix(in srgb,var(--c) 6%,transparent);
  border-left:3px solid var(--c);
}
/* 左上装饰大引号 */
.editor-note::before{
  content:'\201C';position:absolute;top:-6px;left:10px;
  font-family:var(--disp);font-size:52px;line-height:1;
  color:var(--c);opacity:.22;pointer-events:none;
}
/* 首句 lead 加粗上色 */
.editor-note .editor-note-lead{
  font-weight:700;color:var(--c);
}

/* 大数字统计（去重工具数 + accent） */
.coll-stat{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin-top:6px;position:relative;z-index:1;
}
.coll-stat-num{
  font-family:'Space Grotesk',var(--mono);font-weight:700;
  font-size:clamp(56px,9vw,96px);line-height:.9;color:var(--c);
  letter-spacing:-.02em;
}
.coll-stat-label{
  font:600 12px/1.4 var(--mono);letter-spacing:.22em;color:var(--muted);
  text-transform:uppercase;
}
.coll-stat-label b{color:var(--text);font-weight:700}

/* 来源标记（AI 草稿等） */
.coll-source{
  margin:16px 0 0;font:600 11px/1 var(--mono);letter-spacing:.08em;
  color:var(--dim);display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px;border-radius:999px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--panel) 50%,transparent);
  position:relative;z-index:1;
}

/* ================= 3. Section 渲染 ================= */
/* 渲染顺序: 序号水印(accent 13%) → heading → body(观点在前) → .site 卡(在后) */
.coll-sections{margin-top:48px}
.coll-section{
  margin-bottom:64px;scroll-margin-top:96px;
}
/* 序号 + 标题容器 */
.coll-sec-head{
  position:relative;display:flex;align-items:flex-start;gap:16px;
  margin-bottom:20px;min-height:60px;
}
/* 序号水印：clamp(5rem,12vw,9rem) accent 13% 透明，叠在标题后 */
.coll-sec-no{
  position:absolute;right:0;top:-.15em;
  font-family:'Space Grotesk',var(--mono);font-weight:700;
  font-size:clamp(5rem,12vw,9rem);line-height:.85;
  color:color-mix(in srgb,var(--c) 13%,transparent);
  letter-spacing:-.04em;pointer-events:none;z-index:0;
}
/* section 标题用展示字体 ZCOOL QingKe HuangYou */
.coll-sec-heading{
  position:relative;z-index:1;
  font-family:var(--disp);font-weight:400;
  font-size:clamp(22px,3vw,30px);letter-spacing:1px;margin:0;color:var(--text);
}
/* 正文（观点），必须出现在工具卡之前 */
.coll-sec-body{
  font-size:15px;line-height:1.85;color:var(--muted);
  max-width:70ch;margin:0 0 22px;
}

/* 工具卡网格复用 .sites */
.section-tools{margin-top:4px}

/* ================= 4. 工具卡 hover 杂志加料 ================= */
/* 杂志加料: 上浮 + accent 边框亮起 + 右上箭头滑出（加在 .site 上，不动 app.js） */
.coll-section .site{
  transition:transform .28s cubic-bezier(.22,1,.36,1),
             border-color .28s ease,box-shadow .28s ease;
}
.coll-section .site:hover{
  transform:translateY(-6px);
  border-color:color-mix(in srgb,var(--c) 50%,var(--line2));
  box-shadow:0 14px 32px color-mix(in srgb,var(--c) 14%,transparent),
             0 0 0 1px color-mix(in srgb,var(--c) 20%,transparent);
}
/* 右上箭头滑出 */
.coll-section .site .s-arrow{
  position:absolute;right:10px;bottom:10px;
  font-size:16px;font-weight:700;color:var(--c);
  opacity:0;transform:translate(-8px,8px);
  transition:opacity .25s ease,transform .25s cubic-bezier(.22,1,.36,1);
  pointer-events:none;z-index:2;
}
.coll-section .site:hover .s-arrow{
  opacity:.8;transform:translate(0,0);
}

/* ================= 5. 工具卡内 3D 评分（复用 detail.html 的 .score 组件语言） ================= */
/* 规约5: 复用已有工具卡组件 .site（含收藏 fav-btn），此处仅补充评分行 */
.site .dt-scores{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px;
}
.site .score{
  border:1px solid var(--line);border-radius:8px;padding:6px 8px;
  background:color-mix(in srgb,var(--bg) 55%,transparent);
}
.site .score .sl{
  display:flex;justify-content:space-between;align-items:baseline;
  font:600 9.5px/1 var(--mono);letter-spacing:.5px;color:var(--muted);
  margin-bottom:5px;
}
.site .score .sv{color:var(--c);font-weight:700;font-size:11px}
.site .score .sb{
  height:4px;border-radius:3px;overflow:hidden;
  background:color-mix(in srgb,var(--line) 80%,transparent);
}
.site .score .sb i{
  display:block;height:100%;width:var(--w,0);border-radius:3px;background:var(--c);
  transition:width 1s cubic-bezier(.3,.8,.3,1);
}

/* ================= 6. 收尾落版：编者结语 + 连载递送 ================= */
/* 杂志加料: 工具列表后加"编者结语 + ← 所有专题 / 下一篇·xxx →"连载递送 */
.coll-closing-wrap{
  max-width:1100px;margin:64px auto 0;padding:36px 0 0;
  border-top:1px solid var(--line);
}
/* 编者结语（取 collection 的 closing 字段，无则不渲染） */
.coll-closing{
  font-size:15px;line-height:1.85;color:var(--muted);
  max-width:70ch;margin:0 0 28px;padding:18px 22px;border-radius:12px;
  background:color-mix(in srgb,var(--c) 5%,transparent);
  border-left:3px solid var(--c);
  font-style:italic;
}
/* 连载递送导航 */
.coll-serial-nav{
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;flex-wrap:wrap;
}
.coll-serial-prev,.coll-serial-next{
  display:inline-flex;align-items:center;gap:6px;
  padding:11px 20px;border-radius:10px;font-size:14px;font-weight:600;
  border:1px solid var(--line);background:var(--panel);color:var(--text);
  transition:.22s;cursor:pointer;text-decoration:none;
}
.coll-serial-prev:hover,.coll-serial-next:hover{
  border-color:var(--c);color:var(--c);transform:translateY(-2px);
  box-shadow:0 6px 18px color-mix(in srgb,var(--c) 12%,transparent);
}
.coll-serial-next{margin-left:auto}

/* ================= 7. Footer 去重工具计数 ================= */
/* 规约4: footer count = Set from flattened sections.tools, 渲染时计算 */
.coll-footer{
  max-width:1100px;margin:32px auto 0;padding:24px 0 0;
  border-top:1px solid var(--line);
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  color:var(--muted);font-size:13px;
}
.collection-footer-count{
  font-family:'Space Grotesk',var(--mono);font-weight:700;
  font-size:34px;line-height:1;color:var(--c);
}
.coll-footer-label{font:600 11px/1.4 var(--mono);letter-spacing:.18em;color:var(--dim);
  text-transform:uppercase}
.coll-footer-hint{margin-left:auto;font-size:12px;color:var(--dim)}

/* ================= 8. 不存在态 ================= */
.coll-notfound{
  max-width:680px;margin:48px auto;text-align:center;
  padding:60px 24px;border:1px dashed var(--line2);border-radius:20px;
  background:color-mix(in srgb,var(--panel) 40%,transparent);
}
.coll-notfound .nf-ico{font-size:48px;display:inline-block;margin-bottom:14px;
  animation:nfFloat 3s ease-in-out infinite}
@keyframes nfFloat{50%{transform:translateY(-8px)}}
.coll-notfound .nf-title{
  font-family:var(--disp);font-weight:400;font-size:26px;margin-bottom:10px;
}
.coll-notfound .nf-desc{color:var(--dim);font-size:13px;margin-bottom:22px}
.coll-notfound .nf-act{
  display:inline-flex;gap:10px;
}
.coll-notfound .nf-act a{
  padding:10px 20px;border-radius:10px;font-size:13.5px;font-weight:700;
  background:var(--amber);color:#171006;transition:transform .2s;text-decoration:none;
}
.coll-notfound .nf-act a:hover{transform:translateY(-2px)}

/* ================= 9. Scroll Reveal 错落进场 ================= */
/* 复用 style.css 的 .reveal / .reveal.in，此处补充专题页专用错落延迟 */
.coll-section.reveal{transition-delay:var(--reveal-delay,0ms)}
.site.reveal{transition-delay:var(--reveal-delay,0ms)}

/* ================= 10. 响应式 ================= */
@media (max-width:980px){
  .coll-skeleton{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .page-main{padding:24px 18px 70px}
  .collection-detail-hero{padding:20px 18px 24px}
  .coll-section{margin-bottom:44px}
  .coll-sec-head{min-height:auto}
  /* .sites 在 style.css 760px 以下已变 2 列，沿用 */
  .site .dt-scores{grid-template-columns:repeat(3,1fr);gap:4px}
  .coll-footer-hint{display:none}
  .coll-serial-nav{flex-direction:column;align-items:stretch}
  .coll-serial-next{margin-left:0}
}
@media (max-width:520px){
  .coll-skeleton{grid-template-columns:1fr}
  .coll-stat-num{font-size:64px}
  .coll-sec-no{font-size:clamp(3.5rem,14vw,5rem)}
  .coll-hero-watermark{font-size:3rem}
}