/* ========== 内页 inner.css ========== */
/* 资讯列表页 + 资讯详情页共用样式；公共组件样式见 common.css */

/* ---------- 内页容器与雾感背景 ---------- */
.inner-page {
  position: relative;
  overflow: hidden;          /* 裁掉溢出容器范围的雾感色块 */
  isolation: isolate;        /* 建立层叠上下文：负 z 的 .blob 限定在容器内、浮于 body 白底之上 */
  padding: 130px 0 30px;     /* 顶部为固定导航留白 */
  /* 内页正文/标题字体：设计稿 4.2「导航/内页：Microsoft YaHei UI」 */
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif;
}

/* 雾感装饰色块：位置/尺寸/透明度按设计稿 8 个（blur / 圆角 / 层级基础在 common.css 的 .blob） */
.blob-1 { top: 239px;   left: -151px; width: 846px;    height: 454px;   background: #F9D9EE; opacity: .64; }
.blob-2 { top: -195px;  left: 790px;  width: 1044px;   height: 659px;   background: #F3EDFD; }
.blob-3 { top: -62px;   left: 301px;  width: 1044px;   height: 659px;   background: #F3EDFD; }
.blob-4 { top: 565px;   left: 725px;  width: 1133.6px; height: 743.7px; background: #F9D9EE; opacity: .87; }
.blob-5 { top: 149px;   left: 1195px; width: 543.5px;  height: 374.5px; background: #E1C4FF; opacity: .38; }
.blob-6 { top: 627px;   left: 272px;  width: 846px;    height: 454px;   background: #D8F0FF; opacity: .5; }
.blob-7 { top: 132px;   left: 1545px; width: 543.5px;  height: 374.5px; background: #FFF4D8; opacity: .61; }
.blob-8 { top: 216px;   left: 775px;  width: 543.5px;  height: 374.5px; background: #FFF4D8; opacity: .61; }

/* ---------- 面包屑：首页 > 常见问题 ---------- */
.breadcrumb {
  position: relative;
  z-index: 1;
  width: 1170px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #000;
}
.breadcrumb .sep { color: #989898; }
.breadcrumb a:hover { color: var(--link-blue); }
/* 面包屑文章标题：控制最大显示宽度，超长省略号收尾（flex 子项需 min-width:0 才能收缩） */
.breadcrumb .crumb-title {
  max-width: 1060px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 页面标题（本页唯一 h1） ---------- */
.page-title {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 28px;
  font-weight: 400;
  color: var(--text-inner);
  line-height: 140%;
  padding: 18px 0 18px;
}

/* ---------- 资讯卡片列表（4 列 × 3 行，列距/行距按设计稿） ---------- */
.news-list {
  position: relative;
  z-index: 1;
  width: 1165.1px;           /* 4 × 280.4 + 3 × 14.5（设计稿列距） */
  margin: 24px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 280.4px);
  column-gap: 14.5px;        /* 设计稿列距 */
  row-gap: 21.7px;           /* 设计稿行距 */
}

/* 资讯卡片：白底圆角 13.45，投影 rgba(0,0,0,.08) 0 4px 24px */
.news-card {
  width: 280.4px;
  background: #FFFFFF;
  border-radius: 13.45px;
  box-shadow: rgba(0, 0, 0, .08) 0 4px 24px;
  padding: 9.7px 11.6px 15.4px;   /* 设计稿内边距：上 9.7 / 左右 11.6 / 下 15.4 */
  /* 卡片字体：继承全局基础字体（首选微软雅黑），不强制固定 */
  transition: transform .25s ease, box-shadow .25s ease;
}
.news-card:hover {
  transform: translateY(-4px);
  box-shadow: rgba(0, 0, 0, .12) 0 8px 28px;
}
.news-card a { display: block; }

/* 卡片缩略图：256.8 × 169.2，圆角 9 */
.news-thumb {
  width: 256.8px;
  height: 169.2px;
  border-radius: 9px;
  overflow: hidden;
}
.news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 卡片标题：16px Bold #000，最多两行省略，固定两行高度保证卡片对齐（设计稿 2 行 42.5px） */
.news-title {
  font-size: 16px;
  font-weight: 700;
  color: #000;
  line-height: 1.33;
  margin-top: 9.6px;
  min-height: 42.5px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 卡片摘要：14px #000，最多两行省略，固定两行高度保证卡片对齐（2 行 31.9px） */
.news-desc {
  font-size: 14px;
  color: #000;
  line-height: 1.14;
  margin-top: 9.7px;
  min-height: 31.9px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 卡片日期：14px 次要色 */
.news-date {
  display: block;
  font-size: 14px;
  color: var(--text-light);
  margin-top: 6.3px;          /* 设计稿日期上间距 6.3px */
  text-align: right;          /* 日期右对齐 */
}

/* 缩略图占位：设计稿为纯白圆角底（无文字），运营可替换为真实缩略图 */
.thumb-placeholder {
  width: 256.8px;
  height: 169.2px;
  border-radius: 9px;
  background: #FFFFFF;
}

/* ---------- 分页组件（由 common.js 渲染出 .page-btn / .page-ellipsis） ---------- */
.pagination {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 40px auto 0;
}
.page-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 3px;
  background: #FFFFFF;
  color: #000;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  transition: background .2s, color .2s;
}
.page-btn:hover { background: rgba(0, 123, 215, .10); }
.page-btn:focus-visible {
  outline: 2px solid var(--link-blue);
  outline-offset: 2px;
}
.page-btn.active {
  background: var(--link-blue);   /* 分页激活 #007BD7 */
  color: #FFFFFF;
}
/* 分页禁用态：第 1 页无上一页、最后一页无下一页（span 天然不可点，仅视觉置灰） */
.page-btn.disabled,
.page-btn.disabled:hover {
  background: #F2F2F2;
  color: #C9C9C9;
  cursor: not-allowed;
  box-shadow: none;
}
.page-ellipsis {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  font-size: 14px;
}

/* ---------- 内页底部公司名：额外 40px 上边距，与列表区/详情卡隔开 ---------- */
.footer-copy {
  margin-top: 40px;
}

/* ========== 资讯详情页样式（news/detail.html） ========== */

/* 文章正文卡：居中 1170 宽，白底圆角 18，粉雾投影，内边距约 40px 60px */
.article-card {
  position: relative;
  z-index: 1;
  width: 1170px;
  margin: 24px auto 0;
  background: #FFFFFF;
  border-radius: 18px;
  box-shadow: rgba(255, 160, 160, .25) 0 0 24px;
  padding: 40px 60px;
}

/* 文章标题：28px Bold #252525 居中（设计稿行高 24px 有误，小于字号 28px 会导致两行标题重叠，已修正为 34px） */
.article-card h1 {
  font-size: 28px;
  font-weight: 700;
  color: #252525;
  line-height: 34px;
  text-align: center;
}

/* 发布日期：16px 次要色，居中 */
.article-date {
  font-size: 16px;
  color: rgba(37, 37, 37, .5);
  margin-top: 14px;
  text-align: center;
}

/* 正文：16px / 行高 34px / #252525，段落间距 18px */
.article-body {
  font-size: 16px;
  line-height: 34px;
  color: #252525;
  margin-top: 26px;
}
.article-body p + p {
  margin-top: 18px;
}

/* 文章配图：占位最大宽度 70%（正文宽约 1050 → 735）16:9 居中圆角；运营替换为 <img> 时同样适用 */
.article-img {
  width: 70%;
  max-width: 70%;
  aspect-ratio: 16 / 9;
  margin: 0 auto 26px;
  border-radius: 12px;
  background: var(--placeholder-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #B9AFA6;
}
.article-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* 相关新闻推荐 */
.related-news {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid rgba(37, 37, 37, .08);
}
.related-news h2 {
  font-size: 16px;
  font-weight: 700;
  color: #000;
  padding-bottom: 20px;
}
.related-news ul {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* 两列（设计稿详情页：2 列 × 5 行） */
  column-gap: 60px;                        /* 列间距 60px */
  row-gap: 16px;                           /* 行间距 16px（设计稿行距 40px − 条目高 24px） */
}
.related-news li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.related-news .dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #007BD7;    /* 相关新闻蓝点 */
}
.related-news li a {
  font-size: 16px;
  color: #424242;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .2s;
}
.related-news li a:hover {
  color: var(--link-blue);
}
.related-news li time {
  margin-left: auto;      /* 日期靠右 */
  flex: none;
  font-size: 16px;
  color: #999;
}