/* ============================================================
 * 案例预览图  mock.css
 * ------------------------------------------------------------
 * 用纯 CSS + 容器查询（container queries）画出"看起来像截图"的
 * 网站预览图：文字大小跟随容器宽度等比缩放，放大看细节时排版
 * 依然合理，缩略时就像一张真实截图。
 *
 * 关键技巧：
 *   容器元素  .mk-wrap / .ph-wrap  →  container-type: inline-size
 *   内容元素  .mk / .mk-phone      →  font-size: 2.6cqw 或 5.4cqw
 *                                     （不能放在容器自身上，否则会
 *                                      退化成视口单位，整个比例就废了）
 *   容器内所有尺寸用 em，只改一个 font-size 就能整体缩放。
 *
 * 不依赖任何图片 → 不会 404、不会有版权问题、换配色只改 cases.js 一个变量。
 * ============================================================ */

/* ---- 真实截图模式：cases.js 里填了 shot 就走这里 ---- */
.shot {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #0B1220;
  box-shadow: 0 10px 26px -14px rgba(2, 6, 23, .6);
}
.shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* ============================================================
 * 网站 / 后台预览：浏览器窗口
 * ============================================================ */
.mk-wrap {
  width: 100%;
  aspect-ratio: 16 / 11;
  container-type: inline-size;
}

.mk {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background: var(--m-bg);
  color: var(--m-text);
  border: 1px solid rgba(15, 23, 42, .12);
  box-shadow: 0 10px 26px -14px rgba(2, 6, 23, .6);
  font-size: 12px;        /* 不支持容器查询时的兜底 */
  font-size: 2.6cqw;      /* 主值 */
  line-height: 1.4;
  text-align: left;
  letter-spacing: 0;
}

/* 浏览器顶栏 */
.mk-bar {
  flex-shrink: 0;
  height: 2.1em;
  display: flex;
  align-items: center;
  gap: .5em;
  padding: 0 .9em;
  background: var(--m-surface);
  border-bottom: 1px solid rgba(15, 23, 42, .07);
}
.mk-bar i { width: .5em; height: .5em; border-radius: 50%; background: var(--m-sub); opacity: .6; }
.mk-bar span {
  margin-left: .5em;
  flex: 1;
  min-width: 0;
  font-size: .78em;
  color: var(--m-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 站点导航 */
.mk-nav {
  flex-shrink: 0;
  height: 2.95em;
  display: flex;
  align-items: center;
  gap: .75em;
  padding: 0 1.2em;
  background: var(--m-surface);
  border-bottom: 1px solid rgba(15, 23, 42, .06);
}
.mk-logo {
  flex-shrink: 0;
  width: 1.4em; height: 1.4em;
  border-radius: .35em;
  background: var(--m-primary);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1em;
  font-weight: 800;
}
.mk-brand { font-size: 1.05em; font-weight: 800; white-space: nowrap; letter-spacing: -.02em; }
.mk-links {
  display: flex;
  gap: .95em;
  margin-left: .6em;
  min-width: 0;
  overflow: hidden;
  font-size: .84em;
  color: var(--m-sub);
}
.mk-links b { font-weight: 500; white-space: nowrap; }
.mk-links b:first-child { color: var(--m-primary); font-weight: 700; }
.mk-cta {
  margin-left: auto;
  flex-shrink: 0;
  font-size: .82em;
  font-weight: 700;
  color: #fff;
  background: var(--m-primary);
  padding: .52em 1.1em;
  border-radius: 99em;
  white-space: nowrap;
}

/* 主体 */
.mk-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1em;
  padding: 1.35em 1.35em 1.2em;
}
.mk-col { display: flex; flex-direction: column; gap: .5em; min-width: 0; }
.mk-kicker {
  font-size: .78em;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--m-primary);
  margin-bottom: .15em;
  white-space: nowrap;
  overflow: hidden;
}
.mk-h1 {
  font-size: 2.3em;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.02em;
}
.mk-h2 { font-size: 1.3em; font-weight: 800; line-height: 1.3; }
.mk-p { font-size: .88em; line-height: 1.65; color: var(--m-sub); }
.mk-btns { display: flex; gap: .75em; margin-top: .45em; }
.mk-btn {
  font-size: .84em;
  font-weight: 700;
  color: #fff;
  background: var(--m-primary);
  padding: .66em 1.5em;
  border-radius: .5em;
  white-space: nowrap;
}
.mk-btn.alt { background: transparent; color: var(--m-primary); box-shadow: inset 0 0 0 1.5px var(--m-primary); }

/* 内容卡 */
.mk-row { display: flex; gap: .9em; flex: 1; min-height: 0; }
.mk-tile {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .55em;
  padding: .9em;
  border-radius: .8em;
  background: var(--m-surface);
  border: 1px solid rgba(148, 163, 184, .26);
  overflow: hidden;
}
.mk-tile-img {
  flex: 1;
  min-height: 1.5em;
  border-radius: .55em;
  background: linear-gradient(135deg, var(--m-primary), var(--m-accent));
  opacity: .82;
}
.mk-tile-t { font-size: .92em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-tile-s { font-size: .72em; color: var(--m-sub); white-space: nowrap; overflow: hidden; }

/* 大图区 */
.mk-art {
  flex: 1;
  min-width: 0;
  border-radius: .9em;
  background: linear-gradient(140deg, var(--m-primary), var(--m-accent));
  display: grid;
  place-items: center;
  overflow: hidden;
}
.mk-art-in {
  max-width: 84%;
  background: rgba(255, 255, 255, .94);
  border-radius: .7em;
  padding: .85em 1.1em;
  text-align: center;
  box-shadow: 0 8px 18px -10px rgba(2, 6, 23, .5);
}
.mk-art-in b { display: block; font-size: .92em; font-weight: 800; color: #0F172A; }
.mk-art-in span { display: block; margin-top: .25em; font-size: .72em; color: #64748B; }

/* --- 变体：左右分栏 --- */
.lay-split .mk-main { flex-direction: row; align-items: stretch; }
.lay-split .mk-col { flex: 1.12; justify-content: center; }

/* --- 变体：居中 --- */
.lay-center .mk-main { align-items: center; text-align: center; }
.lay-center .mk-col { align-items: center; width: 100%; }
.lay-center .mk-p { max-width: 80%; }
.lay-center .mk-btns { justify-content: center; }

/* --- 变体：大横幅 --- */
.lay-banner .mk-main { padding: 0; gap: 0; }
.lay-banner .mk-band {
  flex: 0 0 54%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--m-primary), var(--m-accent));
}
.lay-banner .mk-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 84% 26%, rgba(255, 255, 255, .34), transparent 62%);
}
.lay-banner .mk-band-copy {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1.1em 1.4em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .4em;
  color: #fff;
}
.lay-banner .mk-band-copy .mk-kicker { color: rgba(255, 255, 255, .82); }
.lay-banner .mk-band-copy .mk-p { color: rgba(255, 255, 255, .88); }
.lay-banner .mk-band-copy .mk-btn { background: #fff; color: var(--m-primary); }
.lay-banner .mk-band-copy .mk-btn.alt { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .65); }
.lay-banner .mk-inner {
  flex: 1;
  min-height: 0;
  padding: 1.1em 1.35em 1.2em;
  display: flex;
  flex-direction: column;
}

/* --- 变体：卡片流 --- */
.lay-cards .mk-main { justify-content: center; }
.lay-cards .mk-head { display: flex; flex-direction: column; gap: .4em; }
.lay-cards .mk-row { flex: 0 1 auto; max-height: 58%; }
.lay-cards .mk-tile-img { flex: 0 0 2.4em; }

/* ============================================================
 * 后台管理系统预览
 * ============================================================ */
.mk-body { flex: 1; min-height: 0; display: flex; }

.mk-side {
  flex-shrink: 0;
  width: 24%;
  padding: 1em .8em;
  display: flex;
  flex-direction: column;
  gap: .85em;
  background: var(--m-surface);
  border-right: 1px solid rgba(15, 23, 42, .07);
  overflow: hidden;
}
.mk-side-brand {
  font-size: .88em;
  font-weight: 800;
  color: var(--m-primary);
  padding-bottom: .55em;
  border-bottom: 1px solid rgba(148, 163, 184, .22);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mk-side b {
  position: relative;
  font-size: .82em;
  font-weight: 500;
  color: var(--m-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mk-side b.is-on { color: var(--m-primary); font-weight: 700; }
.mk-side b.is-on::before {
  content: "";
  position: absolute;
  left: -.8em;
  top: 12%;
  bottom: 12%;
  width: .22em;
  border-radius: 99em;
  background: var(--m-primary);
}

.mk-content {
  flex: 1;
  min-width: 0;
  padding: 1.1em;
  display: flex;
  flex-direction: column;
  gap: .9em;
  overflow: hidden;
}
.mk-kpis { display: flex; gap: .8em; }
.mk-kpi {
  flex: 1;
  min-width: 0;
  padding: .75em .85em;
  border-radius: .6em;
  background: var(--m-surface);
  border: 1px solid rgba(148, 163, 184, .26);
  border-left: .28em solid var(--m-primary);
  overflow: hidden;
}
.mk-kpi span {
  display: block;
  font-size: .78em;
  color: var(--m-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mk-kpi b { display: block; margin-top: .2em; font-size: 1.45em; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.mk-chart {
  flex: 1;
  min-height: 0;
  padding: .8em .9em .7em;
  border-radius: .7em;
  background: var(--m-surface);
  border: 1px solid rgba(148, 163, 184, .26);
  display: flex;
  flex-direction: column;
  gap: .7em;
}
.mk-chart-h { display: flex; align-items: center; gap: .6em; font-size: .82em; font-weight: 700; }
.mk-chart-h i { margin-left: auto; font-style: normal; font-size: .82em; font-weight: 500; color: var(--m-sub); }
.mk-bars { flex: 1; min-height: 0; display: flex; align-items: flex-end; gap: .6em; }
.mk-bars b {
  flex: 1;
  border-radius: .3em .3em 0 0;
  background: linear-gradient(180deg, var(--m-primary), var(--m-accent));
  opacity: .85;
}
.mk-bars b:nth-child(1) { height: 40%; }
.mk-bars b:nth-child(2) { height: 68%; }
.mk-bars b:nth-child(3) { height: 34%; }
.mk-bars b:nth-child(4) { height: 86%; }
.mk-bars b:nth-child(5) { height: 52%; }
.mk-bars b:nth-child(6) { height: 74%; }

.mk-tr {
  display: flex;
  align-items: center;
  gap: .8em;
  padding: .6em .85em;
  border-radius: .5em;
  background: var(--m-surface);
  border: 1px solid rgba(148, 163, 184, .22);
  font-size: .82em;
  overflow: hidden;
}
.mk-tr i { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-tr i:nth-child(1) { width: 30%; font-weight: 700; }
.mk-tr i:nth-child(2) { flex: 1; color: var(--m-sub); }
.mk-tr i:nth-child(3) {
  flex-shrink: 0;
  font-size: .86em;
  font-weight: 700;
  color: var(--m-primary);
  background: rgba(37, 99, 235, .1);
  padding: .25em .8em;
  border-radius: 99em;
}
.mk-tr.is-head {
  padding-top: 0;
  padding-bottom: .2em;
  background: transparent;
  border-color: transparent;
  font-weight: 700;
  color: var(--m-sub);
}
.mk-tr.is-head i { color: var(--m-sub); }
.mk-tr.is-head i:nth-child(3) { padding: 0; background: transparent; color: var(--m-sub); }

/* ============================================================
 * 小程序预览：两台手机
 * ============================================================ */
.mk-phones {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 5%;
}
.ph-wrap {
  flex-shrink: 0;
  height: 100%;
  aspect-ratio: 9 / 16.5;
  max-width: 43%;
  container-type: inline-size;
}
.mk-phone {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.35em;
  background: var(--m-bg);
  color: var(--m-text);
  border: .3em solid #0B1220;
  box-shadow: 0 12px 26px -14px rgba(2, 6, 23, .65);
  font-size: 11px;        /* 兜底 */
  font-size: 5.4cqw;      /* 主值 */
  line-height: 1.4;
  text-align: left;
}

.ph-status {
  flex-shrink: 0;
  height: 2.1em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .9em;
  background: var(--m-surface);
  font-size: .66em;
  color: var(--m-sub);
}
.ph-head {
  flex-shrink: 0;
  height: 2.7em;
  display: flex;
  align-items: center;
  gap: .55em;
  padding: 0 .8em;
  background: var(--m-surface);
  border-bottom: 1px solid rgba(15, 23, 42, .06);
}
.ph-title { font-size: .95em; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-search {
  flex: 1;
  min-width: 0;
  height: 1.6em;
  margin-left: auto;
  padding: 0 .9em;
  border-radius: 99em;
  background: rgba(148, 163, 184, .18);
  font-size: .64em;
  color: var(--m-sub);
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}

.ph-body {
  flex: 1;
  min-height: 0;
  padding: .85em;
  display: flex;
  flex-direction: column;
  gap: .7em;
  overflow: hidden;
}
.ph-banner {
  position: relative;
  flex: 0 0 30%;
  padding: .85em;
  border-radius: .8em;
  overflow: hidden;
  background: linear-gradient(130deg, var(--m-primary), var(--m-accent));
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .25em;
}
.ph-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 86% 18%, rgba(255, 255, 255, .34), transparent 62%);
}
.ph-banner b { position: relative; z-index: 1; font-size: 1.02em; font-weight: 800; line-height: 1.3; }
.ph-banner span { position: relative; z-index: 1; font-size: .68em; opacity: .88; }

.ph-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.ph-item {
  min-height: 0;
  padding: .5em;
  border-radius: .7em;
  background: var(--m-surface);
  border: 1px solid rgba(148, 163, 184, .24);
  display: flex;
  flex-direction: column;
  gap: .4em;
  overflow: hidden;
}
.ph-item-img { flex: 1; min-height: 1.3em; border-radius: .5em; background: linear-gradient(130deg, var(--m-primary), var(--m-accent)); opacity: .58; }
.ph-item-t { font-size: .72em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ph-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .6em; overflow: hidden; }
.ph-card {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: .6em;
  padding: .6em;
  border-radius: .7em;
  background: var(--m-surface);
  border: 1px solid rgba(148, 163, 184, .22);
  overflow: hidden;
}
.ph-thumb { flex-shrink: 0; width: 2.3em; height: 2.3em; border-radius: .55em; background: linear-gradient(130deg, var(--m-primary), var(--m-accent)); opacity: .72; }
.ph-card em { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2em; font-style: normal; }
.ph-card em b { font-size: .78em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-card em span { font-size: .64em; color: var(--m-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-card u { flex-shrink: 0; font-size: .78em; font-weight: 800; text-decoration: none; }

.ph-detail { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .7em; }
.ph-detail .ph-banner { flex: 0 0 30%; }

/* 商品详情页（右机） */
.ph-hero {
  flex: 1;
  min-height: 1.6em;
  border-radius: .7em;
  background: linear-gradient(130deg, var(--m-primary), var(--m-accent));
  opacity: .62;
}
.ph-buy {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: .6em;
  padding: .7em;
  border-radius: .7em;
  background: var(--m-surface);
  border: 1px solid rgba(148, 163, 184, .22);
  overflow: hidden;
}
.ph-buy em { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2em; font-style: normal; }
.ph-buy em b { font-size: .8em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-buy em span { font-size: .64em; color: var(--m-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-buy u { flex-shrink: 0; font-size: .84em; font-weight: 800; text-decoration: none; color: var(--m-primary); }
.ph-btn {
  flex-shrink: 0;
  text-align: center;
  font-size: .78em;
  font-weight: 800;
  color: #fff;
  background: var(--m-primary);
  padding: .72em;
  border-radius: 99em;
}

.ph-tab {
  flex-shrink: 0;
  height: 2.6em;
  display: flex;
  align-items: center;
  background: var(--m-surface);
  border-top: 1px solid rgba(15, 23, 42, .07);
  font-size: .66em;
}
.ph-tab b { flex: 1; text-align: center; font-weight: 500; color: var(--m-sub); white-space: nowrap; overflow: hidden; }
.ph-tab b:first-child { color: var(--m-primary); font-weight: 800; }

/* ============================================================
 * 不同场景下的尺寸约束
 * ============================================================ */
.case__media > .mk-wrap { width: 100%; }
.case__media > .mk-phones { width: 100%; height: 100%; }
.case__media > .shot { width: 100%; height: 100%; }

/* 宽度按可用高度反算（16/10 时 height = 0.625 × width），
   保证大图在任何屏幕高度下都不会被裁掉 */
.lightbox__stage .mk-wrap { width: min(760px, 100%, 76vh); aspect-ratio: 16 / 10; }
.lightbox__stage .mk-phones { height: min(440px, 48vh); width: 100%; }
.lightbox__stage .ph-wrap { max-width: none; }