/* pages/home_news.css — 首页「新闻」：news 卡网格 / 整卡可点与整卡 hover
   拆自 pages/home.css（2026-10-12 拆分，纯搬移）；页面源 bundle 2:53「终稿-首页-初稿 5.0」（1920×6660）。
   含原 home.css「移动端专属」段中 LATEST NEWS 标题换行部分（<768）；数据条部分在 home_about.css */

/* ---------- 新闻（1920×1088） ---------- */
.news {
  background: var(--color-bg-page);
  padding: var(--space-16) var(--space-6) var(--space-16);
}

.news__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.news__head .section-title {
  max-width: 79.5rem; /* 1272 */
  margin-top: var(--space-5);
}

/* 窄屏标题略微缩小（≥1280 恢复标准 48px） */
.news .section-title {
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 1.75rem);
}

.news__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-top: var(--space-12);
}

/* 卡内两列网格：日期居左，灰色箭头同行居右
   overflow: hidden 裁住 hover 时 scale 放大的图片，不溢出到相邻卡片
   cursor: pointer —— 整卡可点（见下方 stretched link），光标要给提示 */
.news-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
}

.news-card__img {
  grid-column: 1 / -1;
  width: 100%;
  height: auto;
  aspect-ratio: 583 / 526;
  object-fit: cover;
  transform: scale(1);
  transition: transform .6s var(--m-ease, cubic-bezier(0.075, 0.82, 0.165, 1));
  will-change: transform;
}

@media (min-width: 1280px) {
  .news-card:hover .news-card__img {
    transform: scale(1.06);
  }
}

.news-card__title {
  grid-column: 1 / -1;
  max-width: 31.5625rem; /* 505 */
  margin-top: 1.75rem;
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-regular);
  line-height: 2rem; /* 32 */
  color: var(--color-text-1);
  transition: color .3s ease;
}

.news-card__date {
  margin-top: var(--space-2);
  font-size: var(--font-size-body);
  line-height: 1.875rem; /* 30 */
  color: var(--color-text-3);
}

.news-card .btn-more {
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
  margin: 0;
}

/* ---------- 新闻卡：整卡可点 / 整卡 hover（2026-09-18 用户要求） ----------
   需求：单张卡的所有位置都能 hover 触发反馈、都能点击跳转，
   包含图片、标题、日期、箭头四处。

   ① stretched link —— 把箭头链接用伪元素撑满整张卡。
      `.btn-more` 自身是 static（基础段无 position、≥1280 段显式 position:static），
      所以伪元素的定位上下文落到最近的定位祖先 = `.news-card`（position:relative），
      inset:0 即整卡范围。
      z-index:1 是必需的：`.news-card__img` 有 transform（scale），会生成 z-index:0 那一层的
      层叠上下文；不给正值的话覆盖层会被图片压住，点图片就落不到链接上。
      ⚠ 语义上仍是**一个**链接，读屏不会重复朗读。
      ⚠ 副作用（已知并接受）：覆盖层铺满后，标题/日期文字**无法再用鼠标划选复制**。
        这是「整卡可点」的固有代价，把文字抬到覆盖层之上就等于点文字不跳转。

   ② 整卡 hover 驱动箭头 —— 取值镜像 components.css 的 `.btn-more:hover` 三条
      （方块变红 + 双箭头同步 +200%）。hover 落在卡内空白处时 `.btn-more` 本身并未被 hover，
      所以必须由 `.news-card:hover` 代发，不能省。
      另挂 `:focus-within`：键盘 Tab 到卡内链接时给同样的视觉反馈。
      特异性 (0,3,0) 与 components.css 的同名规则打平，但**取值完全相同**，不冲突。

   ③ 标题 hover 变主红（用户 2026-09-18 选定；设计稿未定义，属新增样式）。
      过渡写在 `.news-card__title` 自己的 transition 里（.3s ease）。

   ⚠ 不要给 `.news-card` 加 `transition`：motion.js 因 `.news__cards[data-m-stagger]` 会给
     3 张卡打上 `data-m-anim`，motion.css 的 `.m-ready [data-m-anim]`（特异性 (0,2,0)）会静默覆盖
     (0,1,0) 的声明。这里所有过渡都挂在子元素上，刻意绕开这个坑（详见 MEMORY.md「transition 覆盖陷阱」）。 */
.news-card .btn-more::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.news-card:hover .btn-more__icon,
.news-card:focus-within .btn-more__icon {
  background: var(--color-primary);
  color: #fff;
}

.news-card:hover .btn-more__arrow--in,
.news-card:focus-within .btn-more__arrow--in  { transform: translateX(50%); }
.news-card:hover .btn-more__arrow--out,
.news-card:focus-within .btn-more__arrow--out { transform: translateX(150%); }

.news-card:hover .news-card__title,
.news-card:focus-within .news-card__title {
  color: var(--color-primary);
}

@media (min-width: 1280px) {
  .news {
    height: 68rem;
    padding: 8.25rem 3.3125rem 0 3.5rem; /* 眉题 (56,132) */
  }

  .news .section-title {
    font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3rem); /* 恢复 48px 设计值 */
  }

  .news__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 583@1920，随视口流式收缩 */
    gap: 2rem;
    margin-top: 4.3125rem;
  }

  /* 桌面：箭头与标题行顶对齐（设计稿 y=556） */
  .news-card {
    align-items: start;
  }

  .news-card__img {
    grid-column: 1 / -1;
    height: auto; /* 高度随卡宽按 583:526 流式 */
  }

  .news-card__title {
    grid-column: 1; /* 桌面：标题仅占左列，与右列箭头同行（基类的 1/-1 会与箭头锁位冲突） */
  }

  .news-card .btn-more {
    grid-column: 2;
    grid-row: 2 / span 2;
    position: static;
    justify-self: end;
    margin: 1.75rem 0 0;
  }
}

/* ---------- 移动端专属（<768 手机档；PC / 平板档严格不动）——LATEST NEWS 标题换行
   （原 home.css「移动端专属」段的 news 部分；数据条部分在 home_about.css） ---------- */
@media (max-width: 767px) {
  /* 需求 R2：LATEST NEWS 大标题在 DISCOVER 前换行。
     .title-break 是桌面稿的硬换行，base.css 里 <1024 是 display: none；
     这里只给 news 头这一个标题打开（本选择器 (0,2,0) 压过 base 的 (0,1,0)）。
     ⚠ motion.js 是按 br 的 computed display 量行、再切成 .m-line 块的，
       所以本规则必须早于它生效 —— 样式表在 <head>，满足。别扩大选择器范围。 */
  .news__head .title-break {
    display: inline;
  }
}