/* ================= 产品包装 · 滚轮驱动的卡片轮播 =================
   结构：
     .pd-section（滚动区，高度 = 一屏 + 每张一段）
       └ .pd-sticky（sticky 满屏舞台，钉在视口里）
           └ .pd-inner（一列：标题 / 卡片窗口 / 提示）
               └ .pd-viewport（裁切窗口）
                   └ .pd-track > .pd-card × 6

   滚动 = 卡片一张张往前走（"滚轮驱动"）；停滚由 product.js 轻吸附到最近一张。
   ⚠️ 卡片位置**全部靠 JS 写 transform**，CSS 这边只给静态尺寸和观感，
      不要在这里写死 left/translateX，否则会和脚本打架（每次都会被覆盖）。

   ---------- 三条关键约束（破坏任何一条，卡片就会变小、跑到偏的位置，都实测踩过） ----------
   ① `.pd-viewport` **不能加 `max-height:100%`** —— 那会把窗口压矮到容器剩余高度，
      卡片的 `max-height:100%` 跟着把卡片压矮，`margin:auto` 就只在顶部生效；
   ② `.pd-card` **不能加 `max-height`**：卡片必须在窗口里**居中**，
      它的中心才恒等于窗口中心、也就是屏幕中心（吸附是按"卡片中心"落位的）；
   ③ `.pd-viewport` 的高度**要接近卡片高度**（现在留了 96px 余量）：
      窗口比卡片高太多时，卡片虽然在窗口里居中，但窗口中心与卡片中心之间的余量
      会让标题与卡片之间看起来空一条（用户 2026-09-22 报的就是这个）。 */

.pd-section{
  position:relative;
  background:var(--black-absolute);
  border-bottom:1px solid var(--border);
  z-index:5;

  /* ---------- 尺寸与行程：四个量必须自洽，改一个要一起改 ----------
     用户两轮反馈合起来看：
       第一轮"文字和图片间距太大" → 根子在布局（卡片窗口垂直居中、卡片比窗口矮，
         标题与卡片之间空一条）；改成"标题贴顶 + 卡片窗口绝对居中 + 窗口高度=卡片高度"。
       第二轮"空的位置太大了，画面占满一点" → 卡片本身还偏小。
         ⚠️ 两个原因：① 卡片宽度被 900px 上限卡住；② 高度按 `一屏 - 300px` 算，留白过多。
         现在放到"标题之下能放下的最大"：
           高度 = 一屏 - 200px。为什么是 200 而不是更小？因为标题区实测占 94px，
           卡片是**垂直居中**的，所以卡片上沿 = (一屏 − 卡片高) / 2 ——
           要它不低于 94px，卡片高就得 ≤ 一屏 − 188px。取 200 留一点呼吸位。
     1600×1000 实测：卡片 1424×801（原来 900×507），标题下沿 94px、卡片上沿 99px，
     上下基本占满、又不会顶到标题。

     ⚠️ 四个量的关系（改一个要一起改，否则"滚一格"与"卡片走一格"就对不上，
        表现是吸附解不出整数位置、或者卡片不跟手）：
          卡片高度 = 一屏 - 200px，且不超过"可用宽度折算出来的高度"（--pd-card-h）
          卡片宽度 = 高度 × 1672/941，再受 1400px 上限约束
          每张横向行程 = 卡片宽度 × 0.69  （--pd-travel）
          每张滚动距离 = 卡片宽度 × 0.72  （--pd-step）→ 与 travel 配套，见下
        两个乘数不要写成 `var(--pd-card-w) / 5` 这类嵌套 calc：
        实测那种写法在部分属性里解析不出来，板块高度会静默变成错的值（2466 而不是 4100）。 */
  --pd-card-h:min(
    calc(100vh - 200px),
    calc((100vw - 2 * var(--gutter)) * 941 / 1672)
  );
  --pd-card-w:calc(var(--pd-card-h) * 1672 / 941);
  /* 每张滚动距离 = 卡片宽 × 0.72：与 --pd-travel 0.69 配套（滚一格 ≈ 卡片走一格），
     比例不对会让吸附解不出整数位置（实测踩过，见 product.js 的 scrollFor 注释）。 */
  --pd-step:calc(var(--pd-card-w) * 0.72);
  --pd-travel:0.69;
  --pd-run:calc(var(--pd-step) * 5);       /* 五段合起来，用于板块高度 */

  /* 高度 = 一屏（看）+ 五段（每段 = 翻一张） */
  height:calc(100vh + var(--pd-run));
}

.pd-sticky{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;          /* 两侧卡片伸出去的部分裁掉，别把页面撑出横向滚动条 */
}

/* 一列：标题（上）/ 卡片窗口（居中）/ 提示（下）。
   ⚠️ 卡片窗口**必须绝对居中**（top:50% + translateY(-50%)），不要让 flex 去分配空间：
      标题区与提示区天然不一样高，用 justify-content:center 时整列按总高居中，
      窗口中心就会偏（实测偏 39px）；而吸附落点是按"量到的卡片中心偏差"算的 ——
      卡片一偏，吸附就停在一个偏的位置上。
      绝对居中之后，窗口中心恒等于屏幕中心，标题与提示各自贴上下边、也不占高度。 */
.pd-inner{
  position:relative;
  width:100%;
  max-width:1560px;
  height:100%;
  margin:0 auto;
  padding:0 var(--gutter);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
}

/* ---------- 标题 ---------- */
.pd-head{flex:0 0 auto;margin:0 0 clamp(12px,1.8vh,22px)}
.pd-kicker{
  margin:0 0 8px;
  font-family:var(--font-ui);
  font-size:11px;
  letter-spacing:.24em;
  color:var(--accent);
}
.pd-name{
  margin:0 0 8px;
  font-family:var(--font-display-cn,'Noto Serif SC',serif);
  font-weight:700;
  font-size:clamp(24px,2.2vw,36px);
  line-height:1.16;
  letter-spacing:-.02em;
  color:var(--text-primary);
}
.pd-intro{
  margin:0;
  max-width:52ch;
  font-size:13px;
  line-height:1.8;
  color:var(--text-secondary);
}

/* ---------- 卡片窗口 ----------
   高度 = 卡片折算高度，**绝对居中**（top:50% + translateY(-50%)）。
   ⚠️ 不加 `max-height:100%`：那会把窗口压矮到容器剩余高度，
      卡片的 max-height 跟着把卡片压矮、`margin:auto` 只在顶部生效，
      卡片中心就偏了（实测偏 83px）。窗口比一屏高也没关系，
      外面 .pd-sticky 本来就 overflow:hidden。 */
.pd-viewport{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  left:var(--gutter);
  right:var(--gutter);
  height:var(--pd-card-h);
  overflow:hidden;
}
.pd-track{
  position:relative;
  width:100%;
  height:100%;
}

/* 卡片：窗口里铺满（宽度上限 1400px —— 原来 900px 太小，宽屏上卡片显得发虚、四周空一片） */
.pd-card{
  position:absolute;
  inset:0;
  margin:auto;
  width:min(var(--pd-card-w), 1400px);
  height:auto;
  aspect-ratio:1672 / 941;
  border-radius:10px;
  overflow:hidden;
  background:#0B0B0D;
  box-shadow:0 24px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
  /* JS 每帧改写 transform / opacity / filter / visibility / z-index */
  transform:translate3d(0,0,0);
  will-change:transform, opacity;
  backface-visibility:hidden;
}
.pd-card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;         /* 卡片按素材原比例，所以不会有裁切；写 cover 只是兜底 */
  -webkit-user-drag:none;
  user-select:none;
}

/* 当前这一张：轻微的强调色描边，让"现在看的是哪张"一眼可辨 */
.pd-card.is-current{
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(217,223,114,.32);
}

/* ---------- 底部：提示与计数 ---------- */
.pd-foot{
  flex:0 0 auto;
  margin-top:auto;              /* 推到这一列的最下面（窗口已绝对居中，不占位） */
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:18px;
  font-size:11px;
  letter-spacing:.2em;
  color:var(--text-secondary);
}
.pd-count{font-variant-numeric:tabular-nums}
.pd-count b{color:var(--accent);font-weight:500}
.pd-count i{font-style:normal;opacity:.45;margin:0 .25em}

/* ---------- 窄屏 ----------
   sticky + 滚动驱动的做法在窄屏同样成立。
   ⚠️ 这里**只**能收窄屏专属的东西（比如隐藏那行提示）：
      --pd-card-h / --pd-card-w / --pd-step 三个量是**互相推出来的**（见文件上方那段），
      窄屏单独改 --pd-step 会让"每张行程 ↔ 滚动距离"的 1:1 断掉，
      表现就是吸附解不出整数位置（实测过）。窄屏下卡片会顶到左右留白、
      高度与滚动距离一起自动变小，不需要另写规则。 */
@media (max-width:900px){
  .pd-hint{display:none}
}

@media (prefers-reduced-motion:reduce){
  /* 关了动效就别做平滑跟随：吸附仍然有效（它是"落位"，不是装饰） */
  .pd-card{transition:none}
}