/* ============================================================
   服务与支持-视频中心 (page-video-center) — 设计稿 477:1297
   banner 1920×464 + tab标签 + 教程卡片 3×3 + 分页器 + 底部
   ============================================================ */

/* ---------- 顶部导航: 白色底子 (设计稿 顶部-白色底子) ---------- */
/* ---------- 顶部导航: 白色底子 ---------- */
body.page-video-center .site-header {
  background: #fff;
  box-shadow: inset 0 -1px 0 0 #EBEBEB;
}
body.page-video-center .site-header .logo .logo-dark { display: block; }
body.page-video-center .site-header .logo .logo-light { display: none; }
body.page-video-center .site-header .navbar > li > a { color: #2E3033; }
body.page-video-center .site-header .navbar > li > a:hover { color: #2168E5; opacity: 1; }
body.page-video-center .site-header .navbar > li.active > a { color: #2168E5; }
body.page-video-center .site-header .vr-pill { border-color: #5C6066; color: #2E3033; }
body.page-video-center .site-header:not(.is-scrolled):not(.dd-open) .icon-btn img { filter: none; }
body.page-video-center .site-header:not(.is-scrolled):not(.dd-open) .nav-toggle span { background: #2E3033; }
body.page-video-center .site-header.is-scrolled,
body.page-video-center .site-header.dd-open {
  background: #fff;
  box-shadow: inset 0 -1px 0 0 #EBEBEB;
}

/* ============================================================
   区块1: banner (设计稿 1920×464, 浅色底深字)
   ============================================================ */
.vc-banner {
  position: relative;
  height: 464px;
  overflow: hidden;
  background: #575757;
  margin-top: 64px;
}
.vc-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vc-banner-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 154px;              /* 标题 y=218, banner 顶 64 → 154 */
}
.vc-banner-title {
  font-family: 'Dream Han Sans CN', 'Source Han Sans CN', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 48px;
  font-weight: 749;
  line-height: 72px;
  color: #222426;
}
.vc-banner-sub {
  margin-top: 12px;                /* 标题底 290 → 副标题 302 */
  font-family: 'Dream Han Sans CN', 'Source Han Sans CN', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 22px;
  font-weight: 513;
  line-height: 40px;
  color: #393C40;
  max-width: 560px;                /* 英文副标题较长 (22px 时整句约 946px), 限制宽度折成 2 行 */
}

/* ============================================================
   区块2: 分类 (设计稿 1117:19507: 链接 577/809/1072/1312, 激活蓝+下划线)
   仅移动端 sticky 吸顶 + 折叠面板 (参考硬件产品页交互, 无滚动监听)
   ============================================================ */
.vc-cats {
  margin-top: 64px;                 /* banner 底 528 → 分类条 592 */
}
.vc-cats-inner {
  display: flex;
  align-items: center;
  height: 38px;                     /* 设计稿 tab 组高 38 */
  justify-content: center;          /* 客户要求: PC 端分类条居中 */
}
.vc-cats-list {
  display: flex;
  align-items: center;
  gap: 120px;                       /* 分类间距 (动态数量, 原 nth-child margin 改为 gap) */
  margin-left: 0;                   /* 客户要求: 337 → 0, 配合居中 */
}
.vc-cats-list a {
  position: relative;
  padding: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 666;
  line-height: 28px;
  color: #2E3033;
  text-decoration: none;
  cursor: pointer;
  transition: color .3s var(--ease);
}
.vc-cats-list a::after {             /* 激活下划线 2px, 链接底 8px */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  background: transparent;
  transition: background .3s var(--ease);
}
.vc-cats-list a:hover { color: #2168E5; }
.vc-cats-list a.is-active { color: #2168E5; }
.vc-cats-list a.is-active::after { background: #2168E5; }
/* 移动端展开/收起箭头 (PC 隐藏) */
.vc-cats-arrow { display: none; }

/* ============================================================
   区块3: 教程卡片 (设计稿 1117:19596, 3×3, 464×320, 间隔24)
   1fr 弹性列 + max-width 1440: 1920 下每列 464, 中间尺寸自动收缩不溢出
   ============================================================ */
.vc-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 1440px;
  margin: 48px auto 0;              /* tab 底 630 → 卡片 678 */
  padding-bottom: 120px;            /* 卡片区底部与 footer 留白 */
}
.vc-card {
  position: relative;
  display: block;
  width: 100%;
  height: 320px;
  background: #F2F3F5;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.vc-card-img {
  display: block;
  width: 100%;
  height: 260px;
  overflow: hidden;
}
.vc-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease);
}
.vc-card:hover .vc-card-img img { transform: scale(1.05); }
/* 播放按钮 64×64, 居中于图片区 (设计稿 icon-播放) */
.vc-card-play {
  position: absolute;
  left: 50%;
  top: 130px;                      /* 图片区中心: 260/2 */
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  opacity: 1;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.vc-card:hover .vc-card-play { transform: translate(-50%, -50%) scale(1.08); }
.vc-card-play img { display: block; width: 100%; height: 100%; }
.vc-card-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 276px;                      /* 图底 260 + 16 */
  text-align: center;
  font-size: 16px;
  font-weight: 513;
  line-height: 28px;
  color: #171719;
}

/* ============================================================
   区块3.5: 无视频 → 暂无内容状态 (独立样式, 不依赖 status.css)
   ============================================================ */
.vc-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-column: 1 / -1;
  padding: 80px 0 120px;
  margin-top: 0;
}
.vc-status .status-ill {
  margin-top: 0;
  width: 306px;
  max-width: 100%;
}
.vc-status .status-ill img,
.vc-status .status-ill svg {
  display: block;
  width: 100%;
  height: auto;
}
.vc-status .status-msg {
  margin-top: 24px;                /* 插图底 → 标题间距 */
  text-align: center;
}
.vc-status .status-title {
  margin: 0;
  font-size: 20px;
  font-weight: 666;
  line-height: 30px;
  color: #2E3033;
}
.vc-status .status-sub {
  margin: 8px 0 0;                 /* 标题底 → 副标题间距 */
  font-size: 14px;
  font-weight: 513;
  line-height: 20px;
  color: #2E3033;
  opacity: .85;
}

/* ============================================================
   区块4: 分页器 (设计稿 1117:19826, 444×40 居中)
   ============================================================ */
.vc-pager {
  display: flex;
  align-items: center;
  justify-content: center;
   gap: 10px;
  margin-top: -60px;               /* 抵消卡片区 padding-bottom 120 (净留白 60) */
  margin-bottom: 60px;          
}
.vc-pager-arrow {
  width: 48px;
  height: 38px;
  padding: 0;
  border: 1px solid #C7C7C7;
  background: none;
  color: #BFBFBF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.vc-pager-arrow svg { width: 18px; height: 18px; }
.vc-pager-arrow:hover { border-color: #2168E5; color: #2168E5; }
.vc-pager-num {
  position: relative;
  width: 48px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 513;
  line-height: 30px;
  color: #393C40;
  cursor: pointer;
  transition: color .3s var(--ease);
}
.vc-pager-num b { font-weight: inherit; }
.vc-pager-num:hover { color: #2168E5; }
.vc-pager-num.is-active { color: #2168E5; font-weight: 666; }
.vc-pager-num.is-active::before {   /* 激活页码 48×38 蓝边框 */
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid #2168E5;
}
.vc-pager-ellipsis {
  width: 14px;
  margin: 0 14px;
  text-align: center;
  font-size: 16px;
  line-height: 30px;
  color: #393C40;
}

/* ============================================================
   响应式 (≤1440 / ≤1100 / ≤900 / ≤767 / ≤400)
   ============================================================ */
@media (max-width: 1440px) {
  .vc-banner { height: 420px; }
  .vc-banner-inner { padding-top: 130px; }
}
@media (max-width: 1100px) {
  .vc-banner { height: 380px; }
  .vc-banner-inner { padding-top: 110px; }
  .vc-banner-title { font-size: 40px; line-height: 56px; }
  .vc-banner-sub { font-size: 18px; line-height: 32px; }
  .vc-cats { margin-top: 48px; }
  .vc-cats-list { margin-left: 0; gap: 56px; }   /* 客户要求: 平板间距 120 → 56 (原 120 桌面值在平板过宽) */
  /* 去掉叠加在 gap 上的旧 nth-child margin (原 72/76/84 → 间隙被撑到 192/196/204) */
  .vc-cats-list a:nth-child(2),
  .vc-cats-list a:nth-child(3),
  .vc-cats-list a:nth-child(4) { margin-left: 0; }
  .vc-cards { grid-template-columns: repeat(2, 1fr); }
  .vc-card { width: 100%; }
  .vc-pager { margin-top: 40px; }
}
@media (max-width: 900px) {
  .vc-banner { height: 340px; }
  .vc-banner-inner { padding-top: 96px; }
  .vc-banner-title { font-size: 34px; line-height: 48px; }
  .vc-banner-sub { font-size: 16px; line-height: 28px; }
  .vc-cats-list { margin-left: 0; gap: 40px; }   /* 客户要求: 窄平板间距 → 40 */
}
@media (max-width: 767px) {
  .vc-banner { height: 280px; }
  .vc-banner-inner { padding-top: 76px; }
  .vc-banner-title { font-size: 28px; line-height: 40px; }
  .vc-banner-sub { margin-top: 8px; font-size: 14px; line-height: 24px; max-width: none; }  /* 移动端容器本就窄, 按容器宽度自然折行 */
  /* 移动端: 折叠竖排列表 (参考硬件产品页 pl-cats, 无滚动监听) */
    .vc-cats {
        position: sticky;
        top: 64px;
        z-index: 50;
        background: #fff;
        margin-top: 0;
    }
  .vc-cats-inner {
    height: auto;
    padding: 0;
    justify-content: flex-start;
    width: 100%;
  }
  .vc-cats-arrow { display: none; }   /* 客户要求: 改为左右横向切换, 不再需要展开箭头 */
  .vc-cats-chevron {
    width: 20px;
    height: 20px;
    flex: none;
    transition: transform .3s var(--ease);
  }
  .vc-cats.open .vc-cats-chevron { transform: rotate(180deg); }
  .vc-cats-list {
    display: flex;
    flex-direction: row;              /* 客户要求: 左右横向切换 */
    gap: 28px;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;                 /* 可左右滑动 */
    overflow-y: hidden;               /* 客户要求: 只能左右滚动, 不要上下滚动条 (overflow-x:auto 会让 y 也变 auto) */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    white-space: nowrap;
    padding: 0 24px 10px;             /* 底部留 10px 给激活下划线(bottom:-8px), 避免被 overflow 裁掉 */
  }
  .vc-cats-list::-webkit-scrollbar { display: none; }
  .vc-cats-list a {
    display: flex;                    /* 全部显示 (原折叠态只显示当前项) */
    flex: none;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0;
    font-size: 14px;
    font-weight: 513;
    color: #2D2F33;
    border-bottom: none;
  }
  .vc-cats-list a:nth-child(2),
  .vc-cats-list a:nth-child(3),
  .vc-cats-list a:nth-child(4) { margin-left: 0; }
  .vc-cats-list a:last-child { border-bottom: none; }
  /* 折叠态: 只显示当前高亮项 (蓝色 + 下划线) */
  .vc-cats-list a.is-active {
    display: flex;
    color: #2168E5;
    font-weight: 666;
    text-decoration: none;
  }
  /* 激活态下划线 (与 PC 一致): 恢复 2px 蓝色下划线 */
  .vc-cats-list a.is-active::after { background: #2168E5; }
  /* 展开态: 显示全部 */
  .vc-cats.open .vc-cats-list a { display: flex; }
  .vc-cards { grid-template-columns: 1fr; gap: 20px; margin-top: 36px; }
  .vc-card { width: 100%; }
  .vc-pager { gap: 6px; margin-top: 32px; }
  .vc-pager-arrow { width: 40px; height: 34px; }
  .vc-pager-num { width: 40px; height: 34px; font-size: 15px; }
  .vc-pager-ellipsis { display: none; }
}
@media (max-width: 400px) {
  .vc-banner { height: 240px; }
  .vc-banner-inner { padding-top: 64px; }
  .vc-banner-title { font-size: 24px; line-height: 34px; }
  .vc-banner-sub { font-size: 13px; line-height: 22px; }
  .vc-pager-arrow { width: 36px; height: 32px; }
  .vc-pager-num { width: 36px; height: 32px; }
}

/* ============================================================
   区块5: 视频播放模态框 (点击播放按钮弹出)
   ============================================================ */
.vc-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 12, 16, .78);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.vc-modal.is-open { opacity: 1; visibility: visible; }
.vc-modal-box {
  position: relative;
  width: min(960px, 100%);
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  transform: translateY(16px) scale(.98);
  transition: transform .35s var(--ease);
}
.vc-modal.is-open .vc-modal-box { transform: translateY(0) scale(1); }
.vc-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .3s var(--ease);
}
.vc-modal-close svg { width: 16px; height: 16px; }
.vc-modal-close:hover { background: rgba(33, 104, 229, .85); }
.vc-modal-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.vc-modal-player video {
  width: 100%;
  height: 100%;
  display: block;
}
/* plyr 容器铺满 */
.vc-modal-player .plyr { width: 100%; height: 100%; }
.vc-modal-player .plyr video { width: 100%; height: 100%; }

/* ============ 移动端 banner 图 (后台可上传; 留空回退 PC 图) ============ */
.vc-banner-img--m { display: none; }

@media (max-width: 767px) {
  .vc-banner-img--pc { display: none; }
  .vc-banner-img--m { display: block; }
}