/* =========================================================
   PoliceListed Local Directory - Compact Tile Layout
   Loads AFTER style.css so these rules intentionally override
   the older full-width state/city directory styles.
   ========================================================= */

/* Main Local page: 50 compact state tiles */
.state-directory {
    width: 100% !important;
    margin: 2px 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.state-directory-heading {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    margin: 0 0 2px !important;
    background: #121212 !important;
    color: #b7b7b7 !important;
    border-radius: 10px !important;
    font-size: .72rem !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.state-directory-row {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 132px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 14px !important;
    margin: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;

    background: #fff !important;
    color: #161616 !important;
    border: 1px solid #e1e4ea !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.07) !important;
    text-decoration: none !important;

    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}

.state-directory-row:hover {
    padding-left: 14px !important;
    background: #f2cb05 !important;
    border-color: #4c6fff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.11) !important;
}

.state-directory-main {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 9px !important;
}

.state-code {
    width: 38px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #121212 !important;
    color: #f2cb05 !important;
    border-radius: 8px !important;
    font-size: .72rem !important;
    font-weight: 900 !important;
    letter-spacing: .05em !important;
}

.state-directory-name {
    font-size: .92rem !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    color: #1b1b1b !important;
    overflow-wrap: anywhere !important;
}

.state-directory-meta {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
}

.state-city-count {
    min-width: 0 !important;
    text-align: left !important;
    color: #737783 !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
}

.state-directory-arrow {
    color: #4c6fff !important;
    font-size: 23px !important;
    line-height: 1 !important;
}

.state-directory-row:hover .state-directory-name {
    color: #4c6fff !important;
}

/* State-specific page: compact city tiles */
.state-city-directory {
    width: 100% !important;
    margin: 24px 0 !important;
}

.state-city-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 14px !important;
    padding: 16px 18px !important;
    background: #121212 !important;
    color: #fff !important;
    border-radius: 12px !important;
}

.state-city-title {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.state-page-code {
    width: 40px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f2cb05 !important;
    color: #121212 !important;
    border-radius: 8px !important;
    font-size: .75rem !important;
    font-weight: 900 !important;
}

.state-city-title h2 {
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    border: 0 !important;
    text-align: left !important;
    font-size: 1.25rem !important;
}

.state-page-count {
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: #4c6fff !important;
    color: #fff !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

.state-city-list {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.state-city-row {
    min-height: 0;
    height: 55px;

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

    padding: 0 16px;

    background: #fff;
    border: 1px solid #e2e5eb;
    border-radius: 10px;

    color: #222;
    font-weight: 700;
    text-decoration: none;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease;
}

.state-city-row:hover {
    background: #f2cb05 !important;
    color: #4c6fff !important;
    border-color: #4c6fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.10) !important;
}

.state-city-row .city-row-arrow {
    align-self: flex-end !important;
    color: #4c6fff !important;
    font-size: 22px !important;
    line-height: 1 !important;
}


.state-city-count {
    transition: transform 0.2s ease, color 0.2s ease;
    transform-origin: center;
}

.state-directory-row:hover .state-city-count {
    transform: scale(1.3);
    color: #4c6fff !important;
}

.state-city-row {
    position: relative;
    height: 55px;
    padding: 0 42px 0 16px;
}

.state-city-row .city-row-arrow {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);

    font-size: 22px;
    line-height: 1;
    color: #4c6fff;
}

/* Responsive tile counts */
@media (max-width: 1100px) {
    .state-directory {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .state-city-list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 800px) {
    .state-directory,
    .state-city-list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {
    .state-directory,
    .state-city-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    .state-directory-row,
    .state-city-row {
        aspect-ratio: auto !important;
        min-height: 105px !important;
    }


    .state-city-heading {
        align-items: flex-start !important;
        padding: 14px !important;
    }
}