/*==========================================================
KWARA STATE MINISTRY OF LIVESTOCK DEVELOPMENT
PROJECTS SECTION
File: assets/css/projects.css
==========================================================*/



/*==========================================================
PROJECTS SECTION
==========================================================*/

.projects-section{

    position:relative;

    padding:120px 0;

    background:var(--white);

    overflow:hidden;

}



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

.projects-section::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

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

}



.projects-section::after{

    content:"";

    position:absolute;

    left:-120px;

    bottom:-120px;

    width:260px;

    height:260px;

    border-radius:50%;

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

}



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

.projects-section .section-header{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}



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

.project-card{

    position:relative;

    background:var(--white);

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

    overflow:hidden;

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

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

    transition:var(--transition);

    height:100%;

}



.project-card:hover{

    transform:translateY(-10px);

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

}



/*==========================================================
PROJECT IMAGE
==========================================================*/

.project-image{

    position:relative;

    overflow:hidden;

}



.project-image img{

    width:100%;

    height:280px;

    object-fit:cover;

    transition:transform .6s ease;

}



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

    transform:scale(1.08);

}

/*==========================================================
PROJECT OVERLAY
==========================================================*/

.project-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(11,107,58,.82),
        rgba(11,107,58,.15),
        transparent
    );

    opacity:0;

    transition:var(--transition);

}

.project-card:hover .project-overlay{

    opacity:1;

}



/*==========================================================
PROJECT STATUS BADGE
==========================================================*/

.project-badge{

    position:absolute;

    top:20px;

    left:20px;

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 16px;

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

    background:var(--secondary);

    color:var(--white);

    font-size:12px;

    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;

    z-index:2;

}



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

.project-content{

    padding:30px;

}



/*==========================================================
PROJECT TITLE
==========================================================*/

.project-content h4{

    font-size:26px;

    font-weight:700;

    color:var(--heading);

    margin-bottom:18px;

    transition:var(--transition);

}

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

    color:var(--primary);

}



/*==========================================================
PROJECT DESCRIPTION
==========================================================*/

.project-content p{

    font-size:15px;

    line-height:1.8;

    color:var(--text);

    margin-bottom:28px;

}



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

.project-meta{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:25px;

    font-size:14px;

    color:var(--text-light);

}

.project-meta span{

    display:flex;

    align-items:center;

    gap:8px;

}

.project-meta i{

    color:var(--primary);

}



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

.project-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    font-size:15px;

    font-weight:700;

    color:var(--primary);

    transition:var(--transition);

}

.project-link i{

    transition:var(--transition);

}

.project-card:hover .project-link{

    color:var(--primary-dark);

}

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

    transform:translateX(8px);

}



/*==========================================================
HOVER TOP BORDER
==========================================================*/

.project-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;

}

.project-card:hover::before{

    transform:scaleX(1);

}

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

.projects-section .row{

    row-gap:30px;

}



/*==========================================================
PROJECT IMAGE SHADOW
==========================================================*/

.project-image{

    box-shadow:inset 0 -80px 80px rgba(0,0,0,.08);

}



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

.project-overlay::after{

    content:"";

    position:absolute;

    top:50%;

    left:50%;

    width:70px;

    height:70px;

    transform:translate(-50%,-50%) scale(.8);

    border-radius:50%;

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(10px);

    opacity:0;

    transition:var(--transition);

}

.project-card:hover .project-overlay::after{

    opacity:1;

    transform:translate(-50%,-50%) scale(1);

}



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

.project-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;

    padding-top:20px;

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

}



.project-date{

    font-size:14px;

    color:var(--text-light);

    display:flex;

    align-items:center;

    gap:8px;

}



.project-date i{

    color:var(--secondary);

}



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

@media (max-width:991.98px){

    .projects-section{

        padding:90px 0;

    }

    .projects-section .section-header{

        margin-bottom:55px;

    }

    .project-content{

        padding:26px;

    }

    .project-content h4{

        font-size:22px;

    }

}



@media (max-width:767.98px){

    .projects-section{

        padding:70px 0;

    }

    .project-image img{

        height:240px;

    }

    .project-content{

        padding:24px;

    }

    .project-footer{

        flex-direction:column;

        align-items:flex-start;

    }

}



@media (max-width:575.98px){

    .projects-section{

        padding:60px 0;

    }

    .project-image img{

        height:210px;

    }

    .project-content{

        padding:22px;

    }

    .project-content h4{

        font-size:20px;

    }

    .project-meta{

        flex-direction:column;

        gap:10px;

    }

    .project-badge{

        top:15px;

        left:15px;

        font-size:11px;

        padding:7px 14px;

    }

}



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

.project-link:focus{

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

    outline-offset:4px;

    border-radius:6px;

}



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

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

    .project-card,

    .project-image img,

    .project-overlay,

    .project-link{

        transition:none;

        animation:none;

    }

}