/*==========================================================
KWARA STATE MINISTRY OF LIVESTOCK DEVELOPMENT
DEPARTMENTS SECTION
File: assets/css/departments.css
==========================================================*/



/*==========================================================
DEPARTMENTS SECTION
==========================================================*/

.departments-section{

    position:relative;

    padding:120px 0;

    background:var(--lighter);

    overflow:hidden;

}



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

.departments-section::before{

    content:"";

    position:absolute;

    top:-200px;

    right:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

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

}



.departments-section::after{

    content:"";

    position:absolute;

    left:-120px;

    bottom:-120px;

    width:260px;

    height:260px;

    border-radius:50%;

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

}



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

.departments-section .section-header{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}



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

.department-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);

}



.department-card:hover{

    transform:translateY(-10px);

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

}



/*==========================================================
DEPARTMENT IMAGE
==========================================================*/

.department-image{

    position:relative;

    overflow:hidden;

}



.department-image img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:transform .6s ease;

}



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

    transform:scale(1.08);

}



/*==========================================================
ICON BADGE
==========================================================*/

.department-icon{

    position:absolute;

    left:25px;

    bottom:-30px;

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--primary);

    color:var(--white);

    font-size:28px;

    border:5px solid var(--white);

    box-shadow:var(--shadow);

    transition:var(--transition);

}



.department-card:hover .department-icon{

    background:var(--secondary);

}

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

.department-content{

    padding:50px 30px 30px;

}



/*==========================================================
DEPARTMENT TITLE
==========================================================*/

.department-content h4{

    font-size:24px;

    font-weight:700;

    color:var(--heading);

    margin-bottom:16px;

    transition:var(--transition);

}

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

    color:var(--primary);

}



/*==========================================================
DEPARTMENT DESCRIPTION
==========================================================*/

.department-content p{

    font-size:15px;

    line-height:1.8;

    color:var(--text);

    margin-bottom:25px;

}



/*==========================================================
DIRECTOR INFORMATION
==========================================================*/

.department-director{

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px 0;

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

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

    margin-bottom:25px;

}

.department-director img{

    width:52px;

    height:52px;

    border-radius:50%;

    object-fit:cover;

}

.department-director h6{

    margin:0;

    font-size:16px;

    font-weight:700;

    color:var(--heading);

}

.department-director span{

    display:block;

    margin-top:4px;

    font-size:13px;

    color:var(--text-light);

}



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

.department-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    flex-wrap:wrap;

}



/*==========================================================
LEARN MORE BUTTON
==========================================================*/

.department-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--primary);

    font-size:15px;

    font-weight:700;

    transition:var(--transition);

}

.department-link i{

    transition:var(--transition);

}

.department-card:hover .department-link{

    color:var(--primary-dark);

}

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

    transform:translateX(8px);

}



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

.department-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 16px;

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

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

    color:var(--primary);

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

}



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

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

}

.department-card:hover::before{

    transform:scaleX(1);

}

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

.departments-section .row{

    row-gap:30px;

}



/*==========================================================
CARD SHADOW ENHANCEMENT
==========================================================*/

.department-card:hover{

    border-color:rgba(11,107,58,.18);

}



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

.department-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        to top,

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

        transparent

    );

    opacity:0;

    transition:var(--transition);

}



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

    opacity:1;

}



/*==========================================================
ICON ANIMATION
==========================================================*/

.department-card:hover .department-icon{

    transform:rotate(360deg);

}



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

@media (max-width:991.98px){

    .departments-section{

        padding:90px 0;

    }

    .departments-section .section-header{

        margin-bottom:55px;

    }

    .department-content{

        padding:45px 26px 26px;

    }

    .department-content h4{

        font-size:22px;

    }

}



@media (max-width:767.98px){

    .departments-section{

        padding:70px 0;

    }

    .department-image img{

        height:220px;

    }

    .department-content{

        padding:42px 24px 24px;

    }

    .department-footer{

        flex-direction:column;

        align-items:flex-start;

    }

}



@media (max-width:575.98px){

    .departments-section{

        padding:60px 0;

    }

    .department-image img{

        height:200px;

    }

    .department-icon{

        width:60px;

        height:60px;

        font-size:24px;

        left:20px;

        bottom:-25px;

    }

    .department-content{

        padding:40px 22px 22px;

    }

    .department-content h4{

        font-size:20px;

    }

    .department-director{

        gap:12px;

    }

    .department-director img{

        width:46px;

        height:46px;

    }

    .department-director h6{

        font-size:15px;

    }

    .department-director span{

        font-size:12px;

    }

}



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

.department-link:focus{

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

    outline-offset:4px;

    border-radius:6px;

}



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

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

    .department-card,

    .department-image img,

    .department-icon,

    .department-link{

        transition:none;

        animation:none;

    }

}