.news__title{
  color: #1F2937;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  color: #1F2937;
  position: relative;
  padding-left: 14px;
  margin-bottom: 25px;
}

.news__title::before{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  content: "";
  width: 6px;
  height: 80%;
  background: #E60012;
}
.news-top-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 25px;
}

.news-top-grid .news-card {
  overflow: hidden;
  border: 1px solid #f3f4f6;
  background: #fff;
}

.news-top-grid .news-card > a {
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: 20px;
  color: inherit;
  text-decoration: none;
}

/* 图片区域 */
.news-top-grid .news-card__image {
  overflow: hidden;
  margin: -20px -20px 0;
}

.news-top-grid .news-card__image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* 正文区域 */
.news-top-grid .news-card__content {
  display: flex;
  /* min-height: 142px; */
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 20px 0 24px;
}

.news-top-grid .news-card h3 {
  margin: 0;
  color: #1f2937;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  word-break: break-word;
  transition: color 0.3s ease;
}

.news-top-grid .news-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  word-break: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* 日期和箭头区域 */
.news-top-grid .news-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid #f3f4f6;
}

.news-top-grid .news-card__footer span {
  color: #9ca3af;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
}

.news-top-grid .news-card__footer svg {
  display: block;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

/* 鼠标移入效果 */
.news-top-grid .news-card:hover .news-card__image img {
  transform: scale(1.06);
}

.news-top-grid .news-card:hover h3 {
  color: #e60012;
}

.news-top-grid .news-card:hover .news-card__footer svg {
  transform: translateX(3px);
}



.news-row {
  display: flex;
  gap: 32px;
  align-items: stretch;
  margin-bottom: 30px;
  color: inherit;
  text-decoration: none;
  height: 164px;
}

/* 左侧图片 */
.news-row__image {
  display: block;
  /* flex: 0 0 230px; */
  overflow: hidden;
  /* aspect-ratio: 16 / 9; */
  border-radius: 5px;
  background: #f4f4f4;
}

.news-row__image img {
  display: block;
  /* width: 100%; */
  aspect-ratio: 16 / 9;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* 整个新闻项悬停时图片放大 */
.news-row:hover .news-row__image img,
.news-row:focus-within .news-row__image img {
  transform: scale(1.04);
}

/* 右侧主体 */
.news-row__body {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding-bottom: 18px;
}

/* 默认灰色底线 */
.news-row__body::before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--line-color, #e6e6e6);
  content: "";
}

/* 悬停时覆盖的红线 */
.news-row__body::after {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 0;
  height: 2px;
  background: var(--red, #e60012);
  content: "";
  transition: width 0.4s ease;
}

/* 整个新闻项悬停，红线展开 */
.news-row:hover .news-row__body::after,
.news-row:focus-within .news-row__body::after {
  width: 100%;
}

.news-row__content {
  min-width: 0;
}

/* 标题和日期 */
.news-row__header {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  justify-content: space-between;
}

.news-row__title {
  display: -webkit-box;
  overflow: hidden;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  color: var(--title-color, #0f0f11);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  word-break: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  transition: color 0.3s ease;
}

/* 标题也跟随整个新闻项变化 */
.news-row:hover .news-row__title,
.news-row:focus-visible .news-row__title {
  color: var(--red, #e60012);
}

.news-row__date {
  flex: none;
  padding-top: 3px;
  color: var(--red, #e60012);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

/* 摘要 */
.news-row__description {
  display: -webkit-box;
  overflow: hidden;
  margin: 10px 0 0;
  color: var(--text-color, #73737a);
  font-size: 14px;
  line-height: 1.7;
  word-break: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* 查看详情 */
.news-row__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: var(--red, #e60012);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transform: translateX(0);
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.news-row__more svg {
  flex: none;
}

/* 整个“查看详情”跟随新闻项一起移动 */
.news-row:hover .news-row__more,
.news-row:focus-within .news-row__more {
  transform: translateX(6px);
}

/* 不再给链接本身设置单独的 hover 动画 */
.news-row__more:hover,
.news-row__more:focus-visible {
  color: var(--red, #e60012);
}

/* 键盘焦点 */
.news-row:focus-visible {
  outline: 2px solid var(--red, #e60012);
  outline-offset: 4px;
}

@media (max-width: 900px) {
  .news-top-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .news-row {
    gap: 24px;
  }

  .news-row__image {
    flex-basis: 200px;
  }
}

@media (max-width: 760px) {
  .news__title {
    margin-bottom: 20px;
  }

  .news-top-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .news-top-grid .news-card > a {
    padding: 16px;
  }

  .news-top-grid .news-card__image {
    margin: -16px -16px 0;
  }

  .news-row {
    display: block;
    margin-bottom: 24px;
  }

  .news-row__image {
    display: none;
  }

  .news-row__body {
    padding-bottom: 16px;
  }

  .news-row__header {
    display: block;
  }

  .news-row__title {
    font-size: 17px;
  }

  .news-row__date {
    display: block;
    margin-top: 8px;
    padding-top: 0;
  }

  .news-row__description {
    margin-top: 8px;
  }

  .news-row__more {
    margin-top: 12px;
  }
}