/* ===========================================================================
   客户案例 —— 列表卡与详情页
   依赖 tokens.css + blog.css（同一套纸/墨语言，此处只加案例自己的部分）
   =========================================================================== */

/* ------------------------------------------------------------- 列表卡 */
.ccard {
  display: grid;
  gap: 10px;
  padding: 30px 0 26px;
  border-top: 1px solid var(--line);
}
.ccard__meta { color: var(--text-faint); }

.ccard__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  font-weight: 600;
  max-width: 44ch;
  text-wrap: balance;
}
.ccard__title a { text-decoration: none; }
.ccard:hover .ccard__title { color: var(--vermilion-600); }

.ccard__client {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
}

.ccard__figs {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 42px;
  margin: 6px 0 2px;
}
.ccard__figs div { display: flex; flex-direction: column; gap: 2px; }
.ccard__figs dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.ccard__figs dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ccard__figs dd small {
  margin-left: 4px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--text-faint);
}

.ccard__link {
  justify-self: start;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.ccard:hover .ccard__link { color: var(--accent); border-bottom-color: var(--accent); }

/* --------------------------------------------------------------- 详情 */
.cs { margin-top: 8px; }

.cs-head { padding: 10px 0 26px; }
.cs-head__meta { color: var(--text-faint); margin-bottom: 14px; }
.cs-head h1 {
  margin: 0;
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 4vw, 3.125rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
  font-weight: 600;
  text-wrap: balance;
}
.cs-head__client {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--text-muted);
}

.cs-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  margin: clamp(26px, 4vw, 48px) 0;
  padding-top: clamp(22px, 3vw, 34px);
  border-top: 1px solid var(--line-strong);
}

.cs-quote blockquote {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  line-height: 1.28;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.cs-quote blockquote span { color: var(--accent); }

/* 与首页 .case__cite 同一观感（site.css 在案例页未加载，这里补一份） */
.case__cite {
  margin-top: 22px;
  padding-left: 16px;
  border-left: 2px solid var(--accent);
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.cs-figwrap__h {
  color: var(--text-faint);
  margin-bottom: 10px;
}
.cs-figs {
  margin: 0;
  border-top: 1px solid var(--line-strong);
}
.cs-figs .figure-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.cs-figs dt { font-size: 0.875rem; color: var(--text-muted); }
.cs-figs dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.9vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cs-figs dd small {
  margin-left: 4px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--text-faint);
}

.cs-body { max-width: 720px; }

/* 相关案例卡在窄容器里收紧一点 */
.bl-related .ccard { border-top: 0; border-bottom: 1px solid var(--line); padding: 18px 0; }
.bl-related .ccard__title { font-size: 1.05rem; }
.bl-related .ccard__figs { display: none; }

@media (max-width: 860px) {
  .cs-grid { grid-template-columns: 1fr; }
  .cs-head h1 { max-width: none; }
}

@media (max-width: 640px) {
  .ccard__figs { gap: 14px 28px; }
}