/* =====================================================
   Griffin Federal Republic
   Ministry of Foreign Affairs
   Diplomatic News Page (Stable Final)
===================================================== */


/* =========================
   GLOBAL PAGE STYLE
========================= */

body{
    margin:0;
    font-family:"Noto Sans SC","Segoe UI",Arial,sans-serif;
    color:#1c2a3a;

    background-image:
        linear-gradient(
            180deg,
            rgba(245,249,255,0.94),
            rgba(235,243,255,0.94)
        ),
        url("https://images.unsplash.com/photo-1526778548025-fa2f459cd5c1");

    background-size:cover;
    background-position:center;
    background-attachment:fixed;
}


/* =========================
   PAGE TITLE
========================= */

.page-title{
    text-align:center;
    padding:90px 20px 45px;
}

.page-title h1{
    font-size:32px;
    letter-spacing:2px;
    color:#0f2d4a;
    margin-bottom:8px;
}

.page-title p{
    font-size:14px;
    color:#60758a;
}


/* =========================
   CONTAINER
========================= */

.news-container{
    max-width:1100px;
    margin:auto;
    padding:20px 40px 70px;
}


/* =========================
   NEWS CARD BASE
========================= */

.news-card{
    background:white;
    padding:25px;
    border-radius:12px;
    margin-bottom:22px;

    border:1px solid rgba(0,0,0,0.06);
    box-shadow:0 8px 22px rgba(0,0,0,0.06);

    /* 必须：保证 hover 平滑 */
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


/* =========================
   HOVER EFFECT（核心：上浮动画）
========================= */

.news-card:hover{
    transform:translateY(-5px);   /* 上浮效果 */
    box-shadow:0 16px 34px rgba(0,0,0,0.14);
    border-color:#4a90e2;
}


/* =========================
   CONTENT STYLE
========================= */

.news-date{
    font-size:12px;
    color:#718096;
    margin-bottom:12px;
}

.news-card h2{
    font-size:20px;
    color:#1d3557;
    margin-bottom:12px;
}

.news-card p{
    font-size:14px;
    line-height:1.9;
    color:#516b82;
}


/* =========================
   BUTTON
========================= */

.read-btn{
    display:inline-block;
    margin-top:15px;
    padding:8px 18px;
    border-radius:6px;

    font-size:13px;
    text-decoration:none;

    color:#0a66c2;
    border:1px solid #8bb8e8;

    transition:0.25s ease;
}

.read-btn:hover{
    background:#0a66c2;
    color:white;
    transform:translateY(-2px);
}


/* =========================
   FOOTER
========================= */

footer{
    text-align:center;
    padding:30px;
    font-size:12px;
    color:#6b7f93;
    background:#f8fbff;
    border-top:1px solid rgba(0,0,0,0.06);
}


/* =========================
   MOBILE
========================= */

@media (max-width:700px){
    .news-container{
        padding:20px;
    }

    .page-title h1{
        font-size:26px;
    }
}
@keyframes fadeUpTitle{
    from{
        opacity:0;
        transform:translateY(16px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.page-title{
    text-align:center;
    padding:90px 20px 45px;

    /* 👇 关键：入场动画 */
    animation:fadeUpTitle 0.7s ease both;
}