/* ==========================================================================
   EXPLORE HEADER
========================================================================== */


.explore-header {

    max-width: 1200px;

    margin: 0 auto;

    padding: 3rem 2rem 1.5rem;

}


.explore-header h1 {

    margin: 0 0 0.75rem;

    font-size: clamp(2rem, 4vw, 3rem);

    color: var(--text);

}


.explore-header p {

    margin: 0;

    max-width: 600px;

    color: var(--text-muted);

    font-size: 1.05rem;

    line-height: 1.6;

}






/* ==========================================================================
   FILTER BAR
========================================================================== */


.filter-bar {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 2rem 2rem;

}



.job-filter {

    display: flex;

    align-items: center;

    gap: 1rem;

    flex-wrap: wrap;


    background: var(--bg);

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

    border-radius: 20px;

    padding: 1rem;


    box-shadow:
        0 8px 24px rgba(0,0,0,.05);

}



.job-filter input,
.job-filter select {


    height: 44px;


    border-radius: 999px;

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


    background-color: var(--bg-soft);

    color: var(--text);


    padding: 0 1rem;


    font-size: .95rem;


    outline:none;

}



.job-filter input {

    min-width: 250px;

    flex:1;

}



.job-filter select {

    min-width:160px;

    cursor:pointer;

    padding-right: 2.5rem;

}



.job-filter input:focus,
.job-filter select:focus {

    border-color:var(--blue);

    box-shadow:
        0 0 0 3px rgba(38, 142, 255,.12);

}







/* ==========================================================================
   JOB SECTION
========================================================================== */


.jobs-section {

    max-width:1200px;

    margin:0 auto;

    padding:2rem;


}



.jobs-header {

    display:flex;

    justify-content:space-between;

    align-items:center;


    margin-bottom:2rem;

}



.jobs-header h2 {

    margin:0;

    font-size:1.8rem;

    color:var(--text);

}



.jobs-header select {

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

    background-color:var(--bg-soft);

    color:var(--text);

    border-radius:999px;

    padding:.45rem 1rem;

    cursor:pointer;

}







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


.jobs-grid {

    display:grid;

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


    gap:1.5rem;

}





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


.job-card {


    background:var(--bg);


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


    border-radius:20px;


    padding:1.75rem;


    display:flex;

    flex-direction:column;


    box-shadow:
        0 8px 24px rgba(0,0,0,.05);


    transition:

        transform .2s ease,
        box-shadow .2s ease;

}



.job-card:hover {


    transform:translateY(-4px);


    box-shadow:

        0 14px 34px rgba(0,0,0,.08);

}







/* ==========================================================================
   JOB TOP
========================================================================== */


.job-top {

    display:flex;

    align-items:center;

    gap:1rem;


    margin-bottom:1.25rem;

}



.job-icon {


    width:54px;

    height:54px;


    border-radius:16px;


    display:grid;

    place-items:center;


    font-size:1.8rem;


    background:var(--bg-soft);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

}



.job-top h3 {


    margin:0 0 .25rem;


    font-size:1.25rem;


    color:var(--text);

}



.job-top p {


    margin:0;


    color:var(--text-muted);


    font-size:.9rem;

}







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


.job-description {


    color:var(--text-muted);


    line-height:1.6;


    margin-bottom:1.5rem;


}







/* ==========================================================================
   JOB INFO
========================================================================== */


.job-info {


    display:flex;


    flex-wrap:wrap;


    gap:.5rem;


    margin-bottom:1.5rem;


}



.job-info span {


    background:var(--bg-soft);


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


    border-radius:999px;


    padding:.35rem .75rem;


    font-size:.85rem;


    color:var(--text);

}







/* ==========================================================================
   BUTTON
========================================================================== */


.job-card .btn {


    width:100%;

    margin-top:auto;


}







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


@media(max-width:900px){


    .job-filter {

        flex-direction:column;

        align-items:stretch;

    }



    .job-filter input,
    .job-filter select {

        width:100%;

    }



}






@media(max-width:600px){


    .explore-header {


        padding:
            2rem 1rem 1rem;

    }



    .filter-bar,
    .jobs-section {


        padding-left:1rem;

        padding-right:1rem;

    }



    .jobs-header {


        flex-direction:column;

        align-items:flex-start;


        gap:1rem;

    }



    .job-card {


        padding:1.25rem;

    }



}

.job-icon.has-profile-image {
    border: 2px solid rgba(38, 142, 255, .24);
}