/* Страница «Вакансии» (views/vacancy/index.php), 31.10.2026 — как карточки вакансий на sp-hub.ru, в цветах repairpieces.
   Опирается на payment.css (.rp-pay: ширина и отступы текстовой страницы); окно отклика — общие .rp-ux-* и .rp-help-form. */

.rp-vac .rp2-pageintro { margin-bottom: 26px; }
.rp-vac .rp-vac-lead { max-width: 720px; margin: 14px 0 0; font-size: 17px; line-height: 1.55; color: #465670; }

.rp-vac .rp-vac-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rp-vac .rp-vac-item { position: relative; background: #fff; border: 1px solid #e0e8f4; transition: border-color .2s, box-shadow .2s; }
.rp-vac .rp-vac-item:hover { border-color: #cfdffb; box-shadow: 0 10px 26px rgba(16, 45, 97, .07); }
.rp-vac .rp-vac-item__summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 20px; padding: 22px 210px 22px 26px; min-height: 86px; }
.rp-vac .rp-vac-item__summary::-webkit-details-marker { display: none; }
.rp-vac .rp-vac-item__head { flex: 1 1 auto; min-width: 0; }
.rp-vac .rp-vac-item__title { margin: 0; font-size: 20px; line-height: 1.3; color: #202b42; }
.rp-vac .rp-vac-item__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font: 500 14px/1.45 Inter, Arial, sans-serif; color: #6a778f; }
.rp-vac .rp-vac-item__dept { color: var(--rp-color-primary, #005bff); font-weight: 600; }
.rp-vac .rp-vac-item__toggle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font: 650 14px/1 Inter, Arial, sans-serif; color: var(--rp-color-primary, #005bff); white-space: nowrap; }
.rp-vac .rp-vac-item__toggle svg { transition: transform .2s; }
.rp-vac .rp-vac-item__details[open] .rp-vac-item__toggle svg { transform: rotate(180deg); }
.rp-vac .rp-vac-item__summary:focus-visible { outline: 3px solid var(--rp-color-primary, #005bff); outline-offset: -3px; }
.rp-vac .rp-vac-item__text { padding: 4px 26px 24px; border-top: 1px solid #eef2f8; margin: 0 0 0; max-width: 900px; font-size: 15px; line-height: 1.6; color: #34405a; }
.rp-vac .rp-vac-item__text p { margin: 14px 0 0; color: #34405a; }
.rp-vac .rp-vac-item__text ul { margin: 8px 0 0; padding-left: 22px; }
.rp-vac .rp-vac-item__text li { margin: 3px 0; }
.rp-vac .rp-vac-item__text strong { color: #202b42; }
.rp-vac .rp-vac-item__apply { position: absolute; right: 22px; top: 21px; height: 44px; padding: 0 22px; border: 1.5px solid var(--rp-color-primary, #005bff); background: #fff;
    color: var(--rp-color-primary, #005bff); font: 700 15px/1 Inter, Arial, sans-serif; transition: background .2s, color .2s; }
.rp-vac .rp-vac-item__apply:hover, .rp-vac .rp-vac-item__apply:focus-visible { background: var(--rp-color-primary, #005bff); color: #fff; }

.rp-vac .rp-vac-empty { display: flex; gap: 18px; align-items: flex-start; padding: 26px; background: #f5f8fd; border: 1px solid #e0e8f4; max-width: 760px; }
.rp-vac .rp-vac-empty > svg { flex: 0 0 auto; color: var(--rp-color-primary, #005bff); margin-top: 2px; }
.rp-vac .rp-vac-empty h2 { margin: 0 0 6px; font-size: 22px; }
.rp-vac .rp-vac-empty p { margin: 0; }
.rp-vac .rp-vac-empty a { color: var(--rp-color-primary, #005bff); font-weight: 600; white-space: nowrap; }

@media (max-width: 760px) {
    .rp-vac .rp-vac-item__summary { flex-wrap: wrap; padding: 18px 18px 74px; gap: 10px; min-height: 0; }
    .rp-vac .rp-vac-item__title { font-size: 18px; }
    .rp-vac .rp-vac-item__toggle { order: 2; }
    .rp-vac .rp-vac-item__apply { top: auto; right: 18px; left: 18px; bottom: 18px; width: auto; }
    .rp-vac .rp-vac-item__details[open] .rp-vac-item__summary { padding-bottom: 14px; }
    .rp-vac .rp-vac-item__details[open] .rp-vac-item__text { padding-bottom: 80px; }
    .rp-vac .rp-vac-item__text { padding: 4px 18px 18px; }
    .rp-vac .rp-vac-empty { padding: 18px; gap: 12px; }
}