/* ============================================
   News Section - 精确还原 Figma 设计
   左图 + 右侧 3 条新闻 (accordion: 1 展开/绿 + 2 折叠/灰)
   news-num-01 默认展开; hover 切换; 下划线 L->R 变绿; 03 无下划线
   ============================================ */

.news {
  position: relative;
  width: 100%;
  background: var(--color-white);
  overflow: hidden;
}

.news__inner {
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
  padding: 160px 0 200px 208px;
}

/* --- 标题区 --- */
.news__title-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 170px;
  gap: 24px;
}

.news__title {
  font-family: var(--font-primary);
  font-size: clamp(1.75rem, 3.9583vw, 4.75rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin: 0;
}

/* --- Learn More 按钮 (六边形药丸, 白底+蓝描边+蓝字) --- */
.news__learn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 58px;
  padding: 0 28px;
  flex-shrink: 0;
  text-decoration: none;
  transition: transform var(--duration-micro) var(--ease-emphasized);
}

.news__learn-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.news__learn-shape path {
  transition: fill var(--duration-base) var(--ease-standard);
}

.news__learn-text {
  position: relative;
  z-index: 1;
  font-family: var(--font-primary);
  font-size: clamp(1rem, 0.08vw + 0.98rem, 1.125rem);
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-primary);
  white-space: nowrap;
}

.news__learn:hover .news__learn-shape path {
  fill: var(--color-primary);
}

.news__learn:hover .news__learn-text {
  color: var(--color-white);
}

.news__learn:active {
  transform: scale(0.96);
}

/* --- 新闻主体 (左图 + 右列表) --- */
.news__all {
  display: flex;
  gap: 111px;
  margin-top: 95px;
  padding-right: 100px;
  align-items: flex-start;
}

.news__pic {
  flex-shrink: 0;
  width: 640px;
  aspect-ratio: 640 / 360;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.news__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- 新闻列表 --- */
.news__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 45px;
  min-width: 0;
}

/* 三张新闻卡整体链接：去下划线、块级、继承颜色 */
.news__content > a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.news__item {
  cursor: pointer;
}

.news__row {
  display: flex;
  gap: 52px;
  align-items: flex-start;
}

.news__num {
  flex-shrink: 0;
  font-family: var(--font-primary);
  font-size: clamp(1.5rem, 2.5vw, 3rem);
  font-weight: 600;
  line-height: 1;
  color: var(--color-text-secondary);
  transition: color var(--duration-base) var(--ease-standard);
}

.news__body {
  flex: 1;
  min-width: 0;
}

.news__title-text {
  font-family: var(--font-primary);
  font-size: clamp(1rem, 1.6667vw, 2rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--color-text-secondary);
  margin: 0;
  transition: color var(--duration-base) var(--ease-standard);
  /* 固定 2 行, 保证展开/收起态标题高度一致 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* 展开内容 (默认折叠) */
.news__detail {
  margin-top: 16px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--duration-slow) var(--ease-standard),
              opacity var(--duration-base) var(--ease-standard);
}

.news__date {
  display: block;
  font-family: var(--font-primary);
  font-size: clamp(0.75rem, 1.25vw, 1.5rem);
  font-weight: 300;
  line-height: 1.375;
  color: var(--color-text-muted);
  /* 固定 1 行 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news__desc {
  margin: 16px 0 0;
  font-family: var(--font-primary);
  font-size: clamp(0.75rem, 1.25vw, 1.5rem);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--color-text-secondary);
  /* 固定 3 行, 保证展开态描述高度一致 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* --- 展开态 (is-active): 绿字 + w800 + 展开内容 --- */
.news__item.is-active .news__num {
  color: var(--color-secondary);
  font-weight: 600;
}

.news__item.is-active .news__title-text {
  color: var(--color-secondary);
  font-weight: 600;
}

.news__item.is-active .news__detail {
  max-height: 200px;
  opacity: 1;
}

/* --- 下划线 (灰底 + 绿色覆盖 L->R) --- */
.news__line {
  position: relative;
  height: 1px;
  width: calc(100% + 100px);
  background: var(--color-placeholder);
}

.news__line-green {
  position: absolute;
  inset: 0;
  background: var(--color-secondary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-slow) var(--ease-standard);
}

/* 被 hover 的 news__item 后面紧跟的下划线变绿 (L->R) */
.news__item.is-active + .news__line .news__line-green {
  transform: scaleX(1);
}

/* ============================================
   Responsive News
   ============================================ */

@media (max-width: 1200px) {
  .news__inner { padding: 120px 0 140px 80px; }
  .news__title-area { padding-right: 80px; }
  .news__all { gap: 48px; margin-top: 72px; }
  .news__pic { width: 380px; }
  .news__content { gap: 36px; }
  .news__row { gap: 32px; }
}

@media (max-width: 1400px) {
  .news__pic { width: 480px; }
}

@media (max-width: 992px) {
  /* 提前堆叠，避免内容列被挤压导致标题/描述截断 */
  .news__inner { padding: 100px 40px 120px; }
  .news__title-area { padding-right: 0; flex-wrap: wrap; gap: 16px; }

  .news__all {
    flex-direction: column;
    gap: 40px;
    margin-top: 56px;
    padding-right: 0;
  }

  .news__line { width: 100%; }

  .news__pic { width: 100%; }

  .news__content { gap: 32px; }
  .news__row { gap: 24px; }
}

@media (max-width: 768px) {
  .news__inner { padding: 80px 20px 90px; }
  .news__title-area { padding-right: 0; flex-wrap: wrap; }

  .news__learn {
    height: 50px;
    padding: 0 24px;
  }

  .news__learn-text {
    font-size: 1rem;
  }

  .news__all {
    flex-direction: column;
    gap: 36px;
    margin-top: 48px;
  }

  .news__pic { display: none; }

  .news__title {
    font-size: clamp(1.5rem, 0.81vw + 1.31rem, 2.75rem);
    line-height: 1.18;
  }

  .news__content { gap: 28px; }
  .news__row { gap: 20px; }

  /* 所有新闻条目默认展开 */
  .news__detail {
    max-height: 200px;
    opacity: 1;
  }

  /* 统一使用第2条（非 active）的灰色样式 */
  .news__item.is-active .news__num {
    color: var(--color-text-secondary);
    font-weight: 600;
  }

  .news__item.is-active .news__title-text {
    color: var(--color-text-secondary);
    font-weight: 600;
  }

  .news__item.is-active + .news__line .news__line-green {
    transform: scaleX(0);
  }

  /* 移动端隐藏摘要小字 */
  .news__desc {
    display: none;
  }
}

@media (max-width: 576px) {
  .news__inner { padding: 64px 16px 72px; }

  .news__learn {
    height: 44px;
    padding: 0 20px;
  }

  .news__learn-text {
    font-size: clamp(0.8125rem, 0.04vw + 0.8rem, 0.875rem);
  }

  .news__all { gap: 28px; margin-top: 36px; }
  .news__content { gap: 22px; }
  .news__row { gap: 16px; }
  .news__detail { margin-top: 12px; }
  .news__desc { margin-top: 12px; }

  .news__title {
    font-size: clamp(1.625rem, 8vw, 2.25rem);
    line-height: 1.18;
  }
}

/* 尊重减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .news__num,
  .news__title-text,
  .news__detail,
  .news__line-green,
  .news__learn,
  .news__learn-shape path {
    transition: none;
  }
}