/* 新闻详情页样式 - xwxq.css */
/* 顶部导航 header / CTA / 页脚 footer 为全站公共样式，统一放在 style.css */

/* ==================== 首屏 ==================== */
/* 高度 / 定位 / 字号 / 按钮等结构样式统一在公共 style.css 的 .hero 系列（内页共用同一套：
   hero 560 高、文字块 @top188、标题 48px、副标题 24px、按钮 145×48 @top356），这里只定义本页背景 */
.hero {
  background: #eef3fb url('../img/xwxq/61700391.jpg') 50% 50%/cover no-repeat;
}

/* 本页设计稿的栏目栏底边下方没有投影（gylf / lxwmlf 有） */
.catbar::after {
  display: none;
}

/* 窄屏指示条例外：本页 .article 用 z-index:6 + margin-top:-1px 压掉了栏目栏最后 1px 底边，且本页没有那 3px 投影。
   公共 style.css 给的是 bottom:-15px，本页照搬会被 .article 吃掉 2px、只剩 1px 细线，故这里回到 -14px。 */
@media (max-width: 767px) {
  .news-tabs li.active::after {
    bottom: -14px;
  }
}

/* ==================== 正文 ==================== */
/* 设计稿 banner con_18_49：top 695（与本页栏目栏最后 1px 重叠，故 margin-top:-1px 并抬高层级压掉栏底边） */
.article {
  z-index: 6;
  margin-top: -1px;
  padding: 81px 0 40px;
  background: #f7f8fa;
}

/* 设计稿容器 1400：art-main left1 宽1040 + gap29 + 侧栏 330 */
.art-wrap {
  display: flex;
  gap: 29px;
  align-items: flex-start;
  padding-left: 1px;
}

.art-main {
  flex: 1 1 auto;
  min-width: 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(198, 224, 255, .3);
  padding: 29px 28px 37px 32px;
}

/* 面包屑（con_64_9 25×23 盒内 23×23 图 + con_65_40 @x69 16px/1.5 #636e80） */
.breadcrumb {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  height: 29px;
  padding-top: 1px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #636e80;
}

/* 图标按设计稿实测 25×23 铺满 25 宽盒（InitImageSmv 写的 23 与实际渲染不符） */
.breadcrumb img {
  display: block;
  width: 25px;
  height: 23px;
  flex: 0 0 auto;
}

.breadcrumb a {
  color: #636e80;
}

.breadcrumb a:hover {
  color: #317af7;
}

/* 标题（con_66_0）：24px / line-height 1（设计稿 base 为 12px/1，span 未覆写行高）→ 盒 80..104 */
.art-title {
  margin-top: 22px;
  font-family: system-ui, "Microsoft YaHei", "微软雅黑", Arial, Tahoma, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #1d2129;
  line-height: 1;
}

/* 日期（con_67_0：图标实测 24×24 铺满盒 + con_68_0 @x67 16px/1.5 #a5a5a5，字体实测为 Arial）→ 盒顶 120 */
.art-date {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  height: 31px;
  margin-top: 16px;
  font-family: Arial, Tahoma, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #a5a5a5;
}

.art-date img {
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

/* 封面（con_69_34）：盒 976×358 圆角 20，图标实测按 976×358 铺满（非 InitImageSmv 的 974） */
.art-cover {
  width: 976px;
  max-width: 100%;
  height: 358px;
  margin-top: 24px;
  border-radius: 20px;
  overflow: hidden;
}

.art-cover img {
  display: block;
  width: 976px;
  max-width: 100%;
  height: 358px;
}

/* 正文（con_22_49）：980 宽 16px/2 #636e80；空段还原设计稿 base 的 12px/1 = 12px 高 */
.art-text {
  margin-top: 42px;
}

.art-text p {
  margin: 0;
  font-family: system-ui, "Microsoft YaHei", "微软雅黑", Arial, Tahoma, sans-serif;
  font-size: 16px;
  line-height: 2;
  color: #636e80;
}

.art-text p.blank {
  font-size: 12px;
  line-height: 1;
}

.art-text strong {
  color: #333333;
  font-weight: 700;
}

.art-text strong.hl {
  color: #317af7;
}

/* 上/下一篇（con_34_49）：左 27（比卡片内边距 32 靠左 5px），两行 16px/1.5 #636e80，盒顶 1957
   ⚠️ 设计稿截图里这两行的行距是 25px（不是 1.5×16=24），用 p+p 的 1px 上边距还原 */
.art-nav {
  margin-top: 43px;
  margin-left: -5px;
}

.art-nav p+p {
  margin-top: 1px;
}

.art-nav p {
  margin: 0;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #636e80;
}

.art-nav a {
  color: #636e80;
}

.art-nav a:hover {
  color: #317af7;
}

/* ==================== 侧栏（设计稿 con_35_49 / con_46_49，两张卡） ====================
   设计稿里侧栏比正文卡高 1px：con_35_49 top=80 / con_19_49 top=81 → .art-side 上提 1px */
/* 滚动吸附（≥992 生效）：正文很长时侧栏随视口停在页头下方。
   sticky 的约束矩形 = 最近块级祖先 .art-wrap 的 padding box ⇒ 滑到容器底边就被自然「推走」，天然不越出容器范围，无需任何 JS 计算。
   ⭐⭐ 为什么不让 sticky 常驻、而由 js/xwxq.js 在「发生滚动」后才加 .is-stick：
   position:sticky（以及 will-change:transform 等任何提升合成层的写法）会让 Chrome 用灰度抗锯齿渲染该子树，
   侧栏文字失去设计稿的 LCD 子像素 AA —— 实测静息态 17024px 差异 / 最大通道差 130，隔离实验证明
   sticky / sticky+z-index:0 / sticky+contain:paint / static+will-change:transform 等写法的差异瓦片字节完全相同 ⇒ 根因就是「进合成层」，纯 CSS 无解。
   故只在滚动后启用：此时侧栏仍在吸附点之前 ⇒ 无位置跳变；JS 在 scrollY 回 0 时立刻摘掉该 class。
   ⭐ top 精确等于页头高度（实测 sticky 偏移量相对 border box，margin-top 不参与吸附距离），页头高随断点变（≥1400→80 / 1200–1399→76 / 992–1199→70）。
   ⚠️ 本元素高 972 > 可视区 ⇒ 粘住期间底部约 150px 在视口外，滚到容器底边才全露出（长侧栏 sticky 的固有特性，非缺陷）。 */
.art-side {
  flex: 0 0 330px;
  margin-top: -1px;
}

.art-side.is-stick {
  position: sticky;
  top: 80px;
}

/* ⚠️ 侧栏文字在设计稿里是 **LCD 子像素抗锯齿**（边缘带彩色），所以这里**不能**加
   transform: translateZ(0) —— 那会强制灰度 AA，反而与设计稿不一致（实测差异 1.17 → 见文件末尾注释） */
.side-card {
  background: #fff;
  border-radius: 10px;
}

/* 卡1 330×510：推广图 300×200@(15,20)、按钮 300×48@(15,240)、标题@(15,321)、标签 3 行@365/405/445 */
.side-main {
  width: 330px;
  height: 510px;
  padding: 20px 15px 0;
  box-shadow: 0 0 10px rgba(198, 224, 255, .3);
}

.side-promo-img {
  display: block;
  width: 300px;
  height: 200px;
  border-radius: 5px;
}

/* 立即咨询按钮：原用 59247974.jpg（300×48），实测为纯 90° 水平线性渐变（逐列垂直通道差 0），故改为等价 CSS 渐变；
   端点取该图逐列的最小二乘拟合值（非首末列采样，可避开 JPEG 边缘振铃）：
     默认 → #2195ff → #68bfff（逐列最大残差 3.78/255）；悬停 → #317cf8 → #2796ff（2.10/255）。
   size 100% 100% / pos 50% 50% / repeat no-repeat 与原图「拉伸铺满整盒」的等效渲染一致，故 ≤1399 断点无需再覆写 background-size。 */
.side-btn {
  display: block;
  width: 300px;
  height: 48px;
  margin-top: 20px;
  border-radius: 8px;
  background: linear-gradient(90deg, #2195ff 0%, #68bfff 100%) 50% 50% / 100% 100% no-repeat;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 16px;
  line-height: 48px;
  color: #fff;
  text-align: center;
}

.side-btn:hover {
  background-image: linear-gradient(90deg, #317cf8 0%, #2796ff 100%);
}

/* 标题：24px/1（base line-height:1），盒高 34（卡1）/ 27（卡2），墨迹都自盒顶 +1 起 */
.side-title {
  margin: 0;
  height: 27px;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
  color: #000;
}

.side-main .side-title {
  height: 34px;
  margin-top: 33px;
  line-height: 26px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  color: #2f3031;
}

/* 标签云：行距 40 = 28 高 + 12 间距；短标签 86 宽、长标签 117 宽，横向间距按设计稿 11 / 12 / 10 */
.side-tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.side-tags li {
  height: 28px;
  margin: 0 12px 12px 0;
  border-radius: 8px;
  background: #f7f8fa;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 14px;
  line-height: 28px;
  color: #636e80;
  text-align: center;
  cursor: pointer;
  min-width: 86px;
  padding: 0 20px;
}

/* .side-tags li:nth-child(-n+3) {
  width: 86px;
}

.side-tags li:nth-child(n+4) {
  width: 117px;
}

.side-tags li:nth-child(1) {
  margin-right: 11px;
}

.side-tags li:nth-child(n+4):not(:last-child) {
  margin-right: 10px;
} */

.side-tags li:hover {
  color: #2cafff;
}

/* 卡2 330×435：标题 114×27@(15,31)；首条分隔线 y69；条目顶 91/157/224/290/357，线在条目顶 +55 */
.side-news-card {
  width: 330px;
  height: 435px;
  margin-top: 27px;
  padding: 31px 15px 0;
  box-shadow: 0 0 12px #eeeeee;
}

.side-news {
  margin: 11px 0 0;
  padding: 21px 0 0;
  border-top: 1px solid #eeeeee;
}

.side-news li {
  height: 56px;
  border-bottom: 1px solid #eeeeee;
}

.side-news li+li {
  margin-top: 10px;
}

.side-news li:nth-child(3),
.side-news li:nth-child(5) {
  margin-top: 11px;
}

/* 设计稿逐条是手工摆的，有 1px 横向怪癖：第 3 条标题 left=16（其余 15）；
   第 4/5 条的日期与分隔线 left=14（其余 15）→ 用负 margin 把整条左移 1px，标题再补回来 */
.side-news li:nth-child(4),
.side-news li:nth-child(5) {
  margin-left: -1px;
  margin-right: 1px;
}

.side-news li:nth-child(3) a,
.side-news li:nth-child(4) a,
.side-news li:nth-child(5) a {
  margin-left: 1px;
}

.side-news a {
  display: block;
  height: 25px;
  overflow: hidden;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 16px;
  line-height: 26px;
  color: #636e80;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.side-news a:hover {
  color: #317af7;
}

.side-news span {
  display: block;
  height: 24px;
  margin-top: 3px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 14px;
  line-height: 14px;
  color: #a5a5a5;
}

/* ==================== 更多案例（公共组件在 style.css） ====================
   设计稿里正文卡区 con_18_49 底边在 2860，而「更多案例」con_70_38 顶边在 2859 ——
   两者重叠 1px，所以这里整体上提 1px（案例详情页没有这 1px，故写在页面级） */
.more {
  margin-top: -1px;
}

/* ==================== 响应式适配 ==================== */
@media (max-width: 1399px) {
  .hero {
    background-position: 62% 50%;
  }

  .art-side {
    flex: 0 0 280px;
  }

  .art-side.is-stick {
    top: 76px;
  }

  .art-main {
    padding: 28px 26px 30px 28px;
  }

  .breadcrumb {
    height: auto;
  }

  .art-title {
    font-size: 23px;
    line-height: 1.45;
  }

  .art-date {
    height: auto;
  }

  .art-cover {
    width: 100%;
    height: auto;
  }

  .art-cover img {
    width: 100%;
    height: auto;
  }

  .art-text p {
    font-size: 15px;
  }

  /* 侧栏卡改为流式（设计稿定尺 330 只在 ≥1400 生效），高度由内容决定 */
  .side-main,
  .side-news-card {
    width: 100%;
    height: auto;
  }

  .side-main {
    padding-bottom: 25px;
  }

  .side-news-card {
    padding-bottom: 22px;
  }

  .side-promo-img {
    width: 100%;
    height: auto;
  }

  .side-btn {
    width: 100%;
  }

  .side-tags li:nth-child(-n+3),
  .side-tags li:nth-child(n+4) {
    width: auto;
    padding: 0 12px;
  }

  .side-tags li:nth-child(1),
  .side-tags li:nth-child(n+4):not(:last-child) {
    margin-right: 12px;
  }
}

/* 页头 70px（992~1199）→ 侧栏吸附点同步 */
@media (max-width: 1199px) {
  .art-side.is-stick {
    top: 70px;
  }
}

@media (max-width: 991px) {
  .hero {
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, .9) 40%, rgba(255, 255, 255, .6)),
      url('../img/xwxq/61700391.jpg');
    background-position: 50% 50%, 68% 50%;
    background-size: cover, cover;
  }

  .art-wrap {
    flex-direction: column;
    padding-left: 0;
  }

  /* ≤991 折为单列（侧栏落到正文下方、整宽）⇒ 吸附无意义，也不该整宽贴顶（兜底覆盖 .is-stick） */
  .art-side {
    flex: none;
    width: 100%;
    margin-top: 0;
  }

  .art-side.is-stick {
    position: static;
    top: auto;
  }

  .side-news-card {
    margin-top: 16px;
  }

  /* 推广图与按钮并排，避免整宽卡片里推广图被拉得过高 */
  .side-promo-img {
    display: inline-block;
    width: 260px;
    height: 173px;
    vertical-align: middle;
  }

  .side-btn {
    display: inline-block;
    width: 220px;
    margin: 0 0 0 20px;
    vertical-align: middle;
  }

  .side-main .side-title {
    margin-top: 24px;
  }
}

@media (max-width: 767px) {

  .article {
    padding: 22px 0 48px;
  }

  .art-main {
    padding: 20px 18px 24px;
  }

  .breadcrumb {
    font-size: 12px;
    gap: 8px;
  }

  .breadcrumb img {
    width: 18px;
    height: 18px;
    margin: 0;
  }

  .art-title {
    font-size: 18px;
    line-height: 1.4;
    margin-top: 16px;
  }

  .art-date {
    font-size: 13px;
    margin-top: 10px;
    gap: 8px;
  }

  .art-date img {
    width: 18px;
    height: 20px;
    margin: 0;
  }

  .art-cover {
    margin-top: 16px;
  }

  .art-text {
    margin-top: 16px;
  }

  .art-text p {
    font-size: 14px;
    line-height: 1.8;
  }

  .art-nav {
    margin-top: 26px;
  }

  .art-nav p {
    font-size: 14px;
  }

  .side-main {
    padding: 18px 18px 22px;
  }

  .side-news-card {
    padding: 20px 18px 20px;
  }

  .side-promo-img {
    display: block;
    width: 100%;
    height: auto;
  }

  .side-btn {
    display: block;
    width: 100%;
    margin: 14px 0 0;
    height: 44px;
    line-height: 44px;
  }

  .side-title {
    height: auto;
    font-size: 19px;
    line-height: 1.4;
  }

  .side-main .side-title {
    margin-top: 20px;
  }

  .side-news {
    margin-top: 8px;
    padding-top: 16px;
  }

  .side-news li {
    height: auto;
    padding-bottom: 12px;
  }

  .side-news li+li,
  .side-news li:nth-child(3),
  .side-news li:nth-child(5) {
    margin-top: 10px;
  }

  .side-news a {
    height: auto;
    font-size: 15px;
    line-height: 1.5;
    white-space: normal;
  }

  .side-news span {
    height: auto;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.5;
  }
}

@media (max-width: 479px) {
  .side-tags li {
    font-size: 13px;
    padding: 0 10px;
  }
}