/* ==========================================================================
   responsive.css — unified responsive styles
   Consolidates mobile.css, mobile__1200px, mobile__1000px, mobile__768px,
   mobile__456px into a single file. Desktop-first (max-width) for legacy
   selectors; mobile-first (min-width) additions for design-system components
   where the component file lacks breakpoints.
   ========================================================================== */

/* ==========================================================================
   BASE-LEVEL — always applied (overrides from legacy mobile.css)
   ========================================================================== */

/* ── Burger menu icon ─────────────────────────────────────────────────── */
.menu__icon {
    z-index: 5;
    display: block;
    position: relative;
    width: 30px;
    height: 18px;
    cursor: pointer;
}

.menu__icon span,
.menu__icon::before,
.menu__icon::after {
    position: absolute;
    left: 0;
    height: 10%;
    width: 100%;
    transition: all 0.3s ease 0s;
    background-color: var(--color-white);
}

.menu__icon::before,
.menu__icon::after {
    content: "";
}

.menu__icon::before {
    top: 0;
}

.menu__icon::after {
    bottom: 0;
}

.menu__icon span {
    top: 50%;
    transform: scale(1) translate(0px, -50%);
}

.menu__icon._active span {
    transform: scale(0) translate(0px, -50%);
}

.menu__icon._active::before {
    top: 50%;
    transform: rotate(-45deg) translate(0px, -50%);
}

.menu__icon._active::after {
    bottom: 50%;
    transform: rotate(45deg) translate(0px, 50%);
}

.header__body._active {
    left: 0;
}

.menu__list > li {
    margin: 0 0 30px 0;
}

.menu__list > li:last-child {
    margin-bottom: 0;
}

.menu__link {
    font-size: 24px;
}

/* ── Header responsive handled in header.css ── */

/* ── Footer handled in footer.css ── */
}


/* ==========================================================================
   @media (max-width: 1400px)
   ========================================================================== */
@media (max-width: 1400px) {
    .course_requests__list,
    .event_requests__list {
        margin-left: 0;
        width: 100%;
    }

    .course_requests__list__no_approved {
        width: 100%;
    }
}


/* ==========================================================================
   @media (max-width: 1200px)
   ========================================================================== */
@media (max-width: 1200px) {
    ::-webkit-scrollbar {
        width: auto;
    }

    /* ── Layout ─────────────────────────────────────────────────────── */
    .form {
        width: 96%;
    }

    .form__login {
        margin-left: 4.17vw;
    }

    .education__items {
        height: 875px;
    }

    .personal__field {
        margin-right: 1vw;
    }

    .profile__completed__course__field {
        margin-right: 1vw;
    }

    .profile__personal__form {
        width: 315px;
        height: 350px;
    }

    .personal__text_job {
        margin-left: clamp(0px, 1vw, 0px);
    }

    .profile__form__education_data_edit input[type='text'] {
        width: clamp(440px, 60%, 800px);
    }

    .profile__form__education_edit label {
        width: 600px;
    }

    .personal__container,
    .profile__container {
        margin-left: 10px;
    }

    /* ── Course ─────────────────────────────────────────────────────── */
    .name__course {
        font-size: 20px;
    }

    .main__course {
        margin-top: clamp(14px, 3.56vw, 30px);
    }

    .course__treaty {
        flex-direction: column;
    }

    .course__category,
    .course__qouta,
    .course__contacts,
    .course__cost {
        margin-left: 10px;
    }

    .course__author__body {
        display: flex;
        align-items: center;
    }

    .course__settings,
    .course__unloading {
        flex-wrap: wrap;
    }

    .course__list {
        border-radius: 8px 0 0 8px;
        border-right: 1px solid transparent;
    }

    .course__link__requests {
        align-items: center;
        justify-content: center;
    }

    .course__requests__menu {
        gap: 20px;
        margin-right: 15px;
    }

    /* ── Contest ────────────────────────────────────────────────────── */
    .main__contest__sample {
        margin-top: clamp(14px, 3.56vw, 30px);
    }

    .contest__author__body {
        display: flex;
    }

    .name__contest {
        font-size: 20px;
    }

    .contest__award__table {
        margin-right: 16px;
    }

    /* ── Event ──────────────────────────────────────────────────────── */
    .name__event {
        font-size: 20px;
        line-height: 1.2;
    }

    .event__form__name__list {
        font-size: 20px;
        line-height: 1.2;
    }

    .main__event {
        margin-top: clamp(14px, 3.56vw, 30px);
    }

    .event__category,
    .event__qouta,
    .event__contacts {
        margin-left: 10px;
    }

    .event__settings,
    .event__unloading {
        flex-wrap: wrap;
    }

    .event__author__body {
        display: flex;
        align-items: center;
    }
}


/* ==========================================================================
   @media (max-width: 1000px)
   ========================================================================== */
@media (max-width: 1000px) {
    /* ── Header handled in header.css ── */

    /* ── Home page ──────────────────────────────────────────────────── */
    .home__img {
        display: none;
    }

    .home__img__pad {
        display: block;
        transform: translateX(-25px);
    }

    .home__item {
        width: 100%;
        margin: 0;
    }

    .home__container {
        display: grid;
        justify-content: center;
    }

    .home__container__item {
        width: clamp(325px, 56vw, 700px);
        display: grid;
    }

    /* ── Profile ────────────────────────────────────────────────────── */
    .profile__form {
        width: auto;
    }

    .profile__form__prof {
        width: auto;
        flex-direction: column;
    }

    .profile__personal__form {
        width: clamp(333px, 57vw, 565px);
        height: min-content;
    }

    .profile__form__menu {
        width: auto;
    }

    .personal__field__job {
        margin: 0;
    }

    .education__topic {
        font-size: clamp(18px, 3vw, 30px);
    }

    .profile__tab {
        width: 215px;
    }

    .profile__tabs {
        flex-direction: column;
        gap: 10px;
    }

    .profile__tab__menu1 {
        flex-direction: row;
        gap: 10px;
    }

    .profile__tab__menu__main__courses {
        gap: 10px;
    }

    .profile__tab__menu__main,
    .profile__tab__menu__main2 {
        flex-direction: column;
        gap: 10px;
    }

    /* ── Authorization ──────────────────────────────────────────────── */
    .form {
        width: 90%;
    }

    /* ── Login / Signup ─────────────────────────────────────────────── */
    .form__login {
        margin: 0;
        width: auto;
    }

    .cumancen {
        right: 25px;
    }

    .form__ysl {
        width: clamp(300px, 86.4vw, 398px);
    }

    /* ── Personal account ───────────────────────────────────────────── */
    .cabinet__title {
        width: auto;
        font-size: clamp(18px, 4vw, 32px);
    }

    .personal__field__job {
        width: 150px;
    }

    .education__form {
        width: 547px;
    }

    .education__item {
        width: auto;
    }

    .profile__form__education_data_edit {
        width: clamp(330px, 75vw, 440px);
        padding-bottom: 10px;
    }

    .profile__form__education_edit select {
        width: 100%;
        height: clamp(30px, 8vw, 40px);
        font-size: 13px;
        line-height: 1;
    }

    .profile__form__education_data_edit input[type='text'] {
        width: clamp(330px, 100%, 440px);
    }

    .personal__field__education_edit {
        width: 500px;
    }

    .personal__text_job select {
        width: 400px;
        margin-top: 10px;
    }

    .personal__text_job input {
        margin-top: 10px;
    }

    .profile__form__education_edit label {
        width: 476px;
    }

    /* ── Course detail ──────────────────────────────────────────────── */
    .course__form__sample,
    .course__form {
        gap: 2vw;
        margin-bottom: 4.50vw;
    }

    .course_inf_2 {
        width: auto;
    }

    .course__settings__listener {
        gap: 3.8vw;
        margin-left: 0;
    }

    .course__list__name,
    .course__list__title__name {
        min-width: 390px;
        font-size: clamp(10px, 2vw, 20px);
        line-height: 20px;
    }

    .course__requests__menu {
        justify-content: center;
    }

    .course__link__requests {
        flex-direction: column;
        gap: 0;
    }

    .course__list__block,
    .event__list__block {
        width: 100%;
    }

    .course__list__wrapper,
    .event__list__wrapper {
        grid-template-columns: 1fr;
        gap: 3vw;
    }

    /* ── Contest ────────────────────────────────────────────────────── */
    .contest_inf_2 {
        width: auto;
    }

    .wrapper__contest__list {
        width: 100%;
        align-items: start;
        justify-content: start;
        left: 0;
    }

    .contest__list__block {
        width: 100%;
    }

    /* ── Event detail ───────────────────────────────────────────────── */
    .event__form__sample,
    .event__form {
        gap: 2vw;
        margin-bottom: 4.50vw;
    }

    .name__event__add {
        gap: 2vw;
        margin-bottom: 2.50vw;
    }

    .event__settings__listener {
        gap: 3.8vw;
        margin-left: 0;
    }

    .event__list__title__name,
    .event__list__name {
        min-width: 390px;
        font-size: clamp(10px, 2vw, 20px);
        line-height: 20px;
    }

    /* ── Footer handled in footer.css ── */

    .form__images {
        display: none;
    }
}


/* ==========================================================================
   @media (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* ── Home page ──────────────────────────────────────────────────── */
    .home__container__item {
        padding-top: clamp(30px, 8vw, 50px);
        width: clamp(325px, 56vw, 700px);
        display: grid;
    }

    .home__description {
        width: 100%;
    }

    .home__FAQ {
        margin-top: 7vw;
    }

    .home__choose__wrapper {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
            "A B"
            "C C";
    }

    .home__choose__course {
        grid-area: A;
    }

    .home__choose__contest {
        grid-area: B;
    }

    .home__choose__event {
        grid-area: C;
    }

    .home__FAQ__container {
        max-height: 82px;
    }

    .home__img__pad {
        display: none;
    }

    .home__img__mobile {
        display: block;
    }

    /* ── Header handled in header.css ── */

    .flex > span {
        font-size: 14px;
    }

    .authentication {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .authentication a {
        display: block;
        margin: 10px;
    }

    .header__menu-2 .header__icon:hover .triangle {
        right: 30px;
    }

    .header {
        height: 70px;
    }

    .header__container {
        height: 70px;
    }

    .header__font {
        transform: translateX(30px);
        transition: .5s;
    }

    .header__font .icon {
        height: 70px;
        width: 118px;
        transition: .5s;
    }

    .header__item:nth-child(1) .icon {
        height: 70px;
        width: 118px;
    }

    .main {
        margin-top: 70px;
    }

    /* ── Profile ────────────────────────────────────────────────────── */
    .profile__container {
        display: flex;
        justify-content: center;
        margin-left: 0;
    }

    .profile__body {
        flex-direction: column;
    }

    .profile__body__link {
        justify-content: center;
    }

    .profile__form {
        margin: 0;
    }

    .profile__form__prof {
        margin: 20px 0 0 0;
        padding: 0;
    }

    .profile__personal__form {
        width: clamp(333px, 81vw, 565px);
    }

    .profile__form__menu {
        margin: 0;
    }

    .profile__tabs {
        margin-left: 0;
    }

    .profile__tab {
        width: clamp(161px, 40.2vw, 240px);
        height: clamp(50px, 8.21vw, 55px);
    }

    .tabs__link {
        font-size: 14px;
    }

    .profile__menu {
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

    .profile__menu__main {
        flex-direction: row;
        height: clamp(110px, 18vw, 120px);
    }

    .profile__menu__main2 {
        margin-top: 10px;
        background: none;
    }

    .form__event__button__cencel {
        flex-direction: column;
        align-items: start;
    }

    .personal_menu_spec {
        width: auto;
        display: flex;
        gap: 10px;
        justify-content: space-between;
    }

    .personal_menu1,
    .personal_menu2,
    .personal_menu3 {
        width: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .personal_menu2 {
        margin-left: 5px;
    }

    .personal_menu3 {
        margin-left: 5px;
    }

    .personal_menu1 {
        margin-right: 5px;
    }

    .profile__personal__menu {
        background: transparent;
    }

    .profile__tabs__completed {
        justify-content: center;
        margin-left: auto;
    }

    .profile__body__personal {
        gap: 15px;
    }

    .profile__body__personal > * + * {
        margin-top: 15px;
    }

    .profile__tab__completed {
        height: clamp(50px, 8.21vw, 55px);
        width: clamp(161px, 40.2vw, 240px);
    }

    .profile__item {
        height: clamp(50px, 8.21vw, 55px);
        width: clamp(161px, 40.2vw, 240px);
        background: var(--color-primary-bg);
        border-radius: 8px 8px 8px 8px;
        min-width: 170px;
    }

    .profile__link {
        padding-left: clamp(30px, 5.69vw, 60px);
        line-height: 1;
        text-align: center;
        margin-right: 5px;
        font-size: 14px;
        width: clamp(150px, 36vw, 211px);
    }

    .monitoring__settings__function__search {
        height: 46px;
    }

    .profile__icon__education,
    .profile__icon__profile,
    .profile__icon__security,
    .profile__icon__work,
    .profile__icon__course,
    .profile__icon__profile__menu,
    .profile__icon__favorites {
        top: auto;
        left: clamp(12px, 3.28vw, 25px);
    }

    .profile__form__settings {
        margin-left: 5px;
        margin-top: 30px;
        width: 100%;
    }

    .profile__cumancen {
        top: clamp(10px, 3.3vw, 18px);
    }

    .profile__password__block {
        margin-top: 10px;
    }

    .profile__body__title {
        align-items: center;
        width: auto;
        margin-left: 0;
        margin-top: 20px;
    }

    .profile__body__title_setting {
        width: auto;
    }

    .personal__item {
        display: block;
        flex-wrap: nowrap;
    }

    .profile__completed__course__item {
        display: block;
        flex-wrap: nowrap;
    }

    .profile__password {
        width: auto;
        margin: 0;
    }

    .profile__password__item {
        margin-bottom: 10px;
    }

    .cabinet__title {
        line-height: clamp(32px, 3vw, 0px);
        margin-bottom: clamp(10px, 3vw, 30px);
        margin-top: clamp(10px, 3vw, 20px);
        margin-inline: 0 15px;
    }

    .personal__container {
        text-align: center;
        margin-top: clamp(0px, 5vw, 20px);
        margin-bottom: clamp(0px, 5vw, 20px);
    }

    .personal__field__job {
        width: 190px;
    }

    .education__form {
        margin-top: 5vw;
        width: 421px;
        margin-inline: 0;
    }

    .personal__field {
        width: auto;
        margin-top: 5px;
        font-size: 15px;
    }

    .personal__data__edit_btn,
    .personal__data__exite {
        font-size: 13px;
    }

    .personal__data__exite {
        display: block;
    }

    .profile__completed__course__field {
        width: auto;
    }

    .profile__title_setting {
        text-align: center;
    }

    .personal__text_job {
        margin-right: 0;
    }

    .personal__text_job select {
        width: clamp(390px, 82vw, 435px);
        white-space: normal;
    }

    .personal__text_job input {
        width: clamp(333px, 82vw, 498px);
        height: 37px;
        font-size: 14px;
    }

    .profile__form__education {
        margin-left: 0;
    }

    .profile__form__education_edit {
        margin-left: 0;
        width: clamp(360px, 82vw, 490px);
    }

    .profile__form__education_edit label {
        width: 400px;
        font-size: 15px;
        margin-inline: 0;
    }

    .personal__field__education_edit {
        width: 400px;
        font-size: 14px;
        margin-inline: 0;
    }

    .profile_mobile {
        width: clamp(320px, 100%, 440px);
        text-align: center;
    }

    /* ── Form inputs ────────────────────────────────────────────────── */
    .form__input {
        width: clamp(381px, 82vw, 491px);
    }

    .form__input__personal,
    .form__input__monitoring {
        width: clamp(332px, 82vw, 498px);
        height: 37px;
        font-size: 14px;
        margin-right: 0;
    }

    .form__input__course,
    .form__input__event {
        width: clamp(333px, 94vw, 498px);
        height: 37px;
        font-size: 14px;
    }

    .form__input__personal__number2 {
        width: clamp(333px, 83vw, 498px);
        height: 37px;
        font-size: 14px;
    }

    .form__input__phone {
        width: clamp(333px, 82vw, 498px);
        height: 37px;
        font-size: 14px;
    }

    .form__input__phone__event,
    .form__input__phone__course {
        width: clamp(333px, 94vw, 498px);
        height: 37px;
        font-size: 14px;
    }

    input[type="date"] {
        font-size: 16px;
    }

    .form__label__personal {
        font-size: 16px;
    }

    .personal__data {
        font-size: 17px;
    }

    .personal_save-account {
        width: clamp(340px, 82vw, 490px);
    }

    .profile__title_education_edit {
        margin-right: 0;
    }

    .personal__link {
        font-size: 15px;
    }

    .profile__menu__spec {
        background: transparent;
    }

    .personal__item__save {
        display: flex;
        justify-content: center;
    }

    .form__input__cost {
        width: clamp(333px, 94vw, 498px);
        height: 37px;
        font-size: 14px;
    }

    .file__preview {
        width: 64px;
        height: 64px;
        margin-right: 10px;
    }

    /* ── Course ─────────────────────────────────────────────────────── */
    .course__list__title__name,
    .course__list__title__date,
    .course__list__title__quota,
    .course__list__title__requests {
        font-size: 16px;
    }

    .course__list__name,
    .course__list__date,
    .course__list__quota,
    .course__list__requests {
        font-size: 14px;
    }

    .contest__request__card__head {
        gap: 0;
    }

    .course__list__title__date,
    .course__list__date {
        min-width: 200px;
    }

    .course__list__title__quota,
    .course__list__quota {
        min-width: 70px;
    }

    .course__list__title__requests {
        min-width: 190px;
    }

    .main__course {
        flex-direction: column;
    }

    .course_inf_2 {
        margin: 10px 0 0;
    }

    .course_inf_1 {
        width: auto;
    }

    .course__category__name,
    .course__qouta__name,
    .course__contacts__name,
    .course__cost__name {
        line-height: 1;
    }

    .course__treaty {
        flex-direction: column;
    }

    .course__author__body {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 0;
    }

    .retrain__author__body__admin {
        flex-direction: column;
        gap: 5px;
    }

    .course__information__body__item,
    .contest__information__body__item {
        width: auto;
    }

    .course__settings,
    .course__unloading {
        width: 100%;
    }

    .course__category__title__1 {
        min-width: 120px;
    }

    .course__qouta__title,
    .course__contacts__title,
    .course__cost__title {
        min-width: 103px;
    }

    .course__date,
    .course__place,
    .course__department {
        height: min-content;
    }

    .course__date__title,
    .course__place__title,
    .course__department__title {
        margin-bottom: 0;
    }

    .course__date__item,
    .course__place__item,
    .course__department__item {
        margin-top: 5px;
        margin-left: 10px;
    }

    .course__information,
    .contest__information {
        width: clamp(435px, 80vw, 600px);
    }

    .course__information__title_inside,
    .contest__information__title_inside {
        font-size: 18px;
        line-height: 1.5;
    }

    .course__information__body,
    .contest__information__body {
        padding: 5px 10px 0 10px;
    }

    .course__information__no__approved,
    .course__information__approved,
    .course__information__completed,
    .contest__information__no__approved {
        display: flex;
        align-items: center;
        font-size: 15px;
    }

    .name__course__requests,
    .name__contest__requests {
        font-size: 20px;
        line-height: 1.4;
    }

    .course__department__select {
        width: clamp(333px, 94vw, 498px);
        height: 32px;
        font-size: 12px;
    }

    .course__department__select__filter,
    .contest__department__select__filter {
        width: clamp(186px, 50vw, 498px);
        height: 32px;
        font-size: 12px;
    }

    /* ── Contest ────────────────────────────────────────────────────── */
    .contest_inf_1 {
        width: auto;
    }

    .contest__date,
    .contest__place,
    .contest__department {
        height: min-content;
    }

    .contest__category__title__1 {
        min-width: 120px;
    }

    .contest__category__name,
    .contest__contacts__name {
        line-height: 1;
        padding-left: 0;
    }

    .main__contest__sample {
        flex-direction: column;
    }

    .contest_inf_2 {
        margin: 10px 0 0;
    }

    .contest__settings,
    .contest__unloading {
        gap: 2vw;
    }

    .contest__author__body {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 0;
    }

    .contest__requests__item__full_name,
    .contest__requests__item__municipality,
    .contest__requests__item__challenge,
    .contest__requests__item__date_request,
    .contest__requests__item__nomination {
        flex-direction: column;
        width: auto;
    }

    .contest__request__full_name,
    .contest__request__municipality,
    .contest__request__challenge,
    .contest__request__date_request,
    .contest__requests__nomination {
        padding-top: 10px;
    }

    .contest__request__full_name {
        margin-left: 0;
    }

    .contest__list__card,
    .contest__request__card {
        width: 100%;
    }

    .retrain__author__body {
        flex-direction: column;
        gap: 15px;
    }

    .contest__list__title__name,
    .contest__list__name {
        min-width: 300px;
        width: 300px;
    }

    .contest__list__title__date,
    .contest__list__date {
        min-width: 250px;
        width: 250px;
    }

    .contest__list__title__requests,
    .contest__list__requests {
        min-width: 200px;
        width: 200px;
        border-right: 0px;
    }

    .form__input__participant__category {
        width: clamp(333px, 94vw, 498px);
        height: 37px;
        font-size: 14px;
    }

    .contest__category__add,
    .contest__contacts__add,
    .contest__date__add {
        flex-direction: column;
        align-items: start;
    }

    .contest__category,
    .contest__contacts,
    .contest__cost {
        align-items: start;
    }

    .contest__challenge__num {
        height: min-content;
    }

    .contest__department__select,
    .contest_nomination__select {
        width: clamp(333px, 94vw, 498px);
        height: 32px;
        font-size: 12px;
    }

    .contest__challenge__num__select {
        width: 76px;
        height: 32px;
        font-size: 12px;
    }

    .contest__category__icon__edit,
    .contest__contacts__icon__edit {
        top: 9%;
    }

    .btn-danger {
        margin-left: clamp(0px, 1vw, 15px);
    }

    .contest_nomination__select {
        margin: 10px 0;
    }

    /* ── Event ──────────────────────────────────────────────────────── */
    .main__event {
        flex-direction: column;
    }

    .event__category__title__1 {
        min-width: 120px;
    }

    .event__category,
    .event__qouta,
    .event__contacts,
    .event__cost {
        padding-left: 42px;
        align-items: flex-start;
    }

    .event__category__name,
    .event__qouta__name,
    .event__contacts__name,
    .event__cost__name {
        line-height: 1;
    }

    .event__qouta__title,
    .event__contacts__title,
    .event__cost__title {
        min-width: 103px;
    }

    .event_inf_2 {
        margin: 15px 0 0;
        width: auto;
    }

    .event__date,
    .event__place,
    .event__department {
        height: min-content;
    }

    .event__date__item,
    .event__place__item,
    .event__department__item {
        margin-top: 5px;
        margin-left: 10px;
        padding-left: 28px;
    }

    .event__date__title,
    .event__place__title,
    .event__department__title {
        margin-bottom: 0;
    }

    .event__settings,
    .event__unloading {
        width: 100%;
    }

    .event__treaty {
        flex-direction: column;
        height: 80px;
    }

    .event__list__title__name,
    .event__list__title__date,
    .event__list__title__quota,
    .event__list__title__requests {
        font-size: 16px;
    }

    .event__list__title__date,
    .event__list__date {
        min-width: 200px;
    }

    .event__list__title__quota,
    .event__list__quota {
        min-width: 70px;
    }

    .event__list__title__requests,
    .event__list__requests {
        min-width: 190px;
    }

    .event__list__name,
    .event__list__date,
    .event__list__quota,
    .event__list__requests {
        font-size: 14px;
    }

    .event__link__completed {
        font-size: 15px;
    }

    .event__letter {
        flex-direction: column;
        line-height: 1;
        align-items: start;
    }

    .event__letter__name__3 {
        padding: 24px 0 0 51px;
    }

    .event__author__body {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 0;
    }

    /* ── Monitoring ─────────────────────────────────────────────────── */
    .monitoring__body {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .monitoring__settings {
        padding-top: 10px;
        margin: 0;
        gap: 10px;
        justify-content: center;
        width: clamp(333px, 83vw, 700px);
    }

    .form__input__persona,
    .form__monitoring {
        flex-direction: column;
    }

    .monitoring__list__title__name,
    .monitoring__list__name {
        min-width: 170px;
    }

    .add-from-favorites-btn,
    .monitoring__list__name {
        font-size: 13px;
    }

    .search-results {
        padding-left: 3vw;
    }

    .monitoring__settings__function {
        text-align: center;
        height: clamp(50px, 19.21vw, 83px);
        width: clamp(161px, 40.2vw, 240px);
    }

    .monitoring__body {
        padding-left: 0;
    }

    /* ── Footer handled in footer.css ── */
    }
}


/* ==========================================================================
   @media (max-width: 481px)
   ========================================================================== */
@media (max-width: 481px) {
    .course__link__additionally,
    .event__link__additionally {
        margin-left: 0px;
    }

    .header__item__link__course,
    .header__item__link__course__disable {
        padding: 2vw 20px 2vw 20px;
    }

    .header__item__link__disabled,
    .header__item__link,
    .header__item__course {
        padding: 9px;
    }
}


/* ==========================================================================
   @media (max-width: 456px)
   ========================================================================== */
@media (max-width: 456px) {
    /* ── Header handled in header.css ── */

    /* ── Home page ──────────────────────────────────────────────────── */
    .home__choose__wrapper {
        width: 100%;
        gap: 10px;
        grid-template-columns: repeat(1, 1fr);
        grid-template-areas:
            "A"
            "B"
            "C";
    }

    .home__choose__course {
        grid-area: A;
    }

    .home__choose__contest {
        grid-area: B;
    }

    .home__choose__event {
        grid-area: C;
    }

    /* ── Login / Signup ─────────────────────────────────────────────── */
    .form__title {
        font-size: 6.54vw;
    }

    .form__input {
        width: clamp(330px, 82.28vw, 420px);
        height: 12.28vw;
        padding-right: 44px;
    }

    .form__input::placeholder {
        font-size: 13px;
    }

    .cumancen {
        right: 5vw;
        top: 3.5vw;
    }

    .form__reqwest {
        margin-left: 4.35vw;
    }

    .form__reqwest a {
        font-size: 13px;
    }

    .form__item__button {
        width: 30.04vw;
        min-width: 115px;
        height: 8.77vw;
        min-height: 33px;
        font-size: clamp(13px, 3.51vw, 16px);
    }

    .form__reqwest > span {
        font-size: 13px;
    }

    /* ── Profile ────────────────────────────────────────────────────── */
    .profile__form__education_none {
        margin-top: 0;
    }

    .profile__form__education {
        margin-top: 2vw;
    }

    .education__items {
        flex-wrap: nowrap;
        height: 100%;
    }

    .education__item {
        width: auto;
        margin: 5px 0;
    }

    .education__form {
        width: auto;
    }

    .profile__title__header__education_edit {
        line-height: 1;
    }

    .profile__title__header {
        font-size: 17px;
    }

    .personal__text_job select {
        width: 333px;
        white-space: normal;
    }

    .profile__form__education_edit label {
        width: 335px;
        font-size: 14px;
    }

    .personal__field__education_edit {
        width: 345px;
        font-size: 14px;
    }

    .profile__form__education_data_edit a {
        font-size: 13px;
    }

    .profile__form {
        width: 333px;
    }

    .profile__form__prof {
        width: 333px;
    }

    .profile__form__menu {
        width: 333px;
    }

    .profile_mobile1 {
        padding-left: 35px;
    }

    .personal__text__full__name {
        font-size: 15px;
    }

    .personal__link {
        font-size: 15px;
    }

    .profile__body {
        width: clamp(333px, 81.65vw, 376px);
    }

    .form__items__button {
        justify-content: center;
    }

    .cabinet__title {
        line-height: clamp(24px, 3vw, 0px);
    }

    .file__preview {
        width: 46px;
        height: 46px;
    }

    /* ── Course ─────────────────────────────────────────────────────── */
    .course__list__title__name,
    .course__list__title__date,
    .course__list__title__quota,
    .course__list__title__requests {
        font-size: 15px;
    }

    .course__list__title__name,
    .course__list__name {
        min-width: 270px;
    }

    .name__course,
    .name__course__requests,
    .name__contest__requests {
        font-size: 18px;
        line-height: 1.4;
    }

    .name__course.line {
        line-height: 1;
    }

    .title__url {
        font-size: 13px;
        overflow-wrap: normal;
        margin-right: 9px;
    }

    .course__category__name,
    .course__qouta__name,
    .course__contacts__name,
    .course__cost__name {
        font-size: 14px;
        margin-right: 0;
    }

    .course__category__title,
    .course__qouta__title,
    .course__contacts__title,
    .course__cost__title {
        font-size: 15px;
    }

    .course__form__name,
    .course__form__time {
        text-align: center;
        line-height: 1.5;
        display: flex;
        align-items: center;
    }

    .course__form__sample {
        gap: 0;
        justify-content: space-around;
    }

    .course__category,
    .course__qouta,
    .course__contacts,
    .course__cost {
        margin-left: 10px;
    }

    .course__author__body {
        display: block;
    }

    .course__author__title {
        width: 100%;
    }

    .course__category__title__1 {
        min-width: 105px;
    }

    .course__qouta__title,
    .course__contacts__title,
    .course__cost__title {
        min-width: clamp(105px, 26.88vw, 125px);
        width: auto;
    }

    .course__date__name,
    .course__place__name,
    .course__department__name {
        font-size: 15px;
    }

    .course__settings__listener {
        margin-inline: 0;
    }

    .course__cost__icon {
        transform: translateX(2px) translateY(-4px);
    }

    .course__settings,
    .course__unloading {
        flex-direction: column;
    }

    .course__information,
    .contest__information {
        width: clamp(340px, 95vw, 435px);
        margin-inline: 0;
        margin-right: 19px;
    }

    .course__information__title_inside,
    .contest__information__title_inside {
        font-size: 16px;
        line-height: 1.5;
    }

    .course__information__body,
    .contest__information__body {
        padding: 5px 10px 0 10px;
    }

    .course__button__listener {
        justify-content: center;
    }

    .course__department__filter,
    .contest__department__filter {
        display: flex;
        width: 95%;
    }

    .course_requests__list__item,
    .course_requests__list__link,
    .course_requests__list__title {
        grid-template-columns: 140px 250px repeat(3, 1fr);
    }

    .course_certificate__list__title__date_request,
    .course_certificate__list__date_request {
        min-width: 105px;
        width: 105px;
        font-size: 13px;
    }

    .course_requests__list__title__last_name,
    .course_requests__list__last_name {
        min-width: 180px;
    }

    .course_certificate__list__title__last_name,
    .course_certificate__list__last_name {
        min-width: 130px;
    }

    .course_requests__list__title__first_name,
    .course_requests__list__first_name {
        min-width: 107px;
    }

    .course_certificate__list__title__first_name,
    .course_certificate__list__first_name {
        min-width: 107px;
    }

    .course_requests__list__title__patronymic,
    .course_requests__list__patronymic {
        min-width: 145px;
    }

    .course_certificate__list__title__patronymic,
    .course_certificate__list__patronymic {
        min-width: 145px;
    }

    .course_certificate__list__title__municipality,
    .course_certificate__list__municipality {
        min-width: 160px;
        width: 200px;
        font-size: 13px;
    }

    .course_requests__list__title__role,
    .course_requests__list__role {
        min-width: 120px;
        width: 140px;
        font-size: 13px;
    }

    .course_requests__list__title__is_completed,
    .course_requests__list__is_completed {
        min-width: 140px;
        border-right: 0px solid var(--color-primary);
    }

    .course_certificate__list__title__is_completed,
    .course_certificate__list__is_completed {
        min-width: 140px;
        width: 180px;
        border-right: 1px solid var(--color-primary);
        font-size: 13px;
    }

    .course_requests__list__title__is_approved_waiting,
    .course_requests__list__is_approved_waiting {
        min-width: 140px;
        width: 180px;
        border-right: 0px solid var(--color-primary);
    }

    .course_requests__list__title__no_approved,
    .course_requests__list__item__no_approved {
        grid-template-columns: 140px 250px repeat(2, 1fr);
    }

    .course__date_add_edit {
        flex-direction: column;
    }

    .input__data__course {
        margin-left: 13px;
        margin-bottom: 10px;
    }

    .course__textarea,
    .course__content {
        min-height: 120px;
    }

    .course__container {
        justify-content: start;
    }

    .course__settings__function,
    .contest__list__more__inf,
    .contest__settings__function {
        width: 100%;
    }

    .form__event__button__cencel {
        align-items: center;
    }

    .course__link__completed {
        width: clamp(111px, 30vw, 135px);
    }

    .course__certificate__create {
        gap: 0;
    }

    .course__requests__menu {
        gap: 45px;
    }

    .course__list__quota,
    .course__list__requests {
        display: grid;
        align-items: center;
        text-align: center;
        font-size: 13px;
    }

    .course__list__student,
    .event__list__student {
        justify-content: normal;
    }

    .contest__award__table__list2 {
        margin-right: 16px;
    }

    /* ── Contest ────────────────────────────────────────────────────── */
    .contest__container {
        justify-content: start;
    }

    .contest__category__title,
    .contest__contacts__title,
    .contest__cost__title {
        font-size: 15px;
    }

    .contest__category__title__1 {
        min-width: 105px;
    }

    .contest__category__name,
    .contest__contacts__name {
        font-size: 14px;
        margin-right: 0;
    }

    .contest__author__title {
        width: 100%;
    }

    .contest__author__body {
        display: block;
    }

    .name__contest__request {
        line-height: 1.2;
        margin-right: 6px;
        margin-top: 20px;
    }

    .name__contest {
        line-height: 1.2;
    }

    .contest__list__title__name,
    .contest__list__name {
        min-width: 290px;
        width: 290px;
    }

    .contest__list__title__date,
    .contest__list__date {
        min-width: 200px;
        width: 200px;
    }

    .contest__list__title__requests,
    .contest__list__requests {
        min-width: 190px;
        width: 190px;
    }

    .contest__list__title__name,
    .contest__list__title__date,
    .contest__list__title__requests {
        font-size: 15px;
    }

    .contest__description {
        min-height: 100px;
    }

    .contest__challenge__num__name {
        font-size: 15px;
    }

    .contest__date_add_edit {
        flex-direction: column;
    }

    .input__data__contest {
        margin-left: 13px;
        margin-bottom: 10px;
    }

    .btn-danger {
        margin: 0;
    }

    .contest__request__card {
        padding: 20px 25px;
    }

    .course__link__block,
    .event__link__block {
        padding: 20px 20px;
    }

    /* ── Event ──────────────────────────────────────────────────────── */
    .name__event {
        font-size: 16px;
        line-height: 1.2;
    }

    .event__category__name,
    .event__qouta__name,
    .event__contacts__name,
    .event__cost__name {
        font-size: 14px;
    }

    .event__category__title,
    .event__qouta__title,
    .event__contacts__title,
    .event__cost__title,
    .event__date__name,
    .event__place__name,
    .event__department__name {
        font-size: 15px;
    }

    .event__category__title__1 {
        min-width: 105px;
    }

    .event__qouta__title,
    .event__contacts__title,
    .event__cost__title {
        min-width: clamp(105px, 26.88vw, 125px);
        width: auto;
    }

    .event__form__name__list {
        font-size: 16px;
        line-height: 1.2;
    }

    .event__settings__listener {
        margin-inline: 0;
        flex-direction: column;
    }

    .event__author__body {
        display: block;
    }

    .event__author__title {
        width: 100%;
    }

    .event__list__title__name,
    .event__list__title__date,
    .event__list__title__quota,
    .event__list__title__requests {
        font-size: 15px;
    }

    .event__list__title__name,
    .event__list__name {
        min-width: 270px;
    }

    .event__date__name,
    .course__place__name,
    .event__department__name {
        font-size: 15px;
    }

    .event__settings,
    .event__unloading,
    .event__settings__function {
        flex-direction: column;
        width: 100%;
    }

    .event__settings__function__open_close {
        width: 100%;
    }

    .event__requests__menu {
        display: flex;
        justify-content: space-between;
        min-width: 350px;
        width: 97vw;
        margin-left: -5px;
        gap: 0;
    }

    .event__list__quota,
    .event__list__requests {
        display: grid;
        align-items: center;
        text-align: center;
        font-size: 13px;
    }

    .event__link__completed {
        font-size: 13px;
    }

    .event_requests__list__title__date_request,
    .event_requests__list__title__last_name,
    .event_requests__list__title__first_name,
    .event_requests__list__title__patronymic,
    .event_requests__list__title__municipality,
    .event_requests__list__title__role,
    .event_requests__list__title__is_approved,
    .event_requests__list__title__is_approved_waiting,
    .event_requests__list__title__is_completed {
        font-size: 15px;
    }

    .form__add__event {
        width: 62vw;
        min-width: 115px;
        height: 8.77vw;
        min-height: 33px;
        font-size: clamp(16px, 3.51vw, 16px);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .event__button__listener {
        display: flex;
        justify-content: center;
    }

    .event-edit__file-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .event-edit__file-delete {
        margin-left: 0;
    }

    .event__item__additionally,
    .course__item__additionally {
        flex-direction: column;
        gap: 0;
        align-items: start;
    }

    .event_requests__list__title,
    .event_requests__list__item,
    .event_requests__list__link {
        grid-template-columns: 170px 250px repeat(3, 1fr);
    }

    /* ── Monitoring ─────────────────────────────────────────────────── */
    .monitoring__body {
        padding-left: 0;
    }

    .name__course {
        padding-top: 2.2vw;
    }

    .monitoring__list__title__name {
        font-size: 13px;
    }

    .monitoring__settings__function {
        font-size: 14px;
        line-height: 16px;
    }

    /* ── Footer handled in footer.css ── */
        width: 100%;
        justify-content: space-between;
    }
}


/* ==========================================================================
   @media (max-width: 400px)
   ========================================================================== */
@media (max-width: 400px) {
    .course__form__name,
    .course__form__time {
        padding: clamp(10px, 3vw, 10px) clamp(9px, 1.5vw, 10px);
    }
}


/* ==========================================================================
   DESIGN-SYSTEM MOBILE-FIRST ADDITIONS
   Base rules = mobile; @media (min-width) = tablet/desktop enhancements.
   These supplement the component CSS files that lack mobile breakpoints.
   ========================================================================== */

/* ── Cards: 1-col on mobile, 2-col tablet, 3-col desktop ──────────── */
@media (max-width: 767px) {
    .card-grid {
        grid-template-columns: 1fr;
    }

    .card {
        padding: 16px 20px;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Page: reduced padding on mobile ───────────────────────────────── */
@media (max-width: 767px) {
    .page {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    .page__title {
        font-size: var(--text-xl);
    }
}

/* ── Breadcrumbs: allow wrapping on small screens ──────────────────── */
@media (max-width: 480px) {
    .breadcrumbs {
        flex-wrap: wrap;
        font-size: var(--text-xs);
    }
}

/* ── Buttons: full-width on very small screens ─────────────────────── */
@media (max-width: 456px) {
    .btn--primary,
    .btn--outline,
    .btn--danger {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* ── Table: reduced padding on mobile ──────────────────────────────── */
@media (max-width: 767px) {
    .table thead th,
    .table tbody td {
        padding: 8px var(--spacing-sm);
        font-size: var(--text-xs);
    }
}

/* ── Alert: full-width on mobile ───────────────────────────────────── */
@media (max-width: 480px) {
    .alert {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--text-sm);
    }
}