/* --- Шрифты --- */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@800;900&display=swap');

@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: 20px;                     /* Расстояние между карточками */
    --tc-radius: 20px;                  /* Скругление углов карточек */
    --tc-padding-x: 24px;               /* Отступы по бокам */
    --tc-container-bg: transparent;     /* Фон контейнера */
    --tc-container-radius: 0;           /* Скругление контейнера */

    color: #fff;
    font-family: 'Gilroy-SemiBold', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    background: var(--tc-container-bg);
    border-radius: var(--tc-container-radius);
    padding: 0 24px;
    border: 0;
}

/* --- Заголовок и навигация --- */
.cp-top-creators .tc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.cp-top-creators .tc-title {
    margin: 0;
    font-weight: 800;
    font-size: 20px;
    font-family: 'Unbounded', 'Gilroy-Bold', sans-serif;
    letter-spacing: -0.02em;
}

.cp-top-creators .tc-titlebar {
    display: flex;
    gap: 10px;
}

.cp-top-creators .tc-nav {
    appearance: none;
    background: transparent;
    border: 0;
    color: #fff;
    opacity: .9;
    border-radius: 10px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .2s ease, opacity .2s ease;
}
.cp-top-creators .tc-nav svg { width: 20px; height: 20px; }
.cp-top-creators .tc-nav:hover {
    background: rgba(255, 255, 255, 0.06);
    opacity: 1;
}
.cp-top-creators .tc-nav:disabled {
    opacity: .35;
    pointer-events: none;
    background: transparent;
}

/* --- Структура карусели --- */
.cp-top-creators .tc-viewport {
    overflow: visible;
    padding-top: 10px;
    padding-bottom: 10px;
}

.cp-top-creators .tc-track {
    display: flex;
    gap: var(--tc-gap);
    padding: 10px 0 10px 0;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    scroll-behavior: smooth;
}
.cp-top-creators .tc-track::-webkit-scrollbar {
    display: none;
}

/* Fallback для браузеров без поддержки gap у flex */
@supports not (gap: 1rem) {
    .cp-top-creators .tc-track { margin-left: 0; }
    .cp-top-creators .tc-track > * { margin-left: var(--tc-gap); }
    .cp-top-creators .tc-track > *:first-child { margin-left: 0; }
}

/* --- Карточка автора --- */
.cp-top-creators .tc-card {
    position: relative;
    flex: 0 0 auto;
    width: 200px;
    transition: transform 0.25s ease;
    z-index: 2;
}
.cp-top-creators .tc-card:hover {
    transform: translateY(-6px);
}

/* --- Номера позиций (в верхнем углу карточки) --- */
.cp-top-creators .tc-number {
    position: absolute;
    top: 12px;
    left: 16px;
    z-index: 3;
    font-size: clamp(30px, 4.6vw, 56px);
    font-weight: 900;
    font-family: 'Unbounded', 'Gilroy-Bold', 'Gilroy-SemiBold', system-ui, -apple-system, sans-serif;
    line-height: .9;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
    text-shadow: none;
}
.cp-top-creators .tc-number::after {
    content: none;
}


.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);
    overflow: hidden; 
    position: relative;
    box-shadow:
        0 8px 24px rgba(0,0,0,0.4),
        0 4px 12px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.1);
    /* Сдержанный тёмный фон по умолчанию (фоллбэк без изображения) */
    background:
      linear-gradient(180deg, #141414 0%, #0f0f0f 100%);
    transition: box-shadow .3s ease, transform .3s ease;
}

/* Дополнительный слой с сияющим градиентом поверх текстуры */
.cp-top-creators .tc-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Нежный блик без текстуры */
    background: linear-gradient(140deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 40%);
    z-index: 1;
    pointer-events: none;
    opacity: .75;
    transition: opacity .3s ease;
}

.cp-top-creators .tc-card:hover .tc-thumb::before { opacity: .95; }

.cp-top-creators .tc-thumb img {
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
    position: relative;
    z-index: 1;
    transition: transform .3s ease;
}
.cp-top-creators .tc-card:hover .tc-thumb img {
    transform: scale(1.1);
}

/* Фоллбэк для карточек без изображения */
.cp-top-creators .tc-fallback {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: 900;
    color: rgba(255,255,255,0.1);
    font-family: 'Unbounded', 'Gilroy-Bold', sans-serif;
}

/* Убираем темный градиент снизу */
.cp-top-creators .tc-thumb::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: var(--tc-radius);
    background: radial-gradient(85% 85% at 50% 50%, var(--tc-accent, rgba(255,255,255,.10)) 0%, rgba(0,0,0,0) 60%);
    z-index: -1;
    opacity: 0;
    transition: opacity .3s ease, transform .3s ease;
    filter: blur(8px);
    transform: scale(0.95);
}
.cp-top-creators .tc-card:hover .tc-thumb::after {
    opacity: 1;
    transform: scale(1);
}
.cp-top-creators .tc-card:nth-child(4n+1) {
    --tc-accent: rgba(0,255,136,.18);
}
.cp-top-creators .tc-card:nth-child(4n+1) .tc-thumb {
    background:
      linear-gradient(180deg, #0d1f1a 0%, #0b1512 100%),
      radial-gradient(60% 80% at 60% 0%, rgba(0,255,136,.12) 0%, rgba(0,0,0,0) 60%);
}
.cp-top-creators .tc-card:nth-child(4n+2) {
    --tc-accent: rgba(76,125,255,.18);
}
.cp-top-creators .tc-card:nth-child(4n+2) .tc-thumb {
    background:
      linear-gradient(180deg, #101727 0%, #0c1220 100%),
      radial-gradient(60% 80% at 60% 0%, rgba(76,125,255,.12) 0%, rgba(0,0,0,0) 60%);
}
.cp-top-creators .tc-card:nth-child(4n+3) {
    --tc-accent: rgba(255,76,194,.18);
}
.cp-top-creators .tc-card:nth-child(4n+3) .tc-thumb {
    background:
      linear-gradient(180deg, #1b1220 0%, #140d19 100%),
      radial-gradient(60% 80% at 60% 0%, rgba(255,76,194,.12) 0%, rgba(0,0,0,0) 60%);
}
.cp-top-creators .tc-card:nth-child(4n+4) {
    --tc-accent: rgba(0,209,255,.18);
}
.cp-top-creators .tc-card:nth-child(4n+4) .tc-thumb {
    background:
      linear-gradient(180deg, #0f1a1f 0%, #0b1418 100%),
      radial-gradient(60% 80% at 60% 0%, rgba(0,209,255,.12) 0%, rgba(0,0,0,0) 60%);
}

.cp-top-creators .tc-name {
    position: absolute; 
    left: 18px; 
    right: 18px; 
    bottom: 16px; 
    z-index: 2; 
    font-weight: 700;
    font-size: clamp(16px, 1.4vw, 20px); 
    color: #fff;
    text-shadow: 
        0 1px 3px rgba(0,0,0,.8),
        0 2px 6px rgba(0,0,0,.6);
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
}

/* --- Адаптация для десктопа --- */
@media (min-width: 1024px) {
    .cp-top-creators .tc-viewport {
        overflow: visible;
    }
    .cp-top-creators .tc-track {
        overflow-x: auto;
        overflow-y: visible;
        padding: 10px 0 10px 0;
    }
}

/* --- Адаптация под мобильные устройства --- */
@media (max-width: 1024px) {
    .cp-top-creators .tc-viewport {
        overflow-x: auto;
        overflow-y: visible;
        padding: 10px 0 10px 0;
        scrollbar-width: none;
    }
    .cp-top-creators .tc-viewport::-webkit-scrollbar {
        display: none;
    }
    
    .cp-top-creators .tc-track {
        display: flex;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        padding: 10px 0 10px 0;
        gap: var(--tc-gap);
    }

    .cp-top-creators .tc-card {
        flex: 0 0 220px;
        scroll-snap-align: start;
    }
    
    .cp-top-creators .tc-number {
        font-size: clamp(28px, 6.2vw, 48px);
        top: 10px;
        left: 14px;
    }
}

@media (max-width: 768px) {
    .cp-top-creators .tc-card { 
        flex-basis: 240px; 
    }
}

/* Адаптивные отступы контейнера */
@media (max-width: 640px) {
    .cp-top-creators {
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
        padding: 0 16px;
    }
    .cp-top-creators .tc-track {
        padding: 10px 0 10px 0;
        gap: var(--tc-gap, 16px);
    }
    
    .cp-top-creators .tc-card { 
        flex-basis: calc(100vw - 16px - 16px - 32px);
        max-width: 320px;
    }
    
    .cp-top-creators .tc-number {
        font-size: clamp(32px, 12vw, 54px);
        top: 8px;
        left: 12px;
    }
}

@media (max-width: 1024px) and (min-width: 641px) {
    .cp-top-creators {
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    .cp-top-creators .tc-card { 
        flex-basis: 240px; 
    }
}