/* =========================================================
 * Yzncms 前台桥接样式
 * 让框架自带输出（分页 / 富文本 / 表单）与设计稿视觉一致
 * 依赖 assets/css/style.css 里的 :root 颜色变量
 * ========================================================= */

/* 1. 分页：框架输出 <ul id="pages"><li><a>/<span> */
#pages {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  align-items: center;
  margin: 42px 0 0;
  padding: 0;
  list-style: none;
}
#pages li { list-style: none; }
#pages li a,
#pages li span {
  display: inline-block;
  min-width: 42px;
  padding: .45rem .8rem;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  background: #fff;
  color: var(--c-text);
  font-size: .95rem;
  text-align: center;
  text-decoration: none;
  transition: all .2s ease;
}
#pages li a:hover { border-color: var(--c-primary); color: var(--c-primary); }
#pages li.active span { border-color: var(--c-primary); background: var(--c-primary); color: #fff; font-weight: 700; }
#pages li.disabled span { opacity: .45; }

/* 2. 富文本（后台编辑器内容）排版：只补充设计稿没覆盖的部分，避免覆盖设计稿样式 */
.prose img { max-width: 100%; height: auto; }
.prose table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; }
.prose table th,
.prose table td { border: 1px solid var(--c-line); padding: .6rem .8rem; }
.prose table th { background: var(--c-primary-l); color: var(--c-ink); }
.prose ul:not(.bullet):not(.num) { padding-left: 1.2rem; }
.prose iframe { max-width: 100%; }
.newsview img,
.content-left img { max-width: 100%; height: auto; }

/* 3. 图集 / 荣誉：后台未上传图时的占位观感 */
.honor-item img,
.case-item img { background: var(--c-soft); }

/* 4. 留言表单（表单模块字段渲染） */
.verify-box { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.verify-box img { height: 44px; border: 1px solid var(--c-line); border-radius: 10px; cursor: pointer; background: #fff; }
.form-card .form-item { margin-bottom: 1rem; }
.form-card .form-control.is-invalid,
.form-card .form-select.is-invalid { border-color: #e05a5a; }
.form-error { color: #d9534f; font-size: .875rem; margin-top: .25rem; }
.form-done { text-align: center; padding: 2.5rem 1rem; }
.form-done i { font-size: 3rem; color: var(--c-primary); }
.req { color: #e05a5a; }

/* 5. 筛选兜底（main.js 内置 is-hidden） */
.is-hidden { display: none !important; }

/* 6. 侧栏当前栏目高亮（与设计稿 .sn-list a.active 保持一致：蓝底白字） */
.side-nav .sn-list a.active { color: #fff; font-weight: 700; }
.side-nav .sn-list a.active i { opacity: .85; }

/* 7. 站内搜索结果页 */
.badge-soft.active { background: var(--c-primary); color: #fff; font-weight: 700; }
.search-result-list { list-style: none; padding: 0; margin: 0; }
.search-result-list li { border-bottom: 1px dashed var(--c-line); padding: 1rem 0; }
.search-result-list li:last-child { border-bottom: 0; }
.search-result-list a { color: var(--c-ink); font-weight: 700; text-decoration: none; }
.search-result-list a:hover { color: var(--c-primary); }
.search-result-list p { margin: .35rem 0 0; color: var(--c-text); }
.search-result-list .sr-meta { color: var(--c-muted); font-size: .875rem; }

/* 8. 详情页正文表格（产品指标表）自适应 */
.prose .spec-table table { display: block; overflow-x: auto; white-space: nowrap; }
/* 11. 语言切换：改为跳转链接（中文 www / 英文 en 独立站）后，保持与设计稿按钮一致的外观 */
.lang-switch .lang-btn { display: inline-flex; align-items: center; text-decoration: none; line-height: 1.6; }
.lang-switch .lang-btn:hover { text-decoration: none; }
.lang-switch .lang-btn[aria-current="true"] { cursor: default; }

/* 12. 移动端头部搜索按钮排版修正：
   设计稿 .nav-search-btn 是 grid 布局的圆形图标按钮，移动端加了「站内搜索」文字后
   图标与文字会被拆成上下两行、挤在 40px 高的胶囊里 → 这里改回横向排列并收紧间距 */
@media (max-width: 1199.98px) {
  .nav-tools { flex-wrap: wrap; gap: .6rem; }
  .nav-tools .nav-search-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .4rem; height: 38px; padding: 0 .95rem; white-space: nowrap; font-size: .9rem;
  }
  .nav-tools .nav-search-btn > span { margin-left: 0 !important; }
}

/* 13. 搜索弹窗在手机上的排版：内边距收紧、输入框与搜索按钮上下排布，避免挤压走形 */
@media (max-width: 575.98px) {
  .search-modal .modal-body { padding: 20px 16px 22px; }
  .search-modal .search-box { flex-direction: column; gap: .5rem; }
  .search-modal .search-box .form-control { width: 100%; }
  .search-modal .search-box .btn-main { width: 100%; justify-content: center; }
  .search-modal .form-hint { font-size: .8rem; }
}

/* 9. 产品/图片详情：图集缩略图切换时的淡入效果（配合 main.js 的 pd-switch） */
.pd-media img.pd-switch { animation: pdSwitchFade .32s ease; }
@keyframes pdSwitchFade {
  from { opacity: .35; }
  to { opacity: 1; }
}
.pd-thumbs button { cursor: pointer; }

/* 10. 修正页面底部空白：
   设计稿里 body.has-mbar 的 58px 内边距是给「手机端固定底部工具栏」预留的，
   但桌面端该工具栏是隐藏的（.m-bar 带 d-lg-none），内边距却依然生效 → 每个页面底部多出一条空白带；
   而移动端本身已有 .footer-bottom { padding-bottom: 78px } 留白，足够避开底栏。
   因此这里统一取消该内边距（桌面端无空白，移动端仍不会被底栏遮挡）。 */
body.has-mbar { padding-bottom: 0; }

@media (max-width: 575.98px) {
  #pages li a, #pages li span { min-width: 36px; padding: .35rem .6rem; font-size: .85rem; }
}

/* 14. 企业宣传片（首页封面 + 完整版弹窗）
   封面改用真实影片截图 assets/img/misc/video-poster.jpg；
   鼠标悬停封面时静音试看（配合 main.js 的 [data-video-preview]），点击任意位置看完整版 */
.video-band .vb-media img { transition: transform .7s var(--ease); }
.video-band .vb-media:hover img { transform: scale(1.03); }
.vb-media .vb-preview {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .45s var(--ease);
  pointer-events: none;
}
.vb-media.is-previewing .vb-preview { opacity: 1; }
/* 整块封面都是播放热区（无障碍：用真实按钮 + aria-label，视觉按钮 aria-hidden） */
.vb-media .vb-cover {
  position: absolute; inset: 0; z-index: 3;
  padding: 0; border: 0; background: transparent;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.vb-media .vb-play, .vb-media .vb-caption { pointer-events: none; }
.vb-media:hover .vb-play { background: var(--c-primary); color: #fff; transform: scale(1.06); }
/* 试看时隐藏大播放按钮（必须排在 :hover 之后，否则 transform 被覆盖） */
.vb-media.is-previewing .vb-play { opacity: 0; transform: scale(.86); }
.vb-len {
  position: absolute; top: 14px; right: 14px; z-index: 4;
  padding: .22rem .62rem; border-radius: 999px;
  background: rgba(8, 40, 60, .62); color: #fff;
  font-size: .78rem; letter-spacing: .02em;
  pointer-events: none;
}
/* 视频文件缺失时不显示播放按钮，避免点了没反应 */
.vb-media.is-video-error .vb-play { display: none; }

/* 15. 宣传片弹窗尺寸与居中
   问题：video 是 16:9，弹窗 .modal-xl 最宽 1140px → 画面高约 641px，加标题栏约 698px；
   在 1366x768 这类矮屏上整块会高于视口，Bootstrap 的 .modal-dialog-centered 会把顶部
   顶出可视区（而且滚不回去），视觉上就成了"弹窗沉到底部、标题被裁掉"。
   做法：弹窗宽度取「1140px」和「视口可用高度 × 16 / 9」中的较小值 —— 矮屏自动收窄、
   大屏保持原尺寸，标题栏与画面整块始终完整落在视口内并真正垂直居中。 */
#videoModal {
  --vm-chrome: 9rem;                       /* 留给标题栏(约57px)与上下边距、呼吸留白 */
  --vm-h: calc(100vh - var(--vm-chrome));  /* 画面可用的最大高度 */
}
@supports (height: 100dvh) {               /* 移动端地址栏收起/展开时更准确 */
  #videoModal { --vm-h: calc(100dvh - var(--vm-chrome)); }
}
#videoModal .modal-content { overflow: hidden; }  /* 画面四角跟随弹窗圆角，不露直角 */
#videoModal video {
  display: block;
  width: 100%;
  max-height: var(--vm-h);                 /* 兜底：极端视口下画面也不溢出，黑边内留白不裁切 */
  object-fit: contain;
  background: #000;
}
@media (min-width: 576px) {
  #videoModal .modal-dialog {
    /* 三重上限：视口宽 - 1rem（防止又高又窄的窗口横向溢出）、1140px(原 modal-xl 上限)、
       以及按视口高度换算出的 16:9 宽度三者取最小 */
    max-width: 1140px;
    width: min(calc(100% - 1rem), 1140px, calc(var(--vm-h) * 16 / 9));
  }
}
@media (max-width: 575.98px) {
  /* 小屏继续沿用满宽（视口 - 1rem），只限制竖屏/横屏时的画面高度 */
  #videoModal video { max-height: 62vh; }
}