/* ===================================================================
   news-detail.css - 新闻详情页
   -------------------------------------------------------------------
   包含：
   1. 顶部 Hero（报纸背景 1920×400）
   2. 面包屑（灰色字体）
   3. 新闻详情主体（标题 + 简介 + 大图 + 正文）
   4. 上一篇 / 下一篇
   5. 响应式
   =================================================================== */

/* ==============================================================
   1. 顶部大图 Hero（报纸背景 1920×400）
   ============================================================== */
.news-hero {
  position: relative;
  height: 200px;
  background:
    linear-gradient(180deg, rgba(10,23,41,0.0) 0%, rgba(10,23,41,0.0) 60%, rgba(10,23,41,0.55) 100%),
    url("../../images/news-detail-bg-img.png") center / cover no-repeat;
  overflow: hidden;
}

@media (min-width: 768px)  { .news-hero { height: 300px; } }
@media (min-width: 1025px) { .news-hero { height: 400px; } }

/* ==============================================================
   2. 面包屑（灰色字体）
   ============================================================== */
.news-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: var(--space-8);
}

.news-breadcrumb__item {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-base);
}

.news-breadcrumb__item:hover { color: var(--color-accent); }
.news-breadcrumb__item.is-current { color: var(--color-text-muted); }

.news-breadcrumb__sep { color: var(--color-text-muted); opacity: 0.6; }

.news-breadcrumb__back {
  margin-left: auto;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color var(--transition-base);
}

.news-breadcrumb__back:hover { color: var(--color-accent); }

/* ==============================================================
   3. 新闻详情主体
   ============================================================== */
.news-detail {
  padding-block: var(--space-4) var(--space-12);
}

.news-detail__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-inverse);
  text-align: center;
  margin: 0 0 var(--space-5);
  line-height: 1.4;
}

@media (min-width: 768px) {
  .news-detail__title { font-size: var(--font-size-2xl); }
}

.news-detail__intro {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.8;
  text-align: justify;
  margin: 0 0 var(--space-8);
  /*display: -webkit-box;*/
  /*-webkit-line-clamp: 2;*/
  /*-webkit-box-orient: vertical;*/
  overflow-wrap: break-word;
  /*word-break: break-word;*/
  /*overflow: hidden;*/
}

.news-detail__cover {
  margin: 0 0 var(--space-8);
  overflow: hidden;
  border-radius: 4px;
  background: #1a2a3a;
}

.news-detail__cover img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.news-detail__body {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.8;
}

.news-detail__body p {
  margin: 0 0 var(--space-4);
}

.news-detail__body p:last-child {
  margin-bottom: 0;
}

/* 正文内嵌图片自适应 */
.news-detail__body img {
  max-width: 100%;
  height: auto;
}

/* ==============================================================
   4. 上一篇 / 下一篇
   ============================================================== */
.news-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-10);
  padding: var(--space-4) var(--space-5);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  text-align: justify;
}

.news-pager__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-base);
  max-width: 48%;
}

.news-pager__item:hover { color: var(--color-accent); }

.news-pager__item--next { text-align: right; }

.news-pager__arrow {
  color: var(--color-text-muted);
  font-weight: bold;
  font-size: var(--font-size-base);
  transition: color var(--transition-base);
}

.news-pager__item:hover .news-pager__arrow { color: var(--color-accent); }

.news-pager__label { color: var(--color-text-muted); }

.news-pager__name {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.news-pager__item--next .news-pager__name { text-align: right; }

/* ==============================================================
   5. 响应式：移动端
   ============================================================== */
@media (max-width: 767px) {
  .news-hero { height: 160px; }

  .news-breadcrumb { font-size: var(--font-size-xs); padding: var(--space-3) 0; margin-bottom: var(--space-5); }
  .news-breadcrumb__back { width: 100%; margin-top: var(--space-2); margin-left: 0; }

  .news-detail { padding-block: var(--space-3) var(--space-8); }
  .news-detail__title { font-size: var(--font-size-base); margin-bottom: var(--space-3); }
  .news-detail__intro { font-size: var(--font-size-xs); margin-bottom: var(--space-5); }
  .news-detail__cover { margin-bottom: var(--space-5); }
  .news-detail__body { font-size: var(--font-size-xs); }

  .news-pager { padding: var(--space-3); margin-top: var(--space-6); }
  .news-pager__item { max-width: 100%; font-size: var(--font-size-xs); }
  .news-pager__name { max-width: 180px; }
}