/* Мобильная сетка каталога и карточки релиза. Metronic не трогаем. */

.video-preview {
    aspect-ratio: 16 / 9;
}

.video-preview .card-body {
    height: 100%;
}

.video-preview-title {
    font-size: 1.1rem;
}

@media (min-width: 992px) {
    .video-preview-title {
        font-size: 1.5rem;
    }
}

/* Сердечко артиста: контур — не в избранном, заливка — в избранном, контур с чертой — убрать. */
.artist-fan-heart .artist-fan-heart-on,
.artist-fan-heart .artist-fan-heart-remove {
    display: none;
}

.artist-fan-heart[data-favorited="1"] .artist-fan-heart-off {
    display: none;
}

.artist-fan-heart[data-favorited="1"] .artist-fan-heart-on {
    display: inline-flex;
    color: #F64E60;
}

.artist-fan-heart[data-favorited="1"]:hover .artist-fan-heart-on,
.artist-fan-heart[data-favorited="1"]:focus .artist-fan-heart-on {
    display: none;
}

.artist-fan-heart[data-favorited="1"]:hover .artist-fan-heart-remove,
.artist-fan-heart[data-favorited="1"]:focus .artist-fan-heart-remove {
    display: inline-flex;
}

.artist-fan-heart-remove {
    position: relative;
    color: #F64E60;
}

.artist-fan-heart-remove::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: 50%;
    border-top: 2px solid currentColor;
    transform: rotate(-32deg);
}

.symbol.artist-fans-total {
    width: auto;
    min-width: 30px;
}

.symbol.artist-fans-total .symbol-label {
    width: auto;
    min-width: 30px;
    padding: 0 6px;
    font-size: 0.75rem;
}

/* Страница артиста: одна карточка в ряд, пока блок узкий. Две — когда влезают. */
.artist-videos {
    container-type: inline-size;
}

.artist-videos > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
}

@container (min-width: 640px) {
    .artist-videos > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Главная / поиск: свои пороги (540 нет в Bootstrap). 4 в ряд — с 1400 (xxl темы). */
#contentes > .release-col {
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 540px) {
    #contentes > .release-col {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 1200px) {
    #contentes > .release-col {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

@media (min-width: 1400px) {
    #contentes > .release-col {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* Карточка релиза: до 720 — столбик по центру, от 720 — обложка слева, треклист справа. */
.release-header > .release-cover-col,
.release-header > .release-tracklist {
    text-align: center;
}

.release-cover {
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #1a1a27;
}

/* Сетка ленты: квадрат занят до прихода jpg. width/height на img дают ту же пропорцию. */
.social-card img {
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #1a1a27;
}

@media (min-width: 720px) {
    .release-header > .release-cover-col,
    .release-header > .release-tracklist {
        flex: 0 0 50%;
        max-width: 50%;
        text-align: left;
    }

    .release-header > .release-cover-col {
        margin-bottom: 0;
    }

    .release-cover {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}

/* Карточка релиза: сайдбар в ряд 8/4 от 1140px (порога нет в Bootstrap). */
@media (min-width: 1140px) {
    .release-layout > .release-main {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .release-layout > .release-sidebar {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

.now-dl-scroller {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.now-dl-scroller::-webkit-scrollbar {
    display: none;
}

.now-dl-item {
    flex: 0 0 160px;
    max-width: 160px;
    scroll-snap-align: start;
    text-decoration: none;
}

.now-dl-cover {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    background-color: #111;
    background-position: center;
    background-size: cover;
    border-radius: 4px;
}

.now-dl-title {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    #contentes > [class*="col-"] {
        padding-left: 8px;
        padding-right: 8px;
    }

    #contentes.row {
        margin-left: -8px;
        margin-right: -8px;
    }
}

/* Выбор любимых групп после входа. */
.onboarding-artist {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
    cursor: pointer;
}

.onboarding-artist-photo {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: #F3F6F9;
}

.onboarding-artist-photo img,
.onboarding-artist-letter {
    width: 100%;
    height: 100%;
}

.onboarding-artist-photo img {
    object-fit: cover;
    display: block;
}

.onboarding-artist-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 700;
    color: #7E8299;
}

.onboarding-artist-check {
    display: none;
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: #3699FF;
    color: #fff;
    border: 2px solid #fff;
}

.onboarding-artist.is-selected .onboarding-artist-photo {
    box-shadow: inset 0 0 0 3px #3699FF;
}

.onboarding-artist.is-selected .onboarding-artist-check {
    display: flex;
}

.onboarding-artist-name {
    display: block;
    margin-top: 8px;
    font-weight: 600;
    color: #3F4254;
    line-height: 1.3;
}

.onboarding-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: #fff;
    border-top: 1px solid #EBEDF3;
    padding: 16px 0;
}