/* Шоу-номера контейнер с фоном */
#show_number_category{
    background-image: url(/static/img/show_page/show_background.PNG);
    background-repeat: no-repeat;
}

/* Шоу-номера контейнер заголовка и навигации */
.s_n__c__blog{
    display: grid;
    grid-template-columns: 1fr max-content;
}

/* Шоу-номера заголовок */
.s_n__c__b__title{
    text-align: var(--h1_text_align);
}

/* Шоу-номера контейнер навигации */
.s_n__c__b__navigation{
    display: flex;
    gap: 20px;
    user-select: none;
}

/* Шоу-номера кнопки навигации */
.s_n__c__b__n__btn{
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(30px, 3vw, 40px);
    height: clamp(30px, 3vw, 40px);
    z-index: 1;
    cursor: pointer;
    border: none;
    transition: transform 0.3s ease, background 0.3s ease;
    border-radius: var(--h1_border_radius);
    color: rgb(var(--color_white));
    font: var(--h3_font);
    box-shadow: var(--box_shadow) rgb(var(--color_white) / var(--o_10));
    background: rgb(var(--color_white) / var(--o_10));
    user-select: none;
    -webkit-user-select: none;
}

/* Шоу-номера иконки навигации */
.s_n__c__b__navigation img{
    width: clamp(10px, 2vw, 20px);
    height: clamp(10px, 2vw, 20px);
}

/* Шоу-номера ограниченный контейнер с карточками */
.s_n__c__slider-wrapper {
    overflow: hidden;
}

/* Шоу-номера контейнер с карточками */
.s_n__c__s-w__slider {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: none;
}

/* Шоу-номера карточка */
.s_n__c__s-w__c__container {
    flex: 0 0 clamp(180px, 30vw, 320px);
    display: grid;
    gap: 10px;
    padding: 15px;
    overflow: hidden;
    box-sizing: border-box;
    border: var(--h1_border) transparent;
    background: linear-gradient(rgb(var(--color_brown))) padding-box, linear-gradient(to bottom, #c74d32, #c74d3270) border-box;
    border-radius: var(--h4_border_radius);
}

/* Шоу-номера фото контейнер */
.s_n__c__s-w__c__c__img_container{
    height: 200px;
    opacity: 0.8;
    margin: -15px -15px 0 -15px;
    overflow: hidden;
    border: var(--h1_border) #c74d3270;
    border-radius: var(--h4_border_radius);
}

/* Шоу-номера фото в карточке */
.s_n__c__s-w__c__c__img{
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}

/* Шоу-номера название карточки */
.s_n__c__s-w__c__c__title{
    font: var(--h2_font);
    color: rgb(var(--color_white));
}

/* Шоу-номера описание карточки */
.s_n__c__s-w__c__c__details{
    font: var(--h7_font);
    color: rgb(var(--color_white) / var(--o_90));
}

/* Шоу-номера доп текст в карточке */
.s_n__c__s-w__c__c__points_one,
.s_n__c__s-w__c__c__points_two{
    font: var(--h7_font);
    color: rgb(var(--color_white) / var(--o_70));
}

/* Шоу-номера невидимый блок с звездой перед доп текстом в карточке */
.s_n__c__s-w__c__c__points_one::before,
.s_n__c__s-w__c__c__points_two::before{
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    background-image: url(/static/img/svg/show_page/star_point.svg);
    vertical-align: bottom;
}



/* "Выбранные" номера контейнер с фоном */
#show_number{
    background: rgb(var(--color_black));
}

/* "Выбранные" номера заголовок */
.s_n__title{
    text-align: var(--h1_text_align);
}

/* "Выбранные" номера контейнер с карточками */
.s_n__cards{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
}

/* "Выбранные" номера карточка */
.s_n__card {
    overflow: hidden;
    position: relative;
    border-radius: var(--h3_border_radius);
    box-shadow: 0 20px 40px rgb(var(--color_black) / var(--o_20));
    transition: transform 0.3s ease;
}

/* "Выбранные" номера контейнер фото в карточке */
.visual-card_image{
    aspect-ratio: 3 / 4;
    overflow: hidden;
    user-select: none;
}

/* "Выбранные" фото в карточке */
.visual-card_image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* "Выбранные" номера невидимый контейнер с текстом названия карточки */
.visual-card_overlay{
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 18px 18px;
    box-sizing: border-box;
    background: linear-gradient(to top, rgb(var(--color_black) / var(--o_50)), rgb(var(--color_black) / var(--o_00)) 60%);
}

/* "Выбранные" номера текст названия карточки */
.s_n__card__title{
    max-width: 80%;
    transition: color 0.3s ease;
    font: var(--h5_title_card_font);
    color: rgb(var(--color_white));
}



/* Показать больше кнопка */
#s_n__c__load_more {
    margin: 48px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: var(--h2_border_radius);
    background: transparent;
    border: var(--h1_border) rgb(var(--color_vinous) / var(--o_60));
    font: var(--h2_btn_font);
    color: rgb(var(--color_vinous));
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

/* Показать больше кнопка в активном состоянии */
#s_n__c__load_more:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgb(var(--color_vinous) / var(--o_35));
}







/* Планшеты */
@media (max-width: 1024px){
    
}

/* Телефоны */
@media (max-width: 768px){
    /* "Выбранные" номера контейнер с карточками */
    .s_n__cards{
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 20px;
    }
}

/* Маленькие телефоны */
@media (max-width: 480px){
    /* "Выбранные" номера контейнер с карточками */
    .s_n__cards{
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}



/* Hover для десктопа */
@media (hover: hover) and (pointer: fine) {
    /* Шоу-номера при наведении кнопки навигации */
    .s_n__c__b__n__btn:hover{
        transform: scale(1.05);
        background: rgb(var(--color_vinous));
    }



    /* "Выбранные" номера при наведении карточка */
    .s_n__card:hover{
        transform: translateY(-4px);
    }

    /* "Выбранные" номера при наведении фото в карточке */
    .s_n__card:hover img{
        transform: scale(1.06);
    }

    /* "Выбранные" номера при наведении текст названия карточки */
    .s_n__card:hover .s_n__card__title{
        color: rgb(var(--color_vinous));
    }



    /* Показать больше при наведении кнопка */
    #s_n__c__load_more:hover {
        box-shadow: 0 8px 24px rgb(var(--color_vinous) / var(--o_35));
        transform: translateY(-1px);
        background: rgb(var(--color_vinous));
        color: rgb(var(--color_white));
    }
}



/* Стили для сенсорных устройств */
@media (hover: none) and (pointer: coarse) {
    .s_n__c__blog {
        grid-template-columns: 1fr;
    }
    .s_n__c__b__navigation{
        display: none;
    }
}