/* =========================================================
   4/5 · 页面层 pages/view.css —— 内容详情页（产品 / 新闻 / 图集）
   ---------------------------------------------------------
   本文件只被详情页加载。类名前缀：.view-*

     .view-grid          正文 + 侧栏的两栏骨架
     .view-side          侧栏（滚动时吸顶）
     .view-hero-img      正文首图
     .view-video         视频
     .view-spec          参数表
     .view-gallery       附加图集（非图集栏目时）
     .view-prevnext      上一篇 / 下一篇
     .view-params-card   侧栏参数卡
     .view-addcart       侧栏「加入询价单」表单

   ⚠️ 原来挤在 view.htm 上的十几个 style="…" 内联样式全部搬到这里。
      内联样式的优先级高得离谱 —— 后台改主题 CSS 永远改不动它，
      这是「样式规范」里最先要清干净的东西。
      其中「卡片标题 / 说明 / 分隔线 / 通栏按钮」是联系页也在用的同一套，
      按组件层规则提到了 components.css（.card-h / .card-p / .card-sep / .btn.block）。
   ========================================================= */

/* ---------------- 两栏骨架 ---------------- */

.view-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 48px; align-items: start; }
.view-side { position: sticky; top: 96px; }

/* ---------------- 正文区 ---------------- */

.view-hero-img {
    border-radius: 16px;
    margin-bottom: 26px;
    width: 100%;
}

.view-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 26px;
    border-radius: 16px;
    background: #0b0e14;
    object-fit: contain;
}

/* 附加图集（不是图集栏目时，正文下方的缩略图网格；点击新窗口打开） */
.view-gallery-title { margin: 36px 0 4px; font-size: 20px; }
.view-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.view-gallery a { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.view-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* 图集详情页底部的小字说明（.lb-view 本体在 components.css） */
.view-gallery-tip { font-size: 13.5px; color: var(--muted); margin: 0; }

/* ---------------- 上一篇 / 下一篇 ---------------- */

.view-prevnext {
    display: flex; justify-content: space-between; gap: 20px;
    margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 15px;
}
.view-prevnext a { color: var(--muted); }
.view-prevnext a:hover { color: var(--blue); }

/* ---------------- 侧栏 ---------------- */

.view-params-card { margin-bottom: 22px; }
.view-addcart     { margin-bottom: 10px; }
.view-or-call     { margin-top: 16px; font-size: 15px; color: var(--muted); }

/* 参数表 */
.view-spec { width: 100%; border-collapse: collapse; font-size: 15px; }
/* ⚠️ text-align 用逻辑值 start（不是 left）：RTL 语言下表格文字要贴右边缘 */
.view-spec th, .view-spec td { border-bottom: 1px solid var(--line); padding: 12px 10px; text-align: start; }
.view-spec th { width: 40%; color: var(--muted); font-weight: 500; }

/* ---------------- 响应式（仅详情页） ---------------- */

@media (max-width: 1024px) {
    .view-grid { grid-template-columns: 1fr; }
    .view-side { position: static; }
}

@media (max-width: 720px) {
    .view-gallery { grid-template-columns: 1fr; }
}