/* CollectBanner 组件样式 */
.rank_item-collect-banner {
    width: var(--card-width);
    flex-shrink: 0;
    z-index: 1;
    --real-card-width: var(--card-width);
    --real-card-height: var(--card-height);
    --light-theme-background-color: var(--sl-color-neutral-0);
    --dark-theme-background-color: var(--sl-color-neutral-50);
    --common-background-color: var(--light-theme-background-color);
}

.rank_item-collect-banner .product {
    --card-padding: 0;
    position: relative;
    aspect-ratio: var(--aspect-ratio, 16 / 9);
    overflow: hidden;
    border-radius: var(--sl-border-radius-large);
}

.rank_item-collect-banner .module-bg {
    background-size: cover;
    inset: -5px;
    position: absolute;
    border-radius: var(--sl-border-radius-large);
    transition: all var(--sl-transition-fast) ease;
    transform-origin: center center;
}

.rank_item-collect-banner .contain {
    position: relative;
    z-index: 1;
    padding: var(--sl-spacing-large);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

.rank_item-collect-banner .title {
    font-size: var(--sl-font-size-x-large);
    font-family: var(--header-font);
    color: var(--sl-default-white, #fff);
    transition: all var(--sl-transition-fast) ease;
    transform: translateY(30px);
    margin: 0;
}

.rank_item-collect-banner .desc {
    font-size: 14px;
    color: var(--sl-default-white, #fff);
    transition: all var(--sl-transition-fast) ease-out;
    opacity: 0;
    transform: scaleY(0);
    transform-origin: center bottom;
    margin-top: var(--sl-spacing-small);
    height: 36px;
}

.rank_item-collect-banner .blur {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3));
    border-radius: var(--sl-border-radius-large);
}

.rank_item-collect-banner .product:hover .title,
.rank_item-collect-banner .product:focus .title {
    transform: translateY(0px);
}

.rank_item-collect-banner .product:hover .desc,
.rank_item-collect-banner .product:focus .desc {
    opacity: 1;
    transform: scaleY(1);
}