/* KrDance video catalog density overrides.
 * Keep the shared site shell unchanged while making desktop catalog pages
 * display five videos per row with tighter cards and responsive fallbacks.
 */
.hd-video-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.hd-video-card {
    border-radius: 14px;
}

.hd-video-body {
    padding: 11px 12px 12px;
}

.hd-video-title {
    min-height: 38px;
    font-size: 12px;
    line-height: 1.55;
}

.hd-video-meta {
    gap: 8px;
    margin-top: 9px;
    font-size: 10px;
}

.hd-video-meta-group {
    gap: 8px;
}

.hd-meta-item {
    gap: 4px;
}

.hd-video-badge {
    left: 8px;
    bottom: 8px;
    min-height: 23px;
    padding: 0 8px;
    font-size: 9px;
}

.hd-video-play {
    width: 40px;
    height: 40px;
}

@media (max-width: 1100px) {
    .hd-video-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 13px;
    }
}

@media (max-width: 860px) {
    .hd-video-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }
}

@media (max-width: 620px) {
    .hd-video-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .hd-video-body {
        padding: 9px 9px 10px;
    }

    .hd-video-title {
        min-height: 36px;
        font-size: 11px;
    }

    .hd-video-meta {
        margin-top: 7px;
    }
}

@media (max-width: 430px) {
    .hd-video-grid {
        grid-template-columns: 1fr;
    }
}