@import url("https://fonts.googleapis.com/css?family=Quicksand:400,500,700&subset=latin-ext");

[data-theme='light'] { color-scheme: light only; }
[data-theme='dark'] { color-scheme: dark only; }

/* --- 全局基础设置 --- */
html, body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden !important; /* 核心：禁止滚动 */
  font-family: "Quicksand", sans-serif;
  color-scheme: light dark;
}

a, a:hover { text-decoration: none; }

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

.background {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 0;
}
.background:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: light-dark(white, black);
  opacity: 0.9;
}
.background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

/* 动态背景块 */
.item-bg {
  width: 300px;
  height: 500px;
  position: absolute;
  background: light-dark(#EEEEEE, #222222);
  border-radius: 10px;
  box-shadow: 0 6px 26px 6px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: all 0.3s;
  left: -30px;
  z-index: 1;
  pointer-events: none;
}

.item-bg.active {
  left: 0;
  top: 0;
  opacity: 1;
}

.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

/* =========================================
   PC端 (横屏: 宽度 >= 高度) - 修复布局问题
   ========================================= */
@media screen and (orientation: landscape) {
    .wrapper {
        align-items: flex-start;
    }

    .news-slider {
        z-index: 2;
        max-width: 1300px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 60px;
        height: 80vh;
        width: 80%;
        position: relative; /* 确保子元素定位准确 */
    }

    .news-slider__wrp {
        display: flex;
        align-items: flex-start;
        position: relative;
        z-index: 2;
        height: 100%;
    }

    .news-slider__item {
        width: 400px;
        flex-shrink: 0;
        height: 100%;
    }

    /* --- PC 控制器修复：恢复原来的绝对定位布局 --- */
    .news-slider__ctr {
        position: relative; /* 恢复为相对定位，不使用 flex */
        z-index: 12;
        margin-top: 20px;
        width: 100%;
        display: block; /* 强制块级显示，防止 flex 继承 */
    }

    .news-slider__arrows {
        /* PC端箭头容器不需要特殊布局，因为箭头是绝对定位的 */
        position: static;
    }

    /* 左右箭头：PC端绝对定位在两侧 */
    .news-slider__arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 20;
    }
    .news-slider__arrow.news-slider-prev { left: 0px; } /* 移到卡片组左侧 */
    .news-slider__arrow.news-slider-next { right: 0px; } /* 移到卡片组右侧 */


    .news__title { font-size: 3rem; margin-bottom: 10px; }


    .news-slider__pagination {
        text-align: center;
        margin-top: 50px;
    }

    .news__item {
        padding: 40px;
    }

    .news__text {
        font-size: 15px;
        line-height: 2em;
        max-height: 50vh;
        overflow: auto;
    }

    .text_title{
        font-size: 1.3rem;
    }
}

/* =========================================
   手机端 (竖屏: 宽度 < 高度) - 增加左右间距
   ========================================= */
@media screen and (orientation: portrait) {
    .wrapper {
        align-items: stretch;
    }

    .news-slider {
        z-index: 2;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    /* 1. 上半部分：卡片区域 (占用 85%) */
    .news-slider__wrp {
        flex-grow: 1;
        height: 85%;
        display: flex;
        align-items: center;
        position: relative;
        z-index: 2;
    }

    /* --- 修改点：卡片宽度改为 80%，留出左右各 10% 间距 --- */
    .news-slider__item {
        width: 80%; /* 核心修改：左右留白 */
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* 2. 下半部分：控制器区域 (占用 15%) */
    .news-slider__ctr {
        height: 10%;
        position: relative;
        z-index: 12;
        display: flex; /* 手机端使用 Flex 居中 */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: transparent;
    }

    /* 手机端箭头与 PC 端分离 */
    .news-slider__arrows {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none; /* 让点击穿透中间区域 */
    }

    .news-slider__arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 45px;
        height: 45px;
        pointer-events: auto; /* 恢复按钮点击 */
    }
    .news-slider__arrow.news-slider-prev {
        left: 2%;
        top: -400%;
        width: 100px;
        height: 100px;
        align-items: center;
        font-size: 3rem;
     }


    .news-slider__arrow.news-slider-next {
        right: 2%;
        top: -400%;
        width: 100px;
        height: 100px;
        align-items: center;
        font-size: 3rem;
    }

    .news-slider__pagination {
        margin-top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 15;
        width: 200px;
        height: 50px;
    }

    .news__item {
        padding: 25px;
        width: 100%;
        box-sizing: border-box;
        margin-left: 15%;
        margin-right: 15%;
    }

    .news-date__title { font-size: 36px; }
    .news-date__text { font-size: 18px; }
    .news__title { font-size: 3rem; margin-bottom: 30px; }

    .news__text {
        font-size: 1.5rem;
        line-height: 2.5rem;
        max-height: 80vh;
    }

    .news__img {
        margin-top: 20px;
        height: 22vh;
        width: 100%;
    }

    .text_title{
        font-size: 2.2rem;
    }
}


/* --- 通用样式 (复用部分) --- */
.news-slider__item.swiper-slide {
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
}
.news-slider__item.swiper-slide-active,
.news-slider__item.swiper-slide-prev,
.news-slider__item.swiper-slide-next {
  opacity: 1;
  pointer-events: auto;
}

/* 按钮基础样式 */
.news-slider__arrow {
  background: light-dark(#EEEEEE, #222222);
  color: light-dark(#222222, #EEEEEE);
  border: none;
  display: inline-flex;
  width: 50px;
  height: 50px;
  justify-content: center;
  align-items: center;
  box-shadow: 0 6px 26px 6px rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  cursor: pointer;
  outline: none !important;
  /* 注意：position 在各自媒体查询中定义 */
}

.news-slider__pagination .swiper-pagination-bullet {
  width: 13px;
  height: 10px;
  display: inline-block;
  background: light-dark(#222222, #EEEEEE);
  opacity: 0.2;
  margin: 0 5px;
  border-radius: 20px;
  transition: all 0.5s;
}
.news-slider__pagination .swiper-pagination-bullet-active {
  background: #888888;
  opacity: 1;
  width: 100px;
}
@media screen and (orientation: portrait) {
    .news-slider__pagination .swiper-pagination-bullet-active {
        width: 50px;
    }
}

.news__item {
  color: #888888;
  border-radius: 10px;
  display: block;
  transition: all 0.3s;
  background: transparent;
}


@media (hover: hover) and (pointer: fine) {
    .news__item:hover {
        color: #f26422;
    }
    .news__item:hover .news-date,
    .news__item:hover .news__title,
    .news__item:hover .news__text {
        opacity: 1;
    }
    .news__item:hover .news__img {
        box-shadow: none;
    }
    .text_title: hover{
        color: red;
    }
}

.news__item.active { color: light-dark(#888888,#CCCCCC); }
.news__item.active .news-date { color: light-dark(#888888,#EEEEEE); }
.news__item.active .news__title { color: #f26422}
.news__item.active .news__text { opacity: 1; }
.news__item.active .news__img { box-shadow: none; }
.news__item.active .text_title{ color: light-dark(#444444,#EE4000); }

.news-date {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 2px solid;
  display: inline-block;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.news-date__title {
  display: block;
  font-weight: 500;
  font-size: 30px;
}

.news__title {
  font-weight: 500;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.news__text {
  margin: 10px 0;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.news__text::-webkit-scrollbar { width: 4px; }
.news__text::-webkit-scrollbar-track { background: transparent; }
.news__text::-webkit-scrollbar-thumb {
    background-color: #888888;
    border-radius: 10px;
}

.news__img {
  border-radius: 10px;
  box-shadow: 0 6px 26px 6px rgba(0, 0, 0, 0.25);
  transition: all 0.3s;
  overflow: hidden;
}
.news__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}