.first {
    height: 7.6rem;
    background-image: url('../assets/images/Project/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）
   卡片 520 宽，左右间隔 20、上下间隔 30
   ============================================================ */
.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;
    justify-content: center;
    gap: 0.3rem 0.2rem; /* 上下 30px，左右 20px：3×520 + 2×20 = 1600 */
}

.second__card {
    width: 5.2rem; /* 520px */
    height: 4.97rem; /* 318 + 179 */
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s ease;
}

/* ---------- 图片区：520×318 + 左下角日期 ---------- */
.second__card-media {
    position: relative;
    width: 5.2rem;
    height: 3.18rem; /* 318px */
    overflow: hidden;
}

.second__card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.second__card-date {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    width: 1.36rem; /* 136px */
    height: 0.34rem; /* 34px */
    padding: 0.05rem 0.15rem; /* 5px 15px */
    justify-content: center;
    align-items: center;
    gap: 0.1rem;
    box-sizing: border-box;
    background: #333;
    color: #FFF;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    transition: background-color 0.4s ease;
}

/* ---------- 文本区：520×179 ---------- */
.second__card-body {
    width: 5.2rem; /* 520px */
    height: 1.79rem; /* 179px */
    padding: 0.2rem 0.2rem 0; /* 20px 20px 0 */
    box-sizing: border-box;
    background: #F5F5F5;
    transition: background-color 0.4s ease;
}

.second__card-title {
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.24rem; /* 24px */
    font-style: normal;
    font-weight: 600;
    line-height: 130%; /* 31.2px */
    margin: 0 0 0.34rem; /* 下边距 34px */
    transition: color 0.4s ease;
}

.second__card-tags {
    display: flex;
    gap: 0.14rem; /* 标签间隔 14px */
}

.second__card-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.13rem; /* 10px 13px */
    background: #FFF;
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.14rem; /* 14px */
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 18.2px */
    transition: background-color 0.4s ease, color 0.4s ease;
}

.second__card-tag svg {
    flex-shrink: 0;
    margin-right: 0.1rem; /* 图标右边距 10px */
    transition: filter 0.4s ease;
}

/* ---------- 悬浮动效：抬升 + 图片缓推 + 文本区变蓝 ---------- */
.second__card:hover {
    transform: translateY(-0.06rem);
    box-shadow: 0 0.1rem 0.22rem rgba(0, 0, 0, 0.12);
}

.second__card:hover .second__card-img {
    transform: scale(1.05);
}

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

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

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

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

/* ---------- 入场动画（common.js 滚动加 .is-in-view 触发） ---------- */
html.js .second:not(.is-in-view) .second__card {
    opacity: 0;
}

.second.is-in-view .second__card {
    animation: project-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; }

@keyframes project-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);
    }
}

/* ---------- 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-body {
    width: 100%;
}

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

html[data-mode="h5"] .second__card-media {
    width: 100%;
    height: 2.6rem;
}

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

html[data-mode="h5"] .second__card-title {
    font-size: 0.2rem;
}