/* ==========================================================================
   Bloom24 — Case studies page (page-cases.php), prefix: cs-
   单卡展示：外层案例圆点切换 + 内层图片圆点轮播
   ========================================================================== */

/* Hero */
.cs-hero{padding:150px 0 60px;position:relative;background:
  radial-gradient(600px 340px at 90% 10%, rgba(232,106,138,.12), transparent 60%),
  radial-gradient(500px 320px at 4% 40%, rgba(203,168,219,.14), transparent 60%),
  var(--cream)}
.cs-hero h1{font-size:clamp(30px,4.2vw,48px);max-width:820px}
.cs-hero h1 em{font-style:italic;color:var(--rose-deep)}
.cs-hero .sub{font-size:1.0625rem;margin-top:20px;max-width:640px}

/* 单卡切换器 */
#cases{padding:70px 0 60px;background:linear-gradient(180deg,var(--cream) 0,#fff 200px)}
.cs-slider{position:relative}
.cs-case{display:none;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 18px 50px rgba(74,44,78,.12);max-width:1080px;margin:0 auto;animation:csCardIn .45s ease}
.cs-case.cs-active{display:grid;grid-template-columns:1.05fr .95fr}
@keyframes csCardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.cs-case{animation:none}}

/* 图片区：一次显示 1 张，完整显示不裁切（contain）；高度跟随行（由文案列决定） */
.cs-case-media{position:relative;min-height:420px;background:#F5EDEF}
.cs-case-media figure{margin:0;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .45s ease}
.cs-case-media figure.cs-img-active{opacity:1}
.cs-case-media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.cs-case-no{position:absolute;top:18px;left:18px;z-index:2;background:rgba(43,24,48,.82);color:#fff;font-family:var(--font-display);font-weight:700;font-size:0.9375rem;letter-spacing:.14em;padding:9px 16px;border-radius:999px;backdrop-filter:blur(4px)}

/* 图片圆点（悬浮在图片底部） */
.cs-img-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:2;display:flex;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(43,24,48,.45);backdrop-filter:blur(4px)}
.cs-img-dot{width:9px;height:9px;border-radius:50%;border:none;padding:0;background:rgba(255,255,255,.45);cursor:pointer;transition:.2s}
.cs-img-dot.cs-img-active{background:#fff;width:22px;border-radius:999px}

/* 文案区 */
.cs-case-body{padding:38px 42px;display:flex;flex-direction:column;gap:20px}
.cs-case-loc{align-self:flex-start;font-size:0.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rose-deep);background:var(--rose-soft);padding:7px 14px;border-radius:999px}
.cs-case-brand{font-family:var(--font-display);font-size:clamp(20px,2.4vw,27px);line-height:1.3;margin:0}
.cs-story p{font-size:0.9375rem;line-height:1.75;color:var(--grey);margin:0 0 12px}

/* 投入成本 */
.cs-invest h3,.cs-stats h3{font-size:0.7812rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--leaf);margin:0 0 10px}
.cs-invest ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.cs-invest li{font-size:0.875rem;color:var(--ink);padding-left:18px;position:relative}
.cs-invest li::before{content:"✿";position:absolute;left:0;color:var(--rose);font-size:0.6875rem}

/* 运营数据 */
.cs-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.cs-stat{background:var(--cream);border-radius:12px;padding:14px 10px;text-align:center;display:grid;gap:4px}
.cs-stat-lbl{font-size:0.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.cs-stat-val{font-family:var(--font-display);font-size:1.1875rem;font-weight:700;color:var(--rose-deep)}

/* hover 左右切换箭头（淡） */
.cs-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:42px;height:42px;border-radius:50%;border:none;background:rgba(255,255,255,.72);color:var(--rose-deep);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.85;transition:.25s;backdrop-filter:blur(4px);box-shadow:0 6px 18px rgba(74,44,78,.14)}
.cs-nav svg{width:17px;height:17px}
.cs-nav:hover{background:#fff;color:var(--rose);opacity:1}
.cs-nav-prev{left:-58px}
.cs-nav-next{right:-58px}
@media(max-width:1240px){.cs-nav-prev{left:-14px}.cs-nav-next{right:-14px}}

/* 案例切换圆点 */
.cs-case-dots{display:flex;justify-content:center;gap:12px;margin-top:34px}
.cs-case-dot{width:10px;height:10px;border-radius:999px;border:none;padding:0;background:var(--rose-soft);cursor:pointer;transition:.25s}
.cs-case-dot:hover{background:var(--rose)}
.cs-case-dot.cs-dot-active{background:var(--rose-deep);width:26px}

/* CTA 衔接 */
.page-template-page-cases .final{background:linear-gradient(160deg,var(--leaf) 0%,var(--leaf-mid) 100%);padding:96px 0}
.page-template-page-cases .final h2{color:#fff}
.page-template-page-cases .final .sub{color:#CFC0D8}

/* 过渡盒：证书轮播（与 footer 波浪条同底色） */
.cs-bridge{background:#F4ECF6;padding:80px 0 70px}
.cs-bridge h2{font-size:clamp(24px,3vw,32px)}
.cs-bridge .sub{font-size:1rem;color:var(--grey);max-width:640px;margin:16px auto 0}
.cs-bridge .cert-carousel{margin-top:56px}
.page-template-page-cases .cs-bridge .kicker{color:var(--rose-deep)}

/* ---------- 数字带 ---------- */
.cs-numbers{background:var(--leaf);padding:56px 0}
.cs-num-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.cs-num-val{font-family:var(--font-display);font-size:2.75rem;font-weight:700;color:#fff;line-height:1.1}
.cs-num-val span{color:var(--rose)}
.cs-num-lbl{font-size:0.8125rem;color:#CFC0D8;letter-spacing:.08em;text-transform:uppercase;margin-top:6px}

/* ---------- 客户语录 ---------- */
.cs-voices{background:#fff;padding:90px 0 70px}
.cs-voices h2{font-size:clamp(24px,3vw,32px)}
.cs-voice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.cs-voice{margin:0;background:var(--cream);border-radius:var(--radius);padding:28px 30px;display:flex;flex-direction:column;gap:18px;border-top:3px solid var(--rose)}
.cs-voice p{font-size:0.9375rem;line-height:1.7;color:var(--ink);margin:0;flex:1}
.cs-voice p::before{content:"“";font-family:var(--font-display);font-size:2.125rem;color:var(--rose);line-height:0;vertical-align:-8px;margin-right:4px}
.cs-voice-foot{display:flex;align-items:center;gap:10px;background:none;padding:0}
.cs-voice-foot cite{font-style:normal;font-size:0.8125rem;font-weight:600;color:var(--grey)}
.cs-voice-foot cite::before{content:none}
.cs-avatar-mini{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;flex:none;background:linear-gradient(140deg,var(--rose),var(--rose-deep));color:#fff;font-weight:700;font-size:0.8125rem}
.cs-voice cite{font-style:normal;font-size:0.8125rem;font-weight:600;color:var(--grey)}

/* ---------- 上手流程 ---------- */
.cs-process{background:#fff;padding:20px 0 100px}
.cs-process h2{font-size:clamp(24px,3vw,32px)}
.cs-step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px}
.cs-step{background:var(--cream);border-radius:var(--radius);padding:26px 24px;position:relative}
.cs-step-no{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(140deg,var(--rose),var(--rose-deep));color:#fff;font-family:var(--font-display);font-weight:700;font-size:1.0625rem;margin-bottom:14px}
.cs-step h3{font-size:1.0312rem;margin:0 0 8px}
.cs-step p{font-size:0.8438rem;line-height:1.65;color:var(--grey);margin:0}

/* ---------- 移动端补充 ---------- */
@media(max-width:980px){
  .cs-num-grid{grid-template-columns:repeat(2,1fr)}
  .cs-num-val{font-size:2.125rem}
  .cs-voice-grid,.cs-step-grid{grid-template-columns:1fr}
  .cs-voices{padding:70px 0 50px}
  .cs-process{padding:0 0 70px}
}

/* 移动端 */
@media(max-width:980px){
  .cs-hero{padding:120px 0 40px}
  .cs-case.cs-active{grid-template-columns:1fr}
  .cs-case-media{min-height:300px}
  .cs-case-body{padding:26px 22px 30px}
  .cs-stats-grid{grid-template-columns:repeat(2,1fr)}
}