/*
 * MIX365 PROFILE — MUCH SMALLER RECENT SETS GRID
 *
 * Presentation-only override. The working canonical renderer remains
 * unchanged.
 */

#recentSets,
#recentSets.sets-grid,
#recentSets.mix365-profile-sets {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 7px !important;

    width: 100% !important;
    min-height: 54px !important;

    align-items: stretch !important;
}

#recentSets > .profile-previous-card {
    min-width: 0 !important;
    min-height: 0 !important;

    border-width: 1px !important;

    clip-path:
        polygon(
            6px 0,
            100% 0,
            100% calc(100% - 6px),
            calc(100% - 6px) 100%,
            0 100%,
            0 6px
        )
        !important;

    box-shadow:
        0 9px 22px
        rgba(0,0,0,.24)
        !important;
}

#recentSets > .profile-previous-card:hover {
    box-shadow:
        0 12px 28px
        rgba(0,0,0,.32),
        0 0 17px
        rgba(255,0,72,.07)
        !important;
}

#recentSets .profile-previous-card__media {
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
}

#recentSets .profile-previous-card__play {
    left: 6px !important;
    bottom: 6px !important;

    width: 23px !important;
    height: 23px !important;

    border-width: 1px !important;

    font-size: 8px !important;

    box-shadow:
        0 5px 13px
        rgba(233,0,67,.22)
        !important;
}

#recentSets .profile-previous-card__engagement {
    right: 5px !important;
    top: 5px !important;

    gap: 3px !important;

    min-height: 18px !important;
    padding: 3px 5px !important;

    font-size: 7px !important;
}

#recentSets .profile-previous-card__body {
    padding: 6px !important;
}

#recentSets .profile-previous-card__title-row {
    grid-template-columns: 22px minmax(0, 1fr) !important;
    gap: 5px !important;

    margin: 0 0 5px !important;
}

#recentSets .profile-previous-card__avatar {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
}

#recentSets .profile-previous-card__title {
    font-size: 8px !important;
    line-height: 1.15 !important;

    -webkit-line-clamp: 2;
}

#recentSets .profile-previous-card__dj {
    margin-top: 2px !important;

    font-size: 7px !important;
    line-height: 1.1 !important;
}

#recentSets .profile-previous-card__meta {
    gap: 3px 5px !important;

    font-size: 6.5px !important;
    line-height: 1.15 !important;
}

#recentSets .profile-previous-card__meta-item {
    gap: 2px !important;
}

#recentSets.empty-state,
#recentSets.is-loading {
    display: block !important;

    min-height: 54px !important;
    padding: 16px !important;

    font-size: 9px !important;
}

#pagination {
    gap: 4px !important;
    margin-top: 12px !important;
}

#pagination .page-link {
    min-width: 27px !important;
    min-height: 27px !important;
    padding: 4px 6px !important;

    font-size: 7px !important;
}

#pagination .page-dots {
    min-height: 27px !important;
    font-size: 8px !important;
}

@media (max-width: 1700px) {
    #recentSets,
    #recentSets.sets-grid,
    #recentSets.mix365-profile-sets {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1450px) {
    #recentSets,
    #recentSets.sets-grid,
    #recentSets.mix365-profile-sets {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1200px) {
    #recentSets,
    #recentSets.sets-grid,
    #recentSets.mix365-profile-sets {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 950px) {
    #recentSets,
    #recentSets.sets-grid,
    #recentSets.mix365-profile-sets {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 700px) {
    #recentSets,
    #recentSets.sets-grid,
    #recentSets.mix365-profile-sets {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
}

@media (max-width: 480px) {
    #recentSets,
    #recentSets.sets-grid,
    #recentSets.mix365-profile-sets {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
}