/**
 * Раздел «Трудоустройство»: блок на главной, страница списка, страница вакансии.
 *
 * Палитра взята из style.css темы:
 *   #ef7627 — оранжевый акцент      #028fc7 — синий
 *   #1a3e54 — тёмно-синий текст     #ffc621 — янтарный
 *   #609800 — зелёный               #1d1d1b — основной текст
 */

/* --- шрифт Inter -------------------------------------------------------- */

/*
 * Inter в теме не было, поэтому подключаем свой — как Ekibastuz и
 * HelveticaNeueCyr, из assets/fonts/, без внешних CDN.
 *
 * Файлы разрезаны по алфавитам: unicode-range заставляет браузер скачать
 * кириллицу и латиницу отдельно, а не один файл на 100+ КБ. Латиница нужна
 * даже на русской странице — в ней лежат цифры и знаки препинания.
 *
 * Только woff2: его понимают все браузеры с 2016 года. eot/ttf, как в
 * style.css, здесь не нужны — они утроили бы вес ради IE11.
 *
 * Лицензия SIL OFL 1.1 — размещать у себя разрешено.
 */

@font-face
{
    font-family: 'Inter';
    font-weight: 300;
    font-style: normal;

    src: url('../fonts/Inter-Light-cyrillic.woff2') format('woff2');
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B3, U+2116;
}

@font-face
{
    font-family: 'Inter';
    font-weight: 300;
    font-style: normal;

    src: url('../fonts/Inter-Light-latin.woff2') format('woff2');
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face
{
    font-family: 'Inter';
    font-weight: 400;
    font-style: normal;

    src: url('../fonts/Inter-Regular-cyrillic.woff2') format('woff2');
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B3, U+2116;
}

@font-face
{
    font-family: 'Inter';
    font-weight: 400;
    font-style: normal;

    src: url('../fonts/Inter-Regular-latin.woff2') format('woff2');
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face
{
    font-family: 'Inter';
    font-weight: 700;
    font-style: normal;

    src: url('../fonts/Inter-Bold-cyrillic.woff2') format('woff2');
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B3, U+2116;
}

@font-face
{
    font-family: 'Inter';
    font-weight: 700;
    font-style: normal;

    src: url('../fonts/Inter-Bold-latin.woff2') format('woff2');
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- выравнивание под левое меню шапки ---------------------------------- */

/*
 * .header спозиционирован absolute и накрывает страницу целиком, поэтому
 * колонку с иконками разделов каждый раздел обходит собственным отступом.
 * Значения и точки сброса — те же, что у «Реализованных проектов»
 * (.main-projects .main-text__container / .main-projects__container),
 * чтобы вакансии вставали в одну сетку с соседними страницами.
 *
 * z-index обязателен, и это не косметика. Шапка высотой ~500px невидимой
 * коробкой ul.header__left-menu накрывает верх страницы, перехватывая клики:
 * на архиве под ней оказывалась первая карточка, и «Подробнее» с крошками
 * не нажимались вообще. На главной блок лежит ниже шапки, поэтому там
 * всё работало и баг не был виден. Ровно тем же способом лечится страница
 * проектов — у .main-projects__container стоит тот же z-index: 1.
 * Работает без position: дети .main__container — флекс-элементы, а у них
 * z-index действует и без позиционирования.
 */

.main-vacancies .main-text__container,
.main-vacancy .main-text__container,
.vacancies--archive,
.vacancy
{
    z-index: 1;

    width: 100%;
    max-width: 900px;
    margin-left: 222px;
}

/*
 * .main__container на главной — flex с переносом, поэтому блок-секция обязана
 * занимать всю строку: без width он сжимается по содержимому, и авто-поля
 * .container-other не дают положенных 48px, из-за чего заголовок уезжает
 * левее соседних секций.
 */
.main__vacancies
{
    width: 100%;
    margin-bottom: 80px;
}

/* размер и начертание даёт общий .title-left, здесь только отступ */
.vacancies__title
{
    margin: 60px 0 30px;
}

.vacancies__list
{
    display: -ms-grid;
    display: grid;

    margin: 0 0 40px;
    padding: 0;

    list-style: none;

    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.vacancies__item
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    padding: 15px;

    border-radius: 8px;
    background: #eaf4fa;

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

/* --- плашки ------------------------------------------------------------ */

.vacancies__badges
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    margin-bottom: 22px;

    gap: 10px;

    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}

.vacancies__badge
{
    font-family: Inter;
    font-size: 14px;
    line-height: 16px;
    padding: 6px 8px 4px;    

    border-radius: 4px;
}

.vacancies__item .vacancies__badge
{
    font-size: 11px;    

}

.vacancies__badge--education
{
    color: #1d1d1b;
    background: #FFBF45;
}

.vacancies__badge--probation
{
    color: #fff;
    background: #9DCC63;
}

.vacancies__badge--experience
{    
    color: #fff;
    background: #3075BA;
}

.vacancies__item .vacancies__badge--education {
    margin-right: auto;
}

/* --- содержимое карточки ------------------------------------------------ */

.vacancies__item-title
{
    font-family: Inter;
    font-size: 20px;
    font-weight: bold;
    line-height: 120%;

    margin: 0 0 10px;

    color: #1a3e54;
}

.vacancies__item-title a
{
    color: inherit;
    text-decoration: none;
}

.vacancies__item-title a:hover
{
    color: #ef7627;
}

.vacancies__conditions
{
    margin: 0 0 16px;
    padding: 0;

    list-style: none;

    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}

.vacancies__condition
{
    font-family: Inter;
    font-size: 14px;
    line-height: 16px;
    font-weight: 300;

    position: relative;

    margin-bottom: 8px;
    padding-left: 16px;

    color: #1d1d1b;
}

.vacancies__condition::before
{
    position: absolute;
    top: 10px;
    left: 0;

    width: 5px;
    height: 5px;

    content: '';

    border-radius: 50%;
    background: #ef7627;
}

.vacancies__salary
{
    font-family: Inter;
    font-size: 20px;
    font-weight: bold;
    line-height: 120%;

    margin: 0 0 10px;

    color: #1d1d1b;
}

/* --- кнопки ------------------------------------------------------------- */

.vacancies__actions
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    margin-top: auto;

    gap: 6px;

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.vacancies__btn,
.vacancies__show-all
{
    font-family: Inter;
    font-size: 14px;
    font-weight: bold;
    line-height: 16px;
    letter-spacing: 2.88px;

    display: block;

    padding: 13px 20px;

    cursor: pointer;
    -webkit-transition: .2s;
            transition: .2s;
    text-align: center;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;

    border: 1px solid #ef7627;
    border-radius: 4px;
}

.vacancies__btn--details
{
    color: #ef7627;
    background: transparent;
}

.vacancies__btn--details:hover
{
    color: #fff;
    background: #ef7627;
}

.vacancies__btn--apply,
.vacancies__show-all
{
    color: #fff;
    background: #ef7627;
}

.vacancies__btn--apply:hover,
.vacancies__show-all:hover
{
    color: #fff;
    border-color: #ff6921;
    background: #ff6921;
}

.vacancies__show-all
{
    min-width: 210px;
    max-width: 260px;
    margin: 0 auto;
}

.vacancies__show-all[disabled]
{
    cursor: default;

    opacity: .6;
}

.vacancies__empty
{
    font-family: Inter;
    font-size: 15px;

    color: #6b7584;
}

/* --- пагинация ---------------------------------------------------------- */

.vacancies__pagination
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    margin-bottom: 24px;

    gap: 8px;

    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.vacancies__pagination .page-numbers
{
    font-family: Inter;
    font-size: 14px;
    line-height: 28px;

    display: block;

    min-width: 28px;
    height: 28px;

    text-align: center;
    text-decoration: none;

    color: #1a3e54;
    border-radius: 4px;
}

.vacancies__pagination a.page-numbers:hover
{
    color: #ef7627;
}

.vacancies__pagination .page-numbers.current
{
    color: #fff;
    background: #ef7627;
}

/* стрелки «предыдущая»/«следующая» */
.vacancies__page-arrow
{
    display: inline-block;

    width: 0;
    height: 0;

    vertical-align: middle;

    border-top: 5px solid transparent;
    border-right: 7px solid #028fc7;
    border-bottom: 5px solid transparent;
}

.vacancies__page-arrow--next
{
    border-right: none;
    border-left: 7px solid #028fc7;
}

/* --- страница вакансии --------------------------------------------------- */

/* ширина и отступ .vacancy заданы в блоке выравнивания в начале файла */

.vacancy__salary
{
    font-family: Inter;
    font-size: 30px;
    font-weight: bold;
    line-height: 120%;

    margin: 0 0 22px;

    color: #9DCC63;
}

.vacancy__badges
{
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    margin-bottom: 30px;
}

/* на странице вакансии плашки идут подряд, а не по краям карточки */
.vacancy__badges .vacancies__badge--experience
{
    margin-left: 0;
}

.vacancy__section
{
    margin-bottom: 10px;
}

.vacancy__section-title,
.vacancy__content h2,
.vacancy__content h3
{
    font-family: Ekibastuz;
    font-size: 25px;
    font-weight: bold;
    line-height: 130%;

    margin: 30px 0 16px;

    color: #1d1d1b;
}

.vacancy__list,
.vacancy__content ul
{
    margin: 0 0 20px;
    padding: 0;
    font-family: Inter;
    font-weight: 300;
    font-style: Light;
    font-size: 18px;
    line-height: 100%;

    list-style: none;
}

.vacancy__list-item,
.vacancy__content li
{
    font-family: Inter;
    font-size: 18px;
    line-height: 130%;
    font-weight: 300;

    position: relative;

    margin-bottom: 10px;
    padding-left: 20px;

    color: #1d1d1b;
}

.vacancy__list-item::before,
.vacancy__content li::before
{
    position: absolute;
    top: 9px;
    left: 0;

    width: 6px;
    height: 6px;

    content: '';

    border-radius: 50%;
    background: #ef7627;
}

.vacancy__content p
{
    font-family: Inter;
    font-size: 25px;
    line-height: 150%;

    margin: 0 0 14px;

    color: #1d1d1b;
}

.vacancy__apply
{
    min-width: 280px;
    max-width: 320px;
    margin-top: 30px;
    padding: 16px 20px;
}

/* --- модальное окно отклика ---------------------------------------------- */

.modal--vacancy
{
    position: fixed;
    z-index: 100;
    top: 50%;
    left: 50%;

    display: none;

    width: calc(100% - 30px);
    max-width: 420px;
    padding: 30px;

    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

.modal--vacancy.is-open
{
    display: block;
}

/* оверлей темы позиционирован absolute — на длинных страницах он не
   перекрывает экран целиком, поэтому на время показа делаем его fixed */
body.vacancy-modal-open .body-overlay
{
    position: fixed;
    top: 0;
    left: 0;
}

.modal__title--vacancy
{
    margin-bottom: 22px;

    text-align: left;
}

/* --- форма отклика ------------------------------------------------------ */

.form-vacancy__row
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    margin-bottom: 12px;

    gap: 12px;

    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.form-vacancy__label
{
    font-family: Inter;
    font-size: 14px;
    line-height: 16px;

    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 68px;

    color: #fff;
}

.form-vacancy__input
{
    font-family: Inter;
    font-size: 14px;

    width: 100%;
    padding: 9px 12px;

    -webkit-transition: border-color .2s;
            transition: border-color .2s;

    color: #1d1d1b;
    border: 2px solid transparent;
    border-radius: 4px;
    background: #fff;
}

.form-vacancy__input:focus
{
    border-color: #ef7627;
    outline: none;
}

.form-vacancy__input--error
{
    border-color: #bf5b45;
}

/* поле выбора файла */

.form-vacancy__file
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    width: 100%;

    gap: 8px;

    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.form-vacancy__clip
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 34px;
    height: 34px;

    cursor: pointer;

    border-radius: 4px;
    background: #ef7627;

    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.form-vacancy__clip:hover
{
    background: #ff6921;
}

/* инпут скрыт визуально, но остаётся доступным с клавиатуры через label */
.form-vacancy__file-input
{
    position: absolute;

    overflow: hidden;

    width: 1px;
    height: 1px;

    white-space: nowrap;

    clip: rect(0 0 0 0);
}

.form-vacancy__file-input:focus + .form-vacancy__file-name
{
    outline: 2px solid #ef7627;
}

.form-vacancy__file-name
{
    font-family: Inter;
    font-size: 14px;

    overflow: hidden;

    width: 100%;
    padding: 9px 12px;

    white-space: nowrap;
    text-overflow: ellipsis;

    color: #6b7584;
    border-radius: 4px;
    background: #fff;
}

/* сообщения и согласие */

.form-vacancy__message
{
    font-family: Inter;
    font-size: 13px;
    line-height: 140%;

    margin: 0 0 12px;
    padding: 8px 10px;

    color: #fff;
    border-radius: 4px;
    background: #bf5b45;
}

.form-vacancy__message--success
{
    background: #609800;
}

.form-vacancy__consent
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    margin-bottom: 18px;

    cursor: pointer;

    gap: 8px;

    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}

.form-vacancy__consent .form__checkbox-text
{
    font-family: Inter;
    font-size: 11px;
    line-height: 130%;

    color: #fff;
}

.form-vacancy__consent .form__checkbox-text a
{
    color: #fff;
    text-decoration: underline;
}

.form-vacancy__submit
{
    font-family: Inter;
    font-size: 13px;
    font-weight: bold;
    line-height: 15px;

    display: block;

    width: 100%;
    padding: 15px 20px;

    cursor: pointer;
    -webkit-transition: .2s;
            transition: .2s;
    text-align: center;
    letter-spacing: .12em;
    text-transform: uppercase;

    color: #fff;
    border: none;
    border-radius: 4px;
    background: #ef7627;
}

.form-vacancy__submit:hover
{
    background: #ff6921;
}

.form-vacancy__submit[disabled]
{
    cursor: default;

    opacity: .6;
}

.modal .grecaptcha-badge
{
    display: none;
}

/* --- адаптив ------------------------------------------------------------ */

/* точки сброса отступа под левое меню — те же, что у «Реализованных проектов» */

@media screen and (max-width: 1024px)
{
    /* перебивает .main .main-text{margin-left:20%} из style.css */
    .main-vacancies .main-text,
    .main-vacancy .main-text,
    .vacancies--archive,
    .vacancy
    {
        margin-left: 12px;
    }
}

@media screen and (max-width: 1023px)
{
    .vacancies__list
    {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 767px)
{
    .vacancies__list
    {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .vacancies__show-all
    {
        width: 100%;
        max-width: none;
    }

    .vacancy__apply
    {
        min-width: 0;
        max-width: none;
        width: 100%;
    }
}

@media screen and (max-width: 639px)
{
    .modal--vacancy
    {
        padding: 25px 20px;
    }

    .form-vacancy__row
    {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;

        gap: 5px;

        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
    }

    .form-vacancy__label
    {
        width: auto;
    }

    .vacancy__salary
    {
        font-size: 22px;
    }
}

@media screen and (max-width: 419px)
{
    .main-vacancies .main-text,
    .main-vacancy .main-text,
    .vacancies--archive,
    .vacancy
    {
        margin-left: 0;
    }

    .vacancy__list-item
    {
        font-size: 15px;
    }

    .vacancy__content p {
        
        font-size: 18px;
    }

    .vacancy__apply {
        padding: 12px 20px;
    }
}