/* ============================================================
   article.css — PbootCMS 新闻正文排版样式（li / table 修复版）
   ------------------------------------------------------------
   作用范围：文章正文容器
     .article-body    —— 原版新闻内页 news.html
     .zt-article-body —— 专题版新闻内页 newsdetailzt.html
   特点：使用高优先级选择器 + 关键属性 !important，
         防止整站其它 CSS 的全局 reset（如 li{list-style:none}）
         把正文样式干掉。
   引入方式（加在 head 内，位于其它 css 之后）：
   <link rel="stylesheet" href="{pboot:sitetplpath}/fontawesome-free-6.4.0-web/css/article.css">
   ============================================================ */

/* ================= 基础文字 ================= */
.article-body,
.zt-article-body{
  font-size:16px;
  line-height:2;
  color:#334155;
  word-break:break-word;
  text-align:justify;
}
.article-body p,
.zt-article-body p{
  margin:0 0 20px;
}

/* ================= 标题 ================= */
.article-body h1,.article-body h2,.article-body h3,.article-body h4,
.article-body h5,.article-body h6,
.zt-article-body h1,.zt-article-body h2,.zt-article-body h3,.zt-article-body h4,
.zt-article-body h5,.zt-article-body h6{
  color:#0f172a;
  font-weight:700;
  line-height:1.5;
  margin:32px 0 16px;
  text-align:left;
}
.article-body h2,.zt-article-body h2{
  font-size:22px;
  padding-left:14px;
  border-left:4px solid #3b82f6;
}
.article-body h3,.zt-article-body h3{font-size:19px;}
.article-body h4,.zt-article-body h4{font-size:17px;}
.article-body h5,.article-body h6,
.zt-article-body h5,.zt-article-body h6{font-size:16px;}

/* ================= 链接 / 强调 ================= */
.article-body a,.zt-article-body a{
  color:#3b82f6;
  border-bottom:1px dashed #3b82f6;
  text-decoration:none;
}
.article-body a:hover,.zt-article-body a:hover{
  color:#8b5cf6;
  border-bottom-color:#8b5cf6;
}
.article-body strong,.article-body b,
.zt-article-body strong,.zt-article-body b{
  color:#0f172a;
  font-weight:700;
}

/* ================= 图片 ================= */
.article-body img,.zt-article-body img{
  max-width:100% !important;
  height:auto !important;
  border-radius:10px;
  margin:10px auto 18px;
  display:block;
  box-shadow:0 4px 14px rgba(15,23,42,.08);
}

/* ================= 列表 li（重点修复） ================= */
/* 容器：恢复缩进与项目符号，覆盖全局 reset */
.article-body ul,.article-body ol,
.zt-article-body ul,.zt-article-body ol{
  display:block;
  margin:0 0 20px;
  padding-left:28px !important;
}
/* 无序列表：实心圆点 */
.article-body ul li,.zt-article-body ul li{
  list-style-type:disc !important;
  list-style-position:outside;
}
/* 有序列表：阿拉伯数字 */
.article-body ol li,.zt-article-body ol li{
  list-style-type:decimal !important;
  list-style-position:outside;
}
/* 每个 li 的间距 */
.article-body li,.zt-article-body li{
  display:list-item;
  margin:0 0 10px;
  padding-left:4px;
}
/* 嵌套子列表：二级圆圈 / 小写罗马数字，三级方块 */
.article-body ul ul,.zt-article-body ul ul{margin-top:8px;}
.article-body ul ul li,.zt-article-body ul ul li{list-style-type:circle !important;}
.article-body ul ul ul li,.zt-article-body ul ul ul li{list-style-type:square !important;}
.article-body ol ol li,.zt-article-body ol ol li{list-style-type:lower-roman !important;}
.article-body ul ol li,.article-body ol ul li,
.zt-article-body ul ol li,.zt-article-body ol ul li{list-style-type:disc !important;}
/* li 内的 p 不再加双倍间距 */
.article-body li p,.zt-article-body li p{margin:0 0 8px;}

/* ================= 表格 table（重点修复） ================= */
.article-body table,.zt-article-body table{
  width:100% !important;
  max-width:100%;
  border-collapse:collapse !important;
  margin:24px 0;
  font-size:14px;
  line-height:1.7;
  color:#334155;
  background:#fff;
  border:1px solid #e2e8f0;           /* 外框 */
}
/* 单元格：必须有边框（防止被 reset 成无边框） */
.article-body th,.article-body td,
.zt-article-body th,.zt-article-body td{
  display:table-cell;
  border:1px solid #e2e8f0 !important;
  padding:10px 14px !important;
  text-align:left;
  vertical-align:middle;
  word-break:break-all;
}
/* 表头：深色渐变底 + 白字 */
.article-body th,.zt-article-body th{
  background:linear-gradient(135deg,#3b82f6,#8b5cf6);
  color:#fff !important;
  font-weight:600;
  white-space:nowrap;
}
/* 斑马纹 */
.article-body tbody tr:nth-child(even),
.zt-article-body tbody tr:nth-child(even){background:#f8fafc;}
/* 悬停高亮 */
.article-body tbody tr:hover,
.zt-article-body tbody tr:hover{background:#eff6ff;}
/* 首列加粗（可选，便于阅读） */
.article-body td:first-child,
.zt-article-body td:first-child{color:#0f172a;}

/* ================= 引用块 ================= */
.article-body blockquote,.zt-article-body blockquote{
  margin:24px 0;
  padding:16px 22px;
  border:none;
  border-left:4px solid #3b82f6;
  border-radius:0 10px 10px 0;
  background:#f0f7ff;
  color:#475569;
}
.article-body blockquote p,
.zt-article-body blockquote p{margin:0;}

/* ================= 代码 ================= */
.article-body pre,.zt-article-body pre{
  background:#0f172a;
  color:#e2e8f0;
  border-radius:10px;
  padding:18px 22px;
  overflow-x:auto;
  font-size:14px;
  line-height:1.8;
  margin:0 0 20px;
}
.article-body code,.zt-article-body code{
  background:rgba(59,130,246,.1);
  color:#3b82f6;
  padding:2px 8px;
  border-radius:6px;
  font-size:14px;
  font-family:Consolas,Menlo,"Courier New",monospace;
}
.article-body pre code,.zt-article-body pre code{
  background:none;
  color:inherit;
  padding:0;
}

/* ================= 分隔线 ================= */
.article-body hr,.zt-article-body hr{
  border:none !important;
  height:1px;
  background:#e2e8f0;
  margin:30px 0;
}

/* ================= 相关推荐（原版内页 news.html 重点修复） ================= */
/* 原版 news.css 没有这块样式，导致 6 篇文章排成一排裸链接 */
.related-articles{margin:44px 0 10px;}
.related-title{
  position:relative;
  font-size:22px;
  font-weight:700;
  color:#0f172a;
  margin:0 0 22px;
  padding-left:14px;
  border-left:4px solid #3b82f6;
}
.related-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:20px;
  padding:0 !important;
  margin:0 !important;
  list-style:none !important;
}
.related-item{
  display:flex !important;
  flex-direction:column;
  min-width:0;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(15,23,42,.06);
  transition:transform .3s ease,box-shadow .3s ease;
}
.related-item:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 24px rgba(15,23,42,.12);
  border-color:transparent;
}
/* 缩略图：固定 16:10 尺寸，不变形、不撑破版面 */
.related-item-img{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/10;
  overflow:hidden;
  background:linear-gradient(135deg,#1e3a8a,#5b21b6);
}
.related-item-img img{
  display:block;
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  transition:transform .3s ease;
}
.related-item:hover .related-item-img img{transform:scale(1.06);}
/* 无缩略图的文章：渐变占位 + 报纸图标 */
.related-item-img.no-pic:after{
  content:'\f1ea';
  font-family:'Font Awesome 6 Free';
  font-weight:900;
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:36px;
  color:rgba(255,255,255,.45);
}
.related-content{
  padding:16px 18px 18px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.related-item-category{
  align-self:flex-start;
  display:inline-block;
  padding:3px 11px;
  border-radius:999px;
  font-size:12px;
  font-weight:500;
  background:#e0e7ff;
  color:#3b82f6;
}
.related-item-title{
  margin:0;
  font-size:16px;
  font-weight:600;
  line-height:1.6;
  color:#1e293b;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  transition:color .3s;
}
.related-item:hover .related-item-title{color:#3b82f6;}
.related-item-date{
  font-size:12.5px;
  color:#94a3b8;
  display:flex;
  align-items:center;
  gap:6px;
}
.related-item-date i{font-size:11px;}

/* ================= 专题版内页相关推荐（newsdetailzt.html 完整自足样式） ================= */
/* 写在 article.css 里且最后加载：即使服务器上的 newszt.css 是旧版， */
/* 相关推荐也保持 2 列图文卡片 + 16:10 固定图片尺寸，不会挤成一排 */
.zt-rel-head{margin-top:40px !important;}
.zt-rel{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:20px !important;
  margin:0 !important;
  padding:0 !important;
}
.zt-rel-item{
  display:flex !important;
  flex-direction:column;
  min-width:0;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(15,23,42,.06);
  transition:transform .3s ease,box-shadow .3s ease;
}
.zt-rel-item:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 24px rgba(15,23,42,.12);
  border-color:transparent;
}
/* 缩略图：固定 16:10 尺寸 */
.zt-rel-img{
  position:relative;
  display:block;
  width:100%;
  min-height:0 !important;
  aspect-ratio:16/10;
  overflow:hidden;
  background:linear-gradient(135deg,#1e3a8a,#5b21b6);
}
.zt-rel-img img{
  display:block;
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  transition:transform .3s ease;
}
.zt-rel-item:hover .zt-rel-img img{transform:scale(1.06);}
/* 无缩略图的文章：渐变占位 + 报纸图标 */
.zt-rel-img.no-pic:after{
  content:'\f1ea';
  font-family:'Font Awesome 6 Free';
  font-weight:900;
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:36px;
  color:rgba(255,255,255,.45);
}
/* 推荐角标 */
.zt-rel-img .zt-badge{
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;
  padding:3px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:500;
  color:#fff;
}
.zt-rel-img .zt-badge-rec{background:linear-gradient(135deg,#f97316,#ef4444);}
.zt-rel-body{
  padding:16px 18px 18px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.zt-rel-cat{
  display:inline-flex !important;
  align-items:center;
  gap:6px;
  align-self:flex-start;
  padding:3px 11px;
  border-radius:999px;
  font-size:12px;
  font-weight:500;
  background:#e0e7ff;
  color:#3b82f6;
}
.zt-rel-cat i{font-size:11px;}
.zt-rel-body h3{
  margin:0;
  font-size:16px;
  font-weight:600;
  line-height:1.6;
  color:#1e293b;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  transition:color .3s;
}
.zt-rel-item:hover h3{color:#3b82f6;}
.zt-rel-meta{
  margin:0;
  font-size:12.5px;
  color:#94a3b8;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.zt-rel-meta i{font-size:11px;}

/* ================= 响应式 ================= */
/* 手机端：表格改为可横向滚动的块，避免撑破版面 */
@media (max-width:768px){
  .article-body,.zt-article-body{font-size:15px;line-height:1.9;}
  .article-body h2,.zt-article-body h2{font-size:19px;}
  .article-body h3,.zt-article-body h3{font-size:17px;}
  .article-body table,.zt-article-body table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .article-body th,.article-body td,
  .zt-article-body th,.zt-article-body td{
    padding:8px 10px !important;
    font-size:13px;
  }
  /* 相关推荐：手机端单列 */
  .related-grid,.zt-rel{grid-template-columns:1fr !important;}
  .related-title{font-size:19px;}
}