/* CaseDetail —— 「案例详情」页（Figma 1868:11148，375×1672 长页）。

   结构（坐标全为页面绝对值，来自 metadata 逐条核对）：
     Navigation  0..94.697   返回键 24 @16,12 + 胶囊 87×32 @261 + 标题
     banner      y96  h211    源图 375×316.265 上提 92
     mid         x16 y319 宽343
       title    y319 高86    标题18/26 + 副标14/22 + 3 个标签
       info     y429 高224   案例信息：标题22 + 六宫格(165.5 宽 gap12)
       proc     y677 高166.33 施工过程：标题行22 + 3 图(106.333 gap12)
       shop     y867.33 高270 推荐门店：标题行22 + 2 卡(114 高 gap12)
       sim      y1161.33 高431 相似案例：标题22 + 2×2 卡(166, 行距 2.5)
     btn         y1584 343×48 底部「预约同款」

   ★ 长页：壳固定一屏、内容在 .mzh-home__scroll 内滚（同首页）。
   ★ 按钮是**页面级固定层**，不随内容滚走。 */

.mzh-phone--case-detail {
  height: var(--layout-viewport-height);
  /* ★ display:flex column —— 让 .mzh-case-detail__scroll 能用 flex:1 拿到一屏高。
     壳是自定义元素的子级？不对，壳就是 .mzh-phone（div），这里只加 flex。 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--case-detail-page-bg);
}

/* ★ 三层约束（每层都要显式，否则自定义元素会被内容撑开）：
     壳 .mzh-phone            display:flex column + height 812
     └ mzh-case-detail       flex:1 + min-height:0（否则 1777）
       └ __scroll            flex:1 + min-height:0（父级是 block 时改用 height:100%）
   ⚠️ mzh-case-detail 被设成 display:block 后，__scroll 的 flex:1 无处生效 ——
     两种都写：先 height:100%，父级哪天变回 flex 时 flex:1 又能兜住。 */
.mzh-phone--case-detail > mzh-case-detail {
  flex: 1;
  min-height: 0;
  display: block;
  height: 100%;
  overflow: hidden;
}

.mzh-case-detail__scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* 底部留白：按钮 48 + 系统区 34 + 间距 6 */
  padding-bottom: var(--case-detail-btn-reserved);
  scrollbar-width: none;
}

.mzh-case-detail__scroll::-webkit-scrollbar {
  display: none;
}

/* ── 导航（1868:11223，高 94.697）──
   ⚠️ 状态栏绝对定位在滚动容器里（设计稿 1868:11228 是 frame 内的 instance），
     它不占流内高度 → nav 的 top 必须是 44，否则 banner 会早 44px。 */
.mzh-case-detail__nav {
  position: relative;
  /* 高度 = 状态栏 44 + 标题栏 48 + 溢出 2.697 = 94.697 */
  height: var(--case-detail-nav-height);
  box-sizing: border-box;
  /* 状态栏是兄弟节点、绝对定位（不占流）→ 用 padding-top 给 nav 内的
     title 层让出 44，title 从 y44 开始。 */
  padding-top: var(--case-detail-nav-statusbar-h);
}

/* ★ 标题栏独立一层（48 高，从状态栏下方 y44 开始），返回键与胶囊都在里面
   垂直居中 —— 若直接在 nav 上用 align-items:center，会按「nav 剩余空间」
   算（94.697 − 44 = 50.7），把 24 高的返回键放到 y57（偏下 12）。
   必须先切出 48 高的 title 层，再在里面居中。 */
.mzh-case-detail__nav-title {
  position: relative;
  /* 状态栏高度已由 nav 的 padding-top 让出，这里只要自身的 48 高。 */
  height: var(--case-detail-nav-title-h);
  display: flex;
  align-items: center;
}

.mzh-case-detail__back {
  position: relative;      /* ★ flex 子项，靠 align-items:center 垂直居中 */
  flex: none;
  top: auto;
  width: var(--case-detail-nav-back-size);
  height: var(--case-detail-nav-back-size);
  display: block;
  border: 0;
  background: transparent;
  padding: 0;
  margin-left: var(--case-detail-nav-back-x);   /* 横向位置只由 margin 给 */
  cursor: pointer;
  z-index: 1;
}

/* ★ 用户提供的 back.svg 本身就是 24×24 —— 直接铺满按钮框，不缩放。 */
.mzh-case-detail__back img {
  width: var(--case-detail-nav-back-icon);
  height: var(--case-detail-nav-back-icon);
  display: block;
}

.mzh-case-detail__nav-capsule {
  position: absolute;
  right: var(--case-detail-nav-capsule-right);
  /* ★ 在 48 高 title 层内垂直居中：(48 − 32) / 2 = 8 */
  top: var(--case-detail-nav-capsule-offset);
  width: var(--case-detail-nav-capsule-w);
  height: var(--case-detail-nav-capsule-h);
  display: block;
  z-index: 1;
}

/* 状态栏改用 mzh-statusbar 组件（按背景亮度自动选深/浅版）。
   定位与尺寸样式在 components/status-bar/status-bar.css。 */
.mzh-case-detail mzh-statusbar {
  height: var(--case-detail-nav-statusbar-h);
}

/* ── banner（1868:11293，y96 h211）── */
.mzh-case-detail__banner {
  position: relative;
  width: 100%;
  height: var(--case-detail-banner-h);
  overflow: clip;
}

.mzh-case-detail__banner img {
  position: absolute;
  left: 0;
  top: calc(-1 * var(--case-detail-banner-raise));
  width: 100%;
  height: var(--case-detail-banner-src-h);
  object-fit: fill;
  display: block;
}
/* ── mid（1868:11349，x16 y319 宽 343）──
   ⚠️ 不要加 margin-top —— banner 已在正常流里占位，
     再加 banner-h 会重复 211px（实测整页下移 210）。 */
.mzh-case-detail__mid {
  position: relative;
  width: var(--case-detail-mid-w);
  margin-left: var(--case-detail-mid-x);
  /* banner(96..307) 与 mid(319) 之间 12px */
  margin-top: var(--case-detail-banner-gap);
}

/* 标题区 1868:11301（高 86）：18/26 + gap8 + 14/22 + gap8 + 标签 22 */
.mzh-case-detail__title {
  display: flex;
  flex-direction: column;
  gap: var(--case-detail-title-gap);
  align-items: flex-start;
}

.mzh-case-detail__title-main {
  width: 100%;
  font-size: var(--case-detail-title-size);
  line-height: var(--typography-title-line-height);
  font-weight: var(--typography-weight-medium);
  color: var(--button-secondary-fg-default);
  /* ★ 左对齐 —— 设计稿逐行实测：标题文字起于 x17、地址 x17，与下面第一个标签 x16 对齐。
     Figma 给的是 text-center（我渲染出来 x67/x125），按用户要求与实测改为 left。 */
  text-align: left;
}

.mzh-case-detail__title-sub {
  width: 100%;
  font-size: var(--case-detail-sub-size);
  line-height: var(--typography-body-line-height);
  font-weight: var(--typography-weight-regular);
  color: var(--color-text-tertiary);
  text-align: left;
}

/* 标签组 1915:8984（三个，gap 8） */
.mzh-case-detail__tags {
  display: flex;
  gap: var(--case-detail-tag-gap);
}

.mzh-case-detail__tag {
  height: var(--case-detail-tag-h);
  display: flex;
  align-items: center;
  padding: 0 var(--case-detail-tag-pad-x);
  border-radius: var(--case-detail-tag-radius);
  background: var(--case-detail-tag-bg);
  font-size: var(--typography-small-font-size);
  line-height: var(--typography-small-line-height);
  font-weight: var(--typography-weight-regular);
  color: var(--color-text-brand);
  white-space: nowrap;
}

/* 收藏 1879:21131（mid 内 x323 y3，20×20） */
.mzh-case-detail__fav {
  position: absolute;
  right: 0;
  top: var(--case-detail-fav-y);
  width: var(--case-detail-fav-size);
  height: var(--case-detail-fav-size);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

/* ── 区块标题行（「案例信息」/「施工过程」/「推荐门店」/「相似案例」）── */
/* ★ 段间距一律 24（设计稿 mid 内：title86 → info110 → proc358 → shop548.33 → sim842.33）。
   实测各段绝对 y（= mid顶319 + 相对）：
     title 319   info 429   proc 677   shop 867.33   sim 1161.33   btn 1584（壳底固定） */
.mzh-case-detail__sec {
  margin-top: var(--case-detail-gap-section);
}

.mzh-case-detail__sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--case-detail-sec-head-h);
}

.mzh-case-detail__sec-title {
  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);
}

.mzh-case-detail__sec-note {
  font-size: var(--case-detail-proc-note-size);
  line-height: var(--typography-caption-line-height);
  font-weight: var(--typography-weight-regular);
  color: var(--color-text-quaternary);
  white-space: nowrap;
}

/* ── 案例信息六宫格（1868:11328）── */
.mzh-case-detail__info-grid {
  display: grid;
  grid-template-columns: var(--case-detail-info-cell-w) var(--case-detail-info-cell-w);
  gap: var(--case-detail-info-cell-gap);
  margin-top: var(--case-detail-info-grid-y);
}

.mzh-case-detail__info-cell {
  width: var(--case-detail-info-cell-w);
  min-height: var(--case-detail-info-cell-h);
  display: flex;
  align-items: center;
  padding: var(--case-detail-info-cell-py) var(--case-detail-info-cell-px);
  border-radius: var(--case-detail-info-cell-radius);
  background: var(--button-secondary-bg-default);
  overflow: clip;
}

.mzh-case-detail__info-cell--short {
  min-height: var(--case-detail-info-cell-h-last);
}

.mzh-case-detail__info-text {
  font-size: var(--typography-body-font-size);
  line-height: var(--typography-body-line-height);
  font-weight: var(--typography-weight-regular);
  color: var(--color-text-tertiary);
}

/* ── 施工过程三图（1868:11377）── */
.mzh-case-detail__proc {
  display: flex;
  gap: var(--case-detail-proc-img-gap);
  margin-top: var(--case-detail-info-grid-y);
}

.mzh-case-detail__proc-item {
  flex: none;
  width: var(--case-detail-proc-img-w);
  display: flex;
  flex-direction: column;
  gap: var(--case-detail-proc-cap-gap);
}

.mzh-case-detail__proc-img {
  position: relative;
  width: 100%;
  height: var(--case-detail-proc-img-h);
  border-radius: var(--case-detail-proc-img-radius);
  background: var(--case-detail-proc-img-bg);
  overflow: clip;
}

.mzh-case-detail__proc-img img {
  position: absolute;
  top: 0;
  left: var(--case-detail-center);
  transform: translateX(var(--case-detail-neg-half));
  width: var(--case-detail-proc-img-src-w);
  height: var(--case-detail-proc-img-src-h);
  object-fit: cover;
  display: block;
}

.mzh-case-detail__proc-cap {
  width: 100%;
  font-size: var(--typography-body-font-size);
  line-height: var(--typography-body-line-height);
  font-weight: var(--typography-weight-regular);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

/* ── 推荐门店（1868:11490，两卡 114 高 gap 12）── */
.mzh-case-detail__shops {
  display: flex;
  flex-direction: column;
  gap: var(--case-detail-shop-card-gap);
  /* ★ 门店段用 18（实测间距 26，比其它段宽） */
  margin-top: var(--case-detail-shop-list-y);
}

.mzh-case-detail__shop {
  position: relative;
  width: 100%;
  height: var(--case-detail-shop-card-h);
  display: flex;
  align-items: center;
  gap: var(--case-detail-shop-info-gap);
  padding: var(--case-detail-shop-pad);
  border: 0;
  border-radius: var(--case-detail-info-cell-radius);
  background: var(--color-bg-primary);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  overflow: clip;
}

.mzh-case-detail__shop-thumb {
  position: relative;
  flex: none;
  width: var(--case-detail-shop-thumb);
  height: var(--case-detail-shop-thumb);
  border-radius: var(--case-detail-info-cell-radius);
  background: var(--case-detail-proc-img-bg);
  overflow: clip;
}

.mzh-case-detail__shop-thumb img {
  position: absolute;
  top: var(--case-detail-center);
  left: var(--case-detail-center);
  transform: translate(var(--case-detail-neg-half), var(--case-detail-neg-half));
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mzh-case-detail__shop-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--case-detail-shop-info-gap);
}

.mzh-case-detail__shop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mzh-case-detail__shop-name {
  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;
}

.mzh-case-detail__shop-score {
  display: flex;
  align-items: center;
  gap: var(--case-detail-score-gap);
}

.mzh-case-detail__shop-score img {
  width: var(--case-detail-star-size);
  height: var(--case-detail-star-size);
  display: block;
}

.mzh-case-detail__shop-score span {
  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);
}

.mzh-case-detail__shop-addr {
  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;
}

.mzh-case-detail__shop-tags {
  display: flex;
  gap: var(--case-detail-tag-gap);
}

/* ── 相似案例 2×2（1915:8910 与 P05 同构；行距 2.5、列 x177.5）──
   ⚠️ 复用 P05 的 .mzh-case-card，但它在 grid 里会被拉伸
     （实测高 330 vs 设计 204）—— 必须显式 height + align-self。 */
.mzh-case-detail__sim {
  display: grid;
  grid-template-columns: var(--case-list-card-w) var(--case-list-card-w);
  justify-content: start;
  column-gap: var(--case-list-card-gap-x);
  row-gap: var(--case-detail-sim-row-gap);
  margin-top: var(--case-detail-sim-list-y);
}

.mzh-case-detail__sim .mzh-case-card {
  align-self: start;
  height: var(--case-list-card-h);
}

/* ── 底部按钮（1868:11487，页面级固定层）──
   ★ 按钮底距壳底 40 —— 设计稿实测按钮 y1584..1631，页高 1672 → 底距页面底 40px。
   ★ 外层 .mzh-case-detail__cta-bar 是**灰色半透明底**（2026-09-30 用户指定）：
     颜色与页面底色同（#F1F3F5）、**60% 透明度**；
     按钮上边缘与灰底**上边缘**间距 16。
     随按钮一起固定在壳底 —— 滚动时按钮不会「裸」贴在内容流上。
     布局（壳高 812）：
       按钮  y724..772（底距壳底 40，**不贴底**）
       灰底  y760..812（高 52）→ 按钮下边缘 772 → 灰底上边缘 760，间距 12
     ⚠️ 按钮不在灰底容器内（它比灰底高 24px），两者同为壳外固定层，
        靠 z-index 让灰底垫在按钮下面。 */
.mzh-case-detail__cta-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--case-detail-cta-bar-h);
  background: var(--case-detail-cta-bar-bg);
  z-index: var(--case-detail-cta-bar-z);
  pointer-events: none;             /* 灰底不吃点击 */
}

.mzh-case-detail__cta {
  position: absolute;
  left: var(--case-detail-mid-x);
  bottom: var(--case-detail-cta-bottom);
  z-index: var(--case-detail-cta-z);
  pointer-events: auto;      /* 灰底 pointer-events:none，按钮要显式打开 */
  width: var(--case-detail-btn-w);
  height: var(--case-detail-btn-h);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--case-detail-btn-radius);
  background: var(--case-detail-btn-bg);
  font-family: inherit;
  font-size: var(--typography-title-font-size);
  line-height: var(--typography-title-line-height);
  /* 设计稿 1868:11488「预约同款」是普通 CTA 文字（18/26 Medium），
     不是主视觉 Hero —— R15 规定 600 只给 Hero，这里用 500。 */
  font-weight: var(--typography-weight-medium);
  color: var(--button-primary-fg-default);
  cursor: pointer;
  z-index: var(--case-detail-cta-z);
}