/* footer.css */

/* 分类模块样式 */
.category-section {
  background-color: #F2F2F7 !important;
  padding: 15px 0;
  margin-top: 70px;
}

.category-list {
  display: flex;
  gap: 15px;
  align-items: center;
  overflow-x: auto;
  padding-bottom: 15px;
  /*scrollbar-width: none; !* 隐藏Firefox滚动条 *!*/
}

/* WebKit浏览器滚动条样式 */
.category-list::-webkit-scrollbar {
  height: 8px; /* 滚动条高度 */
}

.category-list::-webkit-scrollbar-track {
  background: rgba(153, 153, 153, 0.1); /* 滚动条轨道颜色，使用浅灰色 */
  border-radius: 4px;
}

.category-list::-webkit-scrollbar-thumb {
  background: #999999; /* 滚动条颜色设置为 #999999 */
  border-radius: 4px;
  border: 2px solid transparent;
}

.category-list::-webkit-scrollbar-thumb:hover {
  background: #666666; /* 滚动条悬停时的颜色 */
}

.category-item {
  display: inline-block;
  padding: 10px 20px;
  background-color: #FFFFFF !important;
  color: #3D3D3D !important;
  text-decoration: none;
  line-height: 13px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0; /* 防止项目收缩 */
}

.category-item:hover {
  background-color: #ff55a5 !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 轮播图项样式 */
.home {
  margin-top: 0; /* 原来的 70px 移到 category-section */
  background-color: #F2F2F7;
  padding: 0;
}
.hero__content {
  height: 400px;
}
.hero.splide:not(.is-initialized) .splide__list {
  visibility: hidden;
  height: 400px; /* 保持占位高度 */
}

/* 初始化完成后显示 */
.hero.splide.is-initialized .splide__list {
  visibility: visible;
}
/* 轮播图标题 */
.hero__title {
  color: #FFFFFF !important;
}

.hero__text {
  color: #c7c7c7 !important;
}

.hero__category {
  color: #999999;
}

.splide--content .splide__arrow svg {
  fill: #333333;
}
.splide--hero .splide__arrow {
  display: none;
}

/* 第一个模块 */
#first__section {
  height: 368px;
}

#first__section .item {
  width: 160px;
}
#first__section .item__img {
  height: 223px;
  width: 100%;
}

#first__section .item--carousel .item__cover {
  height: 223px;
  width: 100%;
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 4px;
}

#first__section .item--carousel .item__cover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
}

#first__section .item--carousel .item__cover:hover img {
  transform: scale(1.05);
}

/*标题*/
#first__section .item--carousel .item__title a {
  display: flex;
  align-items: center;
  letter-spacing: 0;

  /*font-variation-settings: "opsz" auto;*/
  font-feature-settings: "kern" on;
  /* 安全黑 */
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 54px;
  word-wrap: break-word; /* 确保长单词也能正确换行 */
  word-break: keep-all; /* 在合适的位置换行，保持单词完整 */
  hyphens: auto; /* 自动添加连字符 */
  width: 160px;
  height: 54px;
  font-family: Roboto, Roboto;
  font-weight: 700;
  font-size: 18px;
  color: #333333;
  line-height: 27px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

/*作者*/
#first__section .item--carousel .item__category  {
  display: flex;
  align-items: center;
  letter-spacing: 0;

  /*font-variation-settings: "opsz" auto;*/
  font-feature-settings: "kern" on;

  font-family: Roboto, Roboto;
  font-weight: 400;
  font-size: 14px;
  color: #999999;
  line-height: 14px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
/*标签*/
#first__section .item--carousel .item__tags {
  margin-top: 10px;
  margin-bottom: 8px;
  justify-content: center;
}
/*标签*/
#first__section .item--carousel .item__tag {
  padding: 3px 6px;
  height: 14px;
  font-family: Roboto, Roboto;
  font-weight: 400;
  font-size: 14px;
  color: #999999;
  line-height: 14px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

/*第二个模块*/

#second-title {
  margin-bottom: 0;
  margin-top: 75px;
}

#tab-1 .item--list {
  background-color: #FFFFFF !important;
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

#tab-1 .item--list:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

#tab-1 .item__row {
  display: flex;
  flex-direction: row;
  height: 215px;
  width: 95%;
}
#tab-1 .col-md-6 {
  flex: 0 0 50%;
  max-width: 100%;
  padding: 10px 10px;
}

/*左侧图片*/
#tab-1 .item__cover-wrapper {
  flex: 0 0 153px;
  position: relative;
}
#tab-1 .item__cover {
  width: 153px;
}

#tab-1 .item__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}


#tab-1 .item__cover:hover img {
  transform: scale(1.05);
}

#tab-1 .item__cover {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
}

/* Latest模块内容区域样式 */
#tab-1 .item__content {
  flex: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

#tab-1 .item__title a {
  width: 376px;
  height: 52px;
  font-family: Roboto, Roboto;
  font-weight: 700;
  font-size: 20px;
  color: #333333;
  line-height: 26px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  /* 安全黑 */
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 52px;
  word-wrap: break-word; /* 确保长单词也能正确换行 */
  word-break: keep-all; /* 在合适的位置换行，保持单词完整 */
  hyphens: auto; /* 自动添加连字符 */
}

#tab-1 .item__title a:hover {
  color: #ff55a5;
}

/* Latest模块作者信息样式 */
#tab-1 .item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

#tab-1 .item__author {
  width: 376px;
  height: 14px;
  font-family: Roboto, Roboto;
  font-weight: 400;
  font-size: 14px;
  color: #999999;
  line-height: 14px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

#tab-1 .item__description {
  flex-grow: 1;
  display: block !important;
}

#tab-1 .item__description p {
  margin: 0;
  display: block;
  opacity: 1;
  visibility: visible;
  min-height: 1em;
  width: 376px;
  height: 76px;
  font-family: Roboto, Roboto;
  font-weight: 400;
  font-size: 16px;
  color: #666666;
  line-height: 24px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

#tab-1 .item__category {
  margin-bottom: 15px;
  font-size: 13px;
  color: #999999 !important;
}

#tab-1 .item__category a {
  color: #ff55a5;
  text-decoration: none;
  margin-right: 10px;
}

#tab-1 .item__category a:hover {
  text-decoration: underline;
}



#tab-1 .item__tags {
  margin-top: 10px;
  margin-bottom: 10px;
}

#tab-1 .item__tag {
  font-size: 11px;
  line-height: 11px;
  padding: 3px 6px;
}



#tab-1 .item__stats {
  margin-top: 6px;
}

#tab-1 .item__stat {
  font-size: 14px;
}

#tab-1 .item__stat svg {
  width: 14px;
  height: 12px;
}
/* 轮播图项的额外样式 */
.splide__slide .item--carousel,
.splide__slide .item {
  height: 100%;
}
.splide--hero .splide__pagination__page {
  background: #9E6DFC;
}

.section {
  padding: 5px 0;
}
.splide--content .splide__pagination__page {
  background: #9E6DFC;
  display: none;
}
/* 标签样式 - 统一处理所有标签 */
.item__tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  padding-bottom: 5px;
  scrollbar-width: none;
  height: 22px;
}

.item__tags::-webkit-scrollbar {
  display: none;
}

.item__tag {
  display: inline-block;
  background-color: rgba(153, 153, 153, 0.1);
  padding: 5px 10px;
  border-radius: 4px;
  letter-spacing: 0em;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: Roboto, Roboto;
  font-weight: 400;
  font-size: 14px;
  color: #999999;
  line-height: 14px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.item__stats {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  font-size: 11px;
  color: #999;
}

.item__stat {
  display: flex;
  align-items: center;
  gap: 4px;
}

.item__stat svg {
  width: 12px;
  height: 12px;
  fill: #999999 !important;
}

.item__stat span {
  color: #999999 !important;
}

.item--carousel .item__stats {
  justify-content: center;
  margin-top: 4px;
}

.item--carousel .item__stat {
  font-size: 14px;
}

.item--carousel .item__stat svg {
  width: 14px;
  height: 12px;
}



/* 覆盖原有的深色主题样式 */
.section--dark {
  background-color: #F2F2F7 !important;
}

.content__head {
  background-color: #F2F2F7 !important;
}

.content__head:before {
  background: linear-gradient(90deg, #ff55a5 0%, #ff5860 100%) !important;
  box-shadow: 0 0 20px 0 rgba(255,88,96,0.5) !important;
}

.content__title {
  color: #333333 !important;
}



/* Trending 标题 */
.section__title {
  color: #333333 !important;
}

/* Latest 模块标题 */
#latest-title {
  color: #333333 !important;
}

/* 修复轮播图背景问题 */
.home--bg:before {
  background: none !important;
  opacity: 1 !important;
}

/* 修复整体背景色 */
body, html {
  background-color: #F2F2F7 !important;
}

/* 修复内容区域背景色 */
.content {
  background-color: #F2F2F7 !important;
}

#view-more-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 56px;
  width: 160px;
  border-radius: 8px;
  background: linear-gradient(90deg, #ff5860 0%, #ff55a5 100%);
  box-shadow: 0 0 16px 0 rgba(255, 88, 96, 0.3);
  margin: 50px auto 0;
  position: relative;
}
#view-more-btn img  {
  content: url('../img/show_more.png');
}