/* ============================================================
   操盘实证 · 案例墙
   素材来自 opc-workbench.html 第 27~37 页（CHAPTER 05 · 操盘实证）。
   原本是 10 张整屏幻灯片 + 1 页文字卡片；这里压成一屏可横滑的案例墙，
   保留原页的核心动效：图片浮起 + 金色数字「砸」在图上（ev1slam）。
   ============================================================ */

.case-wall {
  /* ⭐ 本墙落在浅色米底页面（ip-growth）上，投影必须跟主站 --shadow 同色相
     （120,90,55 暖棕）；沿用深色区那套冷黑 rgba(10,14,20,.22) 会在米底上
     显脏、边界生硬。描边同步提亮，让深色块像「压」在纸面上而非浮着。 */
  margin: 30px 0 0;
  padding: 26px 26px 22px;
  border: 1px solid rgba(201, 168, 106, .38);
  border-radius: 20px;
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(255, 197, 61, .10), transparent 58%),
    linear-gradient(180deg, #191d24, #14171d);
  box-shadow: 0 18px 50px rgba(120, 90, 55, .20);
}


/* 轨道：桌面 grid 平铺，窄屏退化为 scroll-snap 横滑 */
.case-wall-rail {
  display: grid;
  /* ⭐ minmax 300 → 420：素材是 1440×660 的整屏幻灯片截图（2.18:1），
     300px 宽格里图内小字完全不可辨，等于把「证据」缩成马赛克。
     420px 下 1080px 容器一行放 2 张，单图 ~484px，图中文字可读。 */
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 16px;
}

.case-card {
  position: relative;
  min-width: 0;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #0f1216;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
  /* ⭐ 入场动画挂在 .case-shot（图片容器）上，悬停缩放挂在 .case-shot img 上。
     两条 transition 若都写给同一个元素会互相抢 transform —— 分层最干净。 */
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .55s cubic-bezier(.22, .7, .3, 1), transform .55s cubic-bezier(.22, .7, .3, 1);
}
.case-wall.is-in .case-card { opacity: 1; transform: none; }

/* 5 级交错，与海报墙同一套节奏 */
.case-wall.is-in .case-card:nth-child(1) { transition-delay: 0s; }
.case-wall.is-in .case-card:nth-child(2) { transition-delay: .07s; }
.case-wall.is-in .case-card:nth-child(3) { transition-delay: .14s; }
.case-wall.is-in .case-card:nth-child(4) { transition-delay: .21s; }
.case-wall.is-in .case-card:nth-child(5) { transition-delay: .28s; }
.case-wall.is-in .case-card:nth-child(6) { transition-delay: .35s; }
.case-wall.is-in .case-card:nth-child(7) { transition-delay: .42s; }
.case-wall.is-in .case-card:nth-child(8) { transition-delay: .49s; }
.case-wall.is-in .case-card:nth-child(9) { transition-delay: .56s; }
.case-wall.is-in .case-card:nth-child(10) { transition-delay: .63s; }

.case-shot {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1440 / 660;
  overflow: hidden;
  background: #0b0e12;
  cursor: zoom-in;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
}
.case-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .5s cubic-bezier(.22, .7, .3, 1);
}
.case-shot:hover img,
.case-shot:focus-visible img { transform: scale(1.045); }
.case-shot:focus-visible { outline: 2px solid #ffc53d; outline-offset: -2px; }

/* 底部压暗，保证图上文字可读 */
.case-shot::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(180deg, transparent, rgba(8, 10, 13, .82));
  pointer-events: none;
}

/* 金色数字：原页 ev1slam 的移植（scale 2.4 → .94 → 1） */
.case-metric {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 0 16px 14px;
  pointer-events: none;
}
.case-metric b {
  display: inline-block;
  color: #ffc53d;
  font-size: 46px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 1px;
  text-shadow: 0 6px 20px rgba(0, 0, 0, .55);
  opacity: 0;
  transform: scale(2.4);
}
.case-wall.is-in .case-card.on .case-metric b {
  animation: caseSlam .58s cubic-bezier(.22, .9, .32, 1.18) both;
}
@keyframes caseSlam {
  0%   { opacity: 0; transform: scale(2.4); }
  62%  { opacity: 1; transform: scale(.94); }
  100% { opacity: 1; transform: scale(1); }
}

.case-cap {
  display: block;
  padding: 12px 15px 14px;
  background: #171b21;
}
.case-cap b {
  display: block;
  color: #f2e3c8;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
}
.case-cap span {
  display: block;
  margin-top: 5px;
  color: #93a3b5;
  font-size: 12.5px;
  line-height: 1.6;
}


/* ── 第37页：其他咨询案例文字网格 ── */
.case-more { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(201, 168, 106, .2); }
.case-more h4 {
  margin: 0 0 14px;
  color: #f2e3c8;
  font-size: 16.5px;
  font-weight: 800;
}
.case-more-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 11px;
}
.case-more-grid li {
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 13px;
  background: rgba(255, 255, 255, .04);
}
.case-more-grid b {
  display: block;
  color: #f2e3c8;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
.case-more-grid span {
  display: block;
  margin-top: 6px;
  color: #a9b8c9;
  font-size: 12.5px;
  line-height: 1.7;
}

/* ── 灯箱 ── */
.case-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
  background: rgba(8, 11, 16, .9);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s ease, visibility .24s ease;
}
.case-lightbox.is-open { opacity: 1; visibility: visible; }
.case-lightbox-figure { margin: 0; max-width: min(1500px, 100%); }
.case-lightbox-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.case-lightbox-figure figcaption {
  margin-top: 13px;
  color: #e6d6b8;
  font-size: 14px;
  text-align: center;
}
.case-lightbox-bar {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  gap: 9px;
}
.case-lightbox-btn {
  min-height: 38px;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 11px;
  background: rgba(16, 24, 38, .8);
  color: #fff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.case-lightbox-btn:hover { background: rgba(30, 42, 62, .9); }
.case-lightbox-hint {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: #9fb0c4;
  font-size: 12.5px;
}

/* 灯箱打开时锁滚动。类名与海报墙的 plb-lock 分开，避免两套互相覆盖。 */
body.opc-case-lock { overflow: hidden; }

/* 禁用 JS 时兜底：否则 opacity:0 会让案例永久不可见 */
@media (prefers-reduced-motion: reduce) {
  .case-card { transition: none; }
  .case-metric b { animation: none; opacity: 1; transform: none; }
}

@media (max-width: 980px) {
  .case-wall-rail {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .case-card { flex: 0 0 78%; scroll-snap-align: center; }
  .case-metric b { font-size: 38px; }
  .case-lightbox { padding: 16px; }
  .case-lightbox-hint { display: none; }
  .case-lightbox-bar { top: 12px; right: 12px; }
  .case-lightbox-btn { padding: 9px 13px; font-size: 13px; }
}

@media (max-width: 620px) {
  .case-wall { padding: 20px 15px 18px; border-radius: 17px; }
  .case-card { flex-basis: 86%; }
}

/* ── 灯箱左右切换（2026-10-21 用户要求）── */
.case-lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 50%;
  background: rgba(16, 24, 38, .82);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.case-lightbox-nav:hover { background: rgba(30, 42, 62, .92); }
.case-lightbox-nav.is-prev { left: 14px; }
.case-lightbox-nav.is-next { right: 14px; }
.case-lightbox-nav[hidden] { display: none; }
.case-lightbox-count { align-self: center; margin-right: 4px; color: #cfdcea; font-size: 13px; font-weight: 700; }

/* ⭐ 窄屏：案例必须一张一张完整看到。
   原来 .case-wall-rail 的最小列宽是 420px，390px 屏上卡片直接超出视口、右边被切掉一半，
   用户以为「案例没展示全」。这里改成单列满宽 + 图片按自身比例展示（不裁切）。 */
@media (max-width: 760px) {
  /* ⭐ 980px 断点把轨道改成了 flex 横滑（overflow-x:auto + flex:0 0 78%），卡片被挤出视口右边，
     手机上只能看到半张——只写 grid-template-columns 对 flex 容器完全无效。
     必须把 display 改回 grid 并清掉横滑属性，否则「案例展示不全」会一直复现。 */
  .case-wall-rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
    gap: 12px;
  }
  /* 覆盖 980 / 620 断点给 .case-card 设的 flex 宽度，单列时按容器满宽走 */
  .case-card { flex: none; }
  .case-shot { aspect-ratio: auto; }
  .case-shot img { height: auto; object-fit: contain; object-position: center; }
  .case-metric { padding: 0 12px 10px; }
  .case-metric b { font-size: 32px; letter-spacing: 0; }
  .case-lightbox { padding: 12px; }
  .case-lightbox-figure img { max-height: 70vh; }
  .case-lightbox-bar { top: 10px; right: 10px; }
  .case-lightbox-nav { width: 40px; height: 40px; font-size: 22px; }
  .case-lightbox-nav.is-prev { left: 6px; }
  .case-lightbox-nav.is-next { right: 6px; }
}