/* 「产品界面」区块：产品页与功能页复用同一个组件，展示 desk.solvea.cx 的真实界面。
   只有引用了本文件的页面才有这个区块；样式全部取 subpage-system.css 的变量。
   视频统一 preload="none" + data-src，由 scripts/runtime/product-ui.js 进入视口后才加载，
   避免国内网络下为首屏之外的素材付费。 */

.ui-proof { padding: clamp(56px, 6vw, 88px) 0; background: #fff; }
.ui-proof-shell {
  max-width: var(--subpage-max-width, 1240px);
  margin: 0 auto;
  padding: 0 var(--subpage-gutter, clamp(20px, 5vw, 72px));
}
.ui-proof-head { max-width: 760px; margin: 0 0 clamp(28px, 3vw, 40px); }
.ui-proof-eyebrow {
  margin: 0 0 12px;
  color: var(--subpage-accent-dark, #3157d8);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ui-proof-head h2 {
  margin: 0 0 12px;
  color: var(--subpage-ink, #17212b);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.25;
  letter-spacing: -.03em;
}
.ui-proof-lead { margin: 0; font-size: 1rem; line-height: 1.75; }

.ui-proof-grid { display: grid; gap: 22px; }
.ui-proof-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-proof-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.ui-proof-item { margin: 0; }
.ui-proof-item :is(img, video) {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--subpage-line, #dfe5ef);
  border-radius: var(--subpage-radius, 4px);
  background: #f4f6f9;
}
.ui-proof-item figcaption {
  margin: 12px 2px 0;
  color: var(--subpage-muted, #66717c);
  font-size: .9rem;
  line-height: 1.65;
}

/* 日文站专属素材（日语语音 demo）：其他语言不显示 */
.ui-proof-item[data-lang-only="ja"] { display: none; }
html[lang="ja"] .ui-proof-item[data-lang-only="ja"] { display: block; }

@media (max-width: 900px) {
  .ui-proof-grid-2, .ui-proof-grid-3 { grid-template-columns: minmax(0, 1fr); }
}

/* 方形素材（语音波形 400×400、日语通话 720×720）不拉伸，居中限宽。 */
.ui-proof-item-narrow :is(img, video) { max-width: 420px; margin: 0 auto; }
.ui-proof-item-narrow figcaption { max-width: 420px; margin-inline: auto; text-align: center; }
html[lang="ja"] .ui-proof-item[data-lang-only="ja"] { grid-column: 1 / -1; }

/* 海外业务号码属于 Solvea 产品线；中文 Shulex 页面只展示 SLG 语音能力。 */
.ui-proof-item-overseas { display: none; }
html[lang="en"] .ui-proof-item-overseas,
html[lang="ja"] .ui-proof-item-overseas { display: block; }
.ui-proof-item-wide { grid-column: 1 / -1; }
.ui-proof-item-wide video { aspect-ratio: 16 / 9; object-fit: contain; background: #101728; }