/* ==========================================================================
   Job List Styles
   Mobile-first design with proper organization following style guide
   ========================================================================== */

/* CSS Variables / Design Tokens */
:root {
    /* Colors */
    --job-list-bg: var(--color-background);
    --job-list-border: var(--color-background-brighter);
    
    /* Spacing */
    --job-list-padding: var(--space-18);
    --job-list-margin: var(--space-30);
    
    /* Typography */
    --job-list-font-size: var(--font-size-base);
}

/* ==========================================================================
   1. Base Styles & Typography
   ========================================================================== */



/* ==========================================================================
   2. Layout & Container Styles
   ========================================================================== */
.job-list-container {
    overflow-y: auto;
    display: block;
}

.job-list-container--page {
    height: 100%;
    overflow-y: auto;
    margin: 0;
    padding: 0 var(--space-3);
    border: none;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.job-list-container--page::-webkit-scrollbar {
    display: none;
}

.job-list-search-section-container {
    display: flex;
    flex-direction: column;
    padding: var(--space-18);
}

#job_list.section {
    flex: 1;
    overflow: hidden;
    border: 0;
    padding: 0;
    margin: 0px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    background-color: var(--color-background-darker);
}

#job_list.section::-webkit-scrollbar {
    display: none;
}




/* ==========================================================================
   4. Media Queries
   ========================================================================== */
@media screen and (min-width: 900px) {

    .job-list-container.job-list-container--page {
        padding: 0px 2px;
    }

    .job-list-search-section-container {
        height: calc(100vh - 78px);
        max-width: 400px;
        padding: 0px;
        background-color: var(--color-background-darker);
    }
}