/* =====================================================
   NEWS & EVENTS PAGE
===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f6f8fb;
}

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

.news-page{

    min-height:100vh;

    padding:90px 20px 70px;

    background:linear-gradient(to bottom,#ffffff,#f6f8fb);

}

.news-container{

    max-width:1200px;

    margin:auto;

}

.news-container h1{

    font-size:42px;

    font-weight:700;

    text-align:center;

    color:#222;

    margin-bottom:12px;

}

.news-container p{

    text-align:center;

    color:#666;

    font-size:17px;

    max-width:700px;

    margin:0 auto 60px;

    line-height:1.7;

}

/* =====================================================
   GRID
===================================================== */

.news-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

    gap:35px;

}

/* =====================================================
   CARD
===================================================== */

.news-card{

    background:white;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

    transition:.35s;

    position:relative;

    display:flex;

    flex-direction:column;

}

.news-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.15);

}

/* =====================================================
   DATE BAR
===================================================== */

.news-date{

    background:linear-gradient(135deg,#d32f2f,#ef5350);

    color:white;

    padding:18px;

    text-align:center;

    font-size:15px;

    font-weight:600;

    letter-spacing:.5px;

}

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

.news-content{

    padding:28px;

    display:flex;

    flex-direction:column;

    height:100%;

}

.news-content h3{

    font-size:24px;

    color:#222;

    margin-bottom:18px;

    line-height:1.3;

}

.description{

    color:#666;

    line-height:1.8;

    font-size:15px;

    margin-bottom:28px;

    flex:1;

}

/* =====================================================
   META
===================================================== */

.news-meta{

    display:flex;

    flex-direction:column;

    gap:10px;

    padding-top:20px;

    border-top:1px solid #ececec;

}

.news-meta span{

    font-size:15px;

    color:#555;

    display:flex;

    align-items:center;

    gap:10px;

}

/* =====================================================
   EMPTY
===================================================== */

.no-events{

    grid-column:1/-1;

    background:white;

    border-radius:20px;

    padding:80px 30px;

    text-align:center;

    box-shadow:0 8px 30px rgba(0,0,0,.08);

}

.no-events h3{

    font-size:32px;

    color:#d32f2f;

    margin-bottom:15px;

}

.no-events p{

    color:#666;

    margin:0;

    font-size:16px;

}

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

@media(max-width:900px){

.news-container h1{

font-size:34px;

}

.news-grid{

grid-template-columns:1fr;

gap:25px;

}

}

@media(max-width:600px){

.news-page{

padding:70px 15px;

}

.news-container h1{

font-size:28px;

}

.news-container p{

font-size:15px;

margin-bottom:40px;

}

.news-content{

padding:22px;

}

.news-content h3{

font-size:21px;

}

.description{

font-size:14px;

}

.news-date{

font-size:14px;

padding:16px;

}

}