/* CSS-Structure-4C: Categories directory specific styles split from directory-pages.css. */

.directory-v1-category-band {
    background: rgba(4, 26, 18, 0.68);
}

.directory-v1-category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.directory-v1-category-card {
    display: grid;
    gap: 10px;
    min-height: 96px;
    padding: 20px;
    border: 1px solid rgba(78, 255, 180, 0.18);
    border-radius: 18px;
    background: rgba(10, 29, 22, 0.9);
}

.directory-v1-category-card strong {
    font-size: 1.1rem;
}

.directory-v1-category-card span {
    color: #9dc7b7;
}

@media (max-width: 860px) {
    .directory-v1-category-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .directory-v1-category-grid {
        grid-template-columns: 1fr;
    }
}

/* DIR-UI1: Compact category directory cards. */
.directory-v1-category-band {
    padding-top: 34px !important;
}

.directory-v1-category-grid,
.browse-category-grid.browse-category-grid-compact {
    gap: clamp(0.85rem, 1.65vw, 1.1rem) !important;
}

.directory-v1-category-card {
    min-height: 84px !important;
    padding: 16px !important;
    border-radius: 16px !important;
    gap: 8px !important;
}

.directory-v1-category-card strong {
    font-size: 1.02rem !important;
}

.directory-v1-category-card span {
    font-size: 0.92rem !important;
}

@media (max-width: 640px) {
    .directory-v1-category-band {
        padding-top: 26px !important;
    }
}