/* --- Шрифты --- */
@font-face { 
    font-family: 'Gilroy-SemiBold'; 
    src: url('https://copella.live/assets/fonts/Gilroy-SemiBold.woff') format('woff'); 
    font-weight: 600; 
    font-style: normal; 
    font-display: swap; 
}
@font-face { 
    font-family: 'Gilroy-Bold'; 
    src: url('https://copella.live/assets/fonts/Gilroy-Bold.woff') format('woff'); 
    font-weight: 800; 
    font-style: normal; 
    font-display: swap; 
}

/* --- Стили блока "Топ авторов" --- */
.cp-top-creators {
    /* CSS переменные для легкой настройки */
    --tc-gap: 16px;                     /* Расстояние между карточками */
    --tc-radius: 20px;                  /* Скругление углов карточек */
    --tc-padding-x: 24px;               /* Отступы по бокам */

    color: #fff;
    font-family: 'Gilroy-SemiBold', system-ui, sans-serif;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* --- Заголовок и навигация --- */
.cp-top-creators .tc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 0 var(--tc-padding-x); /* Отступы для заголовка остаются */
}

.cp-top-creators .tc-title {
    margin: 0;
    font-weight: 800;
    font-size: 24px;
    font-family: 'Gilroy-Bold', sans-serif;
}

.cp-top-creators .tc-titlebar {
    display: none;
    gap: 10px;
}
@media (min-width: 1024px) {
    .cp-top-creators .tc-titlebar {
        display: flex;
    }
}

.cp-top-creators .tc-nav {
    appearance: none;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.25s ease;
}
.cp-top-creators .tc-nav:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: scale(1.1);
}
.cp-top-creators .tc-nav:disabled {
    opacity: .3;
    cursor: not-allowed;
    transform: scale(1);
}

/* --- Структура карусели --- */
.cp-top-creators .tc-viewport {
    /* РЕШЕНИЕ ПРОБЛЕМЫ ОБРЕЗКИ: 
       Этот родительский контейнер просто скрывает все, что выходит за его пределы. 
       В частности, горизонтальный скроллбар, который мы "вытолкнем" вниз из .tc-track */
    overflow: hidden;
}

.cp-top-creators .tc-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(20% - var(--tc-gap) * 0.8);
    gap: var(--tc-gap);
    padding: 0 var(--tc-padding-x); /* Отступы для десктопной версии */
}

/* --- Карточка автора --- */
.cp-top-creators .tc-card {
    position: relative;
    width: 100%;
    transition: transform 0.25s ease;
}
.cp-top-creators .tc-card:hover {
    transform: translateY(-6px);
}

/* --- Линии-разделители --- */
.cp-top-creators .tc-card::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translate(calc(var(--tc-gap) / 2 - 1.5px), -50%);
    width: 3px;
    height: 40%;
    border-radius: 3px;
}
.cp-top-creators .tc-card:last-of-type::after {
    display: none;
}
.cp-top-creators .tc-card:nth-child(4n+1)::after { background-color: #63f2b3; }
.cp-top-creators .tc-card:nth-child(4n+2)::after { background-color: #63a9f2; }
.cp-top-creators .tc-card:nth-child(4n+3)::after { background-color: #f263e3; }
.cp-top-creators .tc-card:nth-child(4n+4)::after { background-color: #f2c763; }

.cp-top-creators .tc-link {
    position: absolute; inset: 0; z-index: 3; border-radius: var(--tc-radius); outline-offset: 4px; 
}

.cp-top-creators .tc-thumb {
    display: block; width: 100%; aspect-ratio: 1/1; border-radius: var(--tc-radius);
    background-color: #1a1a1a; overflow: hidden; position: relative;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
.cp-top-creators .tc-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease;
}
.cp-top-creators .tc-card:hover .tc-thumb img {
    transform: scale(1.1);
}
.cp-top-creators .tc-thumb::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0) 55%);
    z-index: 1; border-radius: var(--tc-radius);
}

.cp-top-creators .tc-name {
    position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; font-weight: 600;
    font-size: clamp(14px, 1.2vw, 16px); text-shadow: 0 1px 3px rgba(0,0,0,.6);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- Адаптация под мобильные устройства --- */
@media (max-width: 1024px) {
    .cp-top-creators .tc-track {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        
        /* РЕШЕНИЕ ПРОБЛЕМЫ "ПРИЛИПАНИЯ":
           Это свойство создает "невидимые" отступы для точек прилипания.
           Теперь первая карточка будет прилипать не к краю экрана, а к этому отступу. */
        scroll-padding-left: var(--tc-padding-x);
        scroll-padding-right: var(--tc-padding-x);

        /* РЕШЕНИЕ ПРОБЛЕМЫ ОБРЕЗКИ:
           1. Убираем padding-left/right отсюда, так как scroll-padding делает эту работу лучше.
           2. Добавляем padding-bottom, чтобы вытолкнуть скроллбар вниз, за пределы видимости родителя.
           3. Убираем все хаки типа clip-path и отрицательных margin. */
        padding: 10px 0 30px 0; /* Сверху отступ для тени, снизу - для выталкивания скроллбара */

        /* Прячем скроллбар надежно */
        scrollbar-width: none; /* Firefox */
    }
    .cp-top-creators .tc-track::-webkit-scrollbar {
        display: none; /* Chrome, Safari, etc. */
    }

    .cp-top-creators .tc-card {
        flex: 0 0 160px;
        scroll-snap-align: start;
        /* Важно! Добавляем отступы здесь, а не на треке */
        margin-left: var(--tc-gap);
    }
    /* Убираем лишний отступ у самой первой карточки */
    .cp-top-creators .tc-card:first-child {
        margin-left: var(--tc-padding-x);
    }
    /* Добавляем отступ в конце, чтобы последняя карточка не прилипала к правому краю */
    .cp-top-creators .tc-card:last-child {
        margin-right: var(--tc-padding-x);
    }

    .cp-top-creators .tc-card:last-of-type::after {
        display: block; /* Линия нужна после предпоследнего элемента */
    }
}
@media (max-width: 768px) {
    .cp-top-creators .tc-card { flex-basis: 140px; }
    .cp-top-creators .tc-title { font-size: 22px; }
}
@media (max-width: 560px) {
    .cp-top-creators .tc-card { flex-basis: 130px; }
}