/* ===================================================================
   news.css - 新闻列表页
   -------------------------------------------------------------------
   包含：
   1. 顶部 Hero（报纸背景 1920×400）
   2. NEWS CENTER 标题（左白 + 右渐变）
   3. 新闻列表卡片（左图 + 中内容 + 右日期）
   4. 分页
   5. 响应式
   =================================================================== */

/* ==============================================================
   0. 通用分页样式（与 cases.css 一致）
   ============================================================== */
.news-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-10);
}

.news-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  text-decoration: none;
  transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
}

.news-pagination__btn:hover {
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
}

.news-pagination__btn.is-active {
  color: var(--color-text-inverse);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.news-pagination__btn.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.news-pagination__btn--text { padding: 0 var(--space-4); }

.news-pagination__ellipsis {
  color: var(--color-text-muted);
  padding: 0 var(--space-2);
}

/* ==============================================================
   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("../../../../assets/website/images/news-bg-img.png") center / cover no-repeat;
  overflow: hidden;
}

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

/* ==============================================================
   2. NEWS CENTER 标题
   - NEWS 白色
   - CENTER 水平渐变 #FFFFFF → #0095FF
   ============================================================== */
.news-list-section {
  padding-block: var(--space-8) var(--space-12);
}

.news-list__title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-10);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  line-height: 1.2;
}

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

.news-list__title--white {
  color: var(--color-text-inverse);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.news-list__title--gradient {
  background-image: linear-gradient(90deg, #ffffff 0%, #0095ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ==============================================================
   3. 新闻列表卡片
   ---------------------------------------------------------------
   结构：
     .news-card
       ├── .news-card__main（左：封面 + 内容）
       │     ├── .news-card__thumb  (左)
       │     └── .news-card__body   (右)
       │           ├── title
       │           ├── desc
       │           └── MORE
       └── .news-card__date（右：日期 + 箭头，左侧分割线）
   ============================================================== */
.news-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.news-card {
  display: flex;
  align-items: stretch;
  gap: var(--space-5);
  padding: var(--space-4);
  background: rgba(255, 255, 255, 0.04);    /* 卡片背景色 */
  border: 1px solid rgba(255, 255, 255, 0.08); /* 卡片描边 */
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
  transition: background-color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}

.news-card:hover {
  background: rgba(0, 149, 255, 0.08);
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

/* 左侧主区（封面图 + 内容） */
.news-card__main {
  display: flex;
  align-items: stretch;
  row-gap: var(--space-5);
  column-gap: var(--space-5);
  flex: 1 1 auto;
  min-width: 0;
}

/* 左侧封面图（350×220） */
.news-card__thumb {
  flex: 0 0 auto;
  width: 220px;
  aspect-ratio: 350 / 220;          /* 高度 ≈ 138px */
  max-height: 160px;                /* 兜底：限制最大高度 */
  overflow: hidden;
  border-radius: 4px;
  background: #1a2a3a;
}

.news-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--transition-base);
}

.news-card:hover .news-card__thumb img { transform: scale(1.05); }

/* 右侧内容（标题 + 描述 + MORE） */
.news-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;                   /* 允许 flex 子项收缩到内容尺寸，让 -webkit-line-clamp 生效 */
  overflow: hidden;                /* 兜底：裁掉任何溢出 */
  margin-left: 10px;
}

.news-card__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-inverse);
  margin: 0 0 var(--space-2);
  line-height: 1.4;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--transition-base);
}

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

.news-card__desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0 0 var(--space-2);
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;           /* 最多 2 行 + 省略号 */
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
  word-break: break-word;
  text-overflow: ellipsis;         /* 兼容：显式声明省略号 */
  overflow: hidden;
}

.news-card__more {
  margin-top: auto;                 /* 固定贴底 */
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-inverse);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  align-self: flex-start;           /* 内容居左对齐 */
  transition: color var(--transition-base);
}

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

/* 右侧日期（左侧紧贴分割线） */
.news-card__date {
  flex: 0 0 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  padding-left: var(--space-5);
  border-left: 1px solid rgba(255, 255, 255, 0.08); /* 分割线：紧贴右侧日期 */
  min-width: 90px;
}

.news-card__date-day {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-inverse);
  line-height: 1.2;
}

.news-card__date-year {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  line-height: 1.2;
}

.news-card__date-arrow {
  font-size: var(--font-size-xl);
  color: var(--color-text-muted);
  line-height: 1;
  margin-top: var(--space-1);
  transition: color var(--transition-base), transform var(--transition-base);
}

.news-card:hover .news-card__date-arrow {
  color: var(--color-accent);
  transform: translateX(2px);
}

/* ==============================================================
   4. 响应式：平板
   ============================================================== */
@media (max-width: 1024px) {
  .news-card { gap: var(--space-4); padding: var(--space-3); }
  .news-card__main {
    /*row-gap: var(--space-4);*/
    /*column-gap: var(--space-4);*/

  }
  .news-card__thumb { width: 180px; }
  .news-card__date { flex-basis: 90px; padding-left: var(--space-4); min-width: 80px; }
}

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

  .news-list-section { padding-block: var(--space-5) var(--space-8); }

  .news-list__title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-6);
  }

  .news-list { gap: var(--space-4); }

  .news-card {
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
  }

  /*.news-card__main { flex-direction: column; gap: var(--space-3); }*/

  .news-card__thumb { width: 100%; aspect-ratio: 16 / 9; max-height: none; }

  .news-card__date {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    padding-left: 0;
    padding-top: var(--space-3);
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08); /* 移动端分割线改横线 */
    min-width: 0;
  }

  .news-card__date-arrow { margin-top: 0; margin-left: auto; }
}