/* ============ 我们的客户 专属样式 ============
   复用 h-col-136.css 的 token；版式：行业/地区筛选 + 图文案例卡 grid */

.cl-wrap { max-width: 1200px; margin: 0 auto; }
.cl-hero { padding: 90px 40px 56px; background: radial-gradient(ellipse at 50% 0%, rgba(200,150,62,0.10) 0%, transparent 55%); }
.ab-hero-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.cl-lead { font-size: 16px; color: var(--muted); line-height: 1.8; max-width: 720px; margin: 0 auto; }

/* ============ 筛选区 ============ */
.cl-filter { padding: 0 40px 8px; }
.cl-filter-inner { max-width: 1200px; margin: 0 auto; background: var(--white); border: 1px solid var(--border); border-radius: 18px; padding: 22px 26px; box-shadow: 0 10px 30px rgba(44,24,16,0.05); }
.cl-filter-group { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.cl-filter-group + .cl-filter-group { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.cl-filter-label { flex-shrink: 0; font-size: 14px; font-weight: 700; color: var(--brown); line-height: 34px; min-width: 44px; }
.cl-filter-label b { color: var(--gold-dark); }
.cl-filter-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.cl-filter-btn { padding: 7px 20px; border: 1px solid var(--border); border-radius: 100px; background: var(--white); color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s; font-family: inherit; }
.cl-filter-btn:hover { border-color: var(--gold); color: var(--gold-dark); }
.cl-filter-btn.active { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(200,150,62,0.28); }
.cl-filter-count { margin-left: auto; flex-shrink: 0; font-size: 13px; color: var(--muted); line-height: 34px; }
.cl-filter-count b { color: var(--gold-dark); }

/* ============ 案例展示 grid ============ */
.cl-case-section { padding: 40px 40px 90px; }
.cl-case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.cl-case-card {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
  text-decoration: none; transition: transform .28s ease, box-shadow .28s ease;
}
.cl-case-card:hover { transform: translateY(-7px); box-shadow: 0 22px 46px rgba(44,24,16,0.12); }
/* 缩略图 */
.cl-case-thumb {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--bg-alt);
}
.cl-case-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.cl-case-thumb--empty {
  background: linear-gradient(150deg, #2c1810, #1d0f08);
}
/* 缩略图上叠加的副标题 */
.cl-case-thumb-title {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 34px 20px 16px;
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
  font-family: 'Noto Serif SC', serif; font-size: 18px; font-weight: 700;
  color: #fff; line-height: 1.45; text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
/* 保留旧样式兼容 */
.cl-case-top {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end; justify-content: flex-start; padding: 22px;
}
.cl-case-top::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 62%;
  background: linear-gradient(transparent, rgba(0,0,0,0.5)); pointer-events: none;
}
.cl-case-top-title {
  position: relative; z-index: 1; font-family: 'Noto Serif SC', serif;
  font-size: 20px; font-weight: 700; color: #fff; line-height: 1.45;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.cl-case-summary { font-size: 13.5px; color: var(--muted); line-height: 1.75; margin: 0 0 16px; flex: 1; }
.cl-case-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.cl-case-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cl-case-tag { display: inline-block; font-size: 11px; font-weight: 600; color: var(--gold-dark); background: rgba(200,150,62,0.12); border-radius: 100px; padding: 3px 12px; }
.cl-case-tag--region { color: #6b5d52; background: var(--bg-alt); }
.cl-case-body h4 { font-size: 17px; font-weight: 700; color: var(--brown); line-height: 1.45; margin: 0 0 10px; }
.cl-case-body p { font-size: 13.5px; color: var(--muted); line-height: 1.75; margin: 0 0 16px; flex: 1; }
/* 案例数字（与首页一致：金色大数字 + 小标签，每组三数字） */
.case-metrics-row { display: flex; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.case-metric-item { flex: 1; text-align: center; }
.case-metric-item + .case-metric-item { border-left: 1px solid var(--border); }
.metric-num { display: block; font-size: 25px; font-weight: 800; color: var(--gold); line-height: 1.15; margin-bottom: 5px; font-family: 'Noto Serif SC', serif; }
.metric-label { display: block; font-size: 12px; color: var(--muted); font-weight: 500; }

/* 分页 */
.cl-pager { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 46px; flex-wrap: wrap; }
.cl-page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 16px; border: 1px solid var(--border); background: var(--white); color: var(--muted); border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s; font-family: inherit; text-decoration: none; }
.cl-page-btn:hover:not(.disabled):not(.active) { border-color: var(--gold); color: var(--gold-dark); }
.cl-page-btn.active { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(200,150,62,0.28); }
.cl-page-btn.disabled { opacity: .45; cursor: not-allowed; }

/* 虚拟演示标签 */
.cl-case-tag--virtual { color: var(--gold-dark); background: rgba(200,150,62,0.10); border: 1px dashed var(--gold); }

/* 空状态 */
.cl-empty { text-align: center; padding: 70px 20px; color: var(--muted); font-size: 15px; display: none; }
.cl-empty.show { display: block; }

/* 弹窗详情 */
.cl-modal { position: fixed; inset: 0; z-index: 9999; display: none; }
.cl-modal.open { display: block; }
.cl-modal-mask { position: absolute; inset: 0; background: rgba(20,12,6,0.72); }
.cl-modal-dialog {
  position: relative; z-index: 1; max-width: 680px; max-height: 82vh; overflow: auto;
  margin: 6vh auto 0; background: var(--cream); border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35); animation: clPop .3s ease;
}
@keyframes clPop { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: none; } }
.cl-modal-close { position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,0.06); color: var(--brown); font-size: 24px; border: none; cursor: pointer; line-height: 1; }
.cl-modal-close:hover { background: var(--gold); color: #fff; }
.cl-modal-head { padding: 26px 30px 20px; border-bottom: 1px solid var(--border); }
.cl-modal-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cl-modal-head h3 { font-size: 22px; font-weight: 700; color: var(--brown); font-family: 'Noto Serif SC', serif; line-height: 1.4; margin: 0; }
.cl-modal-body { padding: 24px 30px 30px; }
.cl-block { margin-bottom: 22px; }
.cl-block:last-child { margin-bottom: 0; }
.cl-label { display: inline-block; font-size: 13px; font-weight: 700; color: var(--gold-dark); letter-spacing: 1px; margin-bottom: 10px; }
.cl-label::before { content: '◆ '; color: var(--gold); }
.cl-block p { font-size: 15px; color: var(--muted); line-height: 1.95; margin: 0; text-align: justify; }

/* 响应式 */
@media (max-width: 1024px) {
  .cl-case-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .cl-hero { padding: 60px 20px 40px; }
  .cl-filter { padding: 0 20px 4px; }
  .cl-filter-inner { padding: 18px 16px; }
  .cl-filter-label { line-height: 30px; }
  .cl-filter-count { width: 100%; text-align: right; }
  .cl-case-section { padding: 28px 20px 60px; }
  .cl-case-grid { grid-template-columns: 1fr; }
  .cl-case-top-title { font-size: 18px; }
}