/* ==========================================================
   Vote Smart KE
   Candidate Directory
========================================================== */

.candidate-directory{
    padding:80px 0;
    background:#f8fafc;
}

.candidate-directory .vsk-container{
    width:100%;
    max-width:1320px;
    margin:0 auto;
    padding:0 20px;
    box-sizing:border-box;
}

/* ==========================================================
   Header
========================================================== */

.directory-header{
    text-align:center;
    margin-bottom:45px;
}

.directory-title{
    font-size:52px;
    font-weight:800;
    color:#0f172a;
    margin:12px 0;
}

.directory-description{
    max-width:760px;
    margin:0 auto;
    color:#64748b;
    font-size:18px;
    line-height:1.8;
}

/* ==========================================================
   Search Bar
========================================================== */

.directory-filters{
    margin:45px 0;
}

.candidate-search-form{
    width:100%;
}

.search-field{

    display:grid;

    grid-template-columns:
        minmax(260px,2fr)
        minmax(220px,1fr)
        auto;

    gap:18px;

    align-items:center;

}

.search-field input,
.search-field select{

    width:100%;
    height:58px;

    padding:0 20px;

    border:1px solid #dbe4f0;
    border-radius:14px;

    background:#fff;

    font-size:16px;

    color:#0f172a;

    outline:none;

    transition:.25s;

    box-sizing:border-box;

}

.search-field input:focus,
.search-field select:focus{

    border-color:#2563eb;

    box-shadow:0 0 0 4px rgba(37,99,235,.12);

}

.search-field select{

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    cursor:pointer;

    padding-right:48px;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 7.5L10 12l4.5-4.5' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-repeat:no-repeat;
    background-position:right 18px center;

}

.search-field button{

    height:58px;

    padding:0 30px;

    border:none;

    border-radius:14px;

    background:#2563eb;

    color:#fff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

    white-space:nowrap;

}

.search-field button:hover{

    background:#1d4ed8;

    transform:translateY(-2px);

    box-shadow:0 12px 30px rgba(37,99,235,.25);

}

/* ==========================================================
   Results Count
========================================================== */

.directory-results{

    margin:35px 0;

    font-size:18px;

    color:#475569;

}

.directory-results strong{

    color:#0f172a;

}

/* ==========================================================
   Candidate Grid
========================================================== */

.candidate-directory-grid{

    display:grid;

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

    gap:30px;

    width:100%;

}

.directory-empty{

    grid-column:1 / -1;

    background:#fff;

    padding:80px 40px;

    text-align:center;

    border-radius:20px;

    border:1px solid #e2e8f0;

    color:#64748b;

    font-size:18px;

}

/* ==========================================================
   Mobile
========================================================== */

@media (max-width:900px){

    .search-field{

        grid-template-columns:1fr;

    }

    .search-field button{

        width:100%;

    }

}

@media (max-width:768px){

    .candidate-directory{

        padding:60px 0;

    }

    .directory-title{

        font-size:40px;

    }

    .directory-description{

        font-size:16px;

    }

    .candidate-directory-grid{

        grid-template-columns:1fr;

    }

}