/* О нас */
.a_b__content{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 3vw, 50px);
    align-items: start;
}

/* О нас левый и правый блок */
.a_b__c__blog{
    display: grid;
    gap: 20px;
}

/* О нас текст левого блока */
.a_b__c__b__text{
    font: var(--h1_font);
    color: rgb(var(--color_white) / var(--o_90));
}

/* О нас текст правого блока */
.a_b__c__b__title{
    font: var(--h1_font);
    font-variant: small-caps;
    color: rgb(var(--color_white) / var(--o_90));
}

/* О нас контейнер плиток */
#a_b__c__b__tables{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
}

/* О нас плитка */
.a_b__c__b__t__table{
    padding: 30px 10px;
    display: grid;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 0;
    gap: 10px;
    text-align: var(--h2_text_align);
    border-radius: var(--h4_border_radius);
    background: linear-gradient(180deg, rgb(var(--color_vinous) / var(--o_35)), rgb(var(--color_white) / var(--o_10)));
    border: var(--h2_border) rgb(var(--color_white) / var(--o_30));
}

/* О нас появление плитки при загрузке страницы */
.a_b__c__b__t__table.visible{
    opacity: 1;
}

/* О нас число в плитке */
.a_b__c__b__t__t__number{
    font: var(--h0w_font);
    color: rgb(var(--color_vinous));
}

/* О нас текст в плитке */
.a_b__c__b__t__t__title{
    font: var(--h4_font);
    color: rgb(var(--color_white) / var(--o_80));
}



/* Организация праздников */
.o_aw__content{
    display: grid;
    gap: 10px;
    text-align: center;
}

/* Организация праздников текстовая информация*/
.o_aw__c__text{
    font: var(--h3_font);
    color: rgb(var(--color_white) / var(--o_80));
}

/* Организация праздников контейнер карточек */
#o_aw__c__cards{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 15px;
}

/* Организация праздников карточка */
.o_aw__c__c__card{
    display: grid;
    grid-template-rows: max-content max-content;
    position: relative;
    padding: clamp(10px, 2vw, 15px);
    gap: 30px;
    cursor: pointer;
    aspect-ratio: 3 / 3;
    text-align: var(--h1_text_align);
    border: var(--h2_border) rgb(var(--color_white) / var(--o_30));
    border-radius: var(--h4_border_radius);
    overflow: hidden;
}

/* Организация праздников фото в карточке */
.o_aw__c__c__c__img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
    transform: scale(1.05);
    border-radius: var(--h4_border_radius);
}

/* Организация праздников текст в карточке */
.o_aw__c__c__c__title{
    z-index: 2;
    font: var(--h2_font);
    color: rgb(var(--color_white));
}

/* Организация праздников доп текст в карточке */
.o_aw__c__c__c__description{
    z-index: 2;
    position: relative;
    transition: opacity 0.3s ease;
    font: var(--h7_font);
    color: rgb(var(--color_white) / var(--o_90));
}

/* Организация праздников карточка нижний слой с блюром */
.o_aw__c__c__c__title::before,
.o_aw__c__c__c__description::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    backdrop-filter: blur(1px);
    background: linear-gradient(135deg, rgb(var(--color_black) / var(--o_30)), rgb(var(--color_black) / var(--o_20)));
    border-radius: var(--h4_border_radius);
}


/* Квиз форма */
#quiz_blog{
    margin: 10px 15%;
    padding: 0;
    background: linear-gradient(to bottom, rgb(var(--color_vinous) / var(--o_35)), rgb(var(--color_black) / var(--o_50)));
    border: var(--h1_border) rgb(var(--color_red));
    border-radius: var(--h4_border_radius);
}

/* Квиз форма заголовок */
.q_b__title{
    padding-top: 40px;
}

/* Квиз форма блоки вопросов */
#q_b__question{
    padding: 0 clamp(10px, 2vw, 20px);
    font: var(--h2_font);
    color: rgb(var(--color_white));
}

/* Квиз форма контейнер инпут полей для ответов */
.quiz-answer-input-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(10px, 2vw, 20px);
}

/* Квиз форма поле ввода ответа */
.quiz-answer-input{
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    font: var(--h6_font);
    border: var(--h2_border) rgb(var(--color_white) / var(--o_30));
}

/* Квиз форма поле ввода ответа для сенсорных устройств */
.quiz-answer-input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
}

/* Квиз форма поле ввода ответа в активном состоянии */
.quiz-answer-input:focus{
    border-color: rgb(var(--color_red_mute) / var(--o_90));
    box-shadow:  0 0 0 1px rgb(var(--color_red) / var(--o_40)), 0 6px 18px rgb(var(--color_black) / var(--o_50));
    transform: translateY(-1px);
}

/* Квиз форма поле ввода ответа в активном состоянии */
.quiz-answer-input:focus + .quiz-answer-input-label{
    color: rgb(var(--color_red_mute) / var(--o_90));
}

#quiz_blog .input-group__input:not(:placeholder-shown) + .input-group__label, 
#quiz_blog .input-group__input:focus + .input-group__label{
    background-color: rgb(var(--color_brown));
}

/* Квиз форма чекбокс для выбора ответа */
.checkbox-grid{
    display: grid;
}

/* Квиз форма иконка календарика для выбора даты */
.quiz-answer-input-btn{
    position: absolute;
    right: 5px;
    top: 5px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    opacity: 0.7;

    pointer-events: none;
}

/* Квиз форма навигация контейнер*/
.q_b__navigation{
    display: grid;
    grid-template-columns: max-content max-content;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    -webkit-user-select: none;
    padding: clamp(10px, 2vw, 20px);
    font: var(--h6_font);
    color: rgb(var(--color_white) / var(--o_80));
}

/* Квиз форма навигация - контейнер кнопок */
.q_b__n__buttons{
    display: flex;
    gap: 10px;
}

/* Квиз форма навигация кнопка "Назад" SVG */
#q_b__n__b__p__icon{
    width: clamp(20px, 2vw, 40px);
    height: 20px;
}

/* Квиз форма навигация кнопки */
#q_b__n__b__prev,
#q_b__n__b__next{
    font: var(--h6_font);
}

/* Квиз форма навигация кнопка «Назад» в выкл состоянии */
#q_b__n__b__prev.disabled {
    background: linear-gradient(0.25turn, rgba(84, 6, 0, 1) 0%, rgba(3, 3, 23, 1) 100%);
    opacity: 0.3;
    color: rgb(var(--color_white) / var(--o_70));
    pointer-events: none;
    border: var(--h1_border) rgb(var(--color_white) / var(--o_10));
}


/* Готовые номера */
#ready_show_blog{
    grid-template-columns:clamp(260px, 30vw, 350px) minmax(0, 1fr);
    gap: 0;
}

/* Готовые номера левый блок*/
.r_s__b__content{
    display: grid;
    grid-template-rows: max-content 1fr;
    padding: 20px 0;
    gap: 20px;
}

/* Готовые номера заголовок*/
.r_s__b__c__title{
    text-align: var(--h1_text_align);
}

/* Готовые номера блок с доп текстом и кнопкой */
.r_s__b__c__blog{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Готовые номера доп текст */
.r_s__b__c__b__text{
    font: var(--h4_font);
    color: rgb(var(--color_white) / var(--o_80));
}

/* Готовые номера правый блок контейнер карточек */
#r_s__b__c__cards{
    display: flex;
    overflow-x: auto;
    gap: clamp(10px, 1vw, 15px);
    padding: 20px 0 0 clamp(20px, 3vw, 50px);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

/* Готовые номера контейнер карточек убрать гориз скролл */
#r_s__b__c__cards::-webkit-scrollbar{
    display: none;
}

/* Готовые номера контейнер карточек добавить грабинг*/
#r_s__b__c__cards.grabbing {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

/* Готовые номера карточка */
.r_s__b__c__c__c__card{
    flex: 0 0 min(20vw, 480px);
    height: clamp(400px, 27vw, 600px);
    position: relative;
    transition: transform 0.3s ease;
}

/* Готовые номера фото в карточке*/
.r_s__b__c__c__c__c__img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    border-radius: var(--h4_border_radius);
}

/* Готовые номера невидимый контейнер с текстом имени карточки */
.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_60)), rgb(var(--color_black) / var(--o_00)) 60%);
}

/* Готовые номера текст с именем карточки */
.r_s__b__c__c__c__title{
    max-width: 80%;
    transition: color 0.3s ease;
    font: var(--h4_title_card_font);
    color: rgb(var(--color_white) / var(--o_90));
}



/* Выбор костюмов */ 
.c_b__content{
    display: grid;
    grid-template-columns:clamp(260px, 30vw, 420px) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 40px);
}

/* Выбор костюмов левый и правый контейнеры */ 
.c_b__container{
    display: grid;
    gap: 20px;
}

/* Выбор костюмов заголовок*/ 
.c_b__title{
    text-align: var(--h1_text_align);
}

/* Выбор костюмов доп текст */ 
.c_b__c__text{
    font: var(--h4_font);
    color: rgb(var(--color_white) / var(--o_80));
}

/* Выбор костюмов контейнер фоток */ 
#c_b__c__image {
    display: grid;
    height: max-content;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 12px;
}

/* Выбор костюмов фотка */ 
.c_b__c__i__item {
    width: 100%;
    aspect-ratio: 1 / 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    object-fit: cover;
    border-radius: var(--h4_border_radius);
}

/* Выбор костюмов фотка при наведении */ 
.c_b__c__i__item:hover{
    transform: scale(1.15) translateY(-10px);
    box-shadow: 0 25px 60px rgb(var(--color_vinous) / var(--o_35));
}



/* Звезды контейнер карточек */
#s_r__cards{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    padding: 0 clamp(10px, 2vw, 20px);
    gap: clamp(10px, 2vw, 20px);
    justify-items: center;
}

/* Звезды карточка */
.s_r__c__card{
    width: 85%;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 8px;
}

/* Звезды фото в карточке */
.s_r__c__c__img{
    width: 150px;
    height: 150px;
    overflow: hidden;
    object-fit: cover;
    object-position: center;
    border-radius: var(--h1_border_radius);
    box-shadow: 0 0 0 3px rgb(var(--color_vinous) / var(--o_35)), 0 20px 40px rgb(var(--color_black) / var(--o_50));
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Звезды имя в карточке */
.s_r__c__c__name{
    font: var(--h13_font);
    color: rgb(var(--color_white));
}

/* Звезды текст с профессией в карточке */
.s_r__c__c__info{
    font: var(--h8_font);
    color: rgb(var(--color_vinous));
}

/* Звезды короткий текст с отзывом в карточке */
.s_r__c__c__details{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    font: var(--h13_font);
    color: rgb(var(--color_white) / var(--o_80));
}

/* Звезды открытый текст с отзывом в карточке */
.s_r__c__c__details.open{
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* Звезды кнопка читать еще в карточке */
.s_r__c__c__read{
    cursor: pointer;
    color: rgb(var(--color_gray) / var(--o_90));
    transition: transform 0.3s ease, color 0.3s ease;
}

.s_r__c__c__read:active{
    transform: scale(1.04);
    color: rgb(var(--color_vinous));
}



/* Портфолио */
.p__content{
    display: grid;
    gap: 20px;
    justify-items: center;
}

/* Портфолио контейнер с навигацией и карточками*/
.p__c__blog{
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    gap: clamp(10px, 2vw, 20px);
    align-items: center;
}

/* Портфолио ограниченный контейнер с карточками */
.p__c__b__cards_wrapper {
    overflow: hidden;
}

/* Портфолио контейнер с карточками */
#p__c__b__c_w__cards {
    display: flex;
    gap: 40px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

/* Портфолио контейнер с карточками скрыть гориз скролл */
#p__c__b__c_w__cards::-webkit-scrollbar {
    display: none;
}

/* Портфолио навигация */
.nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    z-index: 1;
    cursor: pointer;
    border: none;
    transition: transform 0.3s ease, background 0.3s ease;
    border-radius: var(--h1_border_radius);
    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;
}

/* Портфолио иконки навигации */
.nav-btn img{
    width: clamp(10px, 2vw, 20px);
    height: clamp(10px, 2vw, 20px);
}

/* Портфолио карточка */
.p__c__b__c_w__card {
    flex: 0 0 clamp(180px, 30vw, 320px);
    height: 300px;
    border-radius: var(--h4_border_radius);
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease;
}

/* Портфолио фото в карточке */
.p__c__b__c_w__c__img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    border-radius: var(--h4_border_radius);
}

/* Портфолио невидимый контейнер с текстом названия карточки */
.p__c__b__c__overlay{
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 18px 18px;
    background:linear-gradient(to top, rgb(var(--color_vinous) / var(--o_35)), rgb(var(--color_black) / var(--o_50)));
}

/* Портфолио текст названия карточки */
.p__c__b__c_w__c__title{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 85%;
    color: rgb(var(--color_white) / var(--o_90));
    font: var(--h6_font);
    transition: color 0.3s ease;
}



/* Выбирают нас */
.f__content{
    display: grid;
    gap: 20px;
}

/* Выбирают нас контейнер карточек с факторами */
#f__c__cards{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    padding: clamp(10px, 1.5vw, 15px);
}

/* Выбирают нас карточка с факторами */
.f__c__c__card{
    display: grid;
    gap: 20px;
    padding: 15px;
    text-align: center;
    border: var(--h1_border) rgb(var(--color_white) / var(--o_30));
    background: linear-gradient(to top, rgb(var(--color_vinous) / var(--o_35)), rgb(var(--color_black) / var(--o_50)));
    transition: transform 0.3s ease;
}

/* Выбирают нас иконка в карточке с факторами */
.f__c__c__c__icon{
    width: 58px;
    height: 58px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    justify-self: center;
}

/* Выбирают нас текст в карточке с факторами */
.f__c__c__c__title{
    font: var(--h2_font);
    color: rgb(var(--color_white));
}

/* Выбирают нас доп текст в карточке с факторами */
.f__c__c__c__details{
    font: var(--h4_font);
    color: rgb(var(--color_white) / var(--o_90));
}


/* Выбирают нас контейнер карточек с компаниями */
#f__c__cards_company{
    min-height: 125px;
    position: relative;
}

/* Выбирают нас слои карточек с компаниями */
.cards-layer {
    position: absolute;
    width: 100%;
    transition: opacity 0.5s ease;
    opacity: 0;
    pointer-events: none;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border: var(--h1_border) rgb(var(--color_white) / var(--o_30));
}

/* Выбирают нас активный слой карточек с компаниями */
.cards-layer.active{
    opacity: 1;
    pointer-events: auto;
}

/* Выбирают нас карточка с компаниями */
.f__c__c_c__card {
    height: 120px;
    transition: opacity 0.3s ease-in-out;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
    background: rgb(var(--color_black));
}

/* Выбирают нас нижний слой с линией разделителем в карточках с компаниями */
.f__c__c_c__card::after{
    content: "";
    position: absolute;
    right: 0;
    top: 15px;
    bottom: 15px;
    width: 1px;
    background: rgb(var(--color_white) / var(--o_30));
}

/* Выбирают нас без последнего элемента нижний слой с линией разделителем в карточках с компаниями */
.f__c__c_c__card:last-child::after{
    display: none;
}

/* Выбирают нас фото в карточке с компаниями */
.f__c__c_c__c__img{
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: contain;
    object-position: center;
}





/* Планшеты */
@media (max-width: 1024px){
    /* О нас */
    .a_b__content{
        grid-template-columns: 1fr
    }

    /* О нас контейнер плиток */
    #a_b__c__b__tables{
        grid-template-columns: repeat(3, 1fr);
    }



    /* Квиз форма */
    #quiz_blog{
        margin: 10px 5%;
    }



    /* Готовые номера карточка */
    .r_s__b__c__c__c__card{
        flex: 0 0 clamp(200px, 22vw, 330px);
    }



    /* Выбор костюмов контейнер фоток */ 
    #c_b__c__image {
        grid-template-columns: repeat(4, 1fr);
    }



    /* Звезды контейнер карточек */
    #s_r__cards{
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }



    /* Выбирают нас контейнер карточек с компаниями */
    #f__c__cards_company{
        min-height: 235px;
    }

    /* Выбирают нас слои карточек с компаниями */
    .cards-layer {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Выбирают нас карточка с компаниями */
    .f__c__c_c__card{
        filter: none;
    }

    /* Выбирают нас нижний слой с линией разделителем в карточках с компаниями */
    .f__c__c_c__card::after{
        content: none;
    }
}

/* Телефоны */
@media (max-width: 768px){
    /* О нас текст левого блока */
    .a_b__c__b__text{
        line-height: 1.4;
    }

    /* О нас контейнер плиток */
    #a_b__c__b__tables{
        grid-template-columns: repeat(2, 1fr);
    }



    /* Выбор костюмов */ 
    .c_b__content{
        grid-template-columns: 1fr;
    }

    /* Выбор костюмов левый и правый контейнеры */ 
    .c_b__container{
        text-align: center;
        justify-items: center;
    }

    /* Выбор костюмов заголовок*/ 
    .c_b__title{
        text-align: var(--h2_text_align);
    }
}

/* Маленькие телефоны */
@media (max-width: 480px){
    /* Квиз форма контейнер инпут полей для ответов */
    .quiz-answer-input-grid{
        grid-template-columns: 1fr;
        gap: 0px;
    }



    /* Готовые номера */
    #ready_show_blog{
        grid-template-columns: 1fr;
        gap: 0px;
    }

    /* Готовые номера левый блок*/
    .r_s__b__content{
        justify-content: center;
        text-align: center;
        gap: 10px;
    }

    /* Готовые номера блок с доп текстом и кнопкой */
    .r_s__b__c__blog{
        align-items: center;
        gap: 10px;
    }

    /* Готовые номера заголовок*/
    .r_s__b__c__title{
        text-align: var(--h2_text_align);
    }

    /* Готовые номера правый блок контейнер карточек */
    #r_s__b__c__cards{
        padding: 0;
    }



    /* Звезды карточка */
    .s_r__c__card{
        width: 100%;
    }
}



/* Hover для десктопа */
@media (hover: hover) and (pointer: fine) {
    /* О нас наведение на плитку */
    .a_b__c__b__t__table:hover{
        transform: translateY(-10px) scale(1.05);
        box-shadow: 0 25px 60px rgb(var(--color_vinous) / var(--o_35)), inset 0 0 0 1px rgb(var(--color_white) / var(--o_10));
    }



    /* Организация праздников при наведении на карточку менять масштаб фото */
    .o_aw__c__c__card:hover .o_aw__c__c__c__img{
        transform: scale(1);
    }

    /* Организация праздников при наведении на карточку скрыть доп текст */
    .o_aw__c__c__card:hover .o_aw__c__c__c__description{
        opacity: 0;
    }

    /* Организация праздников при наведении на карточку убрать блюр */
    .o_aw__c__c__card:hover .o_aw__c__c__c__title::before,.o_aw__c__c__c__description::before{
        backdrop-filter: blur(0px);
    }



    /* Квиз форма при наведении иконка календарика для выбора даты */
    .quiz-answer-input-btn:hover{
        opacity: 1;
    }



    /* Готовые номера карточка при наведении */
    .r_s__b__c__c__c__card:hover {
        transform: translateY(-8px);
    }

    /* Готовые номера при наведении на карточку сменить цвет текста имени карточки */
    .r_s__b__c__c__c__card:hover .r_s__b__c__c__c__title{
        color: rgb(var(--color_vinous));
    }



    /* Звезды фото при наведении на карточку */
    .s_r__c__card:hover .s_r__c__c__img{
        transform: scale(1.04);
        box-shadow:0 0 0 3px rgb(var(--color_vinous) / var(--o_60)), 0 0 55px rgb(var(--color_vinous) / var(--o_80));
    }

    /* Звезды при наведении кнопка читать еще в карточке */
    .s_r__c__c__read:hover{
        transform: scale(1.04);
        color: rgb(var(--color_vinous));
    }



    /* Портфолио навигация при наведении */
    .nav-btn:hover {
        transform: scale(1.05);
        background: rgb(var(--color_vinous));
    }

    /* Портфолио фото при наведении на карточку */
    .p__c__b__c_w__card:hover .p__c__b__c_w__c__img{
        transform: scale(1.04);
    }

    /* Портфолио при наведении на карточку сменить цвет текста названия карточки */
    .p__c__b__c_w__card:hover .p__c__b__c_w__c__title{
        color: rgb(var(--color_vinous));
    }



    /* Выбирают нас при наведении карточка с факторами */
    .f__c__c__card:hover{
        transform: translateY(-10px);
    }

    /* Выбирают нас при наведении карточка с компаниями */
    .f__c__c_c__card:hover {
        filter: grayscale(0%);
    }
}



/* Стили для сенсорных устройств */
@media (hover: none) and (pointer: coarse) {
    /* Портфолио контейнер с навигацией и карточками*/
    .p__c__blog{
        grid-template-columns: 1fr;
    }

    /* Портфолио навигация */
    .nav-btn {
        display: none;
    }

    /* Квиз форма при наведении иконка календарика для выбора даты (на айфоне чтобы не зумило к input полю) */
    .quiz-answer-input {
        font-size: 16px;
    }
}