/* css/hr-apply.css — форма «Надішли своє резюме» и карточки вакансий на /hr/ (assets/hr-apply.php, templates/hr*.php).
   Mobile first (390px), затем ≥768 и ≥1100. Токены цвета — как в основной теме (красный #B22222, светлый #F5F3EF). */
.hr-apply { --hr-red: #b22222; --hr-ink: #f5f3ef; --hr-bg: rgba(255,255,255,.06); --hr-line: rgba(245,243,239,.18); padding: 40px 0; color: var(--hr-ink); }
.hr-apply__inner { display: grid; gap: 28px; }
.hr-apply__eyebrow { display: block; margin-bottom: 8px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--hr-red); }
.hr-apply__title { margin: 0 0 12px; font-size: 28px; line-height: 1.15; }
.hr-apply__text, .hr-apply__contacts-text { margin: 0 0 16px; font-size: 16px; line-height: 1.5; opacity: .85; }
.hr-apply__contacts { padding: 16px; border: 1px solid var(--hr-line); border-radius: 12px; background: var(--hr-bg); }
.hr-apply__contacts-title { margin: 0 0 6px; font-size: 18px; }
.hr-apply__contacts-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.hr-apply__contacts-list li { display: flex; flex-direction: column; gap: 2px; }
.hr-apply__contacts-list span { font-size: 13px; opacity: .6; }
.hr-apply__contacts-list a { color: var(--hr-ink); font-size: 18px; text-decoration: none; border-bottom: 1px solid var(--hr-line); width: fit-content; min-height: 44px; display: inline-flex; align-items: center; }
.hr-apply__form { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--hr-line); border-radius: 12px; background: var(--hr-bg); }
.hr-apply__field { display: grid; gap: 6px; }
.hr-apply__label { font-size: 14px; opacity: .8; }
.hr-apply__form input[type="text"], .hr-apply__form input[type="tel"], .hr-apply__form input[type="email"],
.hr-apply__form input[type="url"], .hr-apply__form select, .hr-apply__form textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; font: inherit; font-size: 16px; /* 16px: iOS не зумит поле */
  color: var(--hr-ink); background: rgba(0,0,0,.35); border: 1px solid var(--hr-line); border-radius: 10px; box-sizing: border-box; }
.hr-apply__form textarea { resize: vertical; min-height: 96px; }
.hr-apply__form input:focus-visible, .hr-apply__form select:focus-visible, .hr-apply__form textarea:focus-visible { outline: 2px solid var(--hr-red); outline-offset: 1px; }
.hr-apply__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hr-apply__consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; opacity: .85; }
.hr-apply__consent input { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--hr-red); }
.hr-apply__error { margin: 0; padding: 10px 12px; border-radius: 8px; color: #ffd9d9; background: rgba(178,34,34,.35); font-size: 15px; }
.hr-apply__btn { width: 100%; min-height: 52px; justify-content: center; }
.hr-apply__btn:disabled { opacity: .6; cursor: progress; }
.hr-apply__ok { padding: 16px; border-radius: 10px; background: rgba(60,160,90,.22); }
.hr-apply__ok p { margin: 6px 0 0; }
@media (min-width: 768px) { .hr-apply { padding: 64px 0; } .hr-apply__title { font-size: 40px; } .hr-apply__form { padding: 28px; } }
@media (min-width: 1100px) { .hr-apply__inner { grid-template-columns: 5fr 6fr; gap: 56px; align-items: start; } }

/* Список ролей на хабе: строки «роль — описание — вилка — стрелка» (колонка узкая, поэтому не сетка карточек) */
.hr-roles-note { margin: 0 0 14px; font-size: 15px; line-height: 1.45; color: #f5f3ef; opacity: .75; }
.hr-roles { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(245,243,239,.14); }
.hr-roles > li { border-bottom: 1px solid rgba(245,243,239,.14); }
.hr-role { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 4px; color: #f5f3ef; text-decoration: none; transition: background .2s, padding .2s; }
.hr-role:hover, .hr-role:focus-visible { background: rgba(255,255,255,.05); padding-left: 12px; padding-right: 12px; outline: none; }
.hr-role:focus-visible { box-shadow: inset 0 0 0 2px #b22222; }
.hr-role__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hr-role__title { font-size: 19px; font-weight: 600; line-height: 1.2; }
.hr-role__desc { font-size: 14px; line-height: 1.4; opacity: .65; }
.hr-role__side { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; text-align: right; }
.hr-role__salary { font-size: 15px; font-weight: 600; white-space: nowrap; }
.hr-role__arrow { color: #b22222; transition: transform .2s; }
.hr-role:hover .hr-role__arrow { transform: translateX(3px); }
@media (max-width: 520px) {
  .hr-role { align-items: flex-start; flex-wrap: wrap; row-gap: 6px; }
  .hr-role__side { width: 100%; justify-content: space-between; }
  .hr-role__salary { color: #fff; }
}

/* Страница вакансии: строка ключевых условий над блоком «Деталі» */
.hr-facts { padding: 28px 0 8px; color: #f5f3ef; }
.hr-facts .container { display: grid; gap: 16px; }
.hr-facts__list { display: grid; gap: 12px; margin: 0; padding: 16px; border: 1px solid rgba(245,243,239,.18); border-radius: 12px; background: rgba(255,255,255,.06); }
.hr-facts__item { display: flex; flex-direction: column; gap: 2px; }
.hr-facts__item dt { font-size: 13px; opacity: .6; }
.hr-facts__item dd { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.25; }
.hr-facts__btn { width: 100%; min-height: 52px; justify-content: center; }
@media (min-width: 768px) {
  .hr-facts { padding: 40px 0 12px; }
  .hr-facts .container { grid-template-columns: 1fr auto; align-items: stretch; }
  .hr-facts__list { grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 48px; padding: 20px 28px; }
  .hr-facts__btn { width: auto; padding-left: 32px; padding-right: 32px; }
}

/* «Деталі»: читаемый текст вместо серого капса */
.main__advantages .advantages-list__text { text-transform: none; letter-spacing: 0; color: #f5f3ef; opacity: .92; font-size: 17px; line-height: 1.4; font-weight: 500; }
@media (min-width: 768px) { .main__advantages .advantages-list__text { font-size: 18px; } }