/* 2026-10-25：案例首屏改「作品封面」。
   原来 88px 居中大白字 + 近乎全黑的封面图，标题比作品抢眼，小区名还在副标里重复一次。
   现在：图仍是主角，标题压到 ≤54px 并靠左下，副标只留「城市 · 区」，重复的小区名去掉。
   ⚠️ 只作用于 `.case-hero`（案例详情独有），社区页/地域页的 hero--compact 不受影响。 */
.case-hero { min-height:64svh; }
.case-hero .hero-overlay {
  background:linear-gradient(180deg,rgba(7,18,35,.08) 30%,rgba(7,18,35,.30) 66%,rgba(7,18,35,.62) 100%); }
.case-hero .hero-content {
  display:block; position:absolute; left:0; right:0; top:auto; bottom:0;
  padding:0 clamp(var(--space-6),6vw,var(--space-16)) 6svh; text-align:left; }
.case-hero .hero-title {
  margin:0; max-width:22em; text-align:left; line-height:1.16; letter-spacing:-0.01em;
  font-size:clamp(2rem,4.4vw,3.5rem); }
.case-hero .hero-title-ch {
  display:block; margin-top:var(--space-4); font-weight:400; opacity:.88; letter-spacing:.03em;
  font-size:clamp(var(--fs-small),1.2vw,var(--fs-body)); }
@media (max-width:767px){
  .case-hero { min-height:56svh; }
  .case-hero .hero-content { padding:0 var(--space-6) 5svh; }
}
/* 2026-10-16：本页「相关案例」的卡面样式**整块删除** —— 那 6 条 `.rel-case-*` 规则
   是 case-card 的第二份实现（白壳 + 内边距 + 蓝胶囊压图 + 蓝色区位链接），
   已由 shared.css 的 `.case-card` 组件接管（照片零遮挡 + 两行题注 + 规线色标）。
   本文件只留**栅格**：卡面长什么样是 shared.css 的事。 */
.rel-cases-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); margin-top:var(--space-10); }
@media (max-width:1023px){ .rel-cases-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .rel-cases-grid { grid-template-columns:1fr; } }
.case-sol-links { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--space-1-5) var(--space-2); margin-top:var(--space-8); }
.case-sol-label { font-size:var(--fs-caption); color:var(--gray-500); margin-right:var(--space-1); }
.case-sol-chip { display:inline-flex; align-items:center; padding:var(--space-1) var(--space-3); border:1px solid rgba(11,31,58,.1); border-radius:var(--radius-md); color:var(--navy-900); background:transparent; font-size:var(--fs-small); font-weight:400; text-decoration:none; transition:color var(--duration-fast) var(--ease-out-quart), border-color var(--duration-fast) var(--ease-out-quart), background-color var(--duration-fast) var(--ease-out-quart); }
.case-sol-chip:hover { color:var(--blue-600); border-color:rgba(74,144,226,.35); background:rgba(74,144,226,.06); }
.case-actions { display:flex; flex-direction:column; align-items:center; gap:var(--space-8); margin-top:var(--space-10); padding-top:var(--space-8); border-top:1px solid var(--gray-300); }
.case-cta-main { width:100%; max-width:360px; min-height:var(--btn-h-lg); padding:0 var(--space-8); font-size:var(--fs-body-lg); box-shadow:var(--shadow-brand); }
.case-cta-main:hover { box-shadow:var(--shadow-brand-hover); }
.case-wecom-nudge { display:flex; flex-direction:column; align-items:center; gap:var(--space-3); width:100%; max-width:360px; }
.case-wecom-nudge .wecom-card { width:100%; max-width:360px; margin-top:0; }
.case-wecom-nudge .wecom-card-body { display:flex; flex-direction:column; align-items:center; gap:var(--space-4); width:100%; }
.case-wecom-nudge .wecom-card-name { text-align:center; }
.case-wecom-nudge .wecom-card-desc { text-align:center; }
.case-wecom-nudge .wecom-card-body .wecom-card-btn.wecom-kf { display:inline-flex; align-items:center; gap:var(--space-2); padding:0; height:auto; line-height:1; white-space:nowrap; width:auto; background:transparent; border:0; box-shadow:none; color:var(--blue-600); font-size:var(--fs-body-sm); font-weight:500; text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(74,144,226,.35); transition:color var(--duration-fast) var(--ease-out-quart), text-decoration-color var(--duration-fast) var(--ease-out-quart); }
.case-wecom-nudge .wecom-card-body .wecom-card-btn.wecom-kf:hover { color:var(--white); text-decoration-color:var(--white); }
.case-wecom-nudge .wecom-card-body .wecom-card-btn .wecom-ico { width:0.9375rem; height:0.9375rem; margin-right:0; }
.case-wecom-nudge .wecom-card-body .wecom-card-btn.wecom-zoom-ghost { display:inline-flex; width:auto; height:auto; line-height:1; padding:0.45rem var(--space-4); border:1px solid rgba(11,31,58,.18); border-radius:var(--radius-sm); color:var(--navy-900); background:transparent; box-shadow:none; font-size:var(--fs-caption); font-weight:500; }
.case-wecom-nudge .wecom-card-body .wecom-card-btn.wecom-zoom-ghost:hover { border-color:var(--blue-500); color:var(--blue-600); }
.case-actions-row { display:flex; align-items:center; justify-content:space-between; width:100%; max-width:360px; gap:var(--space-4); }
/* 🔴 2026-10-10 harden 批：`.case-comm-link-a` / `.case-back-link` 此前**无纵向内距** ⇒
   命中区高实测 23.8 / 22.1，**低于 WCAG 2.5.8（AA）的 24 下限**。
   二者都是 `inline-flex`（原子行内盒，不享受「行内豁免」），且所在容器 `.case-comm-link`
   / `.case-actions-row` 均为 flex ⇒ 加 padding-block 撑高不会压到相邻行。
   ⚠️ 只补到过 AA；站点口径 44 需要更大幅度，留在探针 LOW 档提示（不阻塞）。 */
.case-comm-link { text-align:center; }
.case-comm-link-a { display:inline-flex; align-items:center; gap:var(--space-2); padding-block:var(--space-1); color:var(--gray-500); font-size:var(--fs-caption); font-weight:400; text-decoration:none; transition:color var(--duration-fast) var(--ease-out-quart); }
.case-comm-link-a:hover { color:var(--navy-900); }
.case-comm-link-a .icon.arrow { width:15px; height:15px; transition:transform var(--duration-fast) var(--ease-out-quart); }
.case-comm-link-a:hover .icon.arrow { transform:translateX(3px); }
.case-back-link { display:inline-flex; align-items:center; gap:var(--space-2); padding-block:var(--space-1); color:var(--gray-600); font-size:var(--fs-body-sm); font-weight:500; text-decoration:none; transition:color var(--duration-fast) var(--ease-out-quart), transform var(--duration-fast) var(--ease-out-quart); }
.case-back-link:hover { color:var(--navy-900); }
.case-back-link:hover .icon { transform:translateX(-3px); }
.case-back-link .icon { width:18px; height:18px; transition:transform var(--duration-fast) var(--ease-out-quart); }
.btn-copy { display:inline-flex; align-items:center; gap:var(--space-2); min-height:var(--btn-h); padding:0 var(--space-4); border:1px solid rgba(11,31,58,.18); color:#0b1f3a; background:#fff; border-radius:var(--radius-full); font-size:var(--fs-caption); font-weight:500; transition:background-color var(--duration-fast) var(--ease-out-quart), border-color var(--duration-fast) var(--ease-out-quart), transform var(--duration-fast) var(--ease-out-quart), color var(--duration-fast) var(--ease-out-quart); }
.btn-copy .icon { width:15px; height:15px; }
.btn-copy:hover { background:rgba(11,31,58,.06); border-color:rgba(11,31,58,.32); transform:translateY(-1px); }
.btn-copy:active { transform:translateY(0); }
.btn-copy.copied { background:rgba(22,163,74,.08); border-color:var(--color-success); color:var(--color-success-ink); }
.btn-copy.copied .icon { color:var(--color-success); }
/* 2026-09-25：旧 #ecfdf5/#10b981/#059669 三值既**体系外**、文字对比度又只有 3.58:1（14px 正文需 ≥4.5）—— 与 --color-interactive 同族的漏改。 */
.case-wecom-nudge .wecom-card-btn + .wecom-card-btn { margin-top:var(--space-3); }
@media (min-width: 641px) { .case-actions-row { width:auto; gap:var(--space-8); } }
/* v1 新增：案例深内容 + 空间图集 */
/* 2026-10-08：卡片撑满 1136px ⇒ 简介排到 75.7 字/行。
   收成 720px（内容 672px ÷ 15px ≈ 45 字/行），与下方 FAQ 的 640px 同族。
   ⚠️ 2026-10-10：同一批把宽度收窄却没让它居中 —— 720px 卡片贴左，在 1184px 内容列里
   右半幅空 464px，与下方 FAQ 一起构成「页面被破坏」的观感 ⇒ 补 auto 居中。 */
.case-brief { margin:var(--space-8) auto 0; padding:var(--space-6); background:var(--cream-100); border-radius:var(--radius-lg); max-width:720px; }
.case-brief-title { font-size:var(--fs-body-lg); color:var(--navy-900); margin-bottom:var(--space-4); }
.case-brief-points { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--space-3); }
.case-brief-p { position:relative; padding-left:var(--space-5); font-size:var(--fs-body-sm); line-height:2;
  color:var(--gray-700); max-width:42em; }   /* 1em ≈ 1 汉字 ⇒ 每行 ≤42 字（2026-10-21 实测 43） */
.case-brief-points .case-brief-p::before { content:''; position:absolute; left:0; top:.85em; width:var(--space-1-5); height:var(--space-1-5); border-radius:var(--radius-full); background:var(--navy-900); }

/* ===== 案例头===== */
.case-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-3); margin-bottom:var(--space-4); }
.case-breadcrumb .case-back-link { font-size:var(--fs-small); color:var(--gray-500); }
.case-bc-sep { color:var(--gray-300); user-select:none; }
.case-bc-loc { font-size:var(--fs-small); color:var(--gray-500); }
.case-detail-chips { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-5); }
.case-detail-chip { font-size:var(--fs-small); color:var(--blue-600); background:rgba(74,144,226,.09); border:1px solid rgba(74,144,226,.22); padding:var(--space-1) var(--space-3); border-radius:var(--radius-md); }
/* 子风格胶囊：**必须紧跟在 .case-detail-chip 之后**（同特异性，后写者胜）。
   它在标签行里排「风格」那枚的**右边一位** —— 位置本身就在表达从属关系。 */
.case-detail-chip--sub {
  --case-ink: var(--navy-800);
  --case-soft: var(--gray-100);
  --case-accent: var(--navy-800);
  color: var(--case-ink);
  background: var(--case-soft);
  border-color: var(--case-accent);
}

/* ===== 案例详情页两栏骨架（2026-10-10：图集从轮播改为网格 + 右侧档案栏）=====
   为什么改：图集 5–43 张，轮播一次只露 1 张（其余靠点箭头或等 6s 自动播放），
   且 16:9 舞台会把 4:3 的原图裁掉一圈；网格图集一屏可扫、比例不裁。
   ⚠️ 每张图仍是 .case-figure-btn（灯箱触发器），只是不再有 .case-slide / 计数器 /
   箭头 / 自动播放 —— 那套 JS（initCaseCarousel）与 CSS 已随之退役。 */
.case-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:var(--space-10); align-items:start; }
.case-main { min-width:0; display:flex; flex-direction:column; gap:var(--space-8); }
.case-lede { margin:0; font-size:var(--fs-body-lg); line-height:1.85; color:var(--gray-700); }
/* 图集：3 列网格，首图占 2×2 作视觉锚点。格子统一 4:3（原图就是这个比例）⇒ 不裁不拉；
   首图 aspect-ratio:auto 让它随 2 行撑开而不与自身比例打架。 */
.case-gallery { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--space-3); }
.case-gallery .case-tile { aspect-ratio: 4 / 3; overflow:hidden; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.case-gallery .case-tile:first-child { grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
.case-gallery .case-tile picture { display:contents; }   /* ⚠️ <picture> 默认 display:inline，会在 button 里多出一个匿名行盒 ⇒ 下面那条百分比高度会失去确定的基准（阶梯图由生成器后处理加 <picture data-rsp>） */
.case-gallery .case-tile img { width:100%; height:100%; object-fit:cover; }
/* 右栏「项目档案」：桌面 sticky 跟在视口里（长图集滚动时档案与预约入口常驻），
   ≤1023 落为静态卡片排在正文之后。 */
.case-rail { position:sticky; top:calc(var(--header-height) + var(--space-4)); display:flex; flex-direction:column; gap:var(--space-4); }
/* 🔴 2026-10-10 D1：案例详情页**同屏曾有三个同功能入口** —— rail 内「免费上门量房」+
   页尾「预约免费量房」+ 全站悬浮「约同款量房」，三个 href 都是 #quote-submit。
   ≥1024 时 rail 是 sticky、**全程可见且带语境**（就在项目档案旁），右下角再挂一个
   同功能悬浮钮只剩噪声与遮挡 ⇒ 本页桌面端隐掉它。
   ⚠️ ≤1023 必须保留：那时 rail 落为静态卡片，滚过就没了，悬浮钮是**仅剩的**常驻入口。
   ⚠️ 本规则写在页面级 CSS（page-case.css，只挂在案例详情页）——
      它不是全场规则；将来若要推广到别的长页，先确认那些页有没有等价的常驻 CTA。 */
@media (min-width: 1024px) { .float-cta { display:none; } }
.case-rail-card { padding:var(--space-6); border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--gray-200); box-shadow:var(--shadow-md); }
.case-rail-h { margin:0 0 var(--space-4); font-size:var(--fs-body-lg); font-weight:700; color:var(--navy-900); }
.case-rail-cta { width:100%; justify-content:center; margin-top:var(--space-5); }
.case-rail-note { margin:var(--space-3) 0 0; font-size:var(--fs-small); line-height:1.6; color:var(--gray-500); text-align:center; }
/* ⚠️ dt/dd 有 UA 默认缩进（dd margin-inline-start:40px），必须显式归零 */
.case-meta { display:flex; flex-direction:column; gap:var(--space-3); margin:0; }
.case-meta-item { display:flex; flex-direction:column; gap:var(--space-1); margin:0; }
.case-meta-k { margin:0; font-size:var(--fs-small); letter-spacing:.08em; color:var(--gray-500); }
.case-meta-v { margin:0; font-size:var(--fs-body-sm); font-weight:600; color:var(--gray-900); }
/* 档案栏里「风格 / 子风格」两行的值有落点（方案 A4）—— 用下划线 + 交互色把
   「可点」表达出来，并给 min-height 24px 守住 WCAG 2.5.8 的下限。
   ⚠️ 不做成 44px 的按钮块：它会出现在 8 行清单里，撑高会让档案栏多出近 200px，
      且这一行的尺寸受相邻非链接文本行高约束 ⇒ 属 WCAG 2.5.8 明文豁免的那一类。
   ⚠️ 别把它挪去 shared.css：档案栏样式已整体迁到本页 CSS（见 shared.css 的迁移说明），
      两处各定义一半时谁生效取决于加载顺序。 */
/* 🔴 2026-10-27 V-18：档案栏其余 7 行是深藏青纯文本，只有「风格 / 子风格」两行
   是蓝字+下划线 ⇒ 在 9 行里像「没写完的 HTML」。改成与正文同色、默认无下划线，
   hover 才出下划线并转交互色 —— 可点性靠光标与 hover 提示，不靠常驻下划线。 */
.case-meta-link { display:inline-flex; align-items:center; min-height:24px; color:inherit; text-decoration:none; border-bottom:1px solid transparent; transition:color var(--duration-fast) var(--ease-out-quart), border-color var(--duration-fast) var(--ease-out-quart); }
.case-meta-link:hover { color:var(--color-interactive-hover); border-bottom-color:currentColor; }
.case-meta-link:focus-visible { outline:2px solid var(--blue-500); outline-offset:2px; }

@media (max-width:1023px) {
  .case-layout { grid-template-columns:minmax(0,1fr); gap:var(--space-8); }
  .case-rail { position:static; }
  .case-gallery { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:767px) {
  /* 手机：**首图满幅 + 其余两列**。一列铺到底的话，43 张那个案例的图集就是 11,000px
     （约 13 屏纯滚动），图集本身反而没人看完；两列后每张仍有 171×128（远高于 44px 触摸下限），
     点开是灯箱看大图。 */
  .case-gallery { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .case-gallery .case-tile:first-child { grid-column:span 2; grid-row:auto; aspect-ratio: 4 / 3; }
}

/* 触摸端 hover 残留复位 —— 必须写在页面级 CSS 内：shared.css 先加载，同优先级下复位会被本文件覆盖
   ⚠️ 2026-10-16：`.rel-case-card:hover` 已从本块**移除** —— 相关案例已改用 `.case-card`
   （shared.css 的全局复位块管它），页面级再列一次属于给不存在的选择器写规则。 */
@media (hover: none) {
  .btn-copy:hover {
    transform: none;
  }
  .case-comm-link-a:hover .icon.arrow,
  .case-back-link:hover .icon {
    transform: none;
  }
}