/* ==========================================================================
   合作案例专用样式 case.css（周口八大员人才网 pzsr.cn）
   骨架：页头横幅 → 案例瀑布墙（大图小图错落）→ 成果数据条
       → 客户评价卡 → 合作服务内容 → 合作 CTA
   说明：本页专属前缀 cs-
   ========================================================================== */

/* ---------- 页头横幅 ---------- */
.cs-hero .hero-row{
  position:relative;z-index:2;display:grid;
  grid-template-columns:1.1fr .9fr;gap:clamp(26px,4vw,50px);align-items:center;
}
.cs-hero .crumbs{margin-bottom:18px}
.cs-hero .hero-media{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.cs-hero .hero-media img{width:100%;height:320px;object-fit:cover}

/* ---------- 案例瀑布墙 ---------- */
.cs-wall{columns:3;column-gap:20px}
.cs-case{
  display:inline-block;width:100%;margin-bottom:20px;
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);break-inside:avoid;
  transition:transform .35s,box-shadow .35s,border-color .35s;
}
.cs-case:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--purple-soft)}
.cs-case .c-img{position:relative}
.cs-case .c-img img{width:100%;height:auto;display:block;object-fit:cover}
/* 大图与小图高度错落 */
.cs-case.big .c-img img{height:260px}
.cs-case.small .c-img img{height:190px}
.cs-case .c-tag{
  position:absolute;left:14px;top:14px;z-index:2;
  font-size:12px;font-weight:600;color:#fff;
  background:var(--grad-pink);padding:5px 13px;border-radius:var(--r-full);box-shadow:var(--shadow-pink);
}
.cs-case .c-body{padding:20px}
.cs-case .c-body h3{font-size:17px;margin-bottom:8px}
.cs-case .c-body p{font-size:13px;color:var(--ink-3);margin-bottom:12px}
.cs-case .c-meta{display:flex;gap:8px;flex-wrap:wrap}
.cs-case .c-meta .tag{font-size:12px;padding:3px 11px}

/* ---------- 成果数据条 ---------- */
.cs-stats{
  background:linear-gradient(135deg,#9B8AEA,#FF7EBC);
  border-radius:var(--r-xl);padding:clamp(28px,4vw,44px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  position:relative;overflow:hidden;
}
.cs-stats::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(360px 200px at 10% 20%,rgba(255,255,255,.25),transparent 60%),
             radial-gradient(320px 200px at 92% 80%,rgba(255,255,255,.2),transparent 60%);
}
.cs-stat{position:relative;text-align:center;color:#fff}
.cs-stat .num{font-size:clamp(28px,3.4vw,42px);font-weight:800;line-height:1.1}
.cs-stat .lbl{font-size:13px;color:rgba(255,255,255,.9);margin-top:6px}

/* ---------- 客户评价卡 ---------- */
.cs-reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cs-review{
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:14px;
  transition:transform .35s,box-shadow .35s;
}
.cs-review:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.cs-review .stars{color:var(--pink-deep);letter-spacing:2px}
.cs-review .r-text{font-size:14px;color:var(--ink-2);line-height:1.8;flex:1}
.cs-review .r-person{display:flex;align-items:center;gap:12px}
.cs-review .r-avatar{
  width:44px;height:44px;border-radius:50%;flex:none;
  background:var(--grad-purple);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;
}
.cs-review .r-person b{display:block;font-size:14px}
.cs-review .r-person small{font-size:12px;color:var(--ink-3)}

/* ---------- 合作服务内容 ---------- */
.cs-services{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cs-svc{
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-md);
  padding:22px;box-shadow:var(--shadow-sm);text-align:center;
  transition:transform .3s,box-shadow .3s;
}
.cs-svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.cs-svc .cs-ico{
  width:46px;height:46px;border-radius:14px;margin:0 auto 12px;
  background:var(--purple-mist);color:var(--purple-deep);
  display:flex;align-items:center;justify-content:center;
}
.cs-svc .cs-ico svg{width:23px;height:23px}
.cs-svc h3{font-size:15px;margin-bottom:6px}
.cs-svc p{font-size:13px;color:var(--ink-3)}

/* ---------- 合作 CTA ---------- */
.cs-cta{
  background:linear-gradient(135deg,#9B8AEA 0%,#FF7EBC 60%,#8FD0F7 100%);
  border-radius:var(--r-xl);padding:clamp(34px,5vw,56px);
  display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;
  position:relative;overflow:hidden;
}
.cs-cta h2{color:#fff;font-size:clamp(22px,3vw,30px);margin-bottom:12px}
.cs-cta .cta-txt p{color:rgba(255,255,255,.92)}
.cs-form{background:rgba(255,255,255,.96);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow-lg)}
.cs-form h3{font-size:18px;margin-bottom:16px}

/* ---------- 本页工具类 ---------- */
.btn-block{width:100%}
.cta-note{margin-top:14px;font-size:14px;opacity:.9}

/* ---------- 服务价值横排 ---------- */
.cs-values{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cs-value{
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:10px;
  transition:transform .35s,box-shadow .35s,border-color .35s;
}
.cs-value:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--purple-soft)}
.cs-value .cv-ico{
  width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--pink-soft);color:var(--pink-deep);
}
.cs-value .cv-ico svg{width:23px;height:23px}
.cs-value h3{font-size:16px}
.cs-value p{font-size:13px;color:var(--ink-3)}

/* ---------- 案例常见问题 FAQ ---------- */
.cs-faq{max-width:860px;margin-inline:auto;display:grid;gap:12px}
.cs-faq-item{
  border:1px solid var(--line);border-radius:var(--r-md);background:rgba(255,255,255,.6);
  overflow:hidden;transition:border-color .3s,box-shadow .3s;
}
.cs-faq-item[open]{border-color:var(--purple-soft);box-shadow:var(--shadow-sm);background:#fff}
.cs-faq-item summary{
  list-style:none;cursor:pointer;padding:16px 20px;display:flex;align-items:center;
  justify-content:space-between;gap:14px;font-weight:600;font-size:15px;color:var(--ink);
}
.cs-faq-item summary::-webkit-details-marker{display:none}
.cs-faq-arrow{flex:none;width:20px;height:20px;color:var(--purple-deep);transition:transform .3s}
.cs-faq-item[open] .cs-faq-arrow{transform:rotate(180deg)}
.cs-faq-a{padding:0 20px 16px;font-size:14px;color:var(--ink-2);line-height:1.8}
.cs-faqnote{max-width:860px;margin:20px auto 0;text-align:center;font-size:14px;color:var(--ink-2);line-height:1.9}
@media (max-width:1024px){.cs-values{grid-template-columns:1fr 1fr}}
@media (max-width:768px){.cs-values{grid-template-columns:1fr}}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .cs-hero .hero-row{grid-template-columns:1fr}
  .cs-hero .hero-media img{height:240px}
  .cs-wall{columns:2}
  .cs-stats{grid-template-columns:1fr 1fr}
  .cs-reviews{grid-template-columns:1fr}
  .cs-services{grid-template-columns:1fr 1fr}
  .cs-cta{grid-template-columns:1fr}
}
@media (max-width:768px){
  .cs-wall{columns:1}
}
@media (max-width:480px){
  .cs-services{grid-template-columns:1fr}
  .cs-hero .hero-media img{height:200px}
}