/* =========================================================
   资讯页样式
   ========================================================= */

/* —— 页面头 ——————————————————————— */
.page-hero { padding: clamp(2rem, 4vw, 4rem) 0 clamp(1rem, 2vw, 2rem); border-bottom: 1px solid var(--c-line); }
.page-hero__meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-mute);
  margin-bottom: var(--s-3);
}
.page-hero h1 { font-size: var(--fs-h2); max-width: 24ch; }
@media (max-width: 540px) {
  .page-hero h1 { max-width: none; }
}

/* —— Tabs ——————————————————————— */
.tabs { display: flex; gap: 0.25rem; padding: 1rem 0; border-bottom: 1px solid var(--c-line); margin-bottom: var(--s-8); }
.tabs button {
  padding: 0.55rem 1.1rem;
  font-size: var(--fs-sm);
  color: var(--c-mute);
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all var(--t-fast) var(--ease-out);
}
.tabs button:hover { color: var(--c-ink); }
.tabs button.is-active {
  color: var(--c-ink);
  border-color: var(--c-ink);
  background: var(--c-surface);
}

/* —— 资讯列表 ——————————————————————— */
.news-list { display: flex; flex-direction: column; }
.news-item {
  display: grid; grid-template-columns: 220px 1fr auto; gap: var(--s-6);
  padding: var(--s-6) 0;
  border-top: 1px solid var(--c-line);
  cursor: pointer;
  transition: background var(--t-fast);
}
.news-item:last-child { border-bottom: 1px solid var(--c-line); }
.news-item:hover { background: var(--c-tint); }

.news-item__cover {
  aspect-ratio: 4/3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-bg-alt);
}
.news-item__cover img { width: 100%; height: 100%; object-fit: cover; }
.news-item__cover .placeholder { width: 100%; height: 100%; border-radius: 0; border: 0; }

.news-item__body { display: flex; flex-direction: column; justify-content: center; }
.news-item__meta {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-mute);
  margin-bottom: var(--s-2);
}
.news-item__meta .tag { font-size: 0.65rem; }
.news-item__title { font-size: var(--fs-h3); font-weight: 500; line-height: 1.3; margin-bottom: var(--s-2); }
.news-item__excerpt { color: var(--c-mute); font-size: var(--fs-sm); line-height: 1.6; max-width: 64ch; }

.news-item__cta {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--c-line-2);
  border-radius: 999px;
  color: var(--c-ink);
  align-self: center;
  transition: all var(--t-fast) var(--ease-out);
  flex: none;
}
.news-item:hover .news-item__cta { background: var(--c-ink); color: #fff; transform: translateX(2px); }

@media (max-width: 760px) {
  .news-item { grid-template-columns: 1fr; gap: var(--s-3); }
  .news-item__cta { display: none; }
  .news-item__cover { max-height: 200px; }
}

/* —— 详情弹窗 ——————————————————————— */
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--c-ink) 60%, transparent);
  padding: var(--s-4);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-med) var(--ease-out);
}
.modal.is-open { opacity: 1; pointer-events: auto; }
.modal__panel {
  background: var(--c-surface);
  border-radius: var(--r-md);
  max-width: 720px; width: 100%;
  max-height: 90vh;
  overflow: auto;
  padding: var(--s-8);
  transform: translateY(20px);
  transition: transform var(--t-med) var(--ease-out);
}
.modal.is-open .modal__panel { transform: none; }
.modal__close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--c-line-2);
  display: inline-flex; align-items: center; justify-content: center;
}
.modal__meta { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.15em; color: var(--c-mute); text-transform: uppercase; margin-bottom: 1rem; }
.modal__title { font-size: var(--fs-h1); font-weight: 400; letter-spacing: -0.02em; margin-bottom: 1rem; }
.modal__body { color: var(--c-ink-2); line-height: 1.7; }
.modal__body p { margin-bottom: 1rem; }
.modal__cover { aspect-ratio: 16/9; border-radius: var(--r-md); overflow: hidden; margin-bottom: 1.5rem; }