/* 新闻详情页样式 - 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 底边压掉了，栏体可见下缘就是栏底 border-box 下缘的上一行；且本页没有那 3px 投影。
   公共 style.css 给的是 bottom:-15px（li 下缘距栏体 border-box 下缘 14+1=15px，下缘落栏体最下缘、
   盖住 1px 灰底边），本页照搬会被 .article 吃掉 2px，只剩 1px 细线；故这里回到 -14px ——
   指示条下缘正好落在栏体可见下缘（= 白底与 #f7f8fa 正文的分界）上，与其余三页观感一致。 */
@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 */
.art-side { flex: 0 0 330px; margin-top: -1px; }

/* ⚠️ 侧栏文字在设计稿里是 **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; }

.side-btn {
  display: block; width: 300px; height: 48px; margin-top: 20px; border-radius: 8px;
  background: url('../img/xwxq/59247974.jpg') 50% 50% / 300px 48px no-repeat;
  font-family: Tahoma, Geneva, sans-serif; font-size: 16px; line-height: 48px;
  color: #fff; text-align: center;
}
.side-btn:hover { background-image: url('../img/xwxq/59247981.jpg'); }

/* 标题：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;
}
.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-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%; background-size: 100% 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; }
}

@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; }
  .art-side { flex: none; width: 100%; margin-top: 0; }
  .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; }
}