/* CaseCard —— 「服务案例」页的案例卡（Figma 1914:8280 等 6 张同构卡片）。

   166×204 白卡圆角 12：封面 166×140（只圆上两角 10）+ 标题 14/22 Medium
   + 副标题 12/20（#222 60%），底部内距 8。左上角「精选」绿标签
   36×20（px 8 / 字号 10），只圆 tl-10 tr-2 br-10 bl-2。

   ★ 列间距 11.5（16+166=182 → 193.5），不是 12 —— 用 grid 均分会差 0.5。 */

.mzh-case-list {
  /* ★ 保持 absolute（设计稿 1914:8279 是 top:194 的定位层）——
     滚动由外层 .mzh-case-scroll 负责，这里不动几何。 */
  position: absolute;
  left: 0;
  right: 0;
  top: var(--case-list-list-y);
  height: var(--case-list-list-h);
  display: grid;
  grid-template-columns: var(--case-list-card-w) var(--case-list-card-w);
  /* ★ 不能用 justify-content:center —— 两列 166+166+11.5 = 343.5 居中后
     左边距变成 15.75，卡片整体右移 0.25 且左右不对称。
     设计是左边距 16（1 列起点）、列间距 11.5、右边距 16.5。 */
  justify-content: start;
  padding-left: var(--case-list-list-x);
  column-gap: var(--case-list-card-gap-x);
  row-gap: var(--case-list-card-gap-y);
}

.mzh-case-card {
  position: relative;
  width: var(--case-list-card-w);
  height: var(--case-list-card-h);
  display: flex;
  flex-direction: column;
  /* ★ 文字**左对齐**（卡内 x14），不是居中。
     设计 1914:8283 的文本框在卡内 left 9、宽 148；浏览器里用
     align-items:center 会把「素墙黛瓦立面焕新」推到 x44（设计 x30）。
     父容器 items-center 只作用于封面这类固定宽度元素。 */
  align-items: flex-start;
  padding-bottom: var(--case-list-card-pad-b);
  border: 0;
  border-radius: var(--case-list-card-radius);
  background: var(--case-card-bg);
  font-family: inherit;
  color: var(--button-secondary-fg-default);
  cursor: pointer;
  overflow: clip;
}

.mzh-case-card__cover {
  position: relative;
  flex: none;
  align-self: center;
  width: var(--case-list-cover-w);
  height: var(--case-list-cover-h);
  border-radius: var(--case-list-cover-radius) var(--case-list-cover-radius) 0 0;
  overflow: clip;
}

.mzh-case-card__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mzh-case-card__title {
  margin-top: var(--case-list-card-title-offset);
  margin-left: var(--case-list-card-text-x);
  width: var(--case-list-card-title-w);
  /* ★ 必须显式左对齐 —— 全局 body/容器有 text-align:center 会被继承，
     span 宽 148 而文字只有 112 → 居中后右移 18px（实测墨量 x43 vs 设计 x26）。 */
  text-align: left;
  font-size: var(--typography-body-font-size);
  line-height: var(--typography-body-line-height);
  font-weight: var(--typography-weight-medium);
  color: var(--button-secondary-fg-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mzh-case-card__sub {
  margin-top: var(--case-list-card-sub-offset);
  margin-left: var(--case-list-card-text-x);
  width: var(--case-list-card-title-w);
  text-align: left;
  font-size: var(--typography-caption-font-size);
  line-height: var(--typography-caption-line-height);
  font-weight: var(--typography-weight-regular);
  color: var(--color-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 左上角「精选」标签 1914:8285：left 6 / top 6、h 20、px 8、10px 白字 */
.mzh-case-card__badge {
  position: absolute;
  left: var(--case-list-badge-x);
  top: var(--case-list-badge-y);
  height: var(--case-list-badge-h);
  display: flex;
  align-items: center;
  padding: 0 var(--case-list-badge-pad-x);
  border-radius: var(--case-list-badge-radius);
  background: var(--color-text-brand);
  font-size: var(--case-list-badge-size);
  line-height: var(--case-list-badge-line-height);
  color: var(--button-primary-fg-default);
  white-space: nowrap;
}