/* ==========================================================================
   /phone-case-vending-machine/ 页面专属样式
   --------------------------------------------------------------------------
   规矩（2026-11-12 起）：
   * 新落地页的专属样式一律写在 assets/css/page-<seo-id>.css，由 shell.php
     按 seo id 自动注入，**不要再往 style.css 末尾追加**。
   * 两个人各做各的页面时，各改各的文件，冲突面从 6000 行降到几十行。
   * style.css 只维护共享层（token / .wrap / .band / 卡片骨架），冻结新增。
   ========================================================================== */

/* ==========================================================================
   Phone case landing (/phone-case-vending-machine/)  ·  2026-11-12
   Only what the shared blocks cannot express: portrait machine shots,
   the print-library rail, the three-column spec table and text-only
   placement cards. Everything else reuses the cotton-candy blocks.
   ========================================================================== */
.pc-page .lhero__plate img {
  width: auto; max-width: 100%; max-height: 560px;
  aspect-ratio: auto; margin: 0 auto;
}
.pc-page .mpanel__stage { padding: 22px 22px 26px; }
.pc-page .mpanel__stage img { aspect-ratio: 4 / 5; }

/* print library: an endless rail of real printed cases.
   25 款做成一张 5×5 雪碧图（单请求），靠 background-position 取格，
   比放 50 个 <img> 轻，也不会有轨道图懒加载空框的问题。 */
.pcstrip { margin-top: 46px; }
.pcstrip__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; margin-bottom: 18px; }
.pcstrip__cap b {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.pcstrip__cap span { font-size: 12.5px; color: var(--ink-2); }
.pcstrip__rail { overflow: hidden; padding: 6px 0 10px; }
.pcstrip__track { display: flex; gap: 14px; width: max-content; animation: pcrail 180s linear infinite; }
.pcstrip__i {
  display: block; flex: 0 0 auto;
  width: 120px; height: 210px; border-radius: 16px;
  background-color: #fff;
  background-image: var(--sprite);
  background-size: var(--sw) var(--sh);
  background-position: var(--x) var(--y);
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(30, 20, 60, .07), 0 16px 28px -22px rgba(58, 32, 120, .5);
}
.pcstrip__note { margin-top: 14px; font-size: 11.5px; color: var(--ink-3); }
@keyframes pcrail { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .pcstrip__track { animation: none; } }
@media (max-width: 620px) {
  .pcstrip__i { width: 96px; height: 168px; border-radius: 13px; }
  .pcstrip__track { gap: 10px; }
}

/* --- phone case landing · revisions after first render ------------------- */
/* the H1 carries 64 characters; at 54px it took five lines and pushed the
   hero past a laptop fold */
.pc-page .lhero__title { font-size: clamp(31px, 3.3vw, 45px); line-height: 1.1; letter-spacing: -.025em; }
.pc-page .lhero__lede { margin-top: 18px; }

/* the light box sits at the very top of the machine shot — give the
   "bracket-free printing" pill its own band so it never sits on the artwork */
.pc-page .lhero__plate { padding-top: 46px; }

/* anchored sections used to slide under the sticky nav */
.pc-page section[id] { scroll-margin-top: 92px; }

/* print-library rail: brand hues, not a full rainbow */

/* consumables: these two are illustrations, not product photography —
   run the artwork edge to edge across the top instead of letterboxing it */
.pc-page .matgrid .matcard { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.pc-page .matgrid .matcard__media {
  min-height: 300px; border-right: 0; border-bottom: 1px solid var(--line-soft);
  border-radius: 16px 16px 0 0; background: #fff;
}
/* 这两张是白底产品实拍：用 contain 保证瓶子/壳的上下缘不被切掉 */
.pc-page .matgrid .matcard__media img {
  inset: 0; width: 100%; height: 100%; border-radius: 0; object-fit: contain;
}

/* 徽章固定 2×2 -----------------------------------------------------------------
   .badgebar 是 flex-wrap，按可用宽度会排成 3+1，最后一行只剩一个挂在左边；
   参考版式是两行两列，用 grid 定死列数，文案长短变化也不会再破坏节奏。 */
.pc-page .badgebar { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px 8px; }
@media (max-width: 620px) {
  .pc-page .badgebar { grid-template-columns: 1fr; }
}

/* 点位卡底部：核心落地指标做成胶囊（甲方给的版式是 Key Metric Pill） */
#venues .quote__who { margin-top: 14px; padding-top: 0; border-top: 0; }
#venues .quote__by i {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 999px;
  background: rgba(124, 92, 252, .075);
  border: 1px solid rgba(124, 92, 252, .16);
  font-style: normal; font-weight: 600; font-size: 11px; line-height: 1.3; color: #4A4460;
}