/* =========================================================
   聚淼成型科技 - 案例详情页 & 新闻详情页通用样式（v8.0 Final）
   文件：/assets/css/extra.css
   功能：统一详情页布局、右侧栏、排版、响应式
   ========================================================= */

/* ===== 页面基础 ===== */
.case-single-page,
.news-single-page {
  font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif;
  color:#333;
  background:#fff;
  line-height:1.8;
}

/* ===== 主体布局 ===== */
.case-single-page .container,
.news-single-page .main {
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:40px;
  max-width:1200px;
  margin:80px auto;
  padding:0 20px;
  box-sizing:border-box;
}

@media(max-width:960px){
  .case-single-page .container,
  .news-single-page .main {grid-template-columns:1fr;}
}

/* =========================================================
   标题与Meta信息
   ========================================================= */
.case-single-page .case-title,
.news-single-page .news-title {
  font-size:32px;
  font-weight:800;
  line-height:1.3;
  margin-bottom:12px;
  color:#0b6cff;
}
@media(max-width:768px){
  .case-single-page .case-title,
  .news-single-page .news-title {
    font-size:24px;
    text-align:center;
  }
}

.case-meta-top,
.news-single-page .news-submeta {
  color:#777;
  font-size:14px;
  margin-bottom:30px;
  text-align:left;
}
@media(max-width:768px){
  .case-meta-top,
  .news-single-page .news-submeta {
    text-align:center;
    font-size:13px;
  }
}

/* =========================================================
   正文内容
   ========================================================= */
.case-body,
.news-single-page .news-content {
  font-size:16px;
  color:#333;
}
.case-body p,
.news-single-page .news-content p {
  margin-bottom:18px;
}
.case-body img,
.news-single-page .news-content img {
  max-width:100%;
  height:auto;
  display:block;
  border-radius:6px;
  margin:25px 0;
}
.case-body h2,
.news-single-page .news-content h2,
.case-body h3,
.news-single-page .news-content h3 {
  color:#0b6cff;
  margin-top:40px;
  margin-bottom:15px;
}

/* =========================================================
   上下篇导航（两页通用）
   ========================================================= */
.case-nav,
.news-single-page .news-nav {
  margin-top:60px;
  display:flex;
  flex-direction:column;
  border-top:1px solid #eee;
  padding-top:20px;
  gap:10px;
}
.case-nav a,
.news-single-page .news-nav a {
  color:#0b6cff;
  text-decoration:none;
  transition:color .3s;
}
.case-nav a:hover,
.news-single-page .news-nav a:hover {
  text-decoration:underline;
  color:#0048a8;
}

/* =========================================================
   右侧栏（分类 / 标签 / 联系我们 / 相关阅读）
   ========================================================= */
.sidebar {
  flex:0 0 280px;
}

.sidebar-box,
.news-single-page .sidebar section {
  background:#fff;
  border:1px solid #eee;
  padding:20px;
  margin-bottom:30px;
  border-radius:10px;
  box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

.sidebar-box h3,
.news-single-page .sidebar h3 {
  font-size:18px;
  font-weight:700;
  color:#0b6cff;
  margin-bottom:15px;
  border-left:4px solid #0b6cff;
  padding-left:10px;
}

/* ===== 分类列表 ===== */
.sidebar-box ul,
.news-single-page .category-list ul {
  list-style:none;
  padding:0;
  margin:0;
}
.sidebar-box li,
.news-single-page .category-list li {
  margin-bottom:8px;
}
.sidebar-box a,
.news-single-page .category-list a {
  color:#333;
  text-decoration:none;
  transition:0.3s;
}
.sidebar-box a:hover,
.news-single-page .category-list a:hover {
  color:#0b6cff;
}

/* ===== 标签样式 ===== */
.tags a,
.news-single-page .tags-box a {
  display:inline-block;
  background:#f2f6ff;
  color:#0b6cff;
  border:1px solid #e1e9ff;
  padding:6px 12px;
  border-radius:20px;
  font-size:13px;
  margin:4px 6px 4px 0;
  transition:all .3s;
}
.tags a:hover,
.news-single-page .tags-box a:hover {
  background:#0b6cff;
  color:#fff;
}

/* ===== 联系我们模块 ===== */
.sidebar-box.contact-box,
.news-single-page .contact-box {
  background:#f9fafc;
  border:1px solid #e0e6ef;
  border-radius:8px;
  padding:20px;
  line-height:1.8;
  color:#333;
  font-size:14px;
}
.sidebar-box.contact-box h3,
.news-single-page .contact-box h3 {
  color:#0b6cff;
}
.sidebar-box.contact-box a,
.news-single-page .contact-box a {
  color:#0b6cff;
  text-decoration:none;
}
.sidebar-box.contact-box a:hover,
.news-single-page .contact-box a:hover {
  text-decoration:underline;
}
.sidebar-box.contact-box strong,
.news-single-page .contact-box strong {
  color:#0048a8;
}

/* ===== 相关阅读模块 ===== */
.related-news .related-item {
  border-bottom:1px dashed #e0e6ef;
  padding:6px 0;
}
.related-news .related-item:last-child {
  border-bottom:none;
}
.related-news .related-item a {
  color:#0b6cff;
  font-size:14px;
  line-height:1.6;
}
.related-news .related-item a:hover {
  text-decoration:underline;
  color:#0048a8;
}

/* =========================================================
   响应式优化
   ========================================================= */
@media(max-width:1024px){
  .case-single-page .container,
  .news-single-page .main {
    grid-template-columns:1fr;
    gap:30px;
  }
  .sidebar {width:100%;}
}
@media(max-width:768px){
  .case-body,
  .news-single-page .news-content {font-size:15px;}
  .case-single-page .case-title,
  .news-single-page .news-title {font-size:24px;}
}