/* =========================================
   DIRECTORY PAGE
========================================= */

.directory-container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 20px 30px 60px;
}

/* =========================================
   REGION CARD
========================================= */

.directory-region {

    margin-bottom: 24px;

    background: #fffaf0;

    border: 1px solid #d8c7a4;

    border-radius: 10px;

    overflow: hidden;

    box-shadow:
        0 2px 8px rgba(0,0,0,.06);
}

/* =========================================
   REGION HEADING
========================================= */

.region-title {

    margin: 0;

    padding: 18px 24px;

    cursor: pointer;

    background:
        linear-gradient(
            to bottom,
            #f7f0df,
            #efe3c8
        );

    color: #5b4630;

    font-size: 1.15rem;

    font-weight: 600;
}

/* =========================================
   NAME COUNT IN REGION
========================================= */

.item-count {

    font-size: .85rem;

    font-weight: normal;

    opacity: .75;

    margin-left: 6px;
}

/* =========================================
   REGION CONTENT
========================================= */

.directory-region-content {

    padding: 20px;
}

/* =========================================
   HOUSE GRID
========================================= */

.directory-grid {

    list-style: none;

    margin: 0;

    padding: 0;

    display: grid;

    grid-template-columns:
        repeat(auto-fill,minmax(240px,1fr));

    gap: 12px;
}

/* =========================================
   HOUSE TAGS
========================================= */

.directory-grid a {

    display: block;

    padding: 10px 14px;

    background: #f8f1de;

    border: 1px solid #ccb58b;

    border-radius: 4px;

    color: #4b3c2c;

    text-decoration: none;

    transition: all .2s ease;
}

.directory-grid a:hover {

    transform: translateY(-2px);

    background: #fff6e5;

    box-shadow:
        0 2px 8px rgba(0,0,0,.10);
}

/* =========================================
   COLLAPSE
========================================= */

.directory-region.collapsed
.directory-region-content {

    display: none;
}

/* =========================================
   SEARCH BOX
========================================= */

.directory-search {

    margin: 25px auto;

    max-width: 600px;
}

.directory-search input {

    width: 100%;

    padding: 14px 18px;

    border: 1px solid #ccb58b;

    border-radius: 10px;

    background: #fffdf8;

    font-size: 1rem;
}