/* render-pure.css
 * Минимальные overrides поверх прод-CSS (/f/render/index.css).
 * Прод-CSS закрывает 100% стилизации. Этот файл оставлен для будущих
 * pure-Twig-only правил (если такие появятся).
 */

/* Login-модалка — overlay + dialog, wrapper взамен Angular uib-modal.
   РАСКРАСКА целиком из прод index.css (.modal-content{background:#212121;
   color:#eee}, .modal-header/.close/.login-info/.restorePassword и Bootstrap
   .form- и .btn-классы) — свои переопределения цветов давали БЕЛЫЙ модал против
   прод-тёмного (в.59). Здесь только геометрия, снятая с прод-computed:
   backdrop #000 opacity .7; .modal-dialog 600px / margin 30px auto
   (bootstrap: <768px — auto/10px). */
.login-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2050;
    overflow-y: auto;
}
.login-modal-overlay .modal-dialog {
    margin: 10px;
}
@media (min-width: 768px) {
    .login-modal-overlay .modal-dialog {
        width: 600px;
        margin: 30px auto;
    }
}
[x-cloak] { display: none !important; }

/* Sticky JS (.b-layout__panel notice4) ставит position:fixed; right:0.
   На скролле, когда .appendix-notices__panel приклеилась — она «парит»
   справа сверху над контентом. */

/* Filter wrappers (.blog-list__filters / .gallery__filters / .vacancy-list__filters /
   .freelance-list__filters) — стилизованы прод-CSS. Никаких overrides здесь
   не нужны, прод-CSS уже даёт правильный layout panel. */

/* Light cards для блогов с тематическим контейнером (.news/.magazine/.articles…).
   На проде применяется через каскад прод-CSS; оставлено как fallback с !important
   на случай специфичности конфликта. */
/* Светлая тема карточек — ТОЛЬКО для /ru/news (по дизайну прода).
   Остальные блоги (magazine/articles/section/user-blog/contests) идут
   на тёмном default'е, повторяя стиль раздела «Блоги» на главной. */
.b-layout_white .news .blog-list__post__body {
    background-color: #fff !important;
    color: #000 !important;
}
.b-layout_white .news .blog-list__post__footer {
    background-color: #fff !important;
    color: #bbbbbb !important;
}
.b-layout_white .news .blog-list__post__title,
.b-layout_white .news .blog-list__post__title a,
.b-layout_white .news .blog-list__post__description,
.b-layout_white .news .blog-list__post__content a {
    color: #000 !important;
}

/* Кнопка фильтра в светлой теме — как на проде /ru/news (большая, белая, тень) */
.b-layout_white .blog-list__filter {
    margin: 0 15px 30px;
}
.b-layout_white .blog-list__filter__button {
    display: inline-flex;
    align-items: center;
    height: 70px;
    min-width: 360px;
    padding: 0 30px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    color: #4a4a4a;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: box-shadow 200ms ease;
}
.b-layout_white .blog-list__filter__button:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
}
.b-layout_white .blog-list__filter__button .mdi {
    color: #9b9b9b;
    font-size: 28px;
    line-height: 28px;
    margin-right: 24px;
}
.b-layout_white .blog-list__filter__panel {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-top: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Mobile (≤768px): фильтр становится full-width */
@media (max-width: 768px) {
    .b-layout_white .blog-list__filter__button {
        min-width: 0;
        width: 100%;
        height: 56px;
        padding: 0 20px;
        font-size: 16px;
    }
    .b-layout_white .blog-list__filter__button .mdi {
        font-size: 24px;
        margin-right: 16px;
    }
    .b-layout_white .blog-list__filter {
        margin: 0 10px 20px;
    }
}

/* Для /ru/news применяем тот же светлый контекст что прод-CSS даёт под
   ".main .news" на главной. Карточка та же, прод-CSS привязан к .main-обёртке
   которая есть только на главной — здесь дублируем без префикса. */
.b-layout_white .news {
    color: #000;
    background-color: #f4f4f4;
}
.b-layout_white .news .blog-list__post {
    height: 550px;
}
.b-layout_white .news .blog-list__post__visual {
    height: 235px;
}
.b-layout_white .news .blog-list__post__content {
    height: 435px;
    overflow: hidden;
}
.b-layout_white .news .blog-list__post_has_visual .blog-list__post__content {
    height: 200px;
}
.b-layout_white .news .blog-list__post__title {
    margin-top: 0;
    margin-bottom: 20px;
    color: #000;
}
.b-layout_white .news .blog-list__post a {
    color: #000;
}

/* ============================================================
   Мобильная адаптация главной (≤767px)
   - news: 3 поста
   - .blog-list (популярные блоги, без company-post/contests/magazine):
     4 поста
   - magazine / contests / .blog-list.company-post: 2 поста
   - video-list: горизонтальный touch-scroll
   ============================================================ */
@media (max-width: 767px) {
    /* Лимит карточек по секциям главной — на десктопе показываем все,
       на мобиле скрываем «лишние» (Twig в main.twig добавляет класс
       mobile-hidden карточкам с loop.index > N для каждой секции). */
    .mobile-hidden { display: none !important; }

    /* Видео в сети — горизонтальный скролл пальцем (10 постов в ряд) */
    .video-list .video-list__row {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        height: auto !important;
    }
    .video-list .video-list__row > div {
        position: static !important;
        display: inline-block;
        white-space: nowrap;
        padding: 0 !important;
    }
    .video-list .video-list__post {
        display: inline-block;
        scroll-snap-align: start;
        margin-right: 8px;
        flex-shrink: 0;
    }
    .video-list .video-list__post:last-child { margin-right: 0; }

    /* Tab-нав шапки автора/проекта/компании (about_head.twig) — на мобиле
       пунктов больше, чем влезает по ширине. Прод-CSS: контейнер
       overflow:hidden + ul position:absolute, а оригинал-Angular скроллит его
       JS-драгом ($swipe в AboutHeadCtrl). На бете повторяем поведение нативным
       touch-скроллом (как .video-list__row): контейнер становится скролл-боксом,
       ul — статиком (иначе абсолют не участвует в overflow), выравнивание влево
       чтобы скролл начинался с первого пункта. Скроллбар прячем — у оригинала
       его нет. Один селектор покрывает все страницы с этой шапкой. */
    .about-head__user-nav,
    .about-head__project-nav,
    .about-head__company-nav {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .about-head__user-nav::-webkit-scrollbar,
    .about-head__project-nav::-webkit-scrollbar,
    .about-head__company-nav::-webkit-scrollbar { display: none; }
    .about-head__user-nav ul,
    .about-head__project-nav ul,
    .about-head__company-nav ul {
        position: static !important;
        text-align: left !important;
        min-width: max-content !important;
    }
}

/* Отступы карточек .blog-list__post задаёт прод index.css: база 0 15px 30px,
   мобайл (max-width 767px) 0 2px 15px — на ВСЕХ страницах, включая главную
   (сверено computed style render.ru / и /ru/challenges 390px: 0px 2px 15px).
   Прежний локальный override (12/16 mobile + 15/30 desktop, !important) давал
   на мобиле ~24px боковых полей вместо прод-4px между карточками — удалён
   (волна 60B). */

/* Sticky-appendix (Журнал на правой колонке) — управляется JS
   (initStickyAppendix в /static/js/sticky.js). Нативный CSS position:sticky
   тут не работает: прод-CSS даёт `.b-layout__body{overflow-x:hidden}`, что
   делает body скролл-боксом, к которому sticky привязывается, — но реальный
   скролл идёт на `.b-layout__canvas` снаружи; кроме того, прямой родитель
   `.appendix-notices` имеет ту же высоту, что и липкий блок, и travel-range
   у sticky нулевой. Поэтому повторяем прод-Angular: JS ставит position:fixed
   при срабатывании. */

/* Гарантируем position:relative на packery контейнерах — без него после
   htmx-swap абсолютно-позиционированные карточки берут containing-block
   выше по DOM (.b-layout__body), и width:25% даёт неправильный размер. */
#packery,
.js-packery,
.blog-list__container {
    position: relative;
}

/* Filter panel (form) — растягиваем на всю ширину контейнера блогов/галереи. */
form.blog-list__filter__panel,
form.gallery__filter__panel {
    width: 100%;
    box-sizing: border-box;
}

/* Native <select> внутри filter — стилизуем под прод ui-select-toggle:
   тёмный фон, белый текст, без border, padded для читабельности. */
.blog-list__filter__panel select,
.gallery__filter__panel select {
    width: 100%;
    height: 50px;
    background: transparent;
    color: #fff;
    border: none;
    outline: none;
    padding: 0 15px;
    font-size: 14px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23999' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
}
.blog-list__filter__panel select option,
.gallery__filter__panel select option {
    background-color: #2d2d2d;
    color: #fff;
}

/* Vacancy filter __salary + __currency — inline 65%/30% как у прод.
   Прод-CSS уже задаёт width на этих обёртках, но только для
   .ui-select-container; native <input>/<select> требует тех же inline. */
.vacancy-list__filter__panel .vacancy-list__filter__salary {
    display: inline-block !important;
    width: 65%;
    margin-right: 5%;
    vertical-align: top;
}
.vacancy-list__filter__panel .vacancy-list__filter__currency {
    display: inline-block !important;
    width: 30%;
    vertical-align: top;
}
/* То же для resume — там тоже есть salary + currency. */
.resume-list__filter__panel .resume-list__filter__salary {
    display: inline-block !important;
    width: 65%;
    margin-right: 5%;
    vertical-align: top;
}
.resume-list__filter__panel .resume-list__filter__currency {
    display: inline-block !important;
    width: 30%;
    vertical-align: top;
}

/* City-autocomplete dropdown для /resume/search фильтра. Прод-Angular
   ui-select имеет position:relative wrapper, абсолютный dropdown внизу
   с border, белый фон. Воспроизводим компактно. */
.resume-list__filter__city {
    position: relative;
}
.city-autocomplete__list {
    position: absolute;
    top: 100%;
    left: -1px;
    right: -1px;
    z-index: 10;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid #eee;
    max-height: 240px;
    overflow-y: auto;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.city-autocomplete__item {
    padding: 8px 15px;
    cursor: pointer;
    font-size: 14px;
    color: #000;
}
.city-autocomplete__item:hover {
    background: #f4f4f4;
}

/* Closed/expired vacancy — zebra overlay. Прод-CSS даёт
   top:0;left:15px;right:15px;bottom:30px — это оставляет 15px по краям и
   30px снизу непокрытыми. По требованию full coverage перекрываем нашими
   значениями (top:0,left:0,right:0,bottom:0). #fbfbfb stripes сохраняем
   как прод (без них слабо видно на тёмном). */
.vacancy-list__item_draft .vacancy-list__item__content {
    position: relative;
}
.vacancy-list__item_draft .vacancy-list__item__content::before {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}
/* Тултип «Вакансия закрыта» — ТОЛЬКО при наличии атрибута (истёкшая, state 2,
   глобальный листинг). Без [data-tooltip-expired] content:attr() давал ПУСТОЙ
   чёрный блок над черновиком (state -1/-11 тоже носят _draft) — отзыв в.54 §2.
   На company-листинге прод тултипа не рендерит вовсе (vacancies.jade: uib-tooltip
   только в ветке app.vacancy.list) — там атрибут не ставится. */
.vacancy-list__item_draft:hover .vacancy-list__item__content[data-tooltip-expired]::after {
    content: attr(data-tooltip-expired);
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
}

/* Native <select>/<input> внутри светлых panel-фильтров (resume/vacancy/
   freelance) — белая тема как у прод-ui-select. Field-обёртки
   (.resume-list__filter__speciality etc) уже имеют border/background
   из прод-CSS — здесь только нативное оформление контрола. */
.resume-list__filter__panel select,
.vacancy-list__filter__panel select,
.freelance-list__filter__panel select {
    width: 100%;
    height: 100%;
    min-height: 50px;
    background: transparent;
    color: #000;
    border: none;
    outline: none;
    padding: 0 30px 0 15px;
    font-size: 14px;
    line-height: 38px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23999' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
}
.resume-list__filter__panel input[type="number"],
.resume-list__filter__panel input[type="text"],
.vacancy-list__filter__panel input[type="number"],
.vacancy-list__filter__panel input[type="text"],
.freelance-list__filter__panel input[type="number"],
.freelance-list__filter__panel input[type="text"] {
    width: 100%;
    height: 100%;
    min-height: 50px;
    background: transparent;
    color: #000;
    border: none;
    outline: none;
    padding: 0 15px;
    font-size: 14px;
    line-height: 38px;
}

/* Прод использует Bootstrap-row внутри filter__panel. ВАЖНО: width НЕ задавать —
   у прода .row width:auto, т.е. контент-ширина панели ПЛЮС 30px отрицательных
   маржинов (981px при контенте 951). width:100% давал row = только контент-
   ширине → каждая колонка/контрол на 15px у́же прода (волна 40). */
.blog-list__filter__panel > .row,
.gallery__filter__panel > .row,
.freelance-list__filter__panel > .row,
.vacancy-list__filter__panel > .row,
.resume-list__filter__panel > .row {
    display: block;
    margin-left: -15px;
    margin-right: -15px;
}
.blog-list__filter__panel > .row::after,
.gallery__filter__panel > .row::after,
.freelance-list__filter__panel > .row::after,
.vacancy-list__filter__panel > .row::after,
.resume-list__filter__panel > .row::after {
    content: '';
    display: table;
    clear: both;
}
.blog-list__filter__panel > .row > .col-sm-6,
.gallery__filter__panel > .row > .col-sm-6,
.freelance-list__filter__panel > .row > .col-sm-6,
.vacancy-list__filter__panel > .row > .col-sm-6,
.resume-list__filter__panel > .row > .col-sm-6,
.resume-list__filter__panel > .row > .col-sm-4 {
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
}
/* Двухколоночный layout — только начиная с tablet+ (Bootstrap-sm: ≥768px).
   На мобиле (≤767) поля идут в один stack, как на проде Angular. */
@media (min-width: 768px) {
    .blog-list__filter__panel > .row > .col-sm-6,
    .gallery__filter__panel > .row > .col-sm-6,
    .freelance-list__filter__panel > .row > .col-sm-6,
    .vacancy-list__filter__panel > .row > .col-sm-6,
    .resume-list__filter__panel > .row > .col-sm-6 {
        float: left;
        width: 50%;
    }
    .resume-list__filter__panel > .row > .col-sm-4 {
        float: left;
        width: 33.3333%;
    }
}
.blog-list__filter__panel > .input-group,
.gallery__filter__panel > .input-group,
.freelance-list__filter__panel > .input-group,
.vacancy-list__filter__panel > .input-group,
.resume-list__filter__panel > .input-group {
    display: table;
    width: 100%;
}

/* Rating slider: воспроизводим rzslider DOM 1:1 с прод. Все классы
   (.rzslider, .rz-bar, .rz-pointer, .rz-bubble и т. д.) стилизуются
   прод-CSS (/f/render/index.css). Здесь только убираем дублирующие
   скрытые <input type=range>, которые служат для form-submit. */
.rzslider__hidden {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Поисковые input'ы (.name/.tags) — белый текст, прозрачный фон.
   ВАЖНО: .gallery__filter__tags input здесь БОЛЬШЕ НЕ матчить — теги галереи
   теперь прод ui-select-multiple (волна 40), его input.ui-select-search
   стилизует прод index.css (UA-паддинг 1px 2px, line-height normal);
   старое правило (padding 0 10px, line-height 50px) сдвигало текст на 8px
   вправо относительно прода. */
.blog-list__filter__panel .blog-list__filter__name input,
.blog-list__filter__panel .blog-list__filter__tags input,
.gallery__filter__panel .gallery__filter__name input {
    background: transparent;
    color: #fff;
    border: none;
    outline: none;
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
}

/* Чекбокс «Только с видео» — иконка mdi-blank/mdi-check переключается через CSS sibling. */
.blog-list__filter__video input[type="checkbox"]:checked + .mdi {
    /* Псевдо-замена mdi-blank → mdi-check; используем content/character */
}


/* Личная галерея в правом сайдбаре (.appendix-works) — 9 миниатюр работ
   в сетке 3×3. Прод-CSS уже задаёт всё нужное (.appendix-works,
   .appendix-works__title, .appendix-work, > a). Здесь только bare-minimum
   gap для случая, когда грид собирается через float. */
.appendix-work {
    aspect-ratio: 1;
    overflow: hidden;
    background: #1a1a1a;
}
.appendix-work > a {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 50%;
}


/* Vote-block — compact (1 звезда) → expanded (10 звёзд) через CSS-toggle.
   Прод-Angular делает range=[1] vs [1..10]. У нас collapsed = display:none
   (полностью убираем из flow), expanded = снимаем :none. display:none не
   меняет шрифт-режим иконки, значит mdi-star рендерится нормально (inline). */
.vote-block__vote-star_collapsed {
    display: none !important;
}
.vote-block_expanded .vote-block__vote-star_collapsed {
    display: inline !important;
}

/* CSS-tooltip (мгновенный) для data-tip. Замена native title="" — браузер
   показывает title через ~500ms, а прод-uib-tooltip показывает мгновенно
   (default popupDelay=0). Стили один-в-один с прод-bootstrap-tooltip:
   bg #111, color #b2b2b2, font 12px, padding 3px 8px, border-radius 5px,
   opacity 0.9, размещение сверху со стрелкой. Применяется к
   .vote-block__vote-star (звёздам) и .gallery__work__footer-* иконкам. */
.vote-block__vote-star[data-tip],
.gallery__work__footer-views [data-tip],
.gallery__work__footer-vote [data-tip] {
    position: relative;
}
.vote-block__vote-star[data-tip]:hover::after,
.gallery__work__footer-views [data-tip]:hover::after,
.gallery__work__footer-vote [data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    padding: 3px 8px;
    background-color: #111111;
    color: #b2b2b2;
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    line-height: 1.42857;
    text-align: center;
    white-space: nowrap;
    border-radius: 5px;
    opacity: 0.9;
    pointer-events: none;
    z-index: 1070;
}
/* ВАЖНО: стрелку-уголок тултипа НЕЛЬЗЯ рисовать через ::before на этих
   элементах. Все они — mdi-иконки (.vote-block__vote-star.mdi, <i class="mdi
   mdi-eye/mdi-star">), а у mdi сам глиф звезды/глаза рендерится через ::before
   (content:"\Fxxxx"). У элемента только один ::before — поэтому правило
   :hover::before{content:""} перебивало глиф иконки более высокой
   специфичностью и звезда «сплющивалась» по горизонтали на ховере (схлопывалась
   до 0-ширины уголка), возвращаясь к норме при уводе курсора. Оставляем только
   ::after-коробку с числом (см. выше) — глиф остаётся нетронутым. */

/* «+» листинга фриланса — прод uib-tooltip «Разместить проект»
   tooltip-placement="left" (мгновенный). Стили = прод-bootstrap-tooltip
   (см. блок data-tip выше), размещение слева со стрелкой: mdi-глиф живёт
   на вложенном <i>, ::before у самой <a> свободен под уголок (в.59). */
.freelance-list__add[data-tip] {
    position: relative;
}
.freelance-list__add[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 8px;
    padding: 3px 8px;
    background-color: #111111;
    color: #b2b2b2;
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    line-height: 1.42857;
    text-align: center;
    white-space: nowrap;
    border-radius: 5px;
    opacity: 0.9;
    pointer-events: none;
    z-index: 1070;
}
.freelance-list__add[data-tip]:hover::before {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 3px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #111111;
    opacity: 0.9;
    pointer-events: none;
    z-index: 1070;
}

/* Gallery preset-buttons (Award / Работы на отборе / Основная галерея) — на
   проде это <div ng-click>, у нас <a href> для прогрессивного enhancement +
   htmx. <a> наследует синий link-color, поэтому подменяем под прод-серый
   текст и серую иконку (исключая активный .gallery__filter__button-review
   — там белый текст на синем фоне). */
a.gallery__filter__button-icon,
a.gallery__filter__button-icon:hover,
a.gallery__filter__button-icon:focus,
a.gallery__filter__button-icon:visited {
    color: #fff;
    text-decoration: none;
}
a.gallery__filter__button-icon .mdi {
    color: #606060;
}
a.gallery__filter__button-review,
a.gallery__filter__button-review:hover,
a.gallery__filter__button-review:focus,
a.gallery__filter__button-review:visited {
    color: #fff;
    text-decoration: none;
}
a.gallery__filter__button-review .mdi {
    color: #fff;
}

/* Адаптивный iframe видео-плееров (YouTube/Vimeo/RuTube/VK/Dailymotion)
   во всём админском HTML — посты, курсы, артворки, комментарии, pbook'и
   и любые другие места с {{ content|raw }}. Прод снимает фиксированные
   width/height JS-ом; у нас pure-Twig — перебиваем CSS-ом с aspect-ratio.
   Селектор по src безопасен — не задевает Google Maps и прочие iframe. */
iframe[src*="youtube"],
iframe[src*="youtu.be"],
iframe[src*="vimeo"],
iframe[src*="rutube"],
iframe[src*="vkvideo"],
iframe[src*="vk.com/video"],
iframe[src*="dailymotion"] {
    display: block;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    margin-left: auto;
    margin-right: auto;
}