/* ================= 案例列表页 ================= */
/* 本页无底部 CTA：去掉首页 main 为 CTA 预留的 120px 下留白 */
main{padding-bottom:0}
/* 页头光斑：首页 .g 的定位挂在 .hero .g 上，页头需单独声明 */
.page-head .g{position:absolute;border-radius:50%;pointer-events:none;filter:blur(100px);z-index:0}
.page-head .orb-1{width:380px;height:380px;left:-90px;top:-110px}
.page-head .orb-2{width:330px;height:330px;right:5%;top:-90px}
.band.page-head{padding:calc(var(--nav-h) + clamp(52px,6.4vw,96px)) var(--gut) clamp(40px,4.4vw,60px)}
.band.page-head+.band{border-top:0}
.page-head h1{margin:14px 0 0;font-size:clamp(32px,3.6vw,48px);line-height:1.16;letter-spacing:-.01em;font-weight:700;color:var(--ink)}
.page-head .pl{margin:20px 0 0;font-size:16px;line-height:1.8;color:var(--ink-3);max-width:720px}
.page-head .pmeta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px;font-size:14px;color:var(--ink-4)}
.page-head .pmeta span{display:flex;align-items:center;gap:7px}
.page-head .pmeta .ic{width:15px;height:15px;color:var(--orange)}

/* 筛选行：分类胶囊 */
.filter{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:clamp(24px,2.6vw,34px)}

/* ---------- 案例网格：等宽三列，同一行卡片严格等高（封面 16:9 + 正文固定行数） ---------- */
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.cgrid .case{
  opacity:0;
  transition:opacity .55s var(--ease), box-shadow .34s var(--ease),
             border-color .34s var(--ease), transform .34s var(--ease);
}
.cgrid .case.in{opacity:1}
/* 封面：固定 16:9 裁切（object-position 顶对齐，保留站点首屏画面）。
   多图叠加同一位置，靠 opacity 交叉淡化轮播。
   注意只命中 .cover 的直接子级 img —— 骑线作者头像也在 .cover 里，不能被铺满。
   不能加 overflow:hidden —— 会把骑线头像溢出封面的下半截裁掉 */
.cgrid .case .cover{aspect-ratio:16/9;position:relative;background:var(--panel-2)}
.cgrid .case .cover>img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top center;
  opacity:0;transition:opacity .85s var(--ease);
}
.cgrid .case .cover>img.on{opacity:1}
/* 多图指示点：封面右上角（左上被分类片占用），白点，仅多图卡片出现 */
.cgrid .case .cdots{position:absolute;right:14px;top:16px;z-index:2;display:flex;gap:4px}
.cgrid .case .cdots i{
  width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.42);
  box-shadow:0 1px 4px rgba(0,0,0,.28);transition:background .3s var(--ease);
}
.cgrid .case .cdots i.on{background:#fff}
/* 正文：标题固定一行、摘要固定三行 —— 行数不齐是参差的唯一来源，这里全部锁死 */
.cgrid .case .info h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cgrid .case .info p{
  -webkit-line-clamp:3;line-clamp:3;
  min-height:calc(14px * 1.72 * 3);
}
/* 底栏：左＝地点，右＝标签（原「查看案例」入口已去掉）。
   min-height 锁死底栏高度 —— 有无标签的卡片也严格等高 */
.cgrid .case .cbar{min-height:24px}
.cgrid .case .cbar .tags{
  margin-left:auto;flex:none;display:flex;align-items:center;gap:6px;
  min-width:0;overflow:hidden;
}
.cgrid .case .cbar .tags span{
  flex:none;white-space:nowrap;font-size:12px;line-height:1;letter-spacing:.01em;
  padding:5px 10px;border-radius:999px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--ink-3);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.cgrid .case:hover .cbar .tags span{border-color:var(--line-2);color:var(--ink-2)}

/* 加载态 / 到底提示 */
.cstat{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:64px;margin-top:6px;font-size:14px;color:var(--ink-4);
}
.cstat .spin{
  width:15px;height:15px;border-radius:50%;flex:none;
  border:2px solid var(--line-2);border-top-color:var(--orange);
  animation:cspin .8s linear infinite;
}
@keyframes cspin{to{transform:rotate(360deg)}}
.cstat.end{gap:0}
.cstat .line{display:inline-block;width:34px;height:1px;background:var(--line-2);margin:0 14px;vertical-align:middle}
.csentinel{height:1px}

@media (max-width:1040px){
  .cgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .cgrid{grid-template-columns:1fr;gap:16px}
}
@media (max-width:680px){
  .filter{gap:12px}
  .cgrid .case .info{padding:18px 18px 20px}
  .cgrid .case .authors img{width:34px;height:34px}
}
@media (prefers-reduced-motion:reduce){
  .cstat .spin{animation:none}
}

/* ===== 占位符列表页：胶囊改链接 + 无限流加载 ===== */
.tabs .tab{display:inline-flex;align-items:center;text-decoration:none;cursor:pointer}
.lmore{display:flex;justify-content:center;align-items:center;margin-top:clamp(30px,3.2vw,46px);min-height:28px}
.lmore[hidden]{display:none}
.lstat{display:inline-flex;align-items:center;gap:12px;font-size:14px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.lstat .lline{width:46px;height:1px;background:var(--line-2)}
.lspin{width:15px;height:15px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--orange);animation:lspin .8s linear infinite}
@keyframes lspin{to{transform:rotate(360deg)}}
.lsent{width:100%;height:1px}