/* ============================================================
   product.css · test3 · 产品页（camera / robot 共用）
   产品图占位 / 产品信息 / 参数表 / 图片墙 / 视频占位

   占位块的处理思路变了：现版用蓝色渐变加光晕，把“还没有图”这件事
   装饰得很热闹。这两家的做法是中性灰底加细线——既然是待补的素材，
   就不该比正式内容更抢眼。真图到位后直接替换，周围排版不用动。
   ============================================================ */

/* ---------- 产品图占位 ---------- */
.pv{height:420px;display:flex;align-items:center;justify-content:center;background:var(--bg-soft);
 border:1px solid var(--line);border-radius:var(--r);position:relative;overflow:hidden}
.pv::after{content:none}
.pv svg{position:relative;z-index:1;width:120px;height:120px;stroke:#c2c4c7;stroke-width:1;fill:none}
.pv .ph-note{position:absolute;right:16px;bottom:14px;font-size:12px;color:var(--ink-3);
 background:#fff;padding:5px 11px;border-radius:var(--r);border:1px solid var(--line);z-index:2}

/* ---------- 产品实拍图 ----------
   沿用原占位框的高度，图在框内按比例完整显示：既不裁切，也不拉伸。
   图片宽度由自身比例决定，水平居中，视觉重量与右侧产品信息相当。 */
.pv.pv-photo{height:420px;border:0;background:transparent;overflow:visible}
.pv.pv-photo img{display:block;width:auto;height:100%;max-width:100%;object-fit:contain;
 border-radius:var(--r)}
/* 相机是宽幅渲染图，按机器人实拍图的宽度收一下，避免整张图占满版心显得过大 */
.pv.pv-photo.pv-camera img{width:100%;max-width:470px;height:auto;max-height:100%}
@media(max-width:1100px){
  .pv.pv-photo{height:340px}
}
@media(max-width:768px){
  .pv.pv-photo{height:auto}
  .pv.pv-photo img{width:100%;height:auto}
  .pv.pv-photo.pv-camera img{max-width:100%}
}

/* ---------- 产品信息 ---------- */
.prod-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:56px;align-items:center}
.prod-label{font-size:12px;font-weight:500;letter-spacing:.18em;color:var(--ink-3);
 margin-bottom:16px;text-transform:uppercase}
/* 产品名是页面主标题，用 h1；此处显式压掉 h1 的浏览器默认字号与外边距 */
.prod-info h1{font-size:clamp(26px,3vw,38px);font-weight:400;letter-spacing:-.03em;margin:0 0 18px;
 color:var(--ink);line-height:1.22}
.prod-info p{color:var(--ink-2);font-size:15px;line-height:1.85;letter-spacing:-.01em;margin:0 0 26px}
.prod-tags{display:flex;flex-wrap:wrap;gap:8px}
.prod-tags span{background:var(--bg-soft);color:var(--ink-2);border-radius:var(--r);padding:7px 13px;
 font-size:12.5px;font-weight:400}
@media(max-width:900px){.prod-grid{grid-template-columns:1fr;gap:36px}}

/* ---------- 参数表 ----------
   虚线边框换成实线细线，表头不加底色——大疆的参数表就是这种裸表格。 */
.spec{width:100%;border-collapse:collapse;margin-top:6px}
.spec th,.spec td{border-bottom:1px solid var(--line-2);padding:17px 0;text-align:left;
 font-size:14px;line-height:1.75}
.spec th{color:var(--ink-3);font-weight:400;width:240px;letter-spacing:0;padding-right:24px}
.spec td{color:var(--ink)}

/* ---------- 参数子表：机械臂 / 铺装模式 ----------
   这两组在原始资料里就是三列表格，保留表头 + 数值行的结构，
   不再压成「标签：值」两列；用顶部细线把它们和上面的总表分开。 */
.spec-sub{margin-top:34px;padding-top:8px;border-top:1px solid var(--line)}
.spec-sub .spec + .spec{margin-top:24px}
/* 第一列固定为 240px，与上方总表的参数名列同宽，第二列因此与参数值列对齐 */
.spec.spec-3{table-layout:fixed}
.spec.spec-3 .spec-col-label{width:240px}
.spec.spec-3 th{width:auto;font-size:12.5px;color:var(--ink-3);font-weight:400;
 letter-spacing:.02em;padding:13px 16px 10px 0;border-bottom:1px solid var(--line)}
.spec.spec-3 td{font-size:14px;padding:12px 16px 12px 0;border-bottom:1px solid var(--line-2);
 vertical-align:top}
.spec.spec-3 th:last-child,.spec.spec-3 td:last-child{padding-right:0}
.spec-modes thead tr:first-child th{font-size:14px;font-weight:500;color:var(--ink);
 padding:0 0 10px;border-bottom:1px solid var(--line)}
.spec-modes thead tr:nth-child(2) th{padding-top:12px}

/* ---------- 图片墙占位 ---------- */
.media{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.media .m{height:240px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-soft);
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
 color:var(--ink-3);font-size:13px;letter-spacing:0}
.media .m svg{width:38px;height:38px;stroke:#c2c4c7;stroke-width:1.2;fill:none}

/* ---------- 项目视频 ----------
   标题、视频、按钮放进同一个居中区块：三者左边缘对齐，页面左右留白一致。
   1080px 是视频高度 1080 的一半，宽屏下不过度铺满。 */
.video-block{max-width:1080px;margin:0 auto}
.video-box{height:auto;max-width:100%;margin:0;border:0;border-radius:var(--r);
 background:transparent;overflow:hidden;display:block;color:var(--ink-3);position:relative}
.video-box video{display:block;width:100%;height:auto;aspect-ratio:1906/1080;
 object-fit:contain;background:#000;border-radius:var(--r);box-shadow:var(--sh-card);
 transition:box-shadow .24s var(--ease)}
.video-box:hover video{box-shadow:var(--sh-card-h)}

/* 封面中央的播放按钮：品牌色圆形，播放时淡出，暂停/结束后再出现 */
.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
 width:88px;height:88px;padding:0;border:0;border-radius:50%;cursor:pointer;
 display:flex;align-items:center;justify-content:center;color:#fff;
 background:var(--grad);
 box-shadow:0 0 0 10px rgba(255,255,255,.18),0 18px 40px -10px rgba(3,72,222,.65);
 transition:transform .24s var(--ease),opacity .24s var(--ease),visibility .24s;
 z-index:2}
.video-play:hover{transform:translate(-50%,-50%) scale(1.06)}
.video-play:focus-visible{outline:2px solid #fff;outline-offset:4px}
.video-play svg{width:30px;height:30px;fill:currentColor;margin-left:4px}
.video-play.is-hidden{opacity:0;visibility:hidden;pointer-events:none;
 transform:translate(-50%,-50%) scale(.92)}
@media(max-width:768px){
  .video-play{width:68px;height:68px;
   box-shadow:0 0 0 7px rgba(255,255,255,.18),0 14px 30px -8px rgba(3,72,222,.65)}
  .video-play svg{width:24px;height:24px;margin-left:3px}
}
.video-box p{margin:0;font-size:13.5px;letter-spacing:0}

/* ---------- 响应式 ---------- */
@media(max-width:1100px){
  .media{grid-template-columns:1fr 1fr}
  .pv{height:340px}
}
@media(max-width:768px){
  .media{grid-template-columns:1fr}
  .spec th{width:120px;padding-right:16px}
  .pv{height:260px}
  .spec.spec-3 th,.spec.spec-3 td{padding-right:8px;font-size:12.5px}
  .spec.spec-3 td{font-size:13px}
  .spec.spec-3 .spec-col-label{width:120px}
}

/* ---------- 相机参数分组 ----------
   新规格书把参数分成机电、光学、通信、精度四大块；这里按块分组，
   三列表格沿用上方 .spec-3 的对齐规则，五列测量表在窄屏内横向滚动。 */
.spec-block{margin-top:52px;padding-top:34px;border-top:1px solid var(--line)}
.sec-head + .spec-block{margin-top:0;padding-top:0;border-top:0}
.spec-block h3{font-size:20px;font-weight:500;letter-spacing:-.02em;margin:0 0 18px;color:var(--ink)}
.spec-block .spec{margin-top:0}
.spec-subtitle{font-size:14px;font-weight:500;letter-spacing:-.01em;margin:28px 0 8px;color:var(--ink)}
.spec-lead{font-size:13.5px;line-height:1.85;color:var(--ink-2);margin:0 0 12px;max-width:1020px}
.spec-fov,.spec-precision{table-layout:fixed}
.spec-fov th,.spec-precision th{width:auto;font-size:12.5px;font-weight:400;color:var(--ink-3);
 letter-spacing:.01em;line-height:1.5;padding:13px 14px 10px 0;border-bottom:1px solid var(--line)}
.spec-fov td,.spec-precision td{font-size:13.5px;line-height:1.75;padding:12px 14px 12px 0;
 border-bottom:1px solid var(--line-2);vertical-align:top}
.spec-fov tr>:first-child,.spec-precision tr>:first-child{padding-left:0}
.spec-fov tr>:last-child,.spec-precision tr>:last-child{padding-right:0}
.spec-fov th:nth-child(1){width:13%}
.spec-fov th:nth-child(2){width:20%}
.spec-fov th:nth-child(3){width:20%}
.spec-fov th:nth-child(4){width:20%}
.spec-fov th:nth-child(5){width:27%}
.spec-precision th:nth-child(1){width:14%}
.spec-precision th:nth-child(2){width:20%}
.spec-precision th:nth-child(3){width:28%}
.spec-precision th:nth-child(4){width:19%}
.spec-precision th:nth-child(5){width:19%}
.spec-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:4px}
.spec-scroll .spec{min-width:760px}

/* ---------- 规格参数总表（按《Spatiscan S1 规格参数表》单表呈现） ----------
   外层两列：参数类别 / 详细规格参数；精度部分在跨两列的单元格里嵌套一张
   6 列表格。窄屏整体横向滚动，避免把 6 列压进手机宽度。 */
.spec-doc{table-layout:fixed}
.spec-doc .spec-col-label{width:240px}
.spec-doc > thead > tr > th{width:auto;font-size:12.5px;color:var(--ink-3);font-weight:400;
 letter-spacing:.02em;padding:0 0 12px;border-bottom:1px solid var(--line)}
.spec-doc > tbody > tr > th{width:auto;color:var(--ink-3);font-weight:400;vertical-align:top}
.spec-doc > tbody > tr > td{color:var(--ink);vertical-align:top}
.spec-doc > tbody > tr.spec-doc-subrow > td{padding:14px 0 4px}
.spec-doc-sub{width:100%;min-width:0;table-layout:fixed;border-collapse:collapse}
.spec-doc-sub th,.spec-doc-sub td{width:auto;font-size:12.5px;line-height:1.6;
 padding:9px 12px 9px 0;border-bottom:1px solid var(--line-2);text-align:left;
 font-weight:400;color:var(--ink-2);vertical-align:top}
.spec-doc-sub thead th{font-size:12px;color:var(--ink-3);padding-top:0;
 border-bottom:1px solid var(--line)}
.spec-doc-sub tbody th.spec-mode-name{color:var(--ink);font-weight:500}
.spec-doc-sub tr > :last-child{padding-right:0}
.spec-doc-sub .c-mode{width:16%}
.spec-doc-sub .c-metric{width:19%}
.spec-doc-sub .c-dist{width:16.25%}
.spec-mode-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.spec-mode-list li{position:relative;padding-left:14px;font-size:13.5px;line-height:1.7;color:var(--ink-2)}
.spec-mode-list li::before{content:"•";position:absolute;left:0;color:var(--ink-3)}
@media(max-width:768px){
  .spec-doc-sub th,.spec-doc-sub td{font-size:12px;padding:8px 8px 8px 0}
}
.spec-mode{margin-top:34px}
.spec-mode h4{font-size:16px;font-weight:500;letter-spacing:-.01em;margin:0 0 6px;color:var(--ink)}
.spec-mode-sub{font-size:13px;font-weight:400;color:var(--ink-3);margin-left:10px}
.spec-use{font-size:13px;line-height:1.7;color:var(--ink-3);margin:0 0 4px}
@media(max-width:768px){
  .spec-block{margin-top:40px;padding-top:26px}
  .spec-block h3{font-size:18px}
  .spec-mode h4{font-size:15px}
  .spec-mode-sub{display:block;margin:4px 0 0}
}
@media(max-width:768px){
  /* 相机参数的三列表格在手机端改为「标签 / 数值 / 补充说明」纵向堆叠，
     避免三列挤在 350px 里反复换行。 */
  .spec.spec-stack thead{display:none}
  .spec.spec-stack,.spec.spec-stack tbody,.spec.spec-stack tr,.spec.spec-stack td{display:block;width:100%}
  .spec.spec-stack tr{padding:14px 0;border-bottom:1px solid var(--line-2)}
  .spec.spec-stack td{border:0;padding:0 0 5px;font-size:13.5px;line-height:1.7}
  .spec.spec-stack td:first-child{color:var(--ink);font-weight:500;font-size:14px}
  .spec.spec-stack td:nth-child(2){color:var(--ink)}
  .spec.spec-stack td:nth-child(3){color:var(--ink-3);font-size:12.5px;padding-bottom:0}
}