/* ===== 赛事动态 · 页面专属样式 ===== */

.page-news {
  --news-shift: 8px;
  overflow-x: clip;
  color: var(--paper);
}

/* ---------- 首屏 ---------- */
.page-news .news-hero {
  position: relative;
  padding: var(--s5) 0 var(--s4);
  isolation: isolate;
}

.page-news .news-hero::before {
  content: "";
  position: absolute;
  top: -32%;
  right: -26%;
  width: min(680px, 94vw);
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(circle at 55% 45%, rgba(123, 77, 255, .32), transparent 62%),
    radial-gradient(circle at 24% 76%, rgba(180, 240, 60, .16), transparent 58%);
  z-index: -1;
  pointer-events: none;
}

.page-news .news-hero h1 {
  margin: var(--s2) 0 var(--s3);
  font-size: clamp(34px, 8.4vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 900;
  max-width: 14ch;
  text-shadow: 0 0 30px rgba(180, 240, 60, .22);
}

.page-news .news-hero .lede {
  max-width: 44ch;
  color: var(--mist);
}

/* ---------- 赛季进度带 ---------- */
.page-news .season-band {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s1);
  margin-top: var(--s5);
}

.page-news .season-band__seg {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s2) var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--slate);
  overflow: hidden;
  transition: transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}

.page-news .season-band__seg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--line);
}

.page-news .season-band__seg--done::after { background: var(--cyan); }
.page-news .season-band__seg--now::after { background: var(--lime); }
.page-news .season-band__seg--next::after { background: var(--violet); }

.page-news .season-band__seg--now {
  border-color: rgba(180, 240, 60, .5);
  background: linear-gradient(140deg, rgba(180, 240, 60, .13), rgba(18, 28, 36, .94) 58%);
  box-shadow: 0 20px 44px -32px rgba(180, 240, 60, .85);
}

.page-news .season-band__seg:hover,
.page-news .season-band__seg:focus-visible {
  transform: translateY(-4px);
  border-color: var(--lime);
  box-shadow: 0 22px 46px -30px rgba(180, 240, 60, .9);
}

.page-news .season-band__k {
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--mist);
}

.page-news .season-band__seg--now .season-band__k { color: var(--lime); }

.page-news .season-band__n {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}

.page-news .season-band__d {
  font-size: 13px;
  line-height: 1.7;
  color: var(--mist);
}

/* ---------- 条目流 ---------- */
.page-news .news-stream {
  padding-top: var(--s5);
}

.page-news .stream-grid {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s4);
}

.page-news .rail-title {
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--mist);
  margin: 0 0 var(--s1);
}

.page-news .stream-rail .chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

.page-news .stream-rail .chip {
  cursor: pointer;
}

.page-news .stream-rail .chip[aria-pressed="true"] {
  background: var(--lime);
  border-color: var(--lime);
  color: #0A0E12;
  box-shadow: 0 0 20px rgba(180, 240, 60, .38);
}

.page-news .news-item {
  --shift: 0px;
  position: relative;
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--slate);
  transform: translateX(var(--shift));
  transition:
    transform .26s var(--ease),
    border-color .26s var(--ease),
    box-shadow .26s var(--ease);
}

.page-news .news-item + .news-item {
  margin-top: var(--s2);
}

.page-news .news-item:hover {
  border-color: rgba(180, 240, 60, .45);
  box-shadow: 0 24px 48px -36px rgba(180, 240, 60, .95);
  transform: translateX(var(--shift)) translateY(-4px);
}

.page-news .news-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s1);
}

.page-news .news-item__cat {
  font-size: 12px;
  letter-spacing: .12em;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  border: 1px solid currentColor;
  color: var(--cyan);
}

.page-news .news-item[data-cat="season"] .news-item__cat { color: var(--lime); }
.page-news .news-item[data-cat="version"] .news-item__cat { color: var(--violet); }
.page-news .news-item[data-cat="topic"] .news-item__cat { color: var(--clay); }

.page-news .news-item__time {
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--mist);
}

.page-news .news-item__title {
  font-size: 20px;
  line-height: 1.42;
  font-weight: 700;
  margin: 0 0 var(--s1);
}

.page-news .news-item__text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
  margin: 0;
  max-width: 62ch;
}

.page-news .news-item__more {
  margin-top: var(--s2);
}

.page-news .news-item__more summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--lime);
  list-style: none;
  user-select: none;
}

.page-news .news-item__more summary::-webkit-details-marker { display: none; }

.page-news .news-item__more summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1;
}

.page-news .news-item__more[open] summary::after { content: "\2212"; }

.page-news .news-item__more p {
  margin: var(--s2) 0 0;
  padding-left: var(--s3);
  border-left: 2px solid var(--line);
  font-size: 14px;
  line-height: 1.85;
  color: var(--mist);
  max-width: 60ch;
}

/* ---------- 赛季阶段专题 ---------- */
.page-news .news-topics {
  padding-top: var(--s7);
}

.page-news .topics-cover {
  margin: var(--s4) 0 0;
}

.page-news .topic-cards {
  margin-top: var(--s3);
  gap: var(--s2);
}

.page-news .topic-card {
  padding: var(--s3);
  border: 1px solid var(--line);
  border-top: 3px solid var(--lime);
  border-radius: var(--r-m);
  background: var(--slate);
  transition: transform .26s var(--ease), border-color .26s var(--ease);
}

.page-news .topic-card:nth-child(2) { border-top-color: var(--cyan); }
.page-news .topic-card:nth-child(3) { border-top-color: var(--clay); }
.page-news .topic-card:nth-child(4) { border-top-color: var(--violet); }

.page-news .topic-card:hover {
  transform: translateY(-4px);
  border-color: rgba(180, 240, 60, .4);
}

.page-news .topic-card__idx {
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--mist);
  margin: 0;
}

.page-news .topic-card__name {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.25;
  margin: 6px 0 var(--s1);
}

.page-news .topic-card__desc {
  font-size: 14px;
  line-height: 1.8;
  color: var(--mist);
  margin: 0;
}

/* ---------- 更新节奏 ---------- */
.page-news .news-cadence {
  padding-top: var(--s7);
}

.page-news .cadence-grid {
  align-items: start;
  gap: var(--s4);
}

.page-news .cadence-text .section-title {
  margin: var(--s1) 0 var(--s2);
}

.page-news .cadence-text .lede {
  color: var(--mist);
  max-width: 40ch;
}

.page-news .cadence-list {
  list-style: none;
  margin: var(--s3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s2);
}

.page-news .cadence-list li {
  position: relative;
  padding-left: var(--s3);
  font-size: 15px;
  line-height: 1.85;
  color: var(--mist);
}

.page-news .cadence-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 12px rgba(180, 240, 60, .7);
}

.page-news .cadence-note {
  margin-top: var(--s3);
  font-size: 14px;
  line-height: 1.8;
  color: var(--mist);
}

.page-news .cadence-note a {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-news .cadence-figs {
  display: grid;
  gap: var(--s2);
  align-content: start;
}

.page-news .cadence-figs .media-frame {
  margin: 0;
}

/* ---------- 版本迭代 ---------- */
.page-news .news-versions {
  padding-top: var(--s7);
}

.page-news .versions-grid {
  align-items: start;
  gap: var(--s4);
}

.page-news .versions-fig {
  margin: 0;
}

.page-news .versions-body .section-title {
  margin: var(--s1) 0 var(--s3);
}

.page-news .version-track {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--s3);
  border-left: 2px solid var(--line);
}

.page-news .version-track li {
  position: relative;
  padding-bottom: var(--s3);
}

.page-news .version-track li:last-child {
  padding-bottom: 0;
}

.page-news .version-track li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--s3) - 6px);
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--slate2);
  border: 2px solid var(--violet);
}

.page-news .version-track li:nth-child(2)::before { border-color: var(--cyan); }
.page-news .version-track li:nth-child(3)::before { border-color: var(--lime); }
.page-news .version-track li:nth-child(4)::before { border-color: var(--clay); }

.page-news .version-tag {
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--violet);
}

.page-news .version-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  margin: 2px 0 4px;
}

.page-news .version-desc {
  font-size: 14px;
  line-height: 1.8;
  color: var(--mist);
  margin: 0;
  max-width: 46ch;
}

/* ---------- 下一步 ---------- */
.page-news .news-next {
  padding: var(--s7) 0 var(--s7);
}

.page-news .next-inner {
  position: relative;
  padding: var(--s5) var(--s4);
  border: 1px solid rgba(180, 240, 60, .3);
  border-radius: var(--r-l);
  background:
    radial-gradient(circle at 88% 10%, rgba(123, 77, 255, .3), transparent 56%),
    linear-gradient(150deg, rgba(180, 240, 60, .1), rgba(18, 28, 36, .96) 46%);
  overflow: hidden;
}

.page-news .next-inner .section-title {
  margin: var(--s1) 0 var(--s2);
  max-width: 18ch;
}

.page-news .next-text {
  font-size: 15px;
  line-height: 1.85;
  color: var(--mist);
  max-width: 46ch;
  margin: 0 0 var(--s3);
}

.page-news .next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-news .news-item__title {
    font-size: 22px;
  }

  .page-news .news-hero {
    padding-top: var(--s6);
  }
}

@media (min-width: 860px) {
  .page-news .season-band {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-news .cadence-figs {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 900px) {
  .page-news .versions-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  }
}

@media (min-width: 1040px) {
  .page-news .stream-grid {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--s5);
  }

  .page-news .stream-rail {
    position: sticky;
    top: 96px;
    align-self: start;
  }

  .page-news .stream-rail .chip-row {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .page-news .stream-rail .chip {
    width: 100%;
    text-align: left;
  }

  .page-news .stream-list > .news-item:nth-child(3n + 2) {
    --shift: var(--news-shift);
  }

  .page-news .next-inner {
    padding: var(--s6) var(--s5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .news-item,
  .page-news .news-item:hover,
  .page-news .season-band__seg,
  .page-news .season-band__seg:hover,
  .page-news .topic-card,
  .page-news .topic-card:hover {
    transform: none;
    transition: none;
  }
}