/* ===========================================================
   uwb-radar.html — UWB 雷达解决方案详情页
   基础组件复用 cbu5000v210.css + uwb-remote.css + uwb-lock.css；
   本表只保留雷达页专用块：场景横幅、演示视频、多列表格等。

   ⚠️ 通用原则：本页所有图片与视频一律【完整显示、不裁切】——
   不用 object-fit:cover 裁图，不写死 aspect-ratio 拉伸，
   宽高按素材自身比例自适应（雷达演示视频为超宽 3.56:1，尤其不可套 16:9）。
   =========================================================== */

/* ---------- Hero：不做渐隐遮罩，整张图完整呈现 ---------- */
.cb-page .ul-hero-visual img { max-width: 720px;
  -webkit-mask-image: none; mask-image: none;
  filter: drop-shadow(0 18px 40px rgba(15,23,42,.10)); }

/* ---------- Hero 雷达侦测动画：家电上的脉冲波纹 ---------- */
.ur-hero-scene { position: relative; display: inline-block; width: 100%; }
.ur-hero-scene img { position: relative; z-index: 1; }
.radar-ping {
  position: absolute;
  z-index: 2;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(77,163,255,0.60);
  box-shadow: 0 0 10px 2px rgba(77,163,255,0.28);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.radar-ping--remote { background: rgba(255,255,255,0.70); box-shadow: 0 0 10px 2px rgba(255,255,255,0.30); }
.radar-ping::before,
.radar-ping::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  margin-top: -5px; margin-left: -5px;
  border-radius: 50%;
  border: 2px solid rgba(77,163,255,0.45);
  animation: radarPing 3.8s ease-out infinite;
  animation-delay: var(--ping-delay, 0s);
}
.radar-ping--remote::before,
.radar-ping--remote::after { border-color: rgba(255,255,255,0.55); }
.radar-ping::after { animation-delay: calc(var(--ping-delay, 0s) + 1.9s); }
@keyframes radarPing {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .radar-ping::before, .radar-ping::after { animation: none; }
}

/* ---------- 场景横幅：多图并列，统一高度但完整显示（留白不裁切） ---------- */
.ur-radar-banner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin-top: 44px; align-items: stretch; }
/* 4 张图都是 1024×720(1.42:1)，用 aspect-ratio 让容器和素材同比例，
   cover 就不会裁切；同时和上方 4 列场景卡片对齐。 */
.ur-radar-banner img { width: 100%; height: auto; aspect-ratio: 1024 / 720; object-fit: cover; object-position: center;
  border-radius: 18px; border: 1px solid var(--line); padding: 4px;
  box-shadow: 0 4px 18px rgba(15,23,42,.06); background: #fff; }

/* ---------- 两列网格 ---------- */
.cb-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

/* ---------- 图片：覆盖 ur-gallery 的 4:3 + cover，改为原比例完整显示 ---------- */
.cb-page .ur-gallery { gap: 16px; }
.cb-page .ur-gallery img,
.cb-page .ur-gallery video { width: 100%; height: auto; aspect-ratio: auto;
  object-fit: contain; border-radius: var(--radius); background: #fff; }
/* 两轮车：两张超宽图放大后错位重叠，形成层次感（仍保持完整不裁切） */
.cb-page #ev .cb-split { grid-template-columns: 0.84fr 1.16fr; gap: 44px; }
.cb-page #ev .ur-gallery { grid-template-columns: 1fr; gap: 0; }
.cb-page #ev .ur-gallery img {
  width: 100%; height: auto; aspect-ratio: auto; object-fit: contain;
  border-radius: 14px; background: #fff; border: 1px solid var(--line);
  transition: box-shadow .25s ease;
}
/* 底层：靠左，稍小，浅阴影 */
.cb-page #ev .ur-gallery img:first-child {
  grid-row: 1; width: 67.5%; justify-self: start; z-index: 1;
  box-shadow: 0 10px 30px rgba(15,23,42,.13);
}
/* 上层：靠右、向下压住底层，稍大 + 深阴影，形成景深 */
.cb-page #ev .ur-gallery img:nth-child(2) {
  grid-row: 2; width: 73.5%; justify-self: end; z-index: 2;
  margin-top: -15%;
  box-shadow: 0 28px 64px rgba(15,23,42,.22);
}
/* 悬停即置顶。必须排在上面两条之后——两者特异性同为 (1,3,1)，
   若写在前面，hover 的 z-index:10 会被它们的 z-index:1/2 反向覆盖。 */
.cb-page #ev .ur-gallery img:hover {
  z-index: 10;
  box-shadow: 0 34px 80px rgba(15,23,42,.30);
}

/* ---------- 视频：按素材原始比例完整播放，绝不裁切 ---------- */
.ur-demo-grid { grid-template-columns: 1fr; gap: 32px; max-width: 1000px; margin: 0 auto; }
.ur-demo-item { display: flex; flex-direction: column; }
.ap-video { position: relative; margin-bottom: 8px; border-radius: var(--radius);
  overflow: hidden; background: #0b1220; }
/* 关键：覆盖 .ap-video 默认的 aspect-ratio:16/9 与 object-fit:cover */
.cb-page .ap-video { aspect-ratio: auto; }
.cb-page .ap-video video { display: block; width: 100%; height: auto;
  max-height: none; object-fit: contain; background: #0b1220; }
.ur-demo-caption { font-size: 13.5px; color: var(--muted); text-align: center; margin: 10px 0 0; }

/* ---------- 技术原理：两栏卡片（无配图，避免与 Hero 重复） ---------- */
.ur-tech-grid { align-items: start; }
.ur-tech-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 32px; box-shadow: 0 4px 18px rgba(15,23,42,.06); position: relative; }
.ur-tech-panel::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0;
  height: 3px; background: linear-gradient(90deg, var(--blue), var(--blue-100)); border-radius: 0 0 3px 3px; }
.ur-tech-panel .cb-mini-h { margin-top: 0; }
.ur-tech-panel .cb-feat-list li { padding: 14px 0 14px 28px; border-bottom: 1px dashed var(--line); position: relative; }
.ur-tech-panel .cb-feat-list li:last-child { border-bottom: 0; }

/* ---------- 多列表格 ---------- */
.ur-compare-3col thead th,
.ur-compare-3col tbody td { min-width: 120px; }
.ur-compare-5col { min-width: 760px; }
.ur-compare-5col thead th,
.ur-compare-5col tbody td { min-width: 110px; font-size: 13px; }
.ur-compare-foot { font-size: 12.5px; color: var(--muted); margin-top: 14px; line-height: 1.75; }

/* ---------- 对比表：表后解读块 ----------
   刻意放在 .ur-compare-wrap 之外：wrap 带 overflow-x:auto，
   解读文字若放进卡片会随表格一起横向滚动，窄屏不可读。 */
.ur-compare-read { margin-top: 24px; padding-left: 16px; border-left: 2px solid var(--blue-100);
  display: grid; gap: 13px; }

.ur-compare-read p { margin: 0; font-size: 14px; line-height: 1.78; color: var(--ink-soft); }
.ur-compare-read b { color: var(--blue-600); font-weight: 600; }
.ur-compare-read .ur-read-note { font-size: 12.5px; color: var(--muted); padding-top: 2px; }

/* ---------- 解读：合并为一块可滚动区（不再拆分结论卡 + 折叠） ----------
   默认露出约 4 行，其余滚动查看；滚动条默认隐藏，悬停或键盘聚焦时才显现，
   既保持版面干净又给出"还有内容"的提示。tabindex="0" 保证键盘可滚动。 */
.ur-compare-scroll { max-height: 112px; overflow-y: auto; padding-right: 10px;
  scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior: contain; }
.ur-compare-scroll::-webkit-scrollbar { width: 0; height: 0; }
.ur-compare-scroll:hover, .ur-compare-scroll:focus-visible { scrollbar-width: thin; }
.ur-compare-scroll:hover::-webkit-scrollbar,
.ur-compare-scroll:focus-visible::-webkit-scrollbar { width: 6px; }
.ur-compare-scroll::-webkit-scrollbar-thumb { background: rgba(15,23,42,.18); border-radius: 999px; }
.ur-compare-scroll:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .cb-page .ul-hero-visual img { max-width: 520px; }
  .ur-radar-banner { grid-template-columns: repeat(2, 1fr); }
  .cb-grid-2 { grid-template-columns: 1fr; }
  .ur-demo-grid { gap: 26px; }
  .cb-page #ev .cb-split { grid-template-columns: 1fr; gap: 34px; }
  .cb-page #ev .ur-gallery img:first-child { width: 69%; }
  .cb-page #ev .ur-gallery img:nth-child(2) { width: 72%; margin-top: -10.5%; }
}

@media (max-width: 620px) {
  .ur-compare-5col { min-width: auto; }
  .ur-radar-banner { grid-template-columns: 1fr; }
  .cb-page #ev .ur-gallery img:first-child { width: 70.5%; }
  .cb-page #ev .ur-gallery img:nth-child(2) { width: 73.5%; margin-top: -7.5%; }
}

/* ---------- #compare-mm：容器保持满宽，与相邻节左右边缘一致 ----------
   ⚠️ 曾两次试图用「改宽度」给这一节制造层次，均已回退，不要再试：
   ① 收窄容器到 1120px → 内容区 328→1400 而邻居是 48→1632，两侧各偏 280px（1265 屏偏 73px）；
   ② ≥1440px 两栏（表格在左 480px 解读在右）→ 结构变重，且本环境测不到宽屏。
   结论：这一节的层次用内容与节奏做，不用容器宽度；密集 5 列表宁可宽一点，也不破坏对齐。 */
/* 演示节是页面上唯一的动作内容，给更多留白 */
#demo { padding: 96px 0; }

/* ---------- #compare：差异 / 相同 双块（替代原 8 行 3 列表格） ----------
   原表里 8 行有 5 行是"两边都支持"的打平行，真正有差异的只有 3 行 —— 表格把 5 行噪音
   和 3 行结论等权呈现。现拆成两块：差异项（3 条，带值）在前，相同项（5 条，胶囊）在后。
   顺带解决 §4.7：与相邻的 #compare-mm 不再同属 spec-table 家族。 */
.cb-page #compare .ur-cmp-split { display: grid; grid-template-columns: 1.22fr 1fr;
  gap: 20px; align-items: start; }
/* 右列 = 「两者都能做到」模块 + 系统成本解读；解读紧贴右模块下方、与右列同宽，
   不再横跨整行，左列「关键差异」独占左侧 */
.cb-page #compare .ur-cmp-col { display: grid; gap: 12px; align-content: start; }
.cb-page #compare .ur-compare-read { margin-top: 0; }
.cb-page #compare .ur-compare-read p { line-height: 1.62; }
.ur-cmp-block { background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px; }
/* 右模块（相同项胶囊）内容更轻，内边距比左列收一档 */
.cb-page #compare .ur-cmp-block--same { padding: 16px 20px; }
.ur-cmp-block--diff { border-left: 3px solid var(--blue); }
.ur-cmp-h { margin: 0 0 15px; font-size: 15px; font-weight: 700; color: #1f2933; }
.ur-cmp-row + .ur-cmp-row { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); }
.ur-cmp-lbl { font-size: 14.5px; font-weight: 600; color: #1f2933; margin-bottom: 7px; }
.ur-cmp-vs { display: flex; flex-wrap: wrap; gap: 7px 20px; font-size: 14px; }
.ur-cmp-pair { display: inline-flex; align-items: baseline; gap: 7px; }
.ur-cmp-tag { font-size: 11.5px; color: var(--muted); }
.ur-cmp-u { color: var(--blue-600); font-weight: 600; }
.ur-cmp-o { color: var(--muted); }
.ur-cmp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.ur-cmp-chips li { padding: 7px 15px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 13.5px; color: #1f2933; background: #fff; }
.ur-cmp-note { margin: 15px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--muted); }
@media (max-width: 780px) {
  .cb-page #compare .ur-cmp-split { grid-template-columns: 1fr; }
}