/* ==========================================================================
   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-controls {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.jobs-header-controls label {
    display: flex;
    align-items: center;
    margin: 0;
}

.jobs-header select {
    width: 160px;
    height: 40px;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid var(--border);
    background-color: var(--bg-soft);
    color: var(--text);
    border-radius: 999px;
    padding: 0 1rem;
    cursor: pointer;
}

.density-switch {
    display: flex;
    align-items: center;
    gap: .15rem;
    width: 106px;
    height: 40px;
    box-sizing: border-box;
    padding: 3px;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-soft);
}

.density-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    font: inherit;
    line-height: 1;
}

.density-btn.active {
    background: var(--bg);
    color: var(--text);
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

body.dark .density-btn.active {
    color: #fff;
}

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


.jobs-grid {

    display:grid;

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


    gap:1.5rem;

}

.jobs-grid[data-density="three"] {
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.jobs-grid[data-density="two"] {
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.jobs-grid[data-density="one"] {
    grid-template-columns:1fr;
}

.jobs-grid[data-density="one"] .job-card {
    display:grid;
    grid-template-columns:minmax(180px,1fr) minmax(240px,2fr) auto;
    align-items:center;
    gap:1rem;
}

.jobs-result-count {
    color:var(--text-muted);
    font-size:.9rem;
    font-weight:500;
}

@media (max-width: 960px) {
    .jobs-grid[data-density="three"] {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 680px) {
    .jobs-grid[data-density] {
        grid-template-columns:1fr;
    }

    .jobs-grid[data-density="one"] .job-card {
        display:flex;
    }
}





/* ==========================================================================
   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);
}

.jobs-grid .empty-state,
.jobs-grid .loading-state {
    grid-column: 1 / -1;
    width: 100%;
    text-align: center;
    justify-self: stretch;
}