/* ============================================================
   News 列表（news.html Section 2）
   Figma recommond#section（1920x3200，白底）
   面包屑 + 标签页 + 分隔线/绿色活动条 + 6 张错落新闻卡片 + 分页
   等比缩放：min(vw, px) + 百分比定位
   ============================================================ */

.nw-list {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 2940;   /* 原 3200：底部裁掉水印下方 260px 空白，区块底=水印底 */
  background: var(--color-white);
  overflow: hidden;
}

/* --- 面包屑（设计稿固定定位） --- */
.nw-list__crumb {
  position: absolute;
  top: 40px;
  left: 54px;
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 3;
}

.nw-list__crumb img {
  height: clamp(16px, 1.042vw, 1.25rem);
  width: auto;
}

.nw-list__crumb .nw-list__crumb-arrow {
  height: clamp(12px, 0.729vw, 0.875rem);
}

.nw-list__crumb-link {
  font-family: var(--font-primary);
  font-size: clamp(0.875rem, 0.9375vw, 1.125rem);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: -0.36px;
  color: var(--color-primary);
  text-decoration: none;
  position: relative;
  transition: color var(--duration-base) var(--ease-standard);
}

.nw-list__crumb-link::before {
  content: "";
  position: absolute;
  inset: -14px;
}

.nw-list__crumb-link:hover {
  color: var(--color-primary-dark);
}

.nw-list__crumb-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --- 标签页（Figma x=575, y=239，间距 100） --- */
.nw-tabs {
  position: absolute;
  left: 29.95%;                      /* 575/1920 */
  top: 5.07%;                        /* 149/2940：整组上移后按新画布高换算 */
  display: flex;
  gap: min(5.21vw, 100px);           /* 100/1920 */
  z-index: 2;
}

.nw-tab {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-primary);
  font-weight: 400;                  /* 全端统一（原 300） */
  font-size: min(1.667vw, 2rem);     /* 32/1920 */
  color: var(--color-text-secondary); /* #666666（原 var(--color-text-muted) #999999） */
  white-space: nowrap;
  position: relative;
  transition: color var(--duration-base) var(--ease-standard);
}

/* 触控目标扩展至 ≥44px */
.nw-tab::before {
  content: "";
  position: absolute;
  inset: -7px;
}

.nw-tab:hover {
  color: var(--color-primary);
}

.nw-tab.is-active {
  font-weight: 600;
  color: var(--color-primary);
}

.nw-tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --- 分隔线 + 绿色活动条（Figma line y=314, bar 263x5 y=311） --- */
.nw-tabs__rule {
  position: absolute;
  left: 7.29%;                       /* 140/1920 */
  top: 7.52%;                        /* 221/2940：随标签页（按新画布高换算） */
  width: 85.36%;                     /* 1639/1920 */
  height: 5px;
  border-top: 1px solid var(--color-placeholder);
}

.nw-tabs__bar {
  position: absolute;
  top: -1px;
  left: 0;
  width: min(13.7vw, 263px);         /* 263/1920 */
  height: 5px;
  background: var(--color-secondary); /* var(--color-secondary) */
  transition: left var(--duration-slow) var(--ease-standard);
}

/* --- 新闻卡片（2 列错落：Figma col1 x=211 y=478/1315/2152，col2 x=1035 y=612/1449/2286） --- */
.nw-card {
  position: absolute;
  display: block;                    /* a 标签需 block 应用宽 */
  text-decoration: none;
  width: 36.46%;                     /* 700/1920 */
  overflow: hidden;
  border-radius: var(--radius-md);
}

.nw-card__img {
  width: 100%;
  aspect-ratio: 700 / 395;   /* Figma #591:20159 700×395 ≈ 16:9 */
  border-radius: var(--radius-md);
  object-fit: cover;
  display: block;
  transition: transform var(--duration-base) var(--ease-standard);
}

.nw-card:hover .nw-card__img {
  transform: scale(1.05);
}

.nw-card__body {
  margin-top: min(1.302vw, 25px);    /* 25/1920 */
}

.nw-card__date {
  display: block;
  font-family: var(--font-primary);
  font-weight: 400;                  /* 全端统一（原 300） */
  font-size: min(0.9375vw, 1.125rem);    /* 18/1920 */
  line-height: min(2.083vw, 2.5rem);   /* 40/1920 */
  letter-spacing: -0.02em;
  color: var(--color-text-secondary); /* #666666（原 var(--color-text-muted) #999999） */
}

.nw-card__title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: min(1.25vw, 1.5rem);      /* 24/1920 */
  line-height: min(2.083vw, 2.5rem);   /* 40/1920 */
  letter-spacing: -0.02em;
  color: var(--color-text-secondary);
  transition: color var(--duration-base) var(--ease-standard);
}

.nw-card:hover .nw-card__title {
  color: var(--color-primary);
}

/* --- 底部 WELL-T 水印（同 products.html，贴左贴底；画布高度已裁至水印底边） --- */
.nw-list__watermark {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 940px;
  max-width: 100%;
  pointer-events: none;
}

/* --- 分页（Figma x=780, y=3052，间距 36） --- */
.nw-pager {
  position: absolute;
  left: 40.63%;                      /* 780/1920 */
  top: 87.92%;                       /* 2585/2940：按新画布高换算 */
  display: flex;
  align-items: center;
  gap: min(1.875vw, 2.25rem);           /* 36/1920 */
  z-index: 2;
}

.nw-pager__arrow {
  font-family: var(--font-primary);
  font-size: min(1.25vw, 1.5rem);      /* 24/1920 */
  color: var(--color-black);
  text-decoration: none;
  position: relative;
  transition: color var(--duration-base) var(--ease-standard);
}

.nw-pager__arrow::before {
  content: "";
  position: absolute;
  inset: -9px -16px;
}

.nw-pager__arrow:hover {
  color: var(--color-primary);
}

.nw-pager__num {
  font-family: var(--font-primary);
  font-size: min(1.25vw, 1.5rem);      /* 24/1920 */
  color: var(--color-text);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: var(--radius-md);
  position: relative;
  transition: color var(--duration-base) var(--ease-standard),
              background var(--duration-base) var(--ease-standard);
}

.nw-pager__num::before {
  content: "";
  position: absolute;
  inset: -9px;
}

.nw-pager__num:hover {
  color: var(--color-primary);
}

.nw-pager__num--active {
  background: var(--color-primary);
  color: var(--color-white);
}

.nw-pager__num--active:hover {
  color: var(--color-white);
  background: var(--color-primary-dark);
}

/* ==================== 响应式（1200 以下移动端布局） ==================== */
@media (max-width: 1200px) {
  .nw-list {
    aspect-ratio: auto;
    padding: 120px 0 190px;   /* 底部留白加大：水印(随宽缩放,最大~145px)上方留出间距 */
  }

  .nw-list__crumb {
    top: 24px;
    left: var(--container-padding);
  }

  .nw-tabs {
    position: static;
    justify-content: center;
    padding: 0 var(--container-padding);
    flex-wrap: nowrap;    /* 三个标签保持同一行 */
    gap: 24px;
  }

  .nw-tab {
    font-size: clamp(1rem, 0.4vw + 0.91rem, 1.625rem);
  }

  .nw-tabs__rule {
    position: relative;   /* 不能用 static：内部绿色活动条是 absolute，需要 rule 作定位上下文 */
    left: auto;           /* 重置 PC absolute 定位残留（left 7.29% 会把灰线推右） */
    top: auto;
    width: 100%;          /* 灰线贯穿左右全宽 */
    margin: 40px 0 64px;
  }

  .nw-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    padding: 0 var(--container-padding);
  }

  .nw-card {
    position: static;
    width: 100%;
    max-width: 640px;
  }

  .nw-card__date {
    font-size: 1rem;
    line-height: 1.5;
  }

  .nw-card__title {
    font-size: clamp(0.9375rem, 0.28vw + 0.87rem, 1.375rem);
    line-height: 1.5;
  }

  .nw-pager {
    position: static;
    justify-content: center;
    margin-top: 64px;
  }

  .nw-pager__arrow,
  .nw-pager__num {
    font-size: clamp(0.9375rem, 0.28vw + 0.87rem, 1.375rem);
  }
}

@media (max-width: 768px) {
  .nw-list {
    padding: 100px 0 110px;   /* 底部留白加大：水印上方留出间距 */
  }

  .nw-tabs__rule {
    margin: 32px auto 48px;
  }

  .nw-cards {
    gap: 40px;
  }

  .nw-tab {
    font-size: 1rem;
  }

  .nw-tabs {
    gap: 16px;
  }

  .nw-card__title {
    font-size: clamp(1rem, 0.16vw + 0.96rem, 1.25rem);
    line-height: 1.5;
  }

  .nw-card__date {
    font-size: clamp(0.875rem, 0.04vw + 0.87rem, 0.9375rem);
  }

  .nw-pager__arrow,
  .nw-pager__num {
    font-size: clamp(1rem, 0.16vw + 0.96rem, 1.25rem);
  }
}

/* ==================== 无障碍降级 ==================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}