/* ============================================
   Music Bands Catalog - Frontend Styles
   ============================================ */

:root {
    --mbc-text-white: #FFFFFF;
    --mbc-text-gray: #969696;
    --mbc-text-description: #9C9C9C;
    --mbc-border-color: #2A2A2A;
    --mbc-genre-border: #6E6E6E;
    --mbc-thumb-opacity: 0.54;
    --mbc-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ============================================
   SLIDER / БЕГУЩАЯ СТРОКА
   ============================================ */
.mbc-slider-wrapper,
.mbc-other-bands-slider-wrapper {
    overflow: hidden !important;
    width: 100% !important;
    position: relative !important;
    padding: 20px 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.mbc-slider-track {
    display: flex !important;
    gap: 30px !important;
    align-items: flex-start !important;
    will-change: transform;
    animation: mbcScrollLeft 30s linear infinite;
}

.mbc-slider-wrapper:hover .mbc-slider-track,
.mbc-other-bands-slider-wrapper:hover .mbc-slider-track {
    animation-play-state: paused !important;
}

.mbc-slider-wrapper[data-direction="right"] .mbc-slider-track,
.mbc-other-bands-slider-wrapper[data-direction="right"] .mbc-slider-track {
    animation-name: mbcScrollRight;
}

@keyframes mbcScrollLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-33.333%);
    }
}

@keyframes mbcScrollRight {
    0% {
        transform: translateX(-33.333%);
    }
    100% {
        transform: translateX(0);
    }
}

/* ============================================
   ЭЛЕМЕНТ СЛАЙДЕРА — СТРОГО ФИКСИРОВАННЫЕ РАЗМЕРЫ
   ============================================ */
.mbc-slider-item {
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-decoration: none !important;
    transition: transform 0.3s ease;
    cursor: pointer !important;
    width: 145px !important;
    min-width: 145px !important;
    max-width: 145px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mbc-slider-item:hover {
    transform: scale(1.05);
    text-decoration: none !important;
}

.mbc-slider-item:hover .mbc-slider-item-name {
    text-decoration: none !important;
}

/* Контейнер фото — строго квадрат 145x145 */
.mbc-slider-item .mbc-slider-item-image,
.mbc-slider-item-image {
    width: 145px !important;
    height: 145px !important;
    min-width: 145px !important;
    min-height: 145px !important;
    max-width: 145px !important;
    max-height: 145px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: #1A1A1A !important;
    background-color: #1A1A1A !important;
    position: relative !important;
    flex-shrink: 0 !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

/* Изображение внутри — заполняет весь контейнер */
.mbc-slider-item .mbc-slider-item-image img,
.mbc-slider-item-image img {
    width: 145px !important;
    height: 145px !important;
    min-width: 145px !important;
    min-height: 145px !important;
    max-width: 145px !important;
    max-height: 145px !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Название группы под фото */
.mbc-slider-item .mbc-slider-item-name,
.mbc-slider-item-name {
    margin-top: 10px !important;
    font-family: var(--mbc-font-family) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    line-height: 22px !important;
    color: var(--mbc-text-white) !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 145px !important;
    width: 145px !important;
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.mbc-no-image-placeholder {
    width: 100% !important;
    height: 100% !important;
    background: #1A1A1A !important;
}

/* ============================================
   GRID (каталог)
   ============================================ */
.mbc-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--mbc-columns, 5), 1fr) !important;
    gap: 30px !important;
    padding: 20px 0 !important;
    background: transparent !important;
}

.mbc-grid-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-decoration: none !important;
    transition: transform 0.3s ease;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.mbc-grid-item:hover {
    transform: scale(1.05);
    text-decoration: none !important;
}

.mbc-grid-item-image {
    width: 145px !important;
    height: 145px !important;
    min-width: 145px !important;
    min-height: 145px !important;
    max-width: 145px !important;
    max-height: 145px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: #1A1A1A !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.mbc-grid-item-image img {
    width: 145px !important;
    height: 145px !important;
    min-width: 145px !important;
    min-height: 145px !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mbc-grid-item-name {
    margin-top: 10px !important;
    font-family: var(--mbc-font-family) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    line-height: 22px !important;
    color: var(--mbc-text-white) !important;
    text-align: center !important;
    background: transparent !important;
    text-decoration: none !important;
}

/* ============================================
   SINGLE BAND PAGE
   ============================================ */
.mbc-single-band-page {
    padding: 40px 0 60px !important;
    font-family: var(--mbc-font-family) !important;
    background: transparent !important;
    background-color: transparent !important;
}

.mbc-single-container {
    max-width: 1060px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

.mbc-band-title {
    font-family: var(--mbc-font-family) !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 39px !important;
    color: var(--mbc-text-white) !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
}

/* Жанры */
.mbc-band-genres {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
}

.mbc-genre-tag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 16px !important;
    border: 1px solid var(--mbc-genre-border) !important;
    border-radius: 0 !important;
    font-family: var(--mbc-font-family) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 19px !important;
    color: var(--mbc-text-gray) !important;
    white-space: nowrap !important;
    background: transparent !important;
}

/* Мета */
.mbc-band-meta-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 40px !important;
    margin-bottom: 30px !important;
}

.mbc-band-meta-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.mbc-meta-label {
    font-family: var(--mbc-font-family) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 19px !important;
    color: var(--mbc-text-gray) !important;
}

.mbc-meta-value {
    font-family: var(--mbc-font-family) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 19px !important;
    color: var(--mbc-text-white) !important;
}

/* ============================================
   ФОТО ГАЛЕРЕЯ
   ============================================ */
.mbc-band-gallery {
    display: flex !important;
    gap: 16px !important;
    margin-bottom: 40px !important;
    align-items: flex-start !important;
}

.mbc-gallery-main {
    flex-shrink: 0 !important;
    width: 797px !important;
    height: 426px !important;
    overflow: hidden !important;
    border-radius: 2px !important;
    background: #1A1A1A !important;
    position: relative !important;
}

.mbc-main-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: opacity 0.3s ease;
}

.mbc-gallery-thumbs {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    max-height: 426px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: #333 transparent;
}

.mbc-gallery-thumbs::-webkit-scrollbar {
    width: 4px;
}

.mbc-gallery-thumbs::-webkit-scrollbar-track {
    background: transparent;
}

.mbc-gallery-thumbs::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 2px;
}

.mbc-gallery-thumb {
    width: 106px !important;
    height: 96px !important;
    min-width: 106px !important;
    min-height: 96px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    cursor: pointer !important;
    opacity: var(--mbc-thumb-opacity);
    transition: opacity 0.3s ease;
    border-radius: 2px !important;
    position: relative !important;
}

.mbc-gallery-thumb.active,
.mbc-gallery-thumb:hover {
    opacity: 1 !important;
}

.mbc-gallery-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* ============================================
   ОПИСАНИЕ
   ============================================ */
.mbc-band-description {
    margin-bottom: 50px !important;
}

.mbc-band-description p {
    font-family: var(--mbc-font-family) !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 22px !important;
    color: var(--mbc-text-description) !important;
    margin-bottom: 16px !important;
}

.mbc-band-description p:last-child {
    margin-bottom: 0 !important;
}

/* ============================================
   ДРУГИЕ ГРУППЫ
   ============================================ */
.mbc-other-bands-section {
    margin-top: 40px !important;
}

.mbc-section-divider {
    width: 100% !important;
    height: 0 !important;
    border-top: 1px solid var(--mbc-border-color) !important;
    margin-bottom: 30px !important;
}

.mbc-other-bands-title {
    font-family: var(--mbc-font-family) !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    line-height: 24px !important;
    color: var(--mbc-text-white) !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    text-transform: uppercase !important;
}

/* ============================================
   ARCHIVE PAGE
   ============================================ */
.mbc-archive-page {
    min-height: 100vh !important;
    padding: 40px 0 60px !important;
    font-family: var(--mbc-font-family) !important;
    background: transparent !important;
}

.mbc-archive-title {
    font-family: var(--mbc-font-family) !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 39px !important;
    color: var(--mbc-text-white) !important;
    margin: 0 0 30px 0 !important;
}

.mbc-pagination {
    margin-top: 40px !important;
    text-align: center !important;
}

.mbc-pagination a,
.mbc-pagination span {
    display: inline-block !important;
    padding: 8px 14px !important;
    margin: 0 4px !important;
    color: var(--mbc-text-white) !important;
    background: #1A1A1A !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    font-family: var(--mbc-font-family) !important;
    font-size: 14px !important;
}

.mbc-pagination a:hover {
    background: #333 !important;
}

.mbc-pagination .current {
    background: #444 !important;
}

.mbc-no-bands {
    color: var(--mbc-text-gray) !important;
    font-family: var(--mbc-font-family) !important;
    font-size: 18px !important;
    text-align: center !important;
    padding: 40px 0 !important;
}

/* ============================================
   СБРОС СТИЛЕЙ ТЕМЫ ДЛЯ ЭЛЕМЕНТОВ ПЛАГИНА
   ============================================ */

/* Убираем любые фоны от темы */
.mbc-slider-wrapper *,
.mbc-other-bands-slider-wrapper *,
.mbc-grid * {
    box-sizing: border-box !important;
}

/* Ссылки внутри плагина — без подчёркивания */
a.mbc-slider-item,
a.mbc-slider-item:visited,
a.mbc-slider-item:hover,
a.mbc-slider-item:active,
a.mbc-slider-item:focus,
a.mbc-grid-item,
a.mbc-grid-item:visited,
a.mbc-grid-item:hover,
a.mbc-grid-item:active,
a.mbc-grid-item:focus {
    text-decoration: none !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Убираем серый фон который тема может добавлять к изображениям */
.mbc-slider-item figure,
.mbc-slider-item .wp-block-image,
.mbc-grid-item figure,
.mbc-grid-item .wp-block-image {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* WordPress может добавлять обёртки вокруг изображений */
.mbc-slider-item-image figure,
.mbc-slider-item-image .wp-caption,
.mbc-slider-item-image figcaption {
    display: none !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1100px) {
    .mbc-gallery-main {
        width: 100% !important;
        max-width: 600px !important;
        height: 350px !important;
    }

    .mbc-band-gallery {
        flex-direction: column !important;
    }

    .mbc-gallery-thumbs {
        flex-direction: row !important;
        max-height: none !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    .mbc-gallery-thumb {
        width: 90px !important;
        height: 80px !important;
        min-width: 90px !important;
        min-height: 80px !important;
    }
}

@media (max-width: 768px) {
    .mbc-band-title {
        font-size: 24px !important;
        line-height: 30px !important;
    }

    .mbc-band-meta-row {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .mbc-gallery-main {
        height: 260px !important;
    }

    .mbc-slider-item {
        width: 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;
    }

    .mbc-slider-item .mbc-slider-item-image,
    .mbc-slider-item-image {
        width: 120px !important;
        height: 120px !important;
        min-width: 120px !important;
        min-height: 120px !important;
        max-width: 120px !important;
        max-height: 120px !important;
    }

    .mbc-slider-item .mbc-slider-item-image img,
    .mbc-slider-item-image img {
        width: 120px !important;
        height: 120px !important;
        min-width: 120px !important;
        min-height: 120px !important;
        max-width: 120px !important;
        max-height: 120px !important;
    }

    .mbc-slider-item-name {
        font-size: 14px !important;
        max-width: 120px !important;
        width: 120px !important;
    }

    .mbc-grid-item-image {
        width: 120px !important;
        height: 120px !important;
    }

    .mbc-grid-item-image img {
        width: 120px !important;
        height: 120px !important;
    }

    .mbc-grid-item-name {
        font-size: 14px !important;
    }

    .mbc-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
    }

    .mbc-band-description p {
        font-size: 16px !important;
        line-height: 20px !important;
    }

    .mbc-single-band-page {
        padding: 20px 0 40px !important;
    }
}

@media (max-width: 480px) {
    .mbc-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .mbc-slider-item {
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
    }

    .mbc-slider-item .mbc-slider-item-image,
    .mbc-slider-item-image {
        width: 100px !important;
        height: 100px !important;
        min-width: 100px !important;
        min-height: 100px !important;
        max-width: 100px !important;
        max-height: 100px !important;
    }

    .mbc-slider-item .mbc-slider-item-image img,
    .mbc-slider-item-image img {
        width: 100px !important;
        height: 100px !important;
        min-width: 100px !important;
        min-height: 100px !important;
        max-width: 100px !important;
        max-height: 100px !important;
    }

    .mbc-slider-item-name {
        max-width: 100px !important;
        width: 100px !important;
    }

    .mbc-grid-item-image {
        width: 100px !important;
        height: 100px !important;
    }

    .mbc-grid-item-image img {
        width: 100px !important;
        height: 100px !important;
    }

    .mbc-gallery-main {
        height: 200px !important;
    }

    .mbc-gallery-thumb {
        width: 70px !important;
        height: 60px !important;
        min-width: 70px !important;
        min-height: 60px !important;
    }
}