/* ==========================================================================
   工程案例 / Engineering Cases —— 列表页 + 详情页样式
   与全站共用 kesion.css 的 CSS 变量（--c-primary 等），不重复定义调色板
   ========================================================================== */

/* ===== 列表页：数据概览 ===== */
.cs-sec{padding:70px 0 90px;background:#fff}
.cs-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:44px}
.cs-stat{background:var(--c-bg);border:1px solid var(--c-line);border-radius:14px;padding:24px 22px;text-align:center;transition:.3s}
.cs-stat:hover{border-color:var(--c-primary);background:#fff;box-shadow:0 8px 24px rgba(1,51,153,.08)}
.cs-stat b{display:block;font-size:32px;font-weight:800;color:var(--c-primary);line-height:1.2;letter-spacing:-.5px}
.cs-stat b i{font-style:normal;font-size:15px;font-weight:600;margin-left:3px;color:#5b7bbd}
.cs-stat span{display:block;margin-top:6px;font-size:13.5px;color:#8a93a5}

/* ===== 列表页：分类筛选 ===== */
.cs-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.cs-tabs .tab{background:#fff;border:1px solid var(--c-line);border-radius:99px;padding:9px 20px;font-size:14px;color:#5a6376;cursor:pointer;transition:.28s;font-family:inherit}
.cs-tabs .tab:hover{border-color:var(--c-primary);color:var(--c-primary)}
.cs-tabs .tab.on{background:linear-gradient(135deg,var(--c-primary),var(--c-primary-d));color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(1,51,153,.28)}

/* ===== 列表页：案例网格 ===== */
/* minmax(0,1fr)：1fr 隐含 min-width:auto，英文/德文案例标题会把列顶宽、整页横向溢出 */
.cs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.cs-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--c-line);border-radius:14px;overflow:hidden;text-decoration:none;transition:.35s;min-width:0}
.cs-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(22,35,63,.12);border-color:transparent}
.cs-ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:#eef1f6}
.cs-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease}
.cs-card:hover .cs-ph img{transform:scale(1.06)}
.cs-ph-none{display:block;width:100%;height:100%;background:linear-gradient(135deg,#eef2f9,#dde5f3)}
.cs-year{position:absolute;left:12px;top:12px;background:rgba(1,51,153,.9);color:#fff;font-size:12.5px;border-radius:6px;padding:3px 10px;backdrop-filter:blur(4px);line-height:1.6}
.cs-bd{padding:20px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.cs-bd h3{font-size:16.5px;color:var(--c-ink);line-height:1.5;margin:0;font-weight:700}
.cs-card:hover .cs-bd h3{color:var(--c-primary)}
.cs-row{display:flex;gap:8px;font-size:13px;line-height:1.7}
.cs-row .k{color:#a3abb9;flex:none;min-width:56px}
.cs-row .v{color:#4a5468;flex:1}
.cs-desc{font-size:13px;color:#8a93a5;line-height:1.8;margin:4px 0 0}
.cs-more{margin-top:auto;padding-top:10px;font-size:13px;color:var(--c-primary);font-weight:600}
.cs-more i{font-style:normal;transition:transform .3s;display:inline-block}
.cs-card:hover .cs-more i{transform:translateX(4px)}

.cs-empty{text-align:center;padding:60px 0;color:#98a1b0;font-size:14px}
.cs-empty a{color:var(--c-primary);font-weight:600}

/* ===== 列表页：底部行动条 ===== */
.cs-cta{padding:0 0 90px}
.cs-cta-in{background:linear-gradient(120deg,var(--c-ink),var(--c-ink-2));border-radius:18px;padding:44px 48px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;position:relative;overflow:hidden}
.cs-cta-in::before{content:"";position:absolute;right:-100px;top:-100px;width:320px;height:320px;border-radius:50%;border:56px solid rgba(255,255,255,.05)}
.cs-cta-in h3{color:#fff;font-size:22px;margin:0 0 8px}
.cs-cta-in p{color:#a8b4cc;font-size:14px;margin:0;line-height:1.8;max-width:560px}
.cs-cta-btns{display:flex;gap:12px;flex-wrap:wrap;position:relative;z-index:1}
.cs-btn{display:inline-block;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:99px;padding:11px 26px;font-size:14px;text-decoration:none;transition:.3s;white-space:nowrap}
.cs-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6)}
.cs-btn-main{background:linear-gradient(135deg,var(--c-primary),var(--c-primary-d));border-color:transparent;box-shadow:0 8px 22px rgba(1,51,153,.4)}
.cs-btn-main:hover{background:linear-gradient(135deg,var(--c-primary-d),var(--c-primary));transform:translateY(-2px)}

/* ===== 详情页 ===== */
.csd-sec{padding:60px 0 90px;background:#fff}
.csd-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:40px;align-items:start}
.csd-card{background:#fff;border:1px solid var(--c-line);border-radius:16px;padding:0 0 34px;overflow:hidden}
.csd-hero{aspect-ratio:16/8;overflow:hidden;background:#eef1f6;margin-bottom:30px}
.csd-hero img{width:100%;height:100%;object-fit:cover;display:block}
.csd-title{font-size:26px;color:var(--c-ink);line-height:1.45;margin:0 0 24px;padding:0 34px;font-weight:800}

/* 工程数据表 */
.csd-info{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--c-line);border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line);margin:0 0 30px}
.csd-info-i{background:#fff;padding:16px 20px;display:flex;gap:12px;font-size:13.5px;line-height:1.75}
.csd-info-i .k{color:#a3abb9;flex:none;min-width:62px}
.csd-info-i .v{color:#33404f;flex:1;font-weight:500}

.csd-block{padding:0 34px;margin-bottom:26px}
.csd-h2{font-size:17px;color:var(--c-ink);margin:0 0 12px;padding-left:12px;position:relative;font-weight:700}
.csd-h2::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:4px;border-radius:2px;background:linear-gradient(180deg,var(--c-primary),var(--c-primary-d))}
.csd-block p{font-size:14.5px;color:#5a6376;line-height:2;margin:0}
.csd-solve{background:#F4F7FE;border-radius:12px;padding:20px 24px;margin-left:34px;margin-right:34px}
.csd-solve .csd-h2{padding-left:0;margin-bottom:10px}
.csd-solve .csd-h2::before{display:none}
.csd-solve p{color:#41506b}

.csd-back{padding:8px 34px 0;margin-top:6px}
.csd-back a{display:inline-block;font-size:14px;color:var(--c-primary);font-weight:600;text-decoration:none;transition:.25s}
.csd-back a:hover{transform:translateX(-3px)}

/* 侧栏：更多案例 */
.csd-side{display:flex;flex-direction:column;gap:22px;position:sticky;top:20px}
.csd-more{background:#fff;border:1px solid var(--c-line);border-radius:14px;padding:22px 20px}
.csd-more-h{font-size:15.5px;color:var(--c-ink);font-weight:700;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--c-line)}
.csd-more-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.csd-more-list li a{display:flex;gap:12px;text-decoration:none;align-items:flex-start}
.csd-more-list .ph{width:76px;height:58px;flex:none;border-radius:8px;overflow:hidden;background:#eef1f6}
.csd-more-list .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.csd-more-list li a:hover .ph img{transform:scale(1.08)}
.csd-more-list .bd{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.csd-more-list .nm{font-size:13.5px;color:var(--c-ink);font-weight:600;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.csd-more-list li a:hover .nm{color:var(--c-primary)}
.csd-more-list .ds{font-size:12px;color:#98a1b0;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.csd-cta{background:linear-gradient(140deg,var(--c-ink),var(--c-ink-2));border-radius:14px;padding:26px 22px;color:#fff;position:relative;overflow:hidden}
.csd-cta::before{content:"";position:absolute;right:-70px;top:-70px;width:200px;height:200px;border-radius:50%;border:40px solid rgba(255,255,255,.05)}
.csd-cta h4{margin:0 0 8px;font-size:16px;position:relative}
.csd-cta p{margin:0 0 16px;font-size:13px;color:#a8b4cc;line-height:1.8;position:relative}
.csd-btn{display:block;text-align:center;background:linear-gradient(135deg,var(--c-primary),var(--c-primary-d));color:#fff;border-radius:99px;padding:11px 0;font-size:14px;text-decoration:none;font-weight:600;position:relative;transition:.3s;box-shadow:0 8px 20px rgba(1,51,153,.35)}
.csd-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(1,51,153,.48)}

/* ===== 响应式 ===== */
@media (max-width:1100px){
  .cs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .csd-layout{grid-template-columns:1fr}
  .csd-side{position:static}
  .cs-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .cs-grid{grid-template-columns:1fr}
  .cs-stats{grid-template-columns:1fr 1fr;gap:12px}
  .cs-stat b{font-size:24px}
  .csd-title{font-size:21px;padding:0 20px}
  .csd-info{grid-template-columns:1fr}
  .csd-block,.csd-back{padding-left:20px;padding-right:20px}
  .csd-solve{margin-left:20px;margin-right:20px}
  .cs-cta-in{padding:30px 24px}
  .cs-tabs .tab{padding:7px 14px;font-size:13px}
}