/**
 * @file index_news.css
 * @description 品牌资讯板块样式 (包含桌面端手风琴+弹幕系统、移动端专属横滑卡片流)
 */

 .news_container {
    position: relative;
    z-index: 20;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 7.347svh;
    background: transparent;
}

.news_container .news_title {
    position: relative;
    font-size: 3.75vw;
    color: #313131;
    line-height: 1;
    background: linear-gradient(148deg, #0D0707 0%, #E8380D 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 11vh 0 3.5vh;
    margin: 11svh 0 3.5svh;
    font-weight: normal;
}

.news_container .news_main {
    position: relative;
    width: 80%;
    background-color: #fff;
    border-radius: 2vw;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.news_container .news_main .news_list {
    position: relative;
    width: 50%;
    display: flex;
    flex-direction: column;
    padding: 10.816vh 8.906vw 5.204vh 4.792vw;
    padding: 10.816svh 8.906vw 5.204svh 4.792vw;
    box-sizing: border-box;
}

.news_container .news_main .news_list .info {
    position: relative;
    width: 100%;
    height: 48vh;
    height: 48svh;
    overflow: hidden;
    margin-bottom: 3.5vh;
    margin-bottom: 3.5svh;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
}

.news_container .news_swiper {
    touch-action: pan-x !important;
    user-select: none;
}

.news_container .news_swiper .swiper-wrapper {
    will-change: transform;
    box-sizing: border-box;
}

.news_container .news_swiper .item .info_news_title {
    font-size: 3.06vh;
    font-size: 3.06svh;
    color: #B3B3B3;
    line-height: 1.2;
    margin: 1.2vh 0;
    margin: 1.2svh 0;
    transition: color 0.4s ease, margin 0.4s ease;
}

.news_container .news_swiper .item.active .info_news_title {
    color: #313131;
    margin: 0.5vh 0 1.8vh;
    margin: 0.5svh 0 1.8svh;
}

.news_container .news_swiper .swiper-slide.item {
    height: auto !important;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    box-sizing: border-box;
    padding: 0.5vh 0;
    padding: 0.5svh 0;
    user-select: none;
}

.news_container .news_swiper .item .info_time {
    font-size: 1.8vh;
    font-size: 1.8svh;
    color: #E8380D;
    line-height: 1;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    transition: 
        max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.22s ease,
        margin 0.32s ease;
}

.news_container .news_swiper .item .info_news_text {
    font-size: 1.8vh;
    font-size: 1.8svh;
    color: #1A1A1A;
    line-height: 2;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    transition: 
        max-height 0.36s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.22s ease,
        margin 0.36s ease;
}

.news_container .news_swiper .item.active .info_time {
    max-height: 3vh;
    max-height: 3svh;
    opacity: 1;
    margin-bottom: 1.2vh;
    margin-bottom: 1.2svh;
    transition: 
        max-height 0.42s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.35s ease,
        margin 0.35s ease;
}

.news_container .news_swiper .item.active .info_news_text {
    max-height: 15vh; 
    max-height: 15svh; 
    opacity: 1;
    margin-top: 0;
    transition: 
        max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.35s ease;
}

/* 右侧画廊与弹幕系统 */
.news_container .news_main .news_img_container {
    position: relative;
    width: 50%;
    align-self: stretch;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.news_container .news_main .news_img_container .img_list {
    position: relative;
    width: 86%;
    height: 35.7vh;
    height: 35.7svh;
    border-radius: 1.5vw;
    overflow: hidden;
    background-color: #EEEFF1;
}

.news_container .news_main .news_img_container .img_list .item {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.06);
    transition: 
        opacity 0.65s cubic-bezier(0.25, 1, 0.5, 1),
        transform 0.85s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
    will-change: opacity, transform;
}

.news_container .news_main .news_img_container .img_list .item.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    z-index: 1;
}

.news_container .news_main .news_img_container .bullet_chat {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 80%;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}

.news_container .news_main .news_img_container .bullet_chat .bullet_group {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: 
        opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1),
        visibility 0.5s ease;
}

.news_container .news_main .news_img_container .bullet_chat .bullet_group.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}

.news_container .news_main .news_img_container .bullet_chat .item {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(100vh);
    transform: translateY(100svh);
    opacity: 0;
    font-size: 2.1vh;
    font-size: 2.1svh;
    color: #313131;
    background-color: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 999px;
    padding: 1.3vh 2.8vw;
    padding: 1.3svh 2.8vw;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 1vh 2.5vh rgba(0, 0, 0, 0.08);
    box-shadow: 0 1svh 2.5svh rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    will-change: transform, opacity;
    user-select: none;
    pointer-events: auto;
}

.news_container .news_main .news_img_container .bullet_chat .item .color_ {
    color: #E85E39;
    font-weight: bold;
    margin-left: 0.3vw;
}

/* =========================================================================
   【移动端专属效果图横滑卡片流】
   ========================================================================= */
@media (min-width: 769px) {
    .mobile_news_slider {
        display: none !important;
    }
}

@media (max-width: 996px) {
    .news_container {
        padding-bottom: 8vh !important;
        padding-bottom: 8svh !important;
        background: transparent !important;
    }

    .news_container .news_title {
        font-size: 6.8vw !important;
        margin: 8vw 0 6vw !important;
        color: #1A1A1A !important;
        font-weight: 800;
        text-align: center;
        background: none !important;
        -webkit-text-fill-color: initial !important;
    }

    .news_container .news_title .highlight_text {
        color: #E8380D;
    }

    .desktop_news_layout {
        display: none !important;
    }

    .mobile_news_slider {
        display: block !important;
        width: 100%;
        overflow: hidden;
    }

    .mobile_news_swiper {
        width: 100%;
        padding: 0 5vw !important;
        box-sizing: border-box;
        overflow: visible !important;
    }

    .mobile_news_slider .mobile_card {
        width: 82vw !important;
        background: #FFFFFF;
        border-radius: 4vw;
        overflow: hidden;
        box-shadow: 0 2vw 5vw rgba(0, 0, 0, 0.06);
    }

    .mobile_news_slider .mobile_card .img_wrap {
        width: 100%;
        height: 48vw;
        overflow: hidden;
        background: #E8E8E8;
    }

    .mobile_news_slider .mobile_card .img_wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mobile_news_slider .mobile_card .content_wrap {
        padding: 4vw 4.5vw;
        box-sizing: border-box;
    }

    .mobile_news_slider .mobile_card .content_wrap .time {
        font-size: 3vw;
        color: #E8380D;
        display: block;
        margin-bottom: 1.5vw;
    }

    .mobile_news_slider .mobile_card .content_wrap .title {
        font-size: 4.8vw;
        font-weight: 700;
        color: #1A1A1A;
        margin-bottom: 2vw;
    }

    .mobile_news_slider .mobile_card .content_wrap .desc {
        font-size: 3.2vw;
        color: #666666;
        line-height: 1.6;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mobile_news_slider .mobile_news_btn {
        display: flex;
        justify-content: center;
        margin-top: 6vw;
    }
}