/* ============================================================
   服务与支持-资料下载 (page-downloads) — 设计稿 650:2159
   banner + 分类 + 产品资料列表(参考硬件产品列表) + 底部
   ============================================================ */
body.page-downloads { background: #F5F6FA; }

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

/* ============================================================
   区块1: banner (设计稿 1920×464, 浅底深字)
   ============================================================ */
.dl-banner {
  position: relative;
  height: 464px;
  overflow: hidden;
  margin-top: 64px;
}
.dl-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dl-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 */
}
.dl-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;
}
.dl-banner-sub {
  margin-top: 12px;
  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;
}

/* ============================================================
   区块2: 分类 (同视频中心, 仅移动端吸顶+折叠, 无滚动监听)
   设计稿 650:2222: 链接 553/785/1040/1272, 间距120, 激活蓝+下划线
   ============================================================ */
.dl-cats { margin-top: 64px; }
.dl-cats-inner {
    display: flex;
    align-items: center;
    height: 38px;
    justify-content: center;
}
.dl-cats-list {
    display: flex;
    align-items: center;
}
.dl-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);
}
.dl-cats-list a + a { margin-left: 120px; }
.dl-cats-list a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  background: transparent;
  transition: background .3s var(--ease);
}
.dl-cats-list a:hover { color: #2168E5; }
.dl-cats-list a.is-active { color: #2168E5; }
.dl-cats-list a.is-active::after { background: #2168E5; }
.dl-cats-arrow { display: none; }

/* ============================================================
   区块3: 产品资料列表 (参考硬件产品 pl-card, 点亮 hover)
   设计稿 1117:19464: 卡 345×368 #EDEEEF r6, 图区 345×314, 标题 20px
   ============================================================ */
.dl-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 48px;                /* 分类底 630 → 列表 678 */
  padding-bottom: 120px;           /* 列表底 1434 → footer 1554 */
}
.dl-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #EDEEEF;
  border-radius: 6px;
  overflow: hidden;
  text-align: center;
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}

/* 图区 345×314 (设计稿 #D9D9D9) + 双图 hover: 黑屏→彩屏 (硬件产品页点亮) */
.dl-card-img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 314px;
  overflow: hidden;
  background: #EDEEF0;
}
.dl-card-img img {
  max-height: 75%;
  max-width: 66%;
  object-fit: contain;
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.dl-card-img .img-color { position: absolute; opacity: 0; }
.dl-card:hover .img-dark { opacity: 0; }
.dl-card:hover .img-color { opacity: 1; transform: scale(1.06); }
.dl-card h3 {
  margin-top: 10px;                /* 设计稿标题 y=984 (图区 314 + 10) */
  font-size: 20px;
  font-weight: 666;
  line-height: 30px;
  color: #2E3033;
  margin-bottom: 25px;
}

/* 分页器 (同视频中心) */
.dl-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: -60px;               /* 列表 padding-bottom 120 已含间距 */
  margin-bottom: 60px;
}
.dl-pager-num {
  position: relative;
  min-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);
}
.dl-pager-num a { color: inherit; text-decoration: none; }
.dl-pager-num a:hover { color: #2168E5; }
.dl-pager-num.is-active { color: #2168E5; font-weight: 666; }
.dl-pager-num.is-active::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid #2168E5;
}
.dl-pager-arrow {
  width: 48px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #C7C7C7;
  color: #BFBFBF;
  font-size: 18px;
}
/* 无下载资料 → 暂无内容状态 (同视频中心) */
.dl-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-column: 1 / -1;
  padding: 80px 0 120px;
  margin-top: 0;
}
.dl-status .status-ill {
  margin-top: 0;
  width: 306px;
  max-width: 100%;
}
.dl-status .status-ill img,
.dl-status .status-ill svg {
  display: block;
  width: 100%;
  height: auto;
}
.dl-status .status-msg {
  margin-top: 24px;
  text-align: center;
}
.dl-status .status-title {
  margin: 0;
  font-size: 20px;
  font-weight: 666;
  line-height: 30px;
  color: #2E3033;
}
.dl-status .status-sub {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 513;
  line-height: 20px;
  color: #2E3033;
  opacity: .85;
}

/* ============================================================
   响应式 (≤1440 / ≤1100 / ≤900 / ≤767 / ≤400)
   ============================================================ */
@media (max-width: 1440px) {
  .dl-banner { height: 420px; }
  .dl-banner-inner { padding-top: 130px; }
}
@media (max-width: 1336px) {
  .dl-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  .dl-banner { height: 380px; }
  .dl-banner-inner { padding-top: 110px; }
  .dl-banner-title { font-size: 40px; line-height: 56px; }
  .dl-banner-sub { font-size: 18px; line-height: 32px; }
  .dl-cats { margin-top: 48px; }
  .dl-cats-list { margin-left: 96px; }
}
@media (max-width: 900px) {
  .dl-banner { height: 340px; }
  .dl-banner-inner { padding-top: 96px; }
  .dl-banner-title { font-size: 34px; line-height: 48px; }
  .dl-banner-sub { font-size: 16px; line-height: 28px; }
  .dl-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .dl-banner { height: 280px; }
  .dl-banner-inner { padding-top: 76px; }
  .dl-banner-title { font-size: 28px; line-height: 40px; }
  .dl-banner-sub { margin-top: 8px; font-size: 14px; line-height: 24px; }
  /* 移动端: 折叠竖排分类 (同视频中心) */
.dl-cats {
        position: sticky;
        top: 64px;
        z-index: 50;
        background: #fff;
        margin-top: 0;
    }
  .dl-cats-inner {
    height: auto;
    padding: 0;
    justify-content: flex-start;
    width: 100%;
  }
  .dl-cats-arrow { display: none; }   /* 客户要求: 改为左右横向切换, 不再需要展开箭头 */
  .dl-cats-chevron {
    width: 20px;
    height: 20px;
    flex: none;
    transition: transform .3s var(--ease);
  }
  .dl-cats.open .dl-cats-chevron { transform: rotate(180deg); }
  .dl-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 给激活下划线, 避免被 overflow 裁掉 */
  }
  .dl-cats-list::-webkit-scrollbar { display: none; }
  .dl-cats-list a {
    display: flex;                    /* 全部显示 (原折叠态只显示当前项) */
    flex: none;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0;
    font-size: 16px;                  /* 客户要求: 14 → 16px */
    font-weight: 513;
    color: #2D2F33;
    border-bottom: none;
  }
  .dl-cats-list a + a { margin-left: 0; }
  .dl-cats-list a:last-child { border-bottom: none; }
  .dl-cats-list a.is-active {
    display: flex;
    color: #2168E5;
    font-weight: 666;
    text-decoration: none;
  }
  /* 激活态下划线 (与 PC 一致) */
  .dl-cats-list a.is-active::after { background: #2168E5; }
  .dl-cats.open .dl-cats-list a { display: flex; }
  .dl-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 36px; padding-bottom: 72px; }
  .dl-card-img { height: auto; aspect-ratio: 345 / 314; }
}
@media (max-width: 400px) {
  .dl-banner { height: 240px; }
  .dl-banner-inner { padding-top: 64px; }
  .dl-banner-title { font-size: 24px; line-height: 34px; }
  .dl-banner-sub { font-size: 13px; line-height: 22px; }
  .dl-grid { grid-template-columns: 1fr; }
}

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

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