/*==========================================================
KWARA STATE MINISTRY OF LIVESTOCK DEVELOPMENT
NEWS SECTION
File: assets/css/news.css
==========================================================*/



/*==========================================================
NEWS SECTION
==========================================================*/

.news-section{

    position:relative;

    padding:120px 0;

    background:var(--white);

    overflow:hidden;

}



/*==========================================================
BACKGROUND DECORATION
==========================================================*/

.news-section::before{

    content:"";

    position:absolute;

    top:-180px;

    left:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(11,107,58,.04);

}



.news-section::after{

    content:"";

    position:absolute;

    right:-120px;

    bottom:-120px;

    width:260px;

    height:260px;

    border-radius:50%;

    background:rgba(212,175,55,.08);

}



/*==========================================================
SECTION HEADER
==========================================================*/

.news-section .section-header{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}



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

.news-card{

    position:relative;

    background:var(--white);

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

    border-radius:var(--radius-lg);

    overflow:hidden;

    height:100%;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}



.news-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}



/*==========================================================
NEWS IMAGE
==========================================================*/

.news-image{

    position:relative;

    overflow:hidden;

}



.news-image img{

    width:100%;

    height:260px;

    object-fit:cover;

    transition:transform .6s ease;

}



.news-card:hover .news-image img{

    transform:scale(1.08);

}



/*==========================================================
CATEGORY BADGE
==========================================================*/

.news-category{

    position:absolute;

    top:20px;

    left:20px;

    padding:8px 16px;

    background:var(--primary);

    color:var(--white);

    border-radius:var(--radius-pill);

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

    z-index:2;

}

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

.news-content{

    padding:30px;

}



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

.news-meta{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:18px;

    font-size:14px;

    color:var(--text-light);

}

.news-meta span{

    display:flex;

    align-items:center;

    gap:8px;

}

.news-meta i{

    color:var(--primary);

}



/*==========================================================
NEWS TITLE
==========================================================*/

.news-content h4{

    font-size:24px;

    font-weight:700;

    color:var(--heading);

    line-height:1.4;

    margin-bottom:18px;

    transition:var(--transition);

}

.news-card:hover .news-content h4{

    color:var(--primary);

}



/*==========================================================
NEWS DESCRIPTION
==========================================================*/

.news-content p{

    font-size:15px;

    line-height:1.8;

    color:var(--text);

    margin-bottom:28px;

}



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

.news-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;

    padding-top:20px;

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

}



/*==========================================================
READ MORE
==========================================================*/

.news-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--primary);

    font-size:15px;

    font-weight:700;

    transition:var(--transition);

}

.news-link i{

    transition:var(--transition);

}

.news-card:hover .news-link{

    color:var(--primary-dark);

}

.news-card:hover .news-link i{

    transform:translateX(8px);

}



/*==========================================================
PUBLICATION DATE
==========================================================*/

.news-date{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:14px;

    color:var(--text-light);

}

.news-date i{

    color:var(--secondary);

}



/*==========================================================
TOP BORDER ANIMATION
==========================================================*/

.news-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:var(--secondary);

    transform:scaleX(0);

    transform-origin:left;

    transition:var(--transition);

    z-index:5;

}

.news-card:hover::before{

    transform:scaleX(1);

}

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

.news-section .row{

    row-gap:30px;

}



/*==========================================================
IMAGE OVERLAY
==========================================================*/

.news-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        to top,

        rgba(0,0,0,.18),

        transparent

    );

    opacity:0;

    transition:var(--transition);

}

.news-card:hover .news-image::after{

    opacity:1;

}



/*==========================================================
CATEGORY HOVER
==========================================================*/

.news-card:hover .news-category{

    background:var(--secondary);

}



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

@media (max-width:991.98px){

    .news-section{

        padding:90px 0;

    }

    .news-section .section-header{

        margin-bottom:55px;

    }

    .news-content{

        padding:26px;

    }

    .news-content h4{

        font-size:22px;

    }

}



@media (max-width:767.98px){

    .news-section{

        padding:70px 0;

    }

    .news-image img{

        height:220px;

    }

    .news-content{

        padding:24px;

    }

    .news-footer{

        flex-direction:column;

        align-items:flex-start;

    }

}



@media (max-width:575.98px){

    .news-section{

        padding:60px 0;

    }

    .news-image img{

        height:200px;

    }

    .news-category{

        top:15px;

        left:15px;

        padding:7px 14px;

        font-size:11px;

    }

    .news-content{

        padding:22px;

    }

    .news-content h4{

        font-size:20px;

        line-height:1.4;

    }

    .news-meta{

        gap:12px;

        font-size:13px;

    }

    .news-date{

        font-size:13px;

    }

}



/*==========================================================
ACCESSIBILITY
==========================================================*/

.news-link:focus{

    outline:3px solid rgba(212,175,55,.35);

    outline-offset:4px;

    border-radius:6px;

}



/*==========================================================
REDUCED MOTION
==========================================================*/

@media (prefers-reduced-motion:reduce){

    .news-card,

    .news-image img,

    .news-link,

    .news-category{

        transition:none;

        animation:none;

    }

}