/* CSS-Structure-3D: Category card component styles split from directories.css. */

/* Phase DirectoryPolish-1: compact category directory cards. */
.public-layout .browse-category-grid.browse-category-grid-compact,
.browse-category-grid.browse-category-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    align-items: stretch;
}

.public-layout .browse-category-grid-compact .browse-category-card,
.browse-category-grid-compact .browse-category-card {
    height: 100%;
}

.public-layout .browse-category-grid-compact .browse-category-main,
.browse-category-grid-compact .browse-category-main {
    min-height: 178px;
    height: 100%;
    padding: 18px;
}

.public-layout .browse-category-grid-compact .browse-category-main h3,
.browse-category-grid-compact .browse-category-main h3 {
    line-height: 1.22;
}

.public-layout .browse-category-grid-compact .browse-category-main p,
.browse-category-grid-compact .browse-category-main p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

.public-layout .browse-category-grid-compact .browse-category-main > span,
.browse-category-grid-compact .browse-category-main > span {
    margin-top: auto;
}

@media (max-width: 760px) {
    .public-layout .browse-category-grid.browse-category-grid-compact,
    .browse-category-grid.browse-category-grid-compact {
        grid-template-columns: 1fr;
    }

    .public-layout .browse-category-grid-compact .browse-category-main,
    .browse-category-grid-compact .browse-category-main {
        min-height: 156px;
    }
}

/* Phase DirectoryPerf-1: improve mobile render time for stores/categories directory pages. */
@supports (content-visibility: auto) {
    .browse-category-grid .browse-category-card {
        content-visibility: auto;
        contain-intrinsic-size: 170px;
        contain: layout paint style;
    }
}