/* MAJARA_PROJECT_CATEGORY_CARDS_V1 */

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

.category-list .category-card {
    position: relative;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) auto 20px;
    min-height: 108px;
    padding: 18px 20px;
    align-items: center;
    gap: 13px;
    overflow: hidden;
    border: 1px solid rgba(33,29,26,.11) !important;
    border-radius: 18px !important;
    background:
        radial-gradient(
            circle at 6% 10%,
            rgba(197,139,82,.10),
            transparent 31%
        ),
        #fff !important;
    box-shadow: 0 12px 30px rgba(33,29,26,.045);
    color: #211d1a !important;
    text-decoration: none !important;
    transition:
        transform .3s cubic-bezier(.22,1,.36,1),
        box-shadow .3s ease,
        border-color .3s ease,
        background .3s ease;
}

.category-list .category-card::before {
    position: absolute;
    top: -70px;
    left: -62px;
    width: 155px;
    height: 155px;
    content: "";
    border-radius: 50%;
    background: rgba(197,139,82,.07);
    transition: transform .5s cubic-bezier(.22,1,.36,1);
}

.category-list .category-card:hover {
    z-index: 2;
    border-color: rgba(197,139,82,.52) !important;
    background:
        radial-gradient(
            circle at 6% 10%,
            rgba(197,139,82,.18),
            transparent 35%
        ),
        #fff !important;
    box-shadow: 0 20px 42px rgba(33,29,26,.12);
    transform: translateY(-7px);
}

.category-list .category-card:hover::before {
    transform: scale(1.22);
}

.category-card__icon {
    position: relative;
    z-index: 1;
    display: inline-grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 1px solid rgba(197,139,82,.26);
    border-radius: 16px;
    background: #f7f1ea;
    color: #ae7440;
    font-size: 1.22rem;
    transition:
        background .3s ease,
        color .3s ease,
        transform .3s cubic-bezier(.22,1,.36,1);
}

.category-list .category-card:hover .category-card__icon {
    background: var(--mj-brand-primary);
    color: #fff;
    transform: rotate(-5deg) scale(1.06);
}

.category-card__title {
    position: relative;
    z-index: 1;
    margin: 0 !important;
    color: #211d1a !important;
    font-size: clamp(1rem, 1.3vw, 1.14rem) !important;
    font-weight: 800 !important;
    line-height: 1.7 !important;
}

.category-card__count {
    position: relative;
    z-index: 1;
    display: inline-flex;
    min-width: max-content;
    padding: 7px 10px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(197,139,82,.11);
    color: var(--mj-brand-primary-dark) !important;
    font-size: .76rem !important;
    font-weight: 800 !important;
    line-height: 1.4;
    transition:
        background .3s ease,
        color .3s ease;
}

.category-list .category-card:hover .category-card__count {
    background: rgba(33,29,26,.92);
    color: #fff !important;
}

.category-card__arrow {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #b67b48;
    font-size: .82rem;
    opacity: .65;
    transform: translateX(0);
    transition:
        opacity .25s ease,
        color .25s ease,
        transform .25s ease;
}

.category-list .category-card:hover .category-card__arrow {
    color: #211d1a;
    opacity: 1;
    transform: translateX(-4px);
}

.category-card--commercial .category-card__icon {
    background: #f4eee8;
    color: var(--mj-brand-primary-dark);
}

.category-card--residential .category-card__icon {
    background: #edf2ec;
    color: #63805e;
}

.category-card--villa .category-card__icon {
    background: #edf1f0;
    color: #537b72;
}

.category-card:focus-visible {
    outline: 3px solid rgba(197,139,82,.38);
    outline-offset: 4px;
}

@media (max-width: 900px) {
    .category-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .category-list .category-card {
        grid-template-columns: 48px minmax(0, 1fr) auto 16px;
        min-height: 92px;
        padding: 14px;
        gap: 10px;
        border-radius: 15px !important;
    }

    .category-card__icon {
        width: 45px;
        height: 45px;
        border-radius: 14px;
        font-size: 1rem;
    }

    .category-card__count {
        padding: 6px 8px;
        font-size: .7rem !important;
    }
}