/* ============================================================
   列表页通用样式（案例 / 新闻 / 设计文章列表共用）
   配合 home-v2.css 使用
   ============================================================ */

/* ---------- 筛选胶囊 ---------- */
.filter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 clamp(26px,3.8vh,42px)}
.filter a{
  font-size:13px;letter-spacing:.06em;color:var(--fg2);
  border:1px solid rgba(255,255,255,.16);padding:9px 20px;border-radius:24px;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.filter a:hover{color:#fff;border-color:rgba(255,255,255,.42)}
.filter a.on{background:var(--brand);border-color:var(--brand);color:#fff}
.filter a.on:hover{background:#E00000;border-color:#E00000}

/* ---------- 案例网格（纯图 + 标题浮层） ---------- */
.case-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(13px,1.5vw,22px);
  counter-reset:c;
}
.case-grid .item{
  position:relative;display:block;overflow:hidden;background:#141414;aspect-ratio:4/3;
}
.case-grid .item img{
  width:100%;height:100%;object-fit:cover;filter:brightness(.86);
  transition:transform 1s var(--ease),filter .5s var(--ease);
}
.case-grid .item:hover img{transform:scale(1.06);filter:brightness(1)}
/* 遮罩必须 pointer-events:none，否则会吃掉整块封面的点击 */
.case-grid .item::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.25) 46%,transparent 72%);
}
.case-grid .meta{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(14px,1.9vh,22px) clamp(14px,1.5vw,22px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
}
.case-grid h3{
  margin:0;font-size:clamp(14px,1.05vw,17px);font-weight:500;line-height:1.55;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.case-grid .no{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  color:rgba(255,255,255,.55);flex:0 0 auto;font-variant-numeric:tabular-nums;
}
.case-grid .no::before{counter-increment:c;content:counter(c,decimal-leading-zero)}

/* ---------- 列表式（新闻/文章列表可按需切换） ---------- */
.list-rows{border-top:1px solid var(--line)}
.list-rows a{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(14px,2.6vw,44px);
  align-items:baseline;padding:clamp(18px,2.4vh,28px) 0;
  border-bottom:1px solid var(--line);
  transition:padding-left .4s var(--ease),background .4s var(--ease);
}
.list-rows a:hover{padding-left:14px;background:rgba(255,255,255,.02)}
.list-rows h3{
  margin:0;font-size:clamp(15px,1.15vw,19px);font-weight:400;line-height:1.6;
  color:#fff;transition:color .3s var(--ease);
}
.list-rows a:hover h3{color:var(--brand)}
.list-rows .sum{
  margin:9px 0 0;font-size:13px;line-height:1.75;color:var(--fg3);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.list-rows time{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--fg3);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}

/* ---------- 分页 ---------- */
.pager-line{
  display:flex;justify-content:center;align-items:center;gap:8px;
  margin-top:clamp(34px,5vh,56px);flex-wrap:wrap;
}
.pager-line a,.pager-line span{
  min-width:42px;height:42px;padding:0 14px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--fg2);
  border:1px solid rgba(255,255,255,.14);background:transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
  font-variant-numeric:tabular-nums;
}
.pager-line a:hover{color:#fff;border-color:rgba(255,255,255,.42)}
.pager-line .on,.pager-line span.on{background:var(--brand);border-color:var(--brand);color:#fff}
.pager-line span.dis{opacity:.34}

/* ---------- 空状态 ---------- */
.empty{
  padding:clamp(44px,7vh,84px) 0;text-align:center;
  color:var(--fg3);font-size:15px;letter-spacing:.04em;
}

/* ---------- 响应式 ---------- */
@media (max-width:1100px){
  .case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .case-grid{grid-template-columns:1fr}
  .list-rows a{grid-template-columns:1fr;gap:8px}
  .filter a{padding:8px 15px;font-size:12px}
}


/* ---------- 新闻 / 文章列表：左图右文的行式布局 ---------- */
.news-rows{display:grid;gap:clamp(13px,1.5vw,20px)}
.news-rows a{
  display:grid;grid-template-columns:clamp(140px,14vw,220px) minmax(0,1fr);
  gap:clamp(16px,2vw,30px);align-items:center;
  padding:clamp(13px,1.7vh,19px);
  background:#131313;border:1px solid rgba(255,255,255,.07);
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.news-rows a:hover{border-color:rgba(255,255,255,.24);transform:translateY(-3px)}
.news-rows .pic{aspect-ratio:16/10;overflow:hidden;background:#1a1a1a}
.news-rows img{
  width:100%;height:100%;object-fit:cover;filter:brightness(.9);
  transition:transform 1s var(--ease),filter .5s var(--ease);
}
.news-rows a:hover img{transform:scale(1.05);filter:brightness(1)}
.news-rows h3{
  margin:0;font-size:clamp(15px,1.18vw,19px);font-weight:500;line-height:1.55;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.news-rows .sum{
  margin:10px 0 0;font-size:13px;line-height:1.75;color:var(--fg3);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.news-rows .meta{
  margin:11px 0 0;font-family:var(--mono);font-size:12px;
  letter-spacing:.06em;color:var(--fg3);font-variant-numeric:tabular-nums;
}
@media (max-width:640px){
  .news-rows a{grid-template-columns:1fr;gap:12px}
  .news-rows .pic{aspect-ratio:16/9}
}


/* ---------- 移动端：列表页 ---------- */
@media (max-width:768px){
  .filter{gap:8px;margin-bottom:22px}
  .filter a{padding:8px 14px;font-size:12px;border-radius:20px}
  .case-grid{gap:12px}
  .case-grid h3{font-size:15px}
  .news-rows a{padding:12px;gap:12px}
  .pager-line a,.pager-line span{min-width:38px;height:38px;padding:0 11px;font-size:12px}
}