/* ==========================================================================
   /jigsaw-puzzle-vending-machine/ 页面专属样式
   由 shell.php 按 seo id 自动注入（assets/css/page-<seo-id>.css）。
   两个人各做各的页面时，各改各的文件。
   ========================================================================== */

/* ==========================================================================
   Puzzle landing (/jigsaw-puzzle-vending-machine/)  ·  2026-11-12
   Same skeleton as the cotton-candy and phone-case pages. Only what the
   shared blocks cannot express: a tall cabinet on the hero plate, the
   cut-board rail, the three-column spec table, text-only why-cards and a
   three-up consumables grid. Everything else reuses the shared blocks.
   ========================================================================== */
.pz-page .lhero__title { font-size: clamp(30px, 3.5vw, 49px); line-height: 1.08; letter-spacing: -.028em; }
.pz-page .lhero__lede { margin-top: 18px; max-width: 560px; }
.pz-page .lhero__plate { padding-top: 30px; }
.pz-page .lhero__plate img { width: auto; max-width: 100%; max-height: 596px; aspect-ratio: auto; margin: 0 auto; }
.pz-page section[id] { scroll-margin-top: 92px; }
.pz-page .mpanel__stage { padding: 20px 20px 24px; }
.pz-page .mpanel__stage img { aspect-ratio: 3 / 4; }

/* 成品拼图无限滚动：甲方提供的 4×4 人像 / 艺术拼图，切成 16 张透明 WebP。
   源图黑底 alpha=0，直接浮在页面渐变上；阴影用 drop-shadow 跟 alpha 走，
   不会露出矩形框。轨道图一律 eager，不加 lazy（懒加载会闪空帧，INC-11）。 */
.pzstrip { margin-top: 46px; }
.pzstrip__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; margin-bottom: 18px; }
.pzstrip__cap b {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.pzstrip__cap span { font-size: 12.5px; color: var(--ink-2); }
.pzstrip__rail { overflow: hidden; padding: 10px 0 18px; }
.pzstrip__track {
  display: flex; align-items: center; gap: 14px; width: max-content;
  animation: pzrail 72s linear infinite;
}
.pzstrip__i { display: block; flex: none; width: 152px; height: 200px; background: none; }
.pzstrip__i img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(58, 32, 120, .20));
}
.pzstrip__note { margin-top: 14px; font-size: 11.5px; color: var(--ink-3); }
@keyframes pzrail { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .pzstrip__track { animation: none; } }
@media (max-width: 620px) {
  .pzstrip__track { gap: 10px; }
  .pzstrip__i { width: 112px; height: 148px; }
}

/* spec table: the third column is prose, not a number */
.ctable--pz { min-width: 720px; }
.ctable--pz tbody th { width: 24%; white-space: normal; }
.ctable--pz .ctable__note-cell { white-space: normal; min-width: 260px; color: var(--ink-2); font-size: 12.5px; }

/* why-cards without photography: the number moves inside the body */
.pz-page .wcard--text { background: linear-gradient(180deg, #FFFFFF, #FCFAFF); }
.pz-page .wcard--text .wcard__body { padding: 26px 24px 24px; }
.pz-page .wcard__n--flat {
  position: static; display: grid; place-items: center;
  width: 36px; height: 36px; margin: 0 0 15px; border-radius: 12px;
  background: linear-gradient(140deg, #E84C3D, #F268A8 55%, #7C5CFC);
  color: #fff; box-shadow: 0 10px 20px -12px rgba(232, 76, 61, .8);
}

/* 耗材三卡：相框 / 拼板换成实拍图后统一完整显示，不再 cover 裁切；
   第三张 UV 墨水是产品照，额外留白让它与前两张的视觉分量一致。 */
.pz-page .matgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pz-page .matgrid .matcard { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.pz-page .matgrid .matcard__media {
  min-height: 226px; border-right: 0; border-bottom: 1px solid var(--line-soft);
  border-radius: 16px 16px 0 0;
}
.pz-page .matgrid .matcard__media img {
  inset: 0; width: 100%; height: 100%; border-radius: 0; object-fit: contain;
}
.pz-page .matgrid .matcard:nth-child(3) .matcard__media img { padding: 20px; }
@media (max-width: 1000px) { .pz-page .matgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .pz-page .matgrid { grid-template-columns: 1fr; } }

/* the third panel is a photograph, not a portrait render */
.pz-page .mpanel__stage--wide img { aspect-ratio: 4 / 3; }
.pz-page .mpanel__stage--wide { display: grid; place-items: center; }

/* --------------------------------------------------------------------------
   长副标避免末尾孤字。甲方 2026-11-13 的新文案比原稿长，通用 .she__intro
   的 720px 上限会把最后一个字 / 词挤到第二行（中文「节。」、英文「sheet.」）。
   只放宽这两段，不动冻结的 style.css，也不影响其它页面。
   -------------------------------------------------------------------------- */
.pz-page #metrics .she__intro,
.pz-page #models .she__intro { max-width: 980px; text-wrap: pretty; }