.first {
    height: 7.6rem;
    background-image: url('../assets/images/news/first-img.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-left: 1.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.first h2 {
    color: #FFF;
    font-family: Montserrat;
    font-size: 0.48rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 0.2rem;
    width: 8rem;
}

.first p {
    color: #FFF;
    font-family: Montserrat;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    width: 6.5rem;
    line-height: 150%;
    /* 24px */
    text-transform: capitalize;
}
/* ---------- H5 适配 ---------- */
html[data-mode="h5"] .first {
    height: 4.6rem;
    padding: 0.8rem 0.24rem 0;
    background-size: cover;
}

html[data-mode="h5"] .first h2 {
    font-size: 0.36rem;
    margin-bottom: 0.16rem;
    width: 5rem;
}

html[data-mode="h5"] .first p {
    font-size: 0.14rem;
}

/* H5 下忽略桌面端的强制换行，避免窄屏断句生硬 */
html[data-mode="h5"] .first p br {
    display: none;
}

/* ============================================================
   第二屏：新闻卡片网格（3×2）
   设计稿基准：1920，padding 100 160（1rem = 100px）
   ============================================================ */
.second {
    width: 100%;
    max-width: 19.2rem;
    margin: 0 auto;
    padding: 1rem 1.6rem; /* 100px 160px */
    box-sizing: border-box;
    overflow: hidden;
}

.second__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem; /* 间隔 50px：3×500 + 2×50 = 1600 */
}

.second__card {
    width: 5rem; /* 500px */
    height: 5.72rem; /* 302 + 270 */
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s ease;
}

.second__card-img {
    display: block;
    width: 5rem; /* 500px */
    height: 3.02rem; /* 302px */
    object-fit: cover;
}

/* ---------- 文本区域 ---------- */
.second__card-body {
    width: 5rem; /* 500px */
    height: 2.7rem; /* 270px */
    padding: 0.42rem 0.2rem 0; /* 42px 20px 0 */
    box-sizing: border-box;
    background: #F5F5F5;
    transition: background-color 0.4s ease;
    display: flex;
    flex-direction: column;
}

.second__card-tag {
    width: max-content;
    display: inline-flex;
    padding: 0.06rem 0.1rem; /* 6px 10px */
    justify-content: center;
    align-items: center;
    gap: 0.1rem; /* 10px */
    background: #E6E6E6;
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.14rem; /* 14px */
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 21px */
    margin-bottom: 0.1rem; /* 下边距 10px */
    transition: background-color 0.4s ease, color 0.4s ease;
}

.second__card-title {
    overflow: hidden;
    color: #333;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: Montserrat, sans-serif;
    font-size: 0.2rem; /* 20px */
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0 0 0.1rem; /* 下边距 10px */
    transition: color 0.4s ease;
}

.second__card-desc {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #666;
    text-overflow: ellipsis;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    margin: 0 0 0.3rem; /* 下边距 30px */
    transition: color 0.4s ease;
}

.second__card-date {
    display: block;
    color: #999;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    transition: color 0.4s ease;
}

/* ---------- 悬浮动效：文本区变蓝、标签变白、标题变白、描述/时间变浅灰 ---------- */
.second__card:hover {
    transform: translateY(-0.06rem);
}

.second__card:hover .second__card-body {
    background: #044EAD;
}

.second__card:hover .second__card-tag {
    background: #FFF;
    color: #044EAD;
}

.second__card:hover .second__card-title {
    color: #FFF;
}

.second__card:hover .second__card-desc,
.second__card:hover .second__card-date {
    color: #D9D9D9;
}

/* ---------- 入场动画（common.js 滚动加 .is-in-view 触发） ----------
   卡片自下 3D 翻入错峰 → 文本区内容次第点亮 */
html.js .second:not(.is-in-view) .second__card {
    opacity: 0;
}

.second.is-in-view .second__card {
    animation: news-card-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.second.is-in-view .second__card:nth-child(1) { animation-delay: 0.3s; }
.second.is-in-view .second__card:nth-child(2) { animation-delay: 0.4s; }
.second.is-in-view .second__card:nth-child(3) { animation-delay: 0.5s; }
.second.is-in-view .second__card:nth-child(4) { animation-delay: 0.6s; }
.second.is-in-view .second__card:nth-child(5) { animation-delay: 0.7s; }
.second.is-in-view .second__card:nth-child(6) { animation-delay: 0.8s; }

.second.is-in-view .second__card-body > * {
    animation: news-content-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.second.is-in-view .second__card-body > *:nth-child(1) { animation-delay: 0.55s; }
.second.is-in-view .second__card-body > *:nth-child(2) { animation-delay: 0.62s; }
.second.is-in-view .second__card-body > *:nth-child(3) { animation-delay: 0.69s; }
.second.is-in-view .second__card-body > *:nth-child(4) { animation-delay: 0.76s; }

@keyframes news-card-in {
    0% {
        opacity: 0;
        transform: translateY(0.4rem) rotateX(-15deg) scale(0.95);
        filter: blur(0.05rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0) scale(1);
        filter: blur(0);
    }
}

@keyframes news-content-in {
    0% {
        opacity: 0;
        transform: translateY(0.12rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- H5 适配 ---------- */
html[data-mode="h5"] .second {
    padding: 0.6rem 0.24rem;
}

html[data-mode="h5"] .second__grid {
    gap: 0.3rem;
}

html[data-mode="h5"] .second__card,
html[data-mode="h5"] .second__card-img,
html[data-mode="h5"] .second__card-body {
    width: 100%;
}

html[data-mode="h5"] .second__card {
    height: auto;
}

html[data-mode="h5"] .second__card-img {
    height: 2.4rem;
}

html[data-mode="h5"] .second__card-body {
    height: auto;
    padding-bottom: 0.3rem;
}