/* ========================================
Список уроков плашками с нумерацией
======================================== */


/* ========================================
Снимаем стандартные стили от ГК
======================================== */

.gorizont-number .lesson-list li .state-icon-block,
.gorizont-number .lesson-list li .user-state-label.is-stop-lesson,
.gorizont-number .lesson-list li.divider {
    display: none;
}

.gorizont-number .lesson-list li .info {
    margin-left: 0!important;
    border-left: none!important;
    background: transparent;
    display: flex;
    float: left;
    flex: 0 1 63%;
}

.gorizont-number .lesson-list li .info table {
    min-width: inherit!important;
    width: 100%;
}

.gorizont-number .lesson-list li td.item-main-td {
    padding: 0!important;
}



.gorizont-number .lesson-list li.first-unreached {
    margin-top: 10px;
}



/*Скрываем системную надпись о дз*/

.gorizont-number .user-state-need_accomplish .user-state-label,
.gorizont-number .user-state-has_mission .user-state-label,
.gorizont-number .lesson-list li .lesson-list__video-watched{
    display:none!important;
}

/*Показываем когда открылся урок*/
.gorizont-number .lesson-list li div.user-state-label.has-start-at.lesson-date {
    display: block !important; 
}


/*Убираем цветной фон с уроков*/

.gorizont-number .lesson-list li .item-a{
    background:none!important;
}

/* ========================================
Преобразовываем
======================================== */

/* ========================================
Подложка под уроки
======================================== */

.gorizont-number .lesson-list {
    counter-reset: lesson_counter;
    font-family: var(--traning-zoloto-font-family-text);
    border-radius: var(--traning-zoloto-border-radius);
    background: var(--traning-zoloto-bg-fon);
    border-top: var(--traning-zoloto-border-top); /* Верхняя обводка */
    border-right: var(--traning-zoloto-border-right); /* Правая обводка */
    border-bottom: var(--traning-zoloto-border-bottom); /* Нижняя обводка */
    border-left: var(--traning-zoloto-border-left); /* Левая обводка*/
    display: flex;
    flex-direction: column;
    gap: var(--traning-zoloto-gap);
    margin-bottom:var(--traning-zoloto-margin-bottom);
    padding: var(--traning-zoloto-padding);
}



/* ========================================
Карточка урока
======================================== */

.gorizont-number .lesson-list li {
    background:var(--lesson-zoloto-gorizont-number-bg);
    border-radius: var(--traning-zoloto-border-radius);
    box-shadow: var(--traning-zoloto-box-shadow);
    border: var(--traning-zoloto-color-border);
    transition: all 0.5s;
    margin: 0px!important;
    min-height: 100px;
    height: auto;
    align-items: stretch;  /* растягиваем по высоте */
}


.gorizont-number .lesson-list a {
    width: 100%;
    height: 100%!important;
    position: relative;
    display: flex!important;
    padding: 20px;
    min-height: 135px;
    /* height: auto; */
    align-items: center;
    justify-content: space-between;
    color: var(--lesson-zoloto-gorizont-number-color-text-1)!important;
    font-family: var(--traning-zoloto-font-family-header);
    gap: 20px;
    transition: all 0.5s;
    /* align-items: stretch; */  /* растягиваем по высоте */
}




.gorizont-number a.user-state-bg.item-a:focus {
    text-decoration: none!important;
    outline:none!important;
}


.gorizont-number .lesson-list li .info {
    width: 100%;
    margin-left: 0!important;
    border-left: none!important;
    background: none!important;
    display: flex;
    float: left;
}




/* ========================================
Картинка урока
======================================== */

.gorizont-number .lesson-list li td.item-image{
    width: 0px!important;

}

/* ========================================
Номер урока
======================================== */
.gorizont-number .lesson-list li:before {
    width: 18px;
    height: 100%;
    display: block;
    content: "";
    position: absolute;
    border-radius: var(--traning-zoloto-border-radius 0 0 --traning-zoloto-border-radius);
    display:none;


}


.gorizont-number .lesson-list li a::before {
    counter-increment: lesson_counter;
    content: counters(lesson_counter,"") " ";
    font-family: var(--traning-zoloto-font-family-text);
    font-size: 48px;
    line-height: 1;
    margin-left: 38px;
    flex: 0 0 20px;
    color: var(--lesson-zoloto-gorizont-number-color-text-1);

}


/* ========================================
Текстовый блок
======================================== */

.gorizont-number .lesson-list .item-main-td{
    padding: 0px!important;
    display: flex;
    align-items: center;
    height: auto;
}

.gorizont-number .lesson-list li .item-main-td .vmiddle {
    padding-right: 0;
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    gap:10px;
    width: 100%;
    height: auto;
    align-items: stretch;  /* растягиваем по высоте */
    justify-content: flex-start;

}


/* ========================================
Название урока
======================================== */

.gorizont-number .lesson-list li .item-main-td .vmiddle .title {
    font-family: var(--traning-zoloto-font-family-header);
    color: var(--lesson-zoloto-gorizont-number-color-text-3);
    margin-right: 0px!important;
    font-size: 25px;
    line-height: 1;
    font-weight: 400;
    width: 100%;

}


/* ========================================
Описание урока
======================================== */


.gorizont-number .lesson-list li .item-main-td .vmiddle .description {
    color: var(--lesson-zoloto-gorizont-number-color-text-2);
    font-family: var(--traning-zoloto-font-family-text);
    font-weight: 300;
    font-size: 18px;
    width: 100%;


}



/* ========================================
Дата открытия урока
======================================== */
.gorizont-number .lesson-list li .lesson-date {
    display: block !important;
    color: var(--lesson-zoloto-gorizont-number-color-text-4);
    font-family: var(--traning-zoloto-font-family-header);
    font-weight: 400;
    align-items: flex-start;
    order: 1;

}






/* ========================================
Кнопка в уроке
======================================== */
.gorizont-number .lesson-list li a:after {
    content: "Смотреть";
    font-family: var(--traning-zoloto-font-family-header), 'FontAwesome';
    flex: 0 0 20%;
    position: relative;
    text-align: center;
    border-radius: var(--traning-zoloto-border-radius);
    padding: 0px;
    background: var(--lesson-zoloto-gorizont-number-color-status-1);
    color: var(--lesson-zoloto-gorizont-number-color-text-6);
    border: var(--lesson-zoloto-gorizont-number-border-btn);
    font-weight: 400;
    font-size: 20px;
    line-height: normal;
    flex: 0 0 20%;
    min-width: 170px;
    min-height: 45px;
    transition: all 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
}



/* ========================================================= 
Цвет кнопки и надпись на ней в зависимости от статуса урока
============================================================  */

/* в уроке есть задание*/

.gorizont-number .lesson-list li.user-state-has_mission a::after {
    content: "Есть задание";
    background: var(--lesson-zoloto-gorizont-number-color-status-2);

}

.gorizont-number .lesson-list li.user-state-has_mission:before {
    background: var(--lesson-zoloto-gorizont-number-color-status-2);
}



/* стоп урок */

.gorizont-number .lesson-list li.user-state-need_accomplish a::after {
    content: "Стоп-урок";
    background: var(--lesson-zoloto-gorizont-number-color-status-5);
}


.gorizont-number .lesson-list li.user-state-need_accomplish:before {
    background: var(--lesson-zoloto-gorizont-number-color-status-5);
}


/* урок ожидает проверки */

.gorizont-number .lesson-list li.user-state-answered a::after  {
    content: "На проверке";
    background: var(--lesson-zoloto-gorizont-number-color-status-3);
}


.gorizont-number .lesson-list li.user-state-answered:before {
    background: var(--lesson-zoloto-gorizont-number-color-status-3);
}


/* урок принят */

.gorizont-number .lesson-list li.user-state-accomplished a::after  {
    content: "Принят";
    background: var(--lesson-zoloto-gorizont-number-color-status-4);
}


.gorizont-number .lesson-list li.user-state-accomplished:before {
    background: var(--lesson-zoloto-gorizont-number-color-status-4);
}

/* урок просмотрели, без задания */

.gorizont-number .lesson-list li.user-state-reached.lesson-list_watched a::after {
    content: "Просмотрено";
    background: var(--lesson-zoloto-gorizont-number-color-status-6);
}


.gorizont-number .lesson-list li.user-state-reached.lesson-list_watched:before {
    background: var(--lesson-zoloto-gorizont-number-color-status-6);
}


/* ========================================
Недоступный урок
======================================== */
.gorizont-number .lesson-list li.user-state-not_reached {
    background: var(--lesson-zoloto-gorizont-number-bg-no-public);
    box-shadow: var(--traning-zoloto-box-shadow-no-public);
    border: var(--traning-zoloto-color-border-no-public);


}


.gorizont-number .lesson-list li.user-state-not_reached  a::after {
    content: "Недоступен \f023 ";
    font-family: var(--traning-zoloto-font-family-header),'FontAwesome';
    background: var(--lesson-zoloto-gorizont-number-color-status-7);
    color: var(--lesson-zoloto-gorizont-number-color-text-6-no-public);
    border: var(--lesson-zoloto-gorizont-number-border-btn-no-public);
}

/*номер урока*/
.gorizont-number .lesson-list li.user-state-not_reached a::before{
    color: var(--lesson-zoloto-gorizont-number-color-text-1-no-public)!important;
}

.gorizont-number .lesson-list li.user-state-not_reached .item-main-td .vmiddle .title{
    color: var(--lesson-zoloto-gorizont-number-color-text-3-no-public);
}

.gorizont-number .lesson-list li.user-state-not_reached .item-main-td .vmiddle .description {
    color: var(--lesson-zoloto-gorizont-number-color-text-2-no-public);

}

.gorizont-number .lesson-list li.user-state-not_reached .lesson-date {
    color: var(--lesson-zoloto-gorizont-number-color-text-4-no-public);
}




.gorizont-number .lesson-list li.user-state-not_reached a {
    cursor: default!important;
    filter: opacity(1) grayscale(0);
}


.gorizont-number .lesson-list li.user-state-not_reached, .gorizont-number .lesson-list li.user-state-not_reached a {
    opacity: 1;
}

/* ========================================
Анимация
======================================== */

/* =================================================
БАЗОВЫЕ СОСТОЯНИЯ
================================================= */

/* карточка урока */
.gorizont-number .lesson-list li {
    transition:
        box-shadow 0.45s ease,
        border-color 0.45s ease;
    transition: transform 0.45s ease;
    will-change: transform;
}



/* заголовок */
.gorizont-number .lesson-list li .item-main-td .vmiddle .title {
    transition: color 0.35s ease;
}

/* описание */
.gorizont-number .lesson-list li .item-main-td .vmiddle .description {
    transition: color 0.35s ease;
}

/* дата */
.gorizont-number .lesson-list li .lesson-date {
    transition: color 0.35s ease;
}

/* кнопка */
.gorizont-number .lesson-list li a:after {
    transition:
        background-color 0.45s ease,
        color 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease,
        filter 0.45s ease;
}

/* =================================================
При наведении (ТОЛЬКО доступные уроки)
================================================= */

.gorizont-number .lesson-list li:not(.user-state-not_reached):hover {
    box-shadow: var(--traning-zoloto-box-shadow-hover);
    border:var(--traning-zoloto-color-border-hover);
    transform: scale(1.01);
}



/* заголовок */
.gorizont-number .lesson-list li:not(.user-state-not_reached):hover .item-main-td .vmiddle .title {
    color: var(--lesson-zoloto-gorizont-img-color-text-3-hover);
}

/* описание */
.gorizont-number .lesson-list li:not(.user-state-not_reached):hover .item-main-td .vmiddle .description {
    color: var(--lesson-zoloto-gorizont-img-color-text-2-hover);
}

/* дата */
.gorizont-number .lesson-list li:not(.user-state-not_reached):hover .lesson-date {
    color: var(--lesson-zoloto-gorizont-img-color-text-4-hover);
}

/* кнопка — базовый hover */
.gorizont-number .lesson-list li:not(.user-state-not_reached):hover a:after {
    background: var(--lesson-zoloto-gorizont-img-color-status-1-hover);
    color: var(--lesson-zoloto-gorizont-img-color-text-6-hover);
    border-color: var(--lesson-zoloto-gorizont-img-border-btn-hover);
    filter: contrast(1.2);
}

/* =================================================
СТАТУСЫ КНОПКИ
================================================= */

.gorizont-number .lesson-list li.user-state-has_mission:hover a:after {
    background: var(--lesson-zoloto-gorizont-img-color-status-2-hover);
}

.gorizont-number .lesson-list li.user-state-answered:hover a:after {
    background: var(--lesson-zoloto-gorizont-img-color-status-3-hover);
}

.gorizont-number .lesson-list li.user-state-accomplished:hover a:after {
    background: var(--lesson-zoloto-gorizont-img-color-status-4-hover);
}

.gorizont-number .lesson-list li.user-state-need_accomplish:hover a:after {
    background: var(--lesson-zoloto-gorizont-img-color-status-5-hover);
}

.gorizont-number .lesson-list li.user-state-reached.lesson-list_watched:hover a:after {
    background: var(--lesson-zoloto-gorizont-img-color-status-6-hover);
}



/* ========================================
Мобильная адаптация
======================================== */


@media (max-width: 991px) {
    .gorizont-number .lesson-list {
        width: calc(100% - 10px);
        margin: 0px auto var(--traning-zoloto-margin-bottom) !important;
    }
}




@media (max-width: 767px) {
    .gorizont-number .lesson-list {
        display:flex;
        flex-direction: column;
        gap: var(--traning-zoloto-gap);
        max-width: 400px !important;
    }

    .gorizont-number .lesson-list li{
        flex: 0 0 calc(100% - 10px);
        margin:0 auto;
        min-height:200px;
        height: auto;      
    }

    .gorizont-number  .lesson-list li tr{
        display: flex;
        width: 100%;
        min-height:100%;
        height:auto;
    }

    .gorizont-number  .lesson-list li td.item-main-td {
        padding: 0!important;
        width: 100%;
    }

    .gorizont-number .lesson-list li table td {
        min-height: 50px;
    }

    .gorizont-number .lesson-list li a {
        flex-direction: column;
        align-items: flex-start;
        /* margin-left: 0px; */
        display: flex;
        min-height:200px;
        height: auto;
        gap:10px;
    }

    .gorizont-number .lesson-list li a:after{
        margin: 10px auto 0px;
        width: 100%;
    }


    .gorizont-number  .lesson-list li.first-unreached {
        margin-top: 10px;
    }

    .gorizont-number .lesson-list tbody,
    .gorizont-number .lesson-list li .info table{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        min-width: inherit!important;
        width: 100%;
        min-height: 100%;
        height: auto;
        justify-content: flex-start;
    }
    .gorizont-number .lesson-list .item-main-td.item-with-image {
        padding-left: 0px;
        height: auto;
        display: flex;
        align-items: flex-start;
    }


    .gorizont-number .lesson-list .item-main-td{
        justify-content: flex-start;
    }



    .gorizont-number .lesson-list li .vmiddle {
        margin: 0px auto!important;
        padding-right: 0;
        align-items: flex-start;
        text-align: left;
        gap: 10px;
        display: flex;
        flex-direction: column;
    }

    .gorizont-number .lesson-list li a::before {
        counter-increment: lesson_counter;
        content: counters(lesson_counter, "") " урок";
        font-size: 26px;
        flex: 0 0 20px;
        margin-left: 0px;
        text-align: left;
        display: flex;
        justify-content: flex-start;
    }
}


@media (max-width: 550px) {
    .gorizont-number .lesson-list li,
    .gorizont-number .lesson-list li a{
        min-height: 200px;
    }

}




@media (max-width: 425px) {
    .gorizont-number .lesson-list {
        max-width: 400px;
        width: calc(100% - 0px);
        margin: 0px auto var(--traning-zoloto-margin-bottom) !important;
    }
}