/* Cached on Sun, 02 Aug 2026 18:18:16 */
/*
 * responsive.css — адаптивный слой поверх легаси fixed-width макета (975px).
 * Грузится ПОСЛЕДНИМ в index.php, поэтому переопределяет index_v2.css/indexF.css.
 * ВАЖНО: всё внутри @media (max-width) — на десктопе (>980px) НЕ применяется ничего,
 * десктопная вёрстка остаётся байт-в-байт прежней. Откат = убрать includeCSS('css/responsive').
 *
 * Фаза 1: глобальный каркас (topBar / шапка-поиск / контейнер / футер) + гард overflow-x.
 * Дальнейшие фазы (листинги, деталка, формы) добавляются НИЖЕ своими секциями.
 */

/* ============================================================
 * Гард: ни один блок не должен заставлять страницу скроллиться вбок.
 * Брейкпоинт = ширина легаси-макета (975px) + небольшой запас.
 * ============================================================ */
@media (max-width: 980px) {

    html, body {
        overflow-x: hidden;          /* убираем горизонтальный скролл от 975px-блоков */
        max-width: 100%;
    }

    /* Снимаем жёсткие min-width: 975px, из-за которых страница не сжимается */
    .headPanel,
    .footerWrapper,
    .footerWrapper.fullFooter,
    .footerWrapper.smallFooter {
        min-width: 0 !important;
    }

    /* Центральные контейнеры 975px → тянутся по экрану с боковыми отступами */
    .headPanel > div,
    .footer {
        width: auto !important;
        max-width: 975px;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
    }

    /* ---- Шапка-поиск: логотип + форма поиска перестают «торчать» ---- */
    .headPanel .search .logo,
    .headPanel .search .searchForm {
        display: block;
        width: auto !important;
        max-width: 100%;
        margin-right: 0;
    }
    .headPanel .search .logo {
        margin: 0 auto 10px;
        text-align: center;
    }

    /* ---- Верхняя фикс-панель (логин/избранное/соцсети) ---- */
    .topBar {
        position: static;            /* фикс-бар на мобиле занимает пол-экрана — отвязываем */
    }
    .topBarInner {
        width: auto !important;
        max-width: 975px;
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
    }
    /* раз topBar больше не fixed — убираем компенсирующий отступ контента */
    .bodyContent {
        padding-top: 10px !important;
    }

    /* ---- Футер: колонки навигации в одну колонку по центру ---- */
    .footer .navList ul,
    .countersBlock {
        display: block;
        margin: 0 0 16px 0;
        text-align: center;
    }
    .footer table,
    .footer table td {
        display: block;
        width: auto !important;
    }

    /* Картинки внутри контента не вылезают за ширину экрана.
       Намеренно НЕ глобально (img{}), чтобы не сплющить спрайты/иконки фикс-размера. */
    .bodyContent .vacText img,
    .bodyContent .resText img,
    .bodyContent .companyDescription img {
        max-width: 100%;
        height: auto;
    }
}

/* ============================================================
 * ФАЗА 2 — Главная / листинг (page_result_new): контейнер,
 * форма поиска, навигационные табы, сетка категорий.
 * ============================================================ */
@media (max-width: 980px) {

    /* Основной контейнер контента 975px → тянется по экрану */
    .hh-container {
        width: auto !important;
        max-width: 975px;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
    }

    /* ---- Форма поиска: query + город + категория + кнопка в столбик ---- */
    .headPanel .search .searchForm,
    #searchForm {
        display: block;
        width: 100% !important;
    }
    input#search_line {
        width: 100% !important;
        box-sizing: border-box;
        margin: 0 0 8px 0;
    }
    .search-city-wrapper {
        display: block;
        width: 100% !important;
        margin: 0 0 8px 0;
    }
    .searchForm .tl-combobox {
        display: block;
        width: 100% !important;
        margin: 0 0 8px 0;
        box-sizing: border-box;
    }
    .searchSubmitButton {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* ---- Навигационные табы (вакансии/резюме/компании + «добавить») ---- */
    .navTabs {
        width: auto !important;
        height: auto;            /* было 33px — фикс высота режет перенесённые табы */
        margin-bottom: 10px;
    }
    .navTabs ul {
        overflow: hidden;        /* содержит плавающие li */
    }
    .navAddUl {
        float: none;             /* «добавить вакансию/резюме» уезжает под табы, не вправо */
        margin-top: 6px;
    }
    .navAddUl li {
        float: left;
    }

    /* ---- Сетка категорий (slider_content): блок и колонки тянутся ---- */
    #slider_content .sc_block {
        width: auto !important;
        max-width: 961px;
        box-sizing: border-box;
        padding-left: 8px;
        padding-right: 8px;
    }
    .slContentUl,
    .slContentUl.countryUl {
        display: block;          /* колонки категорий в один столбец */
        margin-left: 0;
    }

    /* Главный промо-блок не вылезает за экран */
    .mainPromoWrap,
    .mainPromo {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* ============================================================
 * ФАЗА 2b — Бургер-меню верхней навигации (как на hh.md).
 * Бургер скрыт на десктопе; на узких экранах .navTabs ul
 * сворачивается в выпадающее меню, открываемое классом .navOpen.
 * ============================================================ */

/* Десктоп: бургер не показываем (иконка живёт только в мобиле) */
.navBurger { display: none; }
/* Material Symbols — тонкое начертание */
.material-symbols-outlined {
    font-variation-settings: 'wght' 200, 'opsz' 24, 'GRAD' 0, 'FILL' 0;
}

@media (max-width: 980px) {

    /* Контейнер навигации: место под бургер + раскрывающееся меню */
    .navTabs {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 44px;
        overflow: visible !important;
        position: relative;
        background: #f5f5fa;
        border-bottom: 1px solid #d9d9ea;
    }

    /* Сама иконка-бургер */
    .navBurger {
        display: block;
        padding: 8px 12px;
        cursor: pointer;
        color: #FF8C00;
        line-height: 0;
        -webkit-tap-highlight-color: transparent;
    }
    .navBurger .material-symbols-outlined {
        font-size: 34px;
        display: block;
    }

    /* Оба списка (.navTabs ul и .navAddUl) сворачиваем; раскрываем по .navOpen */
    .navTabs ul {
        display: none !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-top: 1px solid #e3e3f0;
    }
    .navTabs.navOpen ul { display: block !important; }

    /* Пункты — в столбик на всю ширину */
    .navTabs li {
        float: none !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-bottom: 1px solid #ececf6 !important;
        border-radius: 0 !important;
        background: #fff !important;
    }
    .navTabs li a {
        display: block !important;
        padding: 13px 16px !important;
        font-size: 16px !important;
        margin: 0 !important;
    }
    .navTabs li a.active {
        border-radius: 0 !important;   /* в списке оранжевая плашка во всю строку выглядит чище */
    }
    /* «+ Добавить вакансию/резюме» — те же строки меню, без float вправо */
    .navAddUl { margin-top: 0 !important; }
    .navAddUl li a { color: #FF8C00 !important; }

    /* --- Убираем белый зазор-разделитель сверху ---
       .header margin-top:60px/36px рассчитан на фикс-topBar десктопа;
       на мобиле topBar статичный → это просто пустая белая полоса. */
    .header,
    .header.smallMT { margin-top: 0 !important; }
    .navTabs { margin-bottom: 0 !important; }
    .bodyContent { padding-top: 0 !important; }
    .headPanel { padding-bottom: 8px !important; }
}

/* ============================================================
 * ФАЗА 2c — Компактный верх (мобайл): аккаунт-замок + язык.
 * На десктопе .mTop скрыт, работает старый topBar.
 * ============================================================ */
.mTop { display: none; }
/* Иконка-бейдж в шапках блоков — только мобайл (на десктопе скрыта) */
.hdr-ico { display: none; }

@media (max-width: 980px) {

    /* Полоса topBar в один ряд: бренд слева, компактные контролы рядом */
    .topBarInner {
        display: flex !important;
        align-items: center;
        gap: 12px;
        flex-wrap: nowrap;
    }
    .mTop {
        display: flex !important;
        align-items: center;
        gap: 14px;
    }

    /* Прячем громоздкий легаси-верх — его заменяют компактные контролы */
    .topBar .topRight,
    .topBar .topSocial,
    #loginBlock,
    .topBar .upLink { display: none !important; }
    .topAsideSpan { display: none; }          /* текст домена убираем для компактности */
    .topLeft { flex: 0 0 auto; }

    /* --- контейнеры контролов --- */
    .mAcc, .mLang {
        position: relative;
        display: flex;
        align-items: center;
        cursor: pointer;
        color: #303030;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }
    .mAcc .material-symbols-outlined { font-size: 28px; color: #FF8C00; }
    .mLang img {
        height: 18px; width: auto; display: block;
        border: 1px solid #ccc;
    }
    .mLang .mCaret { font-size: 20px; color: #777; margin-left: 1px; }

    /* --- выпадающие меню --- */
    .mDrop {
        display: none;
        position: absolute;
        top: 100%; left: 0;
        margin-top: 8px;
        background: #fff;
        border: 1px solid #d9d9ea;
        border-radius: 6px;
        box-shadow: 0 6px 18px rgba(0,0,0,.18);
        min-width: 170px;
        z-index: 12000;
        overflow: hidden;
    }
    .mAcc.open .mDrop,
    .mLang.open .mDrop { display: block; }

    .mDrop a {
        display: block;
        padding: 12px 16px;
        font-size: 15px;
        color: #303030;
        text-decoration: none;
        border-bottom: 1px solid #f0f0f5;
        white-space: nowrap;
    }
    .mDrop a:last-child { border-bottom: none; }
    .mDrop a:active,
    .mDrop a:hover { background: #f5f5fa; }
    .mLangMenu a img {
        height: 16px; width: auto;
        margin-right: 8px;
        vertical-align: middle;
        border: 1px solid #ccc;
    }
}

/* ============================================================
 * ФАЗА 2d — Шапки блоков (.block-header: VIP / бесплатные / компании).
 * Заголовок-кнопка и ссылка «+Adaugă …» (float:right; margin-top:-6px)
 * на узком экране наезжали друг на друга. Раскладываем по строкам:
 * каждая ссылка — отдельной строкой, по ширине содержимого.
 * ============================================================ */
@media (max-width: 980px) {

    /* Ссылки шапки: убираем float (он давал и наложение заголовка, и наезд
       поиска снизу). inline-block → «+Adaugă VIP» стоит в одной строке с
       заголовком, пока влезает, и переносится только когда места не хватает. */
    .block-header a {
        float: none !important;
        display: inline-block !important;
        width: auto !important;
        max-width: 100%;
        margin: 4px 6px 4px 0 !important;
        vertical-align: middle;
        box-sizing: border-box;
    }
    .block-header .inline-header { display: inline !important; }
    .vip-header,
    .reg-header { padding-top: 14px !important; }

    /* Пустые якоря (<a name="vip"></a>) больше не рисуем серым квадратом */
    .block-header a:empty { display: none !important; }

    /* Звёздочка-бейдж внутри кнопки-заголовка — одним блоком с текстом */
    .block-header a .hdr-ico {
        display: inline !important;
        color: #FFD24D;
        font-size: 17px;
        line-height: 1;
        margin-right: 5px;
        vertical-align: baseline;
    }

    /* VIP/reg быстрый поиск под шапкой — на всю ширину, не наезжает и не вылезает */
    .vipQS,
    .regQS {
        width: auto !important;
        max-width: 100%;
        box-sizing: border-box;
    }
    .vipQS .textField,
    .regQS .textField {
        width: 100% !important;
        box-sizing: border-box;
    }
    .vipQSSw {
        width: 100% !important;
        left: 0 !important;
    }
}

/* ============================================================
 * ФАЗА 3 — Карточки листинга (result_vacancy / result_resume).
 * Десктоп: 2 колонки #lb(240) + #rb(720) внутри .hh-container(975);
 * дата .r_right float:right, зарплата .resultSalary position:absolute,
 * у резюме фото+контент двумя inline-block (.cvWPhoto, инлайн width:602px).
 * Мобайл: фильтры над списком, карточки на всю ширину, зарплата в поток.
 * ============================================================ */
@media (max-width: 980px) {

    /* Двухколоночный листинг → один столбец: фильтры (#lb) над выдачей (#rb) */
    #lb, #rb {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }
    #lb { margin-bottom: 14px; }

    /* Карточка и её контент тянутся по ширине, без горизонтального вылета */
    .result_block,
    .result_block.next {
        box-sizing: border-box;
        max-width: 100%;
    }
    .result_block .r_content {
        box-sizing: border-box;
        max-width: 100%;
    }

    /* Заголовок: ссылка может занять всю строку, дата уезжает под неё, а не в нахлёст */
    .r_title .click_me {
        max-width: 100% !important;        /* было 80% — на узком экране режет длинный тайтл */
    }
    .r_title .r_right.resultDate {
        float: none !important;
        display: block;
        margin: 2px 0 4px 0 !important;
        color: #888;
    }

    /* Зарплата: была position:absolute right:13px (наезжала на текст) → в поток */
    .resultSalary {
        position: static !important;
        display: inline-block;
        margin-left: 6px;
        right: auto !important;
    }

    /* Резюме: фото + контент (inline-block с инлайн width:602px) → в столбик */
    .cvWPhoto {
        display: block !important;
        width: auto !important;            /* !important бьёт инлайн style="width:602px" */
        max-width: 100% !important;
    }
    .cvWPhoto img { max-width: 100%; height: auto; }
    .r_lastExp { word-wrap: break-word; }
}

/* ============================================================
 * ФАЗА 4 — Деталки (вакансия / резюме / компания).
 * ⚠️ view_vacancy.php имеет ИНЛАЙН <style> в теле страницы (грузится ПОСЛЕ
 * responsive.css) → перебиваем ТОЛЬКО через !important.
 * ============================================================ */
@media (max-width: 980px) {

    /* --- Вакансия: .entry-content(600,float) + .entry-meta(250,float:right) в столбик --- */
    .view-vacancy .entry-content,
    .entry-content {
        float: none !important;
        width: auto !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        box-sizing: border-box;
    }
    .entry-meta {
        float: none !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 0 18px 0 !important;     /* сайдбар-панели НАД контентом, на всю ширину */
        box-sizing: border-box;
    }
    .entry-meta .panel { box-sizing: border-box; }
    .vacancy-id { margin-right: 4px !important; }

    /* --- Резюме (view_resume_simple): .v_main 600px центр → флюид --- */
    .v_main {
        width: auto !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box;
    }
    /* таблица 20/80 label-value остаётся, но не вылезает */
    #viewTable { width: 100% !important; }
    #viewTable td { word-wrap: break-word; }
    .detailsUActions { text-align: left; }
    .detailsUActions .button_light { margin: 3px 4px 3px 0; }

    /* --- Компания (company-page.css): .hh-container 700px, шапка/контакты в 2 колонки --- */
    .company-wrapper .hh-container {
        width: auto !important;
        max-width: 975px !important;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
    }
    .company-wrapper .company-logo,
    .company-wrapper .company-data {
        float: none !important;
        width: auto !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
    .company-wrapper .company-logo { margin-bottom: 12px; }
    .company-wrapper .company-logo img { max-width: 100%; height: auto; }
    .company-wrapper .company-contacts .half {
        float: none !important;
        width: auto !important;
        max-width: 100% !important;
    }
    .company-wrapper .company-contacts .half + .half { margin-left: 0 !important; }
    .company-nav ul { overflow: hidden; }       /* содержит плавающие табы */
}

/* ============================================================
 * ФАЗА 5 — Формы (.form-medium/-large) + кабинеты (user-panel) + логин.
 * Десктоп: label float:left + .form-field margin-left:180px + fixed-px поля.
 * Мобайл: label над полем, поле на всю ширину; кабинет-сайдбар над контентом.
 * ============================================================ */
@media (max-width: 980px) {

    /* --- Форма: контейнер и поля флюид --- */
    .form.form-medium,
    .form.form-large,
    .form-medium,
    .form-large {
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    /* label над полем, не слева плавающим */
    .form label {
        float: none !important;
        display: block !important;
        width: auto !important;
        margin: 0 0 4px 0 !important;
    }
    .form .form-field,
    .form-medium .form-field,
    .form-large .form-field {
        margin-left: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        margin-bottom: 14px;
        box-sizing: border-box;
    }
    /* любые текст-инпуты/комбобоксы/textarea формы — на всю ширину
       (бьём и CSS-фиксы 404/584px, и инлайн style="width:295px" и т.п.) */
    .form .form-field .text,
    .form .form-field .ui-combobox-input,
    .form-medium .form-field .text,
    .form-medium .form-field.form-field-full .text,
    .form-medium .form-field .ui-combobox-input,
    .form .form-field textarea.text {
        width: 100% !important;
        box-sizing: border-box;
    }
    /* телефон: код страны узкий + номер на остаток строки */
    .form .form-field .countryCodeInput {
        width: 56px !important;
        box-sizing: border-box;
        margin-right: 8px;
    }
    .form .form-field .numberInput {
        width: calc(100% - 72px) !important;
        box-sizing: border-box;
    }

    /* --- Логин/регистрация: два .typeBlock рядом → в столбик --- */
    .selectType .wrapper { display: block !important; }
    .selectType .typeBlock {
        display: block !important;
        margin: 0 0 16px 0 !important;
    }
    .selectType .typeBlock form { box-sizing: border-box; }
    .selectType .text { width: 100% !important; box-sizing: border-box; }
    .socialLoginSet {
        width: auto !important;
        max-width: 100% !important;
    }

    /* --- Кабинет: nav-сайдбар(192) + контент(744) оба float:left → в столбик --- */
    .user-panel-nav,
    .user-panel-content {
        float: none !important;
        width: auto !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        box-sizing: border-box;
    }
    .user-panel-nav { margin-bottom: 16px; }
    #left_b { width: auto !important; }
    #right_b {
        min-width: 0 !important;
        width: auto !important;
        box-sizing: border-box;
    }
    /* записи списка кабинета не вылезают, кнопки переносятся */
    .entry_list_item { box-sizing: border-box; max-width: 100%; }
    .count .btn { margin-top: 4px; }

    /* модалка обратной связи: textarea фикс width:400px → флюид */
    .light-box .light-box-form { max-width: 94vw; box-sizing: border-box; }
    .light-box-body textarea.text {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
}

/* ============================================================
 * Телефоны (≤560px): дополнительно ужимаем отступы.
 * ============================================================ */
@media (max-width: 560px) {
    .headPanel > div,
    .footer,
    .topBarInner {
        padding-left: 8px;
        padding-right: 8px;
    }
}