/* =============================================================
   case.css —— 案例总览页专属样式
   骨架：编辑式大标题首屏 → 通栏数据条 → 行业标签 → 错落案例栅格
        → 三看方法论 → 深色评价墙 → 城市标签 → 服务入口 → FAQ → CTA
   ============================================================= */

main{padding-top:calc(var(--header-h) + var(--topbar-h))}

/* ---------- 1. 首屏：编辑式 ---------- */
.cs-hero{padding:56px 0 72px;background:
  radial-gradient(1200px 500px at 85% -10%, rgba(174,135,73,.12), transparent 60%),
  var(--paper)}
.cs-hero-inner{display:block}
.cs-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;margin-top:34px}
.cs-hero-kicker{font-size:12.5px;letter-spacing:.34em;color:var(--earth-deep);margin-bottom:18px}
.cs-hero-title{
  font-size:clamp(38px,5.4vw,60px);line-height:1.16;letter-spacing:.02em;
  margin-bottom:22px;
}
.cs-hero-sub{font-size:15.5px;color:var(--ink-soft);line-height:1.95;max-width:560px;margin-bottom:30px}
.cs-hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.cs-hero-photo{position:relative}
.cs-hero-photo img{width:100%;height:auto;box-shadow:var(--shadow);border:1px solid var(--line)}
.cs-hero-phototag{
  position:absolute;left:-18px;bottom:-18px;background:var(--dark);color:#EDE7DA;
  font-size:12.5px;letter-spacing:.08em;padding:12px 18px;max-width:70%;
}

/* ---------- 2. 成果数据条 ---------- */
.cs-stats{background:var(--dark);color:#EDE7DA;padding:44px 0}
.cs-stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;text-align:center}
.cs-stat .num{color:var(--earth-light);font-size:40px}
.cs-stat-label{font-size:13px;color:#B9B1A2;margin-top:8px;letter-spacing:.06em}
.cs-stats-note{text-align:center;font-size:12px;color:#8F8677;margin-top:22px}

/* ---------- 3. 行业标签 ---------- */
.cs-tags-section{padding:72px 0}
.cs-tags{display:flex;flex-wrap:wrap;gap:10px}
.cs-tags .tag{font-size:13.5px;padding:8px 18px;border-radius:2px}
.cs-tags .tag:hover{background:var(--earth);color:#fff;border-color:var(--earth)}

/* ---------- 4. 案例错落栅格 ---------- */
.cs-case-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:10px}
.cs-case{
  background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;
}
.cs-case--shift{transform:translateY(36px)}
.cs-case-img{position:relative;overflow:hidden}
.cs-case-img img{width:100%;transition:transform .5s ease}
.cs-case:hover .cs-case-img img{transform:scale(1.04)}
.cs-case-no{
  position:absolute;right:16px;top:14px;font-family:var(--font-serif);
  font-size:30px;color:rgba(251,247,239,.92);background:rgba(42,38,32,.55);
  padding:4px 12px;line-height:1;
}
.cs-case-body{padding:24px 26px 26px}
.cs-case-body h3{font-size:19px;margin-bottom:10px}
.cs-case-body p{font-size:14px;color:var(--ink-soft);margin-bottom:16px;line-height:1.85}

/* ---------- 5. 三看方法论 ---------- */
.cs-read-section{background:var(--paper)}
.cs-read-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.cs-read{border-top:2px solid var(--earth);padding:26px 26px 30px;background:var(--paper-deep)}
.cs-read--shift{transform:translateY(26px)}
.cs-read-no{
  display:inline-block;font-family:var(--font-serif);font-size:14px;letter-spacing:.2em;
  color:var(--earth-deep);border:1px solid rgba(174,135,73,.4);padding:3px 12px;margin-bottom:16px;
}
.cs-read h3{font-size:18px;margin-bottom:12px}
.cs-read p{font-size:14px;color:var(--ink-soft);line-height:1.95}

/* ---------- 6. 客户评价墙（深色） ---------- */
.cs-quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.cs-quote{
  background:rgba(255,255,255,.04);border:1px solid rgba(201,193,178,.16);
  padding:28px 26px;display:flex;flex-direction:column;gap:20px;
}
.cs-quote p{font-family:var(--font-serif);font-size:15.5px;line-height:2;color:#D8D2C6}
.cs-quote footer{display:flex;align-items:center;gap:12px;margin-top:auto}
.cs-quote footer img{border-radius:50%;object-fit:cover;filter:grayscale(.2)}
.cs-quote footer b{display:block;color:#EFE9DC;font-size:14px}
.cs-quote footer em{font-style:normal;font-size:12px;color:#9A9284}

/* ---------- 7. 城市标签 ---------- */
.cs-city-tags{display:flex;flex-wrap:wrap;gap:10px}
.cs-city-tags a{
  font-size:13.5px;padding:8px 16px;border:1px solid var(--line);
  background:var(--paper);border-radius:2px;color:var(--ink-soft);
}
.cs-city-tags a:hover{border-color:var(--earth);color:var(--earth-deep);background:rgba(174,135,73,.06)}

/* ---------- 8. 相关服务入口 ---------- */
.cs-svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cs-svc{
  background:var(--paper);border:1px solid var(--line);padding:26px 22px;
  display:flex;flex-direction:column;gap:10px;
}
.cs-svc h3{font-size:17px}
.cs-svc p{font-size:13.5px;color:var(--ink-soft);line-height:1.85;flex:1}

/* ---------- 9. FAQ ---------- */
.container--narrow{max-width:820px}

/* ---------- 10. CTA 转化区 ---------- */
.cs-cta-band{background:
  radial-gradient(900px 400px at 90% 10%, rgba(174,135,73,.14), transparent 60%),
  var(--paper-deep)}
.cs-cta-wrap{display:grid;grid-template-columns:1.4fr auto;gap:40px;align-items:center}
.cs-cta-title{font-size:clamp(24px,3vw,34px);margin:12px 0 10px}
.cs-cta-sub{color:var(--ink-soft);margin-bottom:24px}
.cs-cta-contacts{display:flex;gap:14px;flex-wrap:wrap}
.cs-cta-contact{
  display:inline-flex;align-items:center;gap:10px;background:var(--paper);
  border:1px solid var(--line);padding:12px 18px;border-radius:2px;
}
.cs-cta-contact svg{width:17px;height:17px;fill:var(--earth-deep)}
.cs-cta-contact span{display:flex;flex-direction:column;line-height:1.3;font-size:14.5px;font-weight:600}
.cs-cta-contact small{font-size:11px;color:var(--ink-faint);font-weight:400;letter-spacing:.1em}

/* ---------- 响应式 ---------- */
@media (max-width:991px){
  .cs-hero-grid{grid-template-columns:1fr;gap:36px}
  .cs-stats-grid{grid-template-columns:repeat(3,1fr);row-gap:30px}
  .cs-case-grid{grid-template-columns:1fr}
  .cs-case--shift{transform:none}
  .cs-read-grid,.cs-quote-grid{grid-template-columns:1fr}
  .cs-read--shift{transform:none}
  .cs-svc-grid{grid-template-columns:1fr 1fr}
  .cs-cta-wrap{grid-template-columns:1fr}
}
@media (max-width:560px){
  .cs-stats-grid{grid-template-columns:repeat(2,1fr)}
  .cs-svc-grid{grid-template-columns:1fr}
  .cs-hero-phototag{position:static;max-width:none;margin-top:10px}
}