/* =========================
   ANNOUNCEMENTS PAGE
========================= */

.announcements-page{
    padding:90px 0;
}

.page-heading{
    text-align:center;
    margin-bottom:60px;
}

.page-heading h1{
    font-size:56px;
    font-weight:700;
    color:#1d293f;
    margin-bottom:20px;
}

.page-heading p{
    max-width:700px;
    margin:auto;
    color:#666;
    line-height:1.8;
}

.page-heading::after{
    content:"";
    display:block;
    width:80px;
    height:3px;
    background:var(--primary-blue);
    margin:25px auto 0;
    border-radius:50px;
}

/* =========================
   LIST ITEMS
========================= */

.announcement-item{
    display:grid;
    grid-template-columns:120px 1fr;
    gap:50px;

    padding:45px 0;

    border-bottom:1px solid #ececec;
}

.announcement-date-box{
    text-align:center;
}

.day{
    display:block;
    font-size:46px;
    font-weight:700;
    line-height:1;
    color:var(--primary-blue);
}

.month{
    display:block;
    margin-top:8px;
    font-size:13px;
    font-weight:600;
    letter-spacing:1px;
    color:#666;
}

.year{
    display:block;
    margin-top:4px;
    font-size:13px;
    color:#999;
}

.announcement-content h2{
    margin-bottom:15px;
}

.announcement-content h2 a{
    text-decoration:none;
    color:#1d293f;
    font-size:38px;
    font-weight:600;
    transition:.3s;
}

.announcement-content h2 a:hover{
    color:var(--primary-blue);
}

.announcement-content p{
    font-size:18px;
    line-height:1.8;
    color:#666;
    margin-bottom:20px;
}

.read-more{
    text-decoration:none;
    color:var(--primary-blue);
    font-weight:600;
    transition:.3s;
}

.read-more:hover{
    padding-left:6px;
}

.empty-state{
    text-align:center;
    padding:80px;
    color:#666;
}

/* =========================
   DETAIL PAGE
========================= */

.announcement-detail-page{
    padding:90px 0;
}

.back-link{
    display:inline-block;
    text-decoration:none;
    color:var(--primary-blue);
    margin-bottom:40px;
    font-weight:600;
}

.announcement-detail{
    max-width:900px;
    margin:auto;
}

.announcement-detail .announcement-date{
    color:#888;
    font-size:14px;
}

.announcement-detail h1{
    font-size:56px;
    line-height:1.2;
    margin:20px 0 40px;
    color:#1d293f;
}

.announcement-content{
    font-size:18px;
    line-height:2;
    color:#444;
}


/* =========================
RESPONSIVE
========================= */

@media (max-width:768px){

    /* Page Header */

    .announcements-page{
        padding:40px 0;
    }

    .page-heading{
        margin-bottom:40px;
    }

    .page-heading h1{
        font-size:2.2rem;
        line-height:1.15;
        margin-bottom:12px;
    }

    .page-heading p{
        font-size:0.95rem;
        line-height:1.6;
        max-width:100%;
    }

    .page-heading::after{
        margin:18px auto 0;
        width:60px;
    }

    /* Announcement Items */

    .announcement-item{
        grid-template-columns:70px 1fr;
        gap:15px;
        padding:25px 0;
    }

    .announcement-date-box{
        text-align:center;
    }

    .day{
        font-size:2.2rem;
    }

    .month,
    .year{
        font-size:0.75rem;
    }

    .announcement-content h2{
        margin-bottom:10px;
    }

    .announcement-content h2 a{
        font-size:1.8rem;
        line-height:1.2;
    }

    .announcement-content p{
        font-size:0.95rem;
        line-height:1.6;
        margin-bottom:12px;
    }

    .read-more{
        font-size:0.9rem;
    }

    /* Detail Page */

    .announcement-detail-page{
        padding:40px 0;
    }

    .back-link{
        margin-bottom:20px;
    }

    .announcement-detail h1{
        font-size:2.2rem;
        line-height:1.2;
        margin:15px 0 25px;
    }

    .announcement-body,
    .announcement-content{
        font-size:1rem;
        line-height:1.8;
    }

}

.announcement-body{
    font-size:18px;
    line-height:2;
    color:#444;
}