/* 页面级样式 — 提取自 网站前端模板/cases.html */

/* ================= 案例页专属布局 ================= */
:root{--cases-art-op:.15}          /* 深色模式下 Hero 背景图透明度 10% */
html[data-theme="light"]{--cases-art-op:.15}

/* --- Hero：渐变统计带 --- */
.cases-hero{position:relative;overflow:hidden;padding:140px 0 60px;
  background-image:
    radial-gradient(ellipse 55% 75% at 85% 0%,rgba(59,130,246,.12),transparent 60%),
    radial-gradient(ellipse 45% 60% at 5% 100%,rgba(139,92,246,.1),transparent 60%);
  background-repeat:no-repeat;background-color:var(--bg)}
/* 背景图独立成层，便于控制透明度 */
.cases-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:url("/assets/images/banner4.jpg") center/cover no-repeat;opacity:var(--cases-art-op)}
.cases-hero>*{position:relative;z-index:1}
.cases-hero h1{font-size:clamp(34px,5vw,54px);font-weight:900}
/* 手机端：hero 渐变标题是 fit-content 收缩块，text-align:center 管不到，需 margin auto 居中 */
@media(max-width:600px){
  .cases-hero h1{margin-left:auto;margin-right:auto}
}
.cases-hero .sub{margin-top:16px;color:var(--txt2);font-size:16px;max-width:600px}
.case-stat-band{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-top:54px;border-radius:20px;overflow:hidden;border:1px solid var(--line2);
  background:linear-gradient(120deg,rgba(59,130,246,.1),rgba(139,92,246,.08) 55%,rgba(34,211,238,.08))}
.case-stat-cell{padding:18px 6px;text-align:center;position:relative}
.case-stat-cell+.case-stat-cell::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--line2)}
.case-stat-cell .em{font-size:20px}
.case-stat-cell b{display:block;font-family:var(--mono);font-size:24px;font-weight:700;margin-top:4px;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.case-stat-cell span{display:block;margin-top:4px;font-size:12px;color:var(--txt2);white-space:nowrap}
@media(max-width:820px){.case-stat-band{grid-template-columns:1fr 1fr}.case-stat-cell:nth-child(3)::before{display:none}.case-stat-cell span{white-space:normal}}

/* --- 筛选条（吸顶） --- */
.filter-zone{position:sticky;top:78px;z-index:50;background:var(--bg);padding:18px 0;border-bottom:1px solid var(--line)}
.filter-bar{margin:0}

/* --- 案例大卡（本页用更大幅面） --- */
.case-grid-big{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px;padding:50px 0 100px}
.case-card.big .cover{height:200px;font-size:56px}
.case-card .cover .deco{position:absolute;inset:0;opacity:.5;background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.08) 0 2px,transparent 2px);background-size:34px 34px}
.case-card .url-tag{position:absolute;bottom:14px;left:14px;z-index:2;font-family:var(--mono);font-size:10.5px;color:#cde3ff;background:rgba(7,11,20,.55);padding:4px 10px;border-radius:999px;backdrop-filter:blur(6px)}
.case-empty{grid-column:1/-1;text-align:center;padding:80px 0;color:var(--txt3)}
@media (max-width:600px){
  .case-grid-big{grid-template-columns:1fr;gap:18px;padding:32px 0 70px}
  .case-grid-big .case-card{min-width:0}
  .case-card .meta{flex-wrap:wrap;gap:4px 12px}
}