/* ===== page news-newsindex (compiled from Vue SCSS) ===== */
@charset "UTF-8";
.font-weight-500 {
  font-weight: 500;
}

.align-self-start {
  align-self: flex-start;
}

.mt-auto {
  margin-top: auto;
}

.tag-primary-light {
  background-color: #eaf6f2;
  color: #0b6b5a;
  padding: 2px 10px;
  border-radius: 4px;
}

/* Featured News*/
.featured-news .card {
  overflow: hidden;
  cursor: pointer;
}
.featured-news .featured-img {
  width: 50%;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.featured-news .featured-content {
  width: 50%;
}

.action-btn {
  transition: all 160ms ease;
}
.action-btn:active {
  transform: scale(0.96) translateY(2px);
}

.view-category-btn {
  border-radius: 20px;
  padding: 0 16px;
  height: 36px;
  line-height: 34px; /* 36px - 2px border */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 14px;
  border-color: #0b6b5a;
  color: #0b6b5a;
  background-color: transparent;
}
.view-category-btn:hover {
  background-color: #0b6b5a;
  color: #ffffff;
}

/* Tabs*/
.news-tabs {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: center;
  height: 40px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.news-tabs::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}
.news-tabs .tab-btn {
  background: none;
  border: none;
  padding: 0 0 8px 0;
  color: #66736e;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color 0.3s ease;
}
.news-tabs .tab-btn:hover {
  color: #0b6b5a;
}
.news-tabs .tab-btn.active {
  color: #0b6b5a;
  font-weight: 600;
}
.news-tabs .tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #0b6b5a;
}

/* Filters*/
.news-filters .search-input-group {
  display: flex;
  position: relative;
}
.news-filters .search-input-group .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #66736e;
}
.news-filters .search-input-group .search-input {
  width: 200px;
  padding-left: 36px; /* 为图标留出空间*/
  border-radius: 4px 0 0 4px;
  border-right: none;
  height: 40px;
  outline: none;
  background-color: #ffffff;
}
.news-filters .search-input-group .search-input.has-clear-btn {
  padding-right: 40px; /* 为清空按钮及间距留出更多空间*/
}
.news-filters .search-input-group .search-input:focus {
  outline: none;
  box-shadow: none;
  border-color: #d9e5e0; /* 保持原有边框颜色*/
}
.news-filters .search-input-group .clear-input-btn {
  position: absolute;
  right: 84px; /* 增大距离，与右侧搜索按钮拉开间距 (原为76px)*/
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #66736e;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  transition: color 0.2s ease;
}
.news-filters .search-input-group .clear-input-btn:hover {
  color: #0b6b5a;
}
.news-filters .search-input-group .search-btn {
  border-radius: 0 4px 4px 0;
  height: 40px;
  margin: 0; /* 确保没有外边距干扰*/
  padding: 0 20px; /* 保持左右内边距*/
  background-color: #0b6b5a;
  color: #ffffff;
  border: 1px solid #0b6b5a;
  transition: all 160ms ease;
  outline: none;
}
.news-filters .search-input-group .search-btn:hover {
  background-color: #ffffff;
  color: #0b6b5a;
}
.news-filters .search-input-group .search-btn:focus {
  outline: none;
  box-shadow: none;
}

/* News Card Override if needed*/
.news-card-override .bg-primary-dark {
  background-color: #0b2f2a;
}
.news-card-override .text-white {
  color: #ffffff;
}
.news-card-override .filter-select {
  width: 100px;
  height: 40px;
  outline: none;
}
.news-card-override .filter-select:focus {
  outline: none;
  box-shadow: none;
  border-color: #d9e5e0; /* 保持原有边框颜色*/
}
.news-card-override .text-truncate-lines-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  margin: 0;
}
.news-card-override .text-truncate-lines-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  margin: 0;
}
.news-card-override .featured-title-wrapper {
  /* text-h2 的默认 font-size 是 30px，line-height 是 1.3，2行高度为 78px*/
  height: 78px;
}
.news-card-override .featured-desc-wrapper {
  height: 75px; /* 假设 14px 字体，line-height-lg=1.8 (约25px)，3 行就是 75px*/
}
.news-card-override .news-title-wrapper {
  height: 48px; /* 假设 text-h4 line-height 约 24px，2行 48px*/
}
.news-card-override .news-desc-wrapper {
  height: 42px; /* 假设 text-sm line-height 约 21px，2行 42px*/
}
.news-card-override {
  /* ==========================================*/
  /* 滚动显示动效 (Reveal Animations)*/
  /* ==========================================*/
}
.news-card-override .reveal-up {
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.24s ease, border-color 0.24s ease;
}
.news-card-override .reveal-up.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.news-card-override .hero-content.is-first-enter .hero-title,
.news-card-override .hero-content.is-first-enter .hero-desc {
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; will-change: transform, opacity;
  opacity: 0;
}
.news-card-override .hero-content.is-first-enter .hero-desc {
  animation-delay: 0.2s;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reverted from utilities.scss */
.py-8 {
  padding-top: 48px;
  padding-bottom: 80px;
}

.mb-6 {
  margin-bottom: 48px;
}

.mb-4 {
  margin-bottom: 24px;
}

.text-secondary {
  color: #66736e;
}

.text-sm {
  font-size: 14px;
}

.line-height-lg {
  line-height: 1.8;
}

.cursor-pointer {
  cursor: pointer;
}

.hover-primary {
  transition: color 0.3s;
}
.hover-primary:hover {
  color: #0b6b5a;
}

.p-5 {
  padding: 32px;
}

.mb-10 {
  margin-bottom: 40px;
}

.d-flex {
  display: flex;
}

.align-items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.mr-3 {
  margin-right: 16px;
}

.text-xs {
  font-size: 12px;
}

.bg-light {
  background-color: #f7faf9;
}

.flex-column {
  flex-direction: column;
}

.justify-between {
  justify-content: space-between;
}

.gap-4 {
  gap: 24px;
}

.gap-5 {
  gap: 32px;
}

.mt-8 {
  margin-top: 80px;
}

/* Reverted responsive */
@media (max-width: 1199px) {
  .featured-news .card {
    flex-direction: column;
  }
}
@media (max-width: 1199px) {
  .featured-news .featured-img {
    width: 100%;
    min-height: 200px;
  }
}
@media (max-width: 1199px) {
  .featured-news .featured-content {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .news-filters {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .news-filters .news-tabs {
    width: 100%;
  }
  .news-filters .filter-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .news-filters .filter-actions .view-category-btn {
    width: 100%; /* 按钮占满宽度*/
  }
  .news-filters .filter-actions .search-input-group {
    width: 100%;
  }
  .news-filters .filter-actions .search-input-group .search-input {
    width: 100%; /* 搜索框占满剩余宽度*/
  }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  .news-card-override .featured-title-wrapper {
    height: 73px; /* desktop 下 font-size 为 28px，2行约为 73px*/
  }
}
@media (max-width: 767px) {
  .news-card-override .featured-title-wrapper {
    height: 63px; /* mobile 下 font-size 为 24px，2行约为 63px*/
  }
}