/* ==========================================================================
   MpDesign — 效果展示页
   复用 styles.css 的令牌与基础件，这里只放「展示真效果」需要的东西。

   排版思路：图版式，不是 widget 式。
   每个效果是一「版」：上面是编号 + 名称 + 一句说明，下面是占满整栏的图。
   不用卡片盒子、不用圆角边框、不加投影——图和文字之间靠留白分开，
   像杂志里的图版。隔版换一次左右边距，制造栏位的节奏。
   ========================================================================== */

/* ---------- 演示容器 ----------
   skill 吐出来的产物有两类，尺寸处理完全不同：

   ① SVG 型（swipe / tap / reveal / flip）
      全部按 width=677 authoring（那是公众号正文的宽度），高度写在属性上、
      由 SMIL 动画驱动。**不能**用 width:100% + height:auto 去拉它——
      那样高度会跟着 width/height 属性的比值走，SVG 被拍扁；
      而 reveal 的折叠态恰恰靠「盒子比 viewBox 矮 + slice 裁切」实现，
      拉高了就等于一开始就展开完，点击动画也没了。

      正确做法是保持 677 的原始坐标系，整体缩放（见 main.js 的 fitDemos，
      用 zoom——它连布局一起缩放，SMIL 的 height 动画也跟着缩，
      演示行为和公众号里一致）。

   ② HTML 型（drag-carousel）
      外层写死了 width:677px !important，但内层全是百分比，
      所以把外层改成 100% 就能整体等比缩小，不影响拖动。 */
/* ---------- 效果：分类 + 类内横滑 ----------
   每个 demo 是 GIF（gifs/ 目录，构建时由 landing/build-demo-gifs.js 产出），
   所以这里只管「轨道怎么滑、卡片怎么排」，不再有 SVG 缩放那套。 */
.cats { display: grid; gap: clamp(48px, 6vw, 80px); }

.cat__head { margin-bottom: 22px; }
.cat__name {
  font-family: var(--serif);
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 600;
  line-height: 1.25;
}
.cat__desc {
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 44em;
}

/* 轨道：原生横滑 + 吸附。scrollbar 藏掉，滑动是手势/箭头的事 */
.railwrap { position: relative; }
.rail {
  display: flex;
  gap: clamp(14px, 2vw, 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 2px 10px;
}
.rail::-webkit-scrollbar { display: none; }

/* 卡片：桌面占约 78%（一排能瞥见下一张，暗示「可以滑」），移动端 84% */
.shot {
  flex: 0 0 min(78%, 540px);
  scroll-snap-align: start;
  margin: 0;
  display: grid;
  gap: 12px;
}
.shot__stage {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
}
.shot__stage img { display: block; width: 100%; height: auto; }
.shot__cap { display: grid; gap: 3px; }
.shot__cap b {
  font-family: var(--serif);
  font-size: 16.5px;
  font-weight: 600;
}
.shot__cap span { font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }

/* 箭头：浮在轨道两侧，触屏上藏掉（手指滑更自然） */
.rail__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  z-index: 2;
  transition: border-color .2s ease, opacity .2s ease;
}
.rail__arrow:hover { border-color: var(--accent); }
.rail__arrow--prev { left: -14px; }
.rail__arrow--next { right: -14px; }
.rail__arrow[hidden] { display: none; }
@media (hover: none), (max-width: 720px) {
  .rail__arrow { display: none; }
  .shot { flex-basis: 84%; }
}

/* ---------- 边界清单 ---------- */
.facts {
  border-top: 1px solid var(--line);
  display: grid;
}
.fact {
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-2);
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
}
.fact::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .55;
  margin-top: 9px;
}

/* ---------- 窄屏适配 ----------
   1) 标题：「让你的」独立成行。390px 宽 + 32px 字号下，
      「让你的 💬微信公众号推文」12 个字必然超宽，自然换行会落在
      某个字中间、留一个孤字（实测「文」字单独一行）。块级化后是
      「让你的 / 💬微信公众号推文 / 支持 自动轮播」三行，都是完整词。
      只作用于 MpDesign——PubKit 的标题自带 <br> 三段，窄屏本来就干净。
   2) 底纹：SideRays 的距离按「高度」归一化，窄屏横向距离塌缩，
      整块首屏落进光源的 reach/glow，桌面是「纸底 + 一束光」，
      手机上糊成一层的灰（实测整屏 171-236 的灰蓝）。窄屏换一套
      收着点的参数（main.js 的 startBg 按 720px 断言选配置）。 */
@media (max-width: 720px) {
  .hero--mpdesign .hero__title-dim { display: block; }
}