/* ============================================================
   case.html —— 案例集锦列表页
   布局特点：页头大标题 + 胶囊筛选标签 + 错落卡片网格
             （宽卡片与普通卡片混排，形成杂志式参差节奏）
   ============================================================ */

/* ---------- 页头 ---------- */
.case-hero{ position:relative; padding:64px 0 40px; overflow:hidden; }
.case-hero-inner{ position:relative; z-index:1; }
.case-hero h1{ margin:18px 0 16px; max-width:860px; }
.case-hero-sub{ max-width:760px; font-size:16px; }
.case-hero-sub b{ color:var(--pink-deep); font-size:22px; }
.case-hero-stats{
  display:flex; align-items:center; gap:18px; margin-top:26px; flex-wrap:wrap;
}
.chs-item{ display:flex; align-items:baseline; gap:8px; }
.chs-item b{ font-size:30px; color:var(--pink-deep); font-weight:800; }
.chs-item i{ font-style:normal; font-size:14px; font-weight:700; color:var(--ink); }
.chs-dot{ width:7px; height:7px; border-radius:50%; background:var(--yellow); }
.case-hero-doodle{
  position:absolute; right:-60px; top:-30px; width:260px; height:260px; opacity:.7;
}

/* ---------- 筛选标签 ---------- */
.filter-bar{ padding:10px 0 26px; }
.filter-tags{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}
.f-tag{
  padding:9px 20px; border-radius:var(--r-full);
  background:var(--white); border:2px dashed var(--yellow-soft);
  font-size:14px; font-weight:700; color:var(--ink);
  transition:all .25s ease;
}
.f-tag:hover{ border-color:var(--pink); color:var(--pink-deep); transform:translateY(-2px); }
.f-tag.active{
  background:linear-gradient(135deg,var(--pink),var(--pink-deep));
  border-color:transparent; color:#fff; box-shadow:var(--shadow-m);
}

/* ---------- 错落卡片网格 ---------- */
.case-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
}
.lcase{
  background:var(--white); border-radius:var(--r-l);
  border:2px dashed transparent;
  box-shadow:var(--shadow-s);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.lcase:nth-child(even){ transform:translateY(22px); }
.lcase:hover{ transform:translateY(-6px); box-shadow:var(--shadow-m); border-color:var(--pink-mid); }
.lcase:nth-child(even):hover{ transform:translateY(16px); }
.lcase-w{ grid-column:span 1; }
.lcase > a{ display:block; height:100%; }
.lcase-img{ overflow:hidden; border-radius:var(--r-l) var(--r-l) 0 0; }
.lcase-img img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .5s ease; }
.lcase:hover .lcase-img img{ transform:scale(1.05); }
.lcase-body{ padding:18px 20px 22px; }
.lcase-tag{ margin-bottom:10px; }
.lcase-body h3{ font-size:19px; margin-bottom:8px; }
.lcase-body p{ font-size:14px; margin-bottom:12px; }
.lcase-link{ font-size:13px; font-weight:800; color:var(--pink-deep); }
.lcase.hide{ display:none; }
.case-empty{ margin-top:30px; text-align:center; font-weight:700; }
.case-empty a{ color:var(--pink-deep); text-decoration:underline; }

/* ---------- 合作流程 ---------- */
.coop{ padding:60px 0 10px; }
.coop .sec-head{ text-align:center; margin-bottom:36px; }
.coop .sec-head h2{ margin:10px 0; }
.coop-steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  counter-reset:step;
}
.coop-steps li{
  background:var(--white); border-radius:var(--r-m); padding:26px 22px;
  border:2px dashed var(--yellow-soft);
  transition:transform .25s ease, border-color .25s ease;
}
.coop-steps li:hover{ transform:translateY(-5px) rotate(-.5deg); border-color:var(--yellow); }
.cs-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg,var(--yellow),var(--yellow-deep));
  color:#fff; font-weight:800; margin-bottom:12px;
}
.coop-steps h3{ font-size:17px; margin-bottom:8px; }
.coop-steps p{ font-size:14px; margin:0; }

/* ---------- 底部 CTA ---------- */
.case-cta{ margin:60px 0 0; padding:64px 0; background:var(--pink-soft); position:relative; overflow:hidden; }
.case-cta::before{
  content:""; position:absolute; width:180px; height:180px; border-radius:50%;
  background:rgba(255,255,255,.5); top:-70px; right:-40px;
}
.case-cta-inner{ text-align:center; position:relative; }
.case-cta h2{ margin-bottom:12px; }
.case-cta p{ margin-bottom:24px; }
.case-cta-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- 响应式 ---------- */
@media (max-width:1023.98px){
  .case-grid{ grid-template-columns:repeat(2,1fr); }
  .lcase:nth-child(even){ transform:none; }
  .lcase:nth-child(even):hover{ transform:translateY(-6px); }
  .coop-steps{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:639.98px){
  .case-hero{ padding:40px 0 24px; }
  .case-grid{ grid-template-columns:1fr; gap:20px; }
  .chs-item b{ font-size:24px; }
  .coop-steps{ grid-template-columns:1fr; gap:14px; }
}