/* =====================================================
实验室成果 / 筛选考核
新增样式（配套 index.html 中的 #achievements 与 #selection）
===================================================== */

/* ---------- 成果展示 ---------- */

.achievements{
    position:relative;
}

.achievements .section-title p{
    max-width:760px;
}

/* 标题与第一张成果卡之间留出呼吸空间 */
.achievements .section-title{
    margin-bottom:14px;
}


.achievement{
    display:grid;
    grid-template-columns:minmax(0, 1.06fr) minmax(0, .94fr);
    gap:56px;
    align-items:center;

    padding:64px 0;

    border-top:1px solid var(--border);
}

/* 第一张卡片的上边框与标题的间距 */
.achievement:first-of-type{
    margin-top:38px;
}


.achievement.reverse{
    grid-template-columns:minmax(0, .94fr) minmax(0, 1.06fr);
}

.achievement.reverse .ach-media{
    order:2;
}


/* 图片区 */

.ach-media{
    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:26px;

    border:1px solid rgba(255,255,255,.09);

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(150,0,0,.14),
            transparent 62%
        ),
        rgba(255,255,255,.018);

    border-radius:6px;

    box-shadow:
        0 26px 70px rgba(0,0,0,.5),
        inset 0 0 0 1px rgba(255,255,255,.02);

    transition:
        border-color .35s ease,
        box-shadow .35s ease,
        transform .35s ease;
}

.ach-media:hover{
    border-color:rgba(255,45,45,.32);

    box-shadow:
        0 30px 80px rgba(0,0,0,.55),
        0 0 34px rgba(255,0,0,.09);

    transform:translateY(-4px);
}

.ach-media img{
    display:block;

    width:100%;
    height:auto;

    /* 竖版证书限制高度，避免撑破版面 */
    max-height:min(62vh, 560px);

    object-fit:contain;

    border-radius:3px;
}


/* 序号角标 */

.ach-no{
    position:absolute;

    top:14px;
    left:16px;

    z-index:2;

    padding:5px 12px;

    font-family:monospace;
    font-size:11px;
    letter-spacing:2px;

    color:#ff5252;

    border:1px solid rgba(255,45,45,.35);

    background:rgba(0,0,0,.66);

    backdrop-filter:blur(6px);
}


/* 文案区 */

.ach-kicker{
    display:inline-block;

    color:#c92f2f;

    font-size:10px;
    letter-spacing:3px;

    margin-bottom:14px;
}

.ach-copy h3{
    font-size:clamp(26px, 3.2vw, 42px);

    line-height:1.16;

    margin-bottom:20px;
}

.ach-copy h3 strong{
    display:inline-block;

    color:#ff3030;

    text-shadow:0 0 26px rgba(255,0,0,.18);
}

.ach-copy p{
    max-width:620px;

    color:#9a9a9a;

    line-height:1.95;

    font-size:15px;
}


/* 要点列表 */

.ach-points{
    list-style:none;

    margin-top:26px;

    max-width:620px;
}

.ach-points li{
    position:relative;

    padding:11px 0 11px 26px;

    border-top:1px solid rgba(255,255,255,.055);

    color:#c3c3c3;

    font-size:13px;

    letter-spacing:.4px;
}

.ach-points li::before{
    content:"";

    position:absolute;

    left:2px;
    top:50%;

    width:6px;
    height:6px;

    margin-top:-3px;

    background:#e03030;

    box-shadow:0 0 10px rgba(255,0,0,.8);
}


/* ---------- 筛选与考核 ---------- */

.selection{
    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(130,0,0,.11),
            transparent 32%
        ),
        #040202;
}


.select-grid{
    display:grid;

    grid-template-columns:repeat(4, 1fr);

    gap:16px;
}


.select-card{
    position:relative;

    padding:30px 26px 34px;

    min-height:270px;

    border:1px solid var(--border);

    background:
        linear-gradient(
            165deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.012)
        );

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}

.select-card:hover{
    transform:translateY(-6px);

    border-color:rgba(255,45,45,.34);

    box-shadow:
        0 22px 55px rgba(0,0,0,.42),
        0 0 28px rgba(255,0,0,.08);
}

.select-card b{
    display:block;

    font-family:monospace;
    font-size:26px;

    color:#e23131;

    text-shadow:0 0 20px rgba(255,0,0,.28);
}

.select-card h3{
    margin:20px 0 12px;

    font-size:20px;
}

.select-card p{
    color:#8e8e8e;

    line-height:1.85;

    font-size:13.5px;
}

.select-card span{
    position:absolute;

    left:26px;
    bottom:22px;

    color:#3d3d3d;

    font-family:monospace;
    font-size:9px;
    letter-spacing:2px;
}


/* 考核说明条 */

.selection-note{
    margin-top:34px;

    padding:32px 36px;

    border:1px solid rgba(255,45,45,.22);

    border-left:3px solid #d62b2b;

    background:
        linear-gradient(
            100deg,
            rgba(255,0,0,.05),
            rgba(255,255,255,.012)
        );
}

.selection-note strong{
    display:block;

    margin-bottom:12px;

    color:#ff4040;

    font-size:13px;
    letter-spacing:3px;
}

.selection-note p{
    max-width:900px;

    color:#a5a5a5;

    line-height:2;

    font-size:14.5px;
}


/* ---------- 响应式 ---------- */

@media(max-width:1080px){

    .achievement,
    .achievement.reverse{
        grid-template-columns:1fr;

        gap:30px;

        padding:52px 0;
    }

    /* 手机上图片统一排在文案上方 */
    .achievement.reverse .ach-media{
        order:0;
    }

    .ach-media img{
        max-height:min(52vh, 460px);
    }

    .select-grid{
        grid-template-columns:repeat(2, 1fr);
    }
}


@media(max-width:620px){

    .ach-media{
        padding:16px;
    }

    .ach-media img{
        max-height:44vh;
    }

    .select-grid{
        grid-template-columns:1fr;
    }

    .select-card{
        min-height:auto;
        padding:24px 22px 30px;
    }

    .selection-note{
        padding:24px 22px;
    }
}