/* =========================================================
   News List · Final CSS
   结构：模块头（左H1+右搜索） + 时间轴列表 + 公共分页器
   重点优化：
   - 模块头高级感（品牌竖条、标题更淡、搜索更长）
   - 列表三栏比例：右图往左靠，中间行宽更短更高级
========================================================= */

/* ===============================
   0) 基础：列表容器
================================ */
.news_list{ position:relative; }
.news_list .container{ position:relative; }

/* ===============================
   1) 模块头（左标题 + 右搜索）
================================ */
.news-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:16px 0px 16px;
  margin:10px auto 8px;
  max-width:1160px;                 /* 标题+搜索往中间靠的关键 */
}

/* 左：品牌竖条 + 标题 */
.news-head-left{
  position:relative;
  min-width:0;
  padding-left:14px;
}
.news-head-left::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:3px;
  height:18px;
  border-radius:999px;
  background:var(--brand);
  box-shadow:0 6px 14px rgba(46,49,146,.18);
  opacity:.95;
}
.news-head-title{
  margin:0;
  font-size:18px;
  line-height:1.3;
  font-weight:600;
  color:rgba(15,23,42,.72);         /* 更淡、更高级 */
  letter-spacing:.12px;
}

/* 右：搜索（ui-pill 组件） */
.news-head-right{
  display:flex;
  justify-content:flex-end;
}

/* 关键修复：让放大镜永远贴在输入框右侧，不会飞 */
.news-head-right .ui-pill-search{
  position:relative !important;
  display:inline-block;             /* 防止被 flex 拉成整行容器 */
  width:380px;                      /* 搜索长一点 */
  max-width:100%;
}
.news-head-right .ui-pill-input{
  width:100%;
  display:block;
}
.news-head-right .ui-pill-icon{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
}

/* 让搜索更像“工具位” */
.news-head-right .ui-pill-input{
  background:rgba(255,255,255,.92);
  border-color:rgba(0,0,0,.10);
}

/* ===============================
   2) 列表：时间轴 + 内容 + 右侧封面图
================================ */
.news-timeline{ padding-top:6px; }

.news-tl-list{
  list-style:none;
  margin:0;
  padding:0;
}

/* 每一条 */
.news-tl-item{
  display:flex;
  align-items:stretch;
  gap:16px;                         /* 收紧一点 */
  padding:22px 0;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.news-tl-item:first-child{
  border-top:1px solid rgba(0,0,0,.06);
}

/* 左：时间轴 */
.news-tl-aside{
  flex:0 0 120px;                   /* 稍收，让中间更短更集中 */
  position:relative;
  padding-right:6px;
  text-align:right;
}
.news-tl-date{
  font-size:14px;
  color:#475569;
  line-height:1.3;
  padding-top:2px;
  white-space:nowrap;
}
.news-tl-dot{
  position:absolute;
  right:-7px;
  top:26px;
  width:12px;
  height:12px;
  border-radius:999px;
  background:#fff;
  border:2px solid var(--brand);
  box-shadow:0 8px 14px rgba(0,0,0,.08);
}
.news-tl-line{
  position:absolute;
  right:-2px;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(
    to bottom,
    rgba(46,49,146,0),
    rgba(0,0,0,.10) 22%,
    rgba(0,0,0,.10) 78%,
    rgba(46,49,146,0)
  );
}

/* 中：内容（行宽短一点） */
.news-tl-main{
  flex:1 1 65%;
  max-width:65%;                    /* 关键：让中间内容短一点 */
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:12px;
  padding-top:2px;
  padding-right: 5px;
}

.news-tl-link{
  display:block;
  color:inherit;
  text-decoration:none;
}
.news-tl-title{
  display:block;
  font-size:20px;
  line-height:1.35;
  font-weight:650;
  color:#0f172a;
  letter-spacing:.2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.news-tl-desc{
  margin-top:10px;
  font-size:15px;
  line-height:1.85;
  color:#475569;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.news-tl-actions{ padding-top:2px; }
.news-tl-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  color:var(--brand);
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  transition:all .2s ease;
}
.news-tl-btn:hover{
  color:#fff;
  background:var(--brand);
  border-color:var(--brand);
  box-shadow:0 10px 18px rgba(0,0,0,.12);
  transform:translateY(-1px);
}
.news-tl-btn:active{ transform:translateY(0); }

/* 右：封面图（往左靠一点） */
.news-tl-cover{
  flex:0 0 260px;                   /* 稍大一点更稳 */
  width:260px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin-left:-6px;                 /* 关键：视觉向左移一点 */
}

.news-tl-coverlink{
  width:260px;
  height:150px;
  border-radius:14px;
  overflow:hidden;
  display:block;
  background:#f1f5f9;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 24px rgba(15,23,42,.08);
  transition:transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.news-tl-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* 占位图更克制 */
.news-tl-coverlink.is-placeholder{
  background:linear-gradient(180deg, #f8fafc, #eef2ff);
}
.news-tl-coverlink.is-placeholder .news-tl-img{
  object-fit:contain;
  padding:18px;
  opacity:.85;
}

/* hover：标题变品牌色，图卡抬一点 */
.news-tl-item:hover .news-tl-title{ color:var(--brand); }
.news-tl-item:hover .news-tl-coverlink{
  transform:translateY(-2px);
  border-color:rgba(0,0,0,.14);
  box-shadow:0 16px 34px rgba(15,23,42,.12);
}

/*
   辅助提示文字：.tac.text-secondary
   用途：分页说明 / 无更多内容 / 提示语*/
   
.tac.text-secondary{
  text-align:center;          /* 核心：居中 */
  margin:32px auto 100px;         /* 和内容区拉开距离 */
  font-size:14px;
  color:#999;                 /* 次级文字，别抢正文 */
  line-height:1.6;
}


/* ===============================
   3) 响应式
================================ */
@media (max-width:1366px){
  .news-head{ max-width:1040px; }
  .news-head-right .ui-pill-search{ width:360px; }

  .news-tl-aside{ flex-basis:110px; }
  .news-tl-main{ flex-basis:56%; max-width:56%; }
  .news-tl-cover, .news-tl-coverlink{ width:240px; }
  .news-tl-cover{ flex-basis:240px; margin-left:0; }
  .news-tl-coverlink{ height:140px; }
}

@media (max-width:1200px){
  .news-tl-title{ font-size:19px; }
  .news-tl-desc{ font-size:14.5px; }
}

@media (max-width:992px){
  .news-head{
    max-width:none;
    padding:14px 0 16px;
    margin:0 0 16px;
  }

  .news-tl-main{
    flex:1 1 auto;
    max-width:none;
  }

  .news-tl-cover, .news-tl-coverlink{ width:200px; }
  .news-tl-cover{ flex-basis:200px; margin-left:0; }
  .news-tl-coverlink{ height:128px; }
}

@media (max-width:768px){
  .news-head{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .news-head-right{ justify-content:flex-start; }
  .news-head-right .ui-pill-search{ width:100%; display:block; }

  .news-tl-aside{ flex-basis:96px; }
  .news-tl-date{ font-size:13px; }
  .news-tl-dot{ top:22px; }

  .news-tl-title{
    font-size:17px;
    white-space:normal;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }

  .news-tl-cover, .news-tl-coverlink{ width:170px; }
  .news-tl-cover{ flex-basis:170px; }
  .news-tl-coverlink{ height:110px; border-radius:12px; }
}

@media (max-width:520px){
  /* 超小屏：封面图下沉成通栏，阅读更舒服 */
  .news-tl-item{ flex-wrap:wrap; gap:10px; }

  .news-tl-aside{
    flex:0 0 100%;
    text-align:left;
    padding-right:0;
    padding-bottom:6px;
  }
  .news-tl-line{ display:none; }
  .news-tl-dot{
    position:static;
    display:inline-block;
    vertical-align:middle;
    margin-left:8px;
    transform:translateY(-1px);
  }
  .news-tl-date{
    display:inline-block;
    font-size:13px;
    color:#64748b;
  }

  .news-tl-main{ flex:1 1 100%; order:2; }
  .news-tl-cover{
    flex:1 1 100%;
    width:100%;
    order:3;
    justify-content:flex-start;
    margin-left:0;
  }
  .news-tl-coverlink{ width:100%; height:168px; }
}



/* =================================================
   News Detail Page · 完整 CSS（最终版）
   - Banner：完全沿用你给的样式
   - 文章 H1：居中（无下划线）
   - 整体收紧：方案 B（padding）
   - 右侧推荐：方案 3（视觉补高度）
   - 品牌元素：只在 hover / 互动中出现，克制
================================================= */

/* =================================================
   0) 基础可访问性 & 链接兜底
================================================= */
.news-detail a{
  color:inherit;
  text-decoration:none;
}
.news-detail a:focus-visible,
.news-banner a:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  border-radius:6px;
}

/* =================================================
   1) News Banner（你给的样式：完全不动）
================================================= */
.news-banner{
  position:relative;
  padding:80px 0 10px;
  background:center top / cover no-repeat;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.news-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.25);
}
.news-banner > .container{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  min-height:88px;
}
.news-banner-title{
  margin-left:auto;
  text-align:right;
}
.news-banner-cat{
  margin:0;
  font-size:22px;
  font-weight:600;
  color:rgba(255,255,255,.68);
}

/* Banner · 面包屑补充（无装饰） */
.news-banner-breadcrumb{
  flex:1 1 auto;
  min-width:0;
}
.news-banner-breadcrumb .c-breadcrumb{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  gap:6px;
  font-size:14px;
  color:rgba(255,255,255,.7);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.news-banner-breadcrumb .c-breadcrumb a{
  color:rgba(255,255,255,.8);
}
.news-banner-breadcrumb .c-breadcrumb a:hover{
  color:var(--brand);
}

/* =================================================
   2) 新闻详情页 · 主体布局
================================================= */
.news-detail{
  padding: 35px 0px;
}

/* 方案 B：整体再收一点点 */
.news-detail .container{
  padding-left:40px;
  padding-right:40px;
}

.news-detail-grid{
  display:flex;
  gap:48px;
  align-items:flex-start;
}


/* =================================================
   3) 左侧 · 文章主体
================================================= */
.news-article{
  flex:1 1 auto;
  min-width:0;
}

/* ---------- 文章头 ---------- */
.article-head{
  margin-bottom:32px;
  padding-bottom:20px;
  border-bottom:1px solid #eee;
  text-align:center;
}

.article-title{
  margin:0 0 12px;
  font-size:30px;
  font-weight:600;
  line-height:1.4;
  color:#222;
  margin-left:auto;
  margin-right:auto;
}

.article-meta{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  font-size:14px;
  color:#888;
}
.article-meta .meta-sep{
  color:#bbb;
}

/* ---------- 正文 ---------- */
/*目标：更好读、更稳、不复杂 */

/* 1) 内容区：控制阅读宽度 + 居中 */
.article-body{
  max-width:900px;     /* 想更收一点改 820 */
  margin:0 auto;
  font-size:15px;
  line-height:1.95;
  color:#444;
  word-break:break-word;
}

/* 2) 段落节奏：默认留白更舒服 */
.article-body p{
  margin:0 0 10px;
}

/* 3) 图片：别溢出、居中、圆角一点点 */
.article-body img{
  max-width:100%;
  height:auto;
  display:block;
  margin:22px auto;
  border-radius:12px;
}

/* 4) 列表：别挤成一坨 */
.article-body ul,
.article-body ol{
  margin:0 0 18px 1.2em;
}
.article-body li{
  margin:6px 0;
}

/* 5) 引用：轻提示即可 */
.article-body blockquote{
  margin:18px 0;
  padding:12px 14px;
  border-left:3px solid var(--brand);
  background:#fafafa;
  color:#555;
}

/* 6) 表格：能看、不炸 */
.article-body table{
  width:100%;
  border-collapse:collapse;
  margin:18px 0 22px;
  font-size:14px;
}
.article-body th,
.article-body td{
  border:1px solid #eee;
  padding:10px 12px;
  vertical-align:top;
}
.article-body thead th{
  background:#f7f8fa;
  font-weight:600;
}

/* 小屏：表格横向滚动防撑爆 */
@media (max-width:768px){
  .article-body{
    max-width:100%;
  }
  .article-body table{
    display:block;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
}


/* =================================================
   4) 上一篇 / 下一篇
================================================= */
/* 外层整体居中 */
.article-nav{
  display:block;
  margin-top:48px;
  padding-top:15px;
  border-top:1px solid #eee;
  text-align:center;          /* 关键：整体居中 */
  font-size:15px;
  color:#777;
}

/* 上一篇 / 下一篇 同行 */
.article-nav .nav-prev,
.article-nav .nav-next{
  display:inline;
}

/* 中间分隔符 */
.article-nav .nav-prev::after{
  content:"｜";
  margin:0 10px;
  color:#ccc;
}

/* 标签文案：弱化但保留 */
.article-nav .nav-label{
  display:inline;
  font-size:14px;
  color:#999;
  margin-right:4px;
}

/* 标题文字：正文级链接 */
.article-nav .nav-title{
  font-size:14px;
  color:#777;
  line-height:1.8;
  transition:color .2s ease;
}

/* hover：仅颜色变化 */
.article-nav a:hover .nav-title{
  color:var(--brand);
}


/* =================================================
   5) 右侧 · 推荐区（方案 3）
================================================= */
.news-aside{
  flex:0 0 320px;
  align-self:flex-start;
  padding-bottom:40px;
}

/* 卡片 */
.aside-card{
  border:1px solid #eee;
  background:#fff;
  border-radius:15px;
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.aside-card:hover{
  border-color:rgba(0,0,0,.1);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transform:translateY(-1px);
}

.aside-card-hd{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 16px;
  border-bottom:1px solid #eee;
}
.aside-card-title{
  font-size:16px;
  font-weight:600;
  color:#222;
}
.aside-card-more a{
  font-size:13px;
  color:#999;
}
.aside-card-more a:hover{
  color:var(--brand);
}

.aside-card-bd{
  padding:16px;
}
.aside-card.aside-related{
  padding-bottom:8px;
}

/* 列表 */
.aside-list{
  list-style:none;
  margin:0;
  padding:0;
}

.aside-item{
  margin-bottom:16px;
}
.aside-item:last-child{
  margin-bottom:0;
}

.aside-item-link{
  display:flex;
  gap:12px;
  padding:10px;
  border-radius:12px;
  transition:background .2s ease;
}
.aside-item-link:hover{
  background:rgba(0,0,0,.03);
}

/* 封面图 */
.aside-item-thumb{
  flex:0 0 72px;
  height:54px;
  overflow:hidden;
  background:#f3f3f3;
  border-radius:10px;
}
.aside-item-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .25s ease;
}
.aside-item-link:hover .aside-item-thumb img{
  transform:scale(1.06);
}

/* 文本 */
.aside-item-main{
  flex:1;
  min-width:0;
}
.aside-item-title{
  font-size:14px;
  line-height:1.4;
  color:#333;
  margin-bottom:6px;
  transition:color .2s ease;
}
.aside-item-date{
  font-size:12px;
  color:#999;
}
.aside-item-link:hover .aside-item-title{
  color:var(--brand);
}


/* =================================================
   6) 响应式
================================================= */
@media (max-width:1200px){
  .news-detail-grid{ gap:36px; }
  .news-detail .container{ padding-left:36px; padding-right:36px; }
  .article-title{ font-size:28px; }
}

@media (max-width:992px){
  .news-detail-grid{ flex-direction:column; }
  .news-aside{ display:none; }
  .news-detail .container{ padding-left:28px; padding-right:28px; }
}

@media (max-width:768px){
  .news-detail{ padding:46px 0; }
  .article-title{ font-size:24px; }
  .article-meta{ font-size:13px; }
  .news-detail .container{ padding-left:18px; padding-right:18px; }

  .news-banner-breadcrumb .c-breadcrumb{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    flex-wrap:wrap;
  }
}

@media (max-width:480px){
  .article-title{ font-size:22px; }
}