/* ===========================
   News Detail Page (news.html)
   =========================== */

/* 让阅读区更像新闻站：窄栏 + 居中 */
.mk-page{
  max-width: 860px;
  margin: 0 auto;
  padding: 0 16px;
}

/* 顶部标题区：更轻、更像“文章页” */
.mk-hero{
  padding: 22px 0 10px;
  text-align: center;
}
.mk-hero h1{
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #111827;
  margin: 0;
}
.mk-hero p{
  margin: 8px 0 0;
  font-size: 14px;
  color: #6b7280;
}

/* 文章卡片：更像正文容器 */
.mk-card{
  background:#fff;
  border-radius: 22px;
  border: 1px solid #eef2f7;
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
  overflow: hidden;
}

/* 顶部 meta 行：做成“信息条”而不是工具 badge */
.mk-card-head{
  padding: 14px 18px;
  border-bottom: 1px solid #eef2f7;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* 返回按钮更像“轻按钮” */
.mk-card-head .mk-btn{
  background: #f9fafb;
  color: #111827;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
}
.mk-card-head .mk-btn:hover{
  background:#f3f4f6;
}

/* pill 更轻量 */
.mk-badges{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
}
.mk-pill{
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  color: #374151;
}

/* 正文区域：增加两侧留白，让它更“文章” */
.mk-card-body{
  padding: 26px 26px 30px;
}

/* 文章标题：更像新闻站（克制但有力量） */
#news-title{
  font-size: 26px;
  font-weight: 700;
  line-height: 1.22;
  color: #0b1220;
  margin: 6px 0 18px;
  letter-spacing: .2px;
}

/* ✅ 图片：限制最大高度，避免占满首屏，但不裁切 */
#news-image-wrap{
  margin: 18px 0 18px;
}

/* 给图片一个“媒体容器感”：圆角 + 边框 + 背景 */
/* 新闻正文图片：宽度100%，高度自动，不裁切、不限高 */
#news-image-wrap img{
  width: 100%;
  height: auto;          /* ✅ 高度随图片比例 */
  max-height: none;      /* ✅ 彻底取消高度限制 */
  object-fit: contain;   /* ✅ 不裁切 */
  display: block;

  border-radius: 18px;
  border: 1px solid #eef2f7;
  background: #f9fafb;
}


/* 可选：图片说明（如果你以后加 caption 用） */
.news-caption{
  margin-top: 10px;
  font-size: 13px;
  color:#6b7280;
}

/* 分割线更轻 */
.mk-divider{
  border-color:#eef2f7;
  margin: 18px 0;
}

/* 摘要/正文：更像新闻站的行距和字号 */
#news-summary{
  font-size: 17px;
  line-height: 1.95;
  color:#111827;
  white-space: pre-wrap;
}

/* 段落节奏 */
#news-summary p{
  margin: 0 0 1.1em;
}

/* “阅读全文”按钮：像新闻站 CTA，但不太工具化 */
#news-readfull{
  margin-top: 6px;
  width: 100%;
  justify-content: center;
  text-align: center;

  font-size: 16px;
  font-weight: 800;
  padding: 14px 18px;
  border-radius: 14px;

  background: #111827;           /* 更像媒体站的主色按钮 */
  border: 1px solid #111827;
  box-shadow: 0 10px 24px rgba(17, 24, 39, .18);
}
#news-readfull:hover{
  filter: brightness(1.05);
}

/* loading / error */
#news-loading{
  padding: 12px 0;
  color:#6b7280;
}
#news-error{
  color:#ef4444;
  padding: 12px 0;
}

/* 移动端：标题和 padding 更合理 */
@media (max-width: 640px){
  .mk-page{ padding: 0 10px; }
  .mk-card-body{ padding: 20px 16px 24px; }
  #news-title{ font-size: 18px; }
  #news-image-wrap img{ max-height: 380px; }
}

/* Hero 变成“文章头部” */
.mk-hero--news{
  padding: 18px 0 14px;
  text-align: center;
}

.mk-hero--news h1{
  font-size: 34px;
  font-weight: 900;
  line-height: 1.22;
  color: #111827;
  margin: 0;
}

.hero-news-meta{
  margin-top: 10px;
  font-size: 13px;
  color: #6b7280;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-news-meta .dot{
  opacity: .6;
}

/* ===========================
   News Hero Final Tuning
   =========================== */

/* 1️⃣ Hero 只显示标题，不显示来源/时间 */
.hero-news-meta {
  display: none;
}

/* 2️⃣ 标题字体缩小，更像新闻站而不是 Banner */
.mk-hero--news h1 {
  font-size: 28px;     /* 原来 34，缩小更克制 */
  font-weight: 800;    /* 稍微降一点重量 */
  line-height: 1.3;
  color: #111827;
  margin: 0;
  letter-spacing: 0;
}

/* 3️⃣ Hero 整体上下间距更紧凑 */
.mk-hero--news {
  padding: 20px 0 10px;
  text-align: center;
}

/* 4️⃣ 移动端再小一点 */
@media (max-width: 640px) {
  .mk-hero--news h1 {
    font-size: 22px;
    line-height: 1.35;
  }
}

/* ===== 相关推荐 ===== */
.news-related { margin-top: 6px; }
.news-related-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 12px;
}
.news-related-title{
  font-size: 16px;
  font-weight: 900;
  color:#111827;
}

.news-related-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.news-related-card{
  display:flex;
  gap: 10px;
  padding: 12px;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  background: #fff;
  text-decoration:none;
  color: inherit;
  transition: transform .12s ease, box-shadow .12s ease;
}
.news-related-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
}

.news-related-thumb{
  width: 86px;
  height: 64px;
  border-radius: 12px;
  overflow:hidden;
  border:1px solid #eef2f7;
  background:#f9fafb;
  flex: 0 0 auto;
}
.news-related-thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.news-related-thumb.noimg{
  display:flex;
  align-items:center;
  justify-content:center;
}
.news-related-thumb.noimg::after{
  content:"";
  width: 22px;
  height: 22px;
  opacity:.25;
  border-radius: 6px;
  background:#111827;
}

.news-related-body{ min-width: 0; }
.news-related-tt{
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  color:#111827;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-related-meta{
  margin-top: 6px;
  font-size: 12px;
  color:#6b7280;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px){
  .news-related-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .news-related-grid{ grid-template-columns: 1fr; }
}