/* 新闻资讯列表 + 详情 */



.news-page-main {

  padding-block: var(--section-spacing-y);

}



.news-tabs {

  display: flex;

  flex-wrap: wrap;

  gap: 10px 16px;

  margin-bottom: var(--stack-md);

  padding-bottom: var(--stack-sm);

  border-bottom: 1px solid var(--border-color);

}



.news-tab {

  border: none;

  background: transparent;

  font-size: var(--fs-body);

  font-family: inherit;

  color: var(--text-gray);

  cursor: pointer;

  padding: 0.35em 0;

  position: relative;

}



.news-tab.is-active {

  color: var(--primary-color);

  font-weight: 700;

}



.news-tab.is-active::after {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  bottom: -0.55em;

  height: 2px;

  background: var(--primary-color);

}



.news-list-meta {

  font-size: var(--fs-small);

  color: var(--text-gray);

  margin-bottom: var(--stack-sm);

}



/* 卡片网格：一行 4 个 */

.news-list-page {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: var(--stack-md);

}



.news-grid-empty {

  grid-column: 1 / -1;

}



.news-card {

  display: flex;

  flex-direction: column;

  background: #fff;

  border: 1px solid var(--border-color);

  border-radius: 6px;

  overflow: hidden;

  text-decoration: none;

  color: inherit;

  transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;

  height: 100%;

}



.news-card:hover {

  border-color: rgba(255, 85, 0, 0.35);

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);

  transform: translateY(-2px);

}



.news-card__thumb {

  aspect-ratio: 16 / 10;

  background: #eef1f5;

  overflow: hidden;

}



.news-card__thumb img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



.news-card__thumb-placeholder {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  height: 100%;

  font-size: var(--fs-small);

  color: #999;

}



.news-card__body {

  display: flex;

  flex-direction: column;

  flex: 1;

  padding: 14px 16px 16px;

  min-width: 0;

}



.news-card__tag {

  display: inline-block;

  align-self: flex-start;

  padding: 2px 8px;

  border-radius: 2px;

  font-size: 12px;

  font-weight: 600;

  background: var(--primary-light);

  color: var(--primary-color);

  margin-bottom: 8px;

}



.news-card__title {

  font-size: 16px;

  font-weight: 700;

  color: var(--text-main);

  line-height: 1.45;

  margin: 0 0 8px;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.news-card__excerpt {

  font-size: var(--fs-small);

  color: var(--text-gray);

  line-height: 1.65;

  margin: 0 0 10px;

  flex: 1;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.news-card__date {

  font-size: 12px;

  color: #aaa;

  margin-top: auto;

}



.news-pagination {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 6px;

  margin-top: var(--stack-md);

}



.news-page-btn {

  min-width: 36px;

  height: 36px;

  padding: 0 10px;

  border: 1px solid #dcdfe6;

  border-radius: 4px;

  background: #fff;

  font-family: inherit;

  font-size: var(--fs-body);

  cursor: pointer;

}



.news-page-btn.is-active {

  background: var(--primary-color);

  border-color: var(--primary-color);

  color: #fff;

}



.news-page-btn:disabled {

  opacity: 0.45;

  cursor: not-allowed;

}



/* ---------- 详情 ---------- */

.news-detail-main {

  padding-block: var(--section-spacing-y);

}



.news-detail-card {

  background: #fff;

  border: 1px solid var(--border-color);

  border-radius: 4px;

  padding: var(--stack-md);

  margin-bottom: var(--stack-md);

}



.news-detail-card h1 {

  font-size: clamp(22px, 3vw, 30px);

  font-weight: 800;

  line-height: 1.4;

  margin: 0 0 0.65em;

  color: var(--text-main);

}



.news-detail-meta {

  display: flex;

  flex-wrap: wrap;

  gap: 12px 20px;

  font-size: var(--fs-small);

  color: var(--text-gray);

  margin-bottom: var(--stack-md);

  padding-bottom: var(--stack-sm);

  border-bottom: 1px solid #eef0f3;

}



.news-detail-cover {

  margin-bottom: var(--stack-md);

  border-radius: 4px;

  overflow: hidden;

}



.news-detail-cover img {

  width: 100%;

  max-height: 420px;

  object-fit: cover;

}



.news-detail-content {

  font-size: var(--fs-body);

  color: var(--text-main);

  line-height: 1.85;

}



.news-detail-content p {

  margin: 0 0 1em;

}



.news-detail-nav {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: var(--stack-sm);

  margin-top: var(--stack-md);

}



.news-detail-nav a {

  display: block;

  padding: 14px 16px;

  border: 1px solid var(--border-color);

  border-radius: 4px;

  background: #fff;

  text-decoration: none;

  color: inherit;

  transition: border-color 0.2s, color 0.2s;

}



.news-detail-nav a:hover {

  border-color: var(--primary-color);

  color: var(--primary-color);

}



.news-detail-nav a.is-empty {

  opacity: 0.45;

  pointer-events: none;

}



.news-detail-nav__cell--next {

  text-align: right;

}



.news-detail-nav__empty {

  display: block;

  padding: 14px 16px;

  border: 1px solid var(--border-color);

  border-radius: 4px;

  background: #fafafa;

  color: var(--text-gray);

  opacity: 0.65;

  cursor: default;

  pointer-events: none;

  user-select: none;

}



.news-detail-nav__label {

  display: block;

  font-size: 12px;

  color: var(--text-gray);

  margin-bottom: 4px;

}



.news-detail-nav__title {

  font-size: var(--fs-body);

  font-weight: 600;

  line-height: 1.5;

}



@media (max-width: 1199px) {

  .news-list-page {

    grid-template-columns: repeat(3, minmax(0, 1fr));

  }

}



@media (max-width: 991px) {

  .news-list-page {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}



@media (max-width: 767px) {

  .news-list-page {

    grid-template-columns: 1fr;

  }



  .news-detail-nav {

    grid-template-columns: 1fr;

  }

}

