/* 缪斯创想 MUSEAGENT —— 落地案例页专属样式
   版式记忆点：编辑部 Z 字节奏 → 精选横幅 → 物料矩阵（高潮）→ 短视频陈列 → 前后对比滑块。
   仅 cases.html 加载。
*/

/* ── Hero ────────────────────────────────────────────────────── */
.cs-hero {
  padding: calc(96px + var(--sp-12)) 0 var(--sp-12);
  background:
    radial-gradient(120% 80% at 10% 0%, var(--brand-a06) 0%, transparent 60%),
    var(--gray-25);
  border-bottom: 1px solid var(--gray-200);
}
.cs-hero__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--grid-gap);
  align-items: end;
}
.cs-hero__stat {
  text-align: right;
}
.cs-hero__stat strong {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-3xl);
  font-weight: 700;
  letter-spacing: var(--tr-title);
  color: var(--brand-600);
}
.cs-hero__stat span { font-size: var(--fs-xs); color: var(--gray-500); }
@media (max-width: 900px) {
  .cs-hero { padding: calc(80px + var(--sp-10)) 0 var(--sp-10); }
  .cs-hero__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .cs-hero__stat { text-align: left; }
}

/* ── 编辑部 Z 字节奏 ─────────────────────────────────────────── */
.cs-rows { display: grid; gap: var(--sec-y); }
.cs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.cs-row:nth-child(even) .cs-row__media { order: -1; }
.cs-row__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: var(--sp-3);
}
.cs-row__title {
  font-size: var(--fs-3xl);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-title);
  color: var(--gray-950);
  margin-bottom: var(--sp-4);
}
.cs-row__body {
  font-size: var(--fs-md);
  color: var(--gray-600);
  line-height: 1.7;
  margin-bottom: var(--sp-6);
}
.cs-row__list { display: flex; flex-direction: column; gap: var(--sp-3); }
.cs-row__item {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--gray-700);
}
.cs-row__item::before {
  content: "";
  flex: 0 0 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--brand-500);
}
.cs-row__media .slot { aspect-ratio: 4 / 3; }
@media (max-width: 900px) {
  .cs-row { grid-template-columns: 1fr; gap: var(--sp-6); }
  .cs-row:nth-child(even) .cs-row__media { order: 0; }
  .cs-row__media { order: -1; }
  .cs-row__media .slot { aspect-ratio: 16 / 10; }
}

/* ── 精选横幅（复用 .caseprev，slot 占位版）───────────────────── */
.cs-banner__head { margin-bottom: var(--sp-10); }
.caseprev__large .slot,
.caseprev__small .slot {
  width: 100%; height: 100%;
  border-radius: 0;
}

/* ── 物料矩阵（高潮）─────────────────────────────────────────── */
.cs-matrix__head { margin-bottom: var(--sp-10); }
.cs-matrix__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.cs-cell { position: relative; }
.cs-cell .slot { aspect-ratio: 4 / 5; }
.cs-cell__cap {
  position: absolute;
  left: var(--sp-3); bottom: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--gray-700);
  background: rgba(255,255,255,0.86);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(4px);
}
@media (max-width: 900px) {
  .cs-matrix__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .cs-matrix__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── 短视频陈列 ──────────────────────────────────────────────── */
.cs-videos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}
.cs-video {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--d-bg);
}
.cs-video .slot { aspect-ratio: 9 / 16; }
.cs-video__cap {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--d-ink-2);
}
.cs-video__cap b { color: var(--d-ink); font-weight: 600; }
@media (max-width: 900px) {
  .cs-videos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .cs-videos { grid-template-columns: 1fr; }
  .cs-video .slot { aspect-ratio: 16 / 10; }
}

/* ── 前后对比滑块（零依赖）──────────────────────────────────── */
.ba {
  --ba-pos: 50%;
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  user-select: none;
  touch-action: pan-y;
  background: var(--gray-100);
}
.ba__layer { position: absolute; inset: 0; }
.ba__layer .slot { width: 100%; height: 100%; border-radius: 0; }
.ba__before { clip-path: inset(0 0 0 var(--ba-pos)); }
.ba__after  { clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0); }
.ba__tag {
  position: absolute;
  top: var(--sp-4);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  background: rgba(10, 13, 17, 0.62);
  color: #fff;
  backdrop-filter: blur(6px);
  z-index: 2;
}
.ba__tag--before { left: var(--sp-4); }
.ba__tag--after  { right: var(--sp-4); }
.ba__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--ba-pos);
  width: 2px;
  background: rgba(255,255,255,0.9);
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
}
.ba__handle::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 40px; height: 40px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(10,13,17,0.3);
}
.ba__handle::after {
  content: "↔";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--gray-900);
  font-size: 16px;
}
.ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 4;
}
.ba__range:focus-visible + .ba__handle { box-shadow: 0 0 0 3px var(--brand-a28); }

.cs-ba__head { margin-bottom: var(--sp-10); }
.cs-ba__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.cs-ba__note p {
  font-size: var(--fs-md);
  color: var(--gray-600);
  line-height: 1.7;
  margin-bottom: var(--sp-6);
}
.cs-ba__points { display: flex; flex-direction: column; gap: var(--sp-3); }
.cs-ba__point {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--gray-700);
}
.cs-ba__point::before {
  content: "";
  flex: 0 0 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--brand-500);
}
@media (max-width: 900px) {
  .cs-ba__grid { grid-template-columns: 1fr; }
}

/* ── 案例间 CTA 条 ───────────────────────────────────────────── */
.cs-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  background: var(--gray-0);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-2xl);
  padding: clamp(24px, 3vw, 40px);
  box-shadow: var(--sh-2);
}
.cs-strip__t { font-size: var(--fs-xl); font-weight: 600; color: var(--gray-950); }
.cs-strip__s { font-size: var(--fs-sm); color: var(--gray-500); margin-top: 2px; }