/* ============================================================
   新闻动态 (page-news) — 设计稿 782:3281
   banner(1920×464 图+左右渐变遮罩) + 左侧tab(130×340) + 12卡(405×390 4×3) + 分页器
   ============================================================ */
body.page-news { background: #fff; }

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

/* ---------- banner (设计稿 1070:18303: 1920×464) ---------- */
.news-banner {
  position: relative;
  height: 464px;
  overflow: hidden;
  margin-top: 64px;                /* fixed 头部 64 */
}
.news-banner-img {
    position: absolute;
    top: 0;
    width: 100%;
    height: 464px;
    object-fit: cover;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.news-banner-mask-l {
  position: absolute;
  left: 0; top: 0;
  width: 1277px;                   /* Rectangle 280 1277 宽 */
  height: 464px;
  background: linear-gradient(90deg, rgba(242,245,250,1) 0%, rgba(242,245,250,0.75) 63%, rgba(242,245,250,0) 100%);
}
.news-banner-mask-r {
  position: absolute;
  left: 1127px; top: 0;            /* Rectangle 279 1127..1920 */
  width: 793px;
  height: 464px;
  background: linear-gradient(90deg, rgba(242,245,250,0) 0%, rgba(242,245,250,1) 100%);
}
.news-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 */
}
.news-banner-title {
  font-size: 48px;
  font-weight: 749;
  line-height: 72px;
  color: #222426;
}
.news-banner-sub {
  margin-top: 12px;
  font-size: 22px;
  font-weight: 513;
  line-height: 40px;
  color: #393C40;
}

/* ---------- 布局: tab 130 + 卡片区 (设计稿: tab 顶 528=banner底, 卡片顶 592) ---------- */
.news-layout {
  display: flex;
  align-items: flex-start;
  gap: 48px;                       /* tab 右缘 370 → 卡片左 418 */
}

/* ---------- tab (设计稿 789:3729: 130×340, 白底) ---------- */
.news-tab {
  flex-shrink: 0;
  width: 130px;
  height: 340px;                   /* Rectangle 281 130×340 */
  padding-top: 65px;               /* tab 顶 528 → 激活项顶 593 */
  background: #fff;
}
/* 折叠箭头 (仅移动端显示) */
.news-cats-arrow { display: none; }
.news-tab-item {
  position: relative;
  display: block;
  width: 100%;
  height: 48px;
  padding: 14px 0 14px 10px;
  border: 0;
  background: none;
  font-size: 16px;
  font-weight: 513;
  line-height: 20px;
  text-align: left;
  color: #393C40;
  text-decoration: none;
  cursor: pointer;
  transition: color .25s ease;
}
.news-tab-item + .news-tab-item { margin-top: 0; }      /* 行距 48 = item 高 */
.news-tab-item:hover { color: #2168E5; }
.news-tab-item.is-active {
  height: 48px;                  /* 与普通项同高: 文字垂直居中, 行距统一 48, 无错位 */
  padding: 14px 0 14px 10px;     /* 与普通项同 padding, 文字位置完全一致 */
  color: #2168E5;
  font-weight: 666;
}
.news-tab-bar {
  position: absolute;
  left: 0;
  top: 12px;                     /* 蓝条 24px 高, 相对 48px 行垂直居中 */
  width: 2px;
  height: 24px;
  background: #2168E5;
  display: none;
}
.news-tab-item.is-active .news-tab-bar {
  display: block;
}

/* ---------- 卡片网格 (设计稿: 405×390, 3列, 间隙 24) ---------- */
.news-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding-top: 64px;               /* 卡片顶 592 = layout 顶 528 + 64 */
}
/* 无分页页码时: 卡片区底部补留白, 避免贴底 (有分页由 .news-pager 自带, 空状态自带) */
.news-grid:not(:has(.news-pager)):not(:has(.news-status)) { padding-bottom: 80px; }
.news-card {
    display: block;
    height: 390px;
    background: #F2F3F5;
    text-decoration: none;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
    border-radius: 12px;
}
.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(33, 104, 229, 0.12);
}
.news-card-img {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 405/243;           /* 图区 405×243 */
  border-radius: 12px 12px 0 0;
}
.news-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.news-card:hover .news-card-img img { transform: scale(1.05); }
.news-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s ease;
}
.news-play svg { width: 56px; height: 56px; display: block; }
.news-card:hover .news-play { transform: translate(-50%, -50%) scale(1.08); }
.news-card-body {
  position: relative;
  display: block;
  padding: 20px 24px 0 24px;       /* 分类 y263 图底243 → 20; 标题 289 → +26 */
}
.news-cat {
  display: block;
  font-size: 12px;
  font-weight: 666;
  line-height: 18px;
  color: #2E3033;
}
.news-title {
  display: block;
  margin-top: 8px;                 /* 分类底 281 → 标题 289 */
  font-size: 16px;
  font-weight: 666;
  line-height: 24px;
  color: #000;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.news-date {
  position: absolute;
  left: 24px;
  top: 109px;                      /* body 顶 263 → 日期 352 (卡内固定, 不随标题行数) */
  font-size: 12px;
  font-weight: 489;
  line-height: 18px;
  color: #2E3033;
}

/* ---------- 分页器 (设计稿 789:3845: 738..1182 共 444 宽, space-between 均布) ---------- */
.news-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 444px;
  max-width: 100%;
  grid-column: 1 / -1;             /* grid 子项: 跨整行, 相对列表居中 */
  margin: 0 auto;                  /* 相对右侧列表(grid)居中 */
  padding-top: 48px;               /* 卡片底 2224 → 分页器 2272 */
  padding-bottom: 80px;
}
.news-pager-arrow {
  width: 48px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #C7C7C7;
  background: #fff;
  color: #C7C7C7;
  text-decoration: none;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}
.news-pager-arrow svg { width: 18px; height: 18px; }
.news-pager-arrow:hover { color: #2168E5; border-color: #2168E5; }
.news-pager-arrow:disabled { color: #D9D9D9; cursor: default; border-color: #EEEEEE; }
.news-pager-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9px;
  padding: 0 4px;
  height: 38px;
  border: 0;
  background: none;
  font-size: 16px;
  font-weight: 513;
  line-height: 30px;
  color: #393C40;
  text-decoration: none;
  cursor: pointer;
  transition: color .25s ease;
}
.news-pager-num:hover { color: #2168E5; }
.news-pager-num.is-active { color: #2168E5; font-weight: 666; }
.news-pager-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9px;
  padding: 0 4px;
  height: 38px;
  font-size: 16px;
  line-height: 30px;
  color: #393C40;
}

/* ---------- 无新闻 → 暂无内容状态 (同视频中心/下载/FAQ 同构) ---------- */
.news-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-column: 1 / -1;
  padding: 80px 0 120px;
  margin-top: 0;
}
.news-status .status-ill {
  margin-top: 0;
  width: 306px;
  max-width: 100%;
}
.news-status .status-ill img,
.news-status .status-ill svg {
  display: block;
  width: 100%;
  height: auto;
}
.news-status .status-msg {
  margin-top: 24px;
  text-align: center;
}
.news-status .status-title {
  margin: 0;
  font-size: 20px;
  font-weight: 666;
  line-height: 30px;
  color: #2E3033;
}
.news-status .status-sub {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 513;
  line-height: 20px;
  color: #2E3033;
  opacity: .85;
}

/* ============================================================
   自适应
   ============================================================ */
@media (max-width: 1440px) {
  .news-layout { gap: 40px; }
}

@media (max-width: 1336px) {
  .news-layout { gap: 32px; }
  .news-tab { width: 120px; }

  .news-tab-item { padding-left: 8px; }
}

/* 平板: 卡片 2 列 */
@media (max-width: 1100px) {
  .news-layout { gap: 24px; }
  .news-tab { width: 110px; }

  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .news-layout { gap: 20px; }
  .news-tab { width: 100px; }
}

/* 移动端: 侧边分类 → 视频中心式折叠条 (sticky 吸顶 + 箭头展开/收起) */
@media (max-width: 767px) {
  .news-banner { height: 280px; }
  .news-banner-img { left: 0; right: 0; width: 100%; height: 100%; margin: 0 auto; }
  .news-banner-inner { padding-top: 90px; }
  .news-banner-title { font-size: 34px; line-height: 52px; }
  .news-banner-sub { font-size: 17px; line-height: 28px; }

  /* 布局改纵向, 分类条吸顶 */
  .news-layout {
    position: relative;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
    padding-top: 0;
  }

  /* 折叠条: 吸顶 + 白底 (同视频中心 vc-cats) */
  .news-tab {
    position: sticky;
    top: 64px;
    z-index: 50;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0 -24px;               /* 破 container 留白, 全宽白条 */
    width: calc(100% + 48px);
    background: #fff;
    box-shadow: inset 0 -1px 0 0 #EBEBEB;
  }
  .news-tab-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
  }
  .news-cats-arrow {
    position: absolute;
    top: 0;
    right: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 48px;
    color: #2D2F33;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .news-cats-chevron {
    width: 20px;
    height: 20px;
    flex: none;
    transition: transform .3s ease;
  }
  .news-tab.open .news-cats-chevron { transform: rotate(180deg); }
  /* 折叠态: 只显示激活项 (蓝字+下划线), 其余隐藏 */
  .news-tab-item {
    display: none;
    align-items: center;
    justify-content: flex-start;
    height: 48px;
    width: 100%;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 513;
    line-height: 48px;
    color: #2D2F33;
    border-bottom: 1px solid #F3F4F6;
    background: none;
  }
  .news-tab-item.is-active {
    display: flex;
    height: 48px;
    padding: 0 20px;
    margin-bottom: 0;
    color: #2168E5;
    font-weight: 666;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .news-tab-bar {display: none !important; }
  /* 展开态: 显示全部 */
  .news-tab.open .news-tab-item { display: flex; }

  /* 卡片区 */
  .news-grid {
    padding-top: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .news-grid:not(:has(.news-pager)):not(:has(.news-status)) { padding-bottom: 60px; }
  .news-card { height: auto; }
  .news-card-img { aspect-ratio: 405/243; }
  .news-card-body { padding: 14px 16px; }
  .news-cat { font-size: 11px; line-height: 16px; }
  .news-title { font-size: 14px; line-height: 21px; margin-top: 6px; }
  .news-date {
    position: static;
    margin-top: 10px;
    font-size: 11px;
    line-height: 16px;
  }
  .news-play { width: 44px; height: 44px; }
  .news-play svg { width: 44px; height: 44px; }

  .news-pager { padding-top: 36px; padding-bottom: 60px; width: 320px; max-width: 100%; margin: 0 auto; }   /* 纵向布局: 整宽居中 */
  .news-pager-arrow { width: 40px; height: 34px; }
  .news-pager-num { width: 34px; height: 34px; font-size: 14px; }
  .news-pager-ellipsis { width: 34px; height: 34px; font-size: 14px; }
}

@media (max-width: 400px) {
  .news-grid { grid-template-columns: 1fr; }
  .news-title { font-size: 15px; line-height: 22px; }
}