/* ============================================================
   ОРЛИНК — страница «Вакансии» (/vakansii/).
   Раскрывающиеся вакансии на <details> + боковая карточка HR.
   ============================================================ */

.vac { padding-top: clamp(20px, 3vw, 36px); padding-bottom: clamp(56px, 6vw, 80px); }

/* ---------- Хлебные крошки ---------- */
.vac-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-45);
  padding-bottom: clamp(24px, 4vw, 44px);
}
.vac-crumbs a { color: var(--ink-55); }
@media (hover: hover) { .vac-crumbs a:hover { color: var(--acc); } }

/* ---------- Шапка страницы ---------- */
.vac-head { margin-bottom: clamp(28px, 4vw, 48px); }
.vac-title { font-size: clamp(30px, 5.4vw, 64px); margin: 12px 0 18px; }

/* ---------- Раскладка: список + боковая карточка ---------- */
.vac-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 26vw, 360px);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.vac-list__head {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: clamp(14px, 2vw, 20px);
  border-bottom: 1px solid var(--ink-14);
}
.vac-list__title {
  font-family: 'Montserrat Brand', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: clamp(18px, 2.2vw, 26px); line-height: 1.1;
}
.vac-list__count { font-size: 13px; color: var(--ink-45); font-variant-numeric: tabular-nums; }

/* ---------- Вакансия ---------- */
.vac-item { border-bottom: 1px solid var(--ink-14); scroll-margin-top: calc(var(--header-h) + 20px); }

.vac-item__head {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 26px 0; cursor: pointer;
  list-style: none;                 /* убираем родной треугольник */
  transition: color .2s ease;
}
.vac-item__head::-webkit-details-marker { display: none; }
@media (hover: hover) { .vac-item__head:hover .vac-item__name { color: var(--acc); } }

.vac-item__main { flex: 1; min-width: 0; display: grid; gap: 8px; }
.vac-item__name {
  font-weight: 500; font-size: clamp(17px, 2vw, 23px);
  line-height: 1.25; letter-spacing: -.01em; color: var(--ink);
  transition: color .2s ease;
}
.vac-item__props {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  font-size: 13px; color: var(--ink-45);
}
.vac-item__props i { font-style: normal; opacity: .5; }

.vac-item__pay {
  flex: 0 0 auto; align-self: center;
  font-size: clamp(14px, 1.4vw, 17px); font-weight: 500; color: var(--acc);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.vac-item__ic {
  flex: 0 0 auto; align-self: center;
  width: 22px; height: 22px; color: var(--ink-45);
  transition: transform .3s var(--ease-out), color .2s ease;
}
.vac-item[open] .vac-item__ic { transform: rotate(45deg); color: var(--acc); }

/* ---------- Текст вакансии ---------- */
.vac-item__body {
  padding-bottom: 32px;
  max-width: 74ch;
  font-size: 15px; line-height: 1.65; color: var(--ink-70);
}
.vac-item__body p { margin-bottom: 14px; text-wrap: pretty; }
.vac-item__body b { color: var(--ink); font-weight: 500; }
.vac-item__body h3 {
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--acc); font-weight: 500;
  margin: 26px 0 12px;
}
.vac-item__body ul { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 8px; }
.vac-item__body li { position: relative; padding-left: 20px; }
.vac-item__body li::before {
  content: ''; position: absolute; left: 4px; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--acc); opacity: .7;
}
.vac-item__plus, .vac-item__after { font-size: 14px; color: var(--ink-55); }

.vac-item__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ---------- Боковая колонка ---------- */
.vac-aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 16px; }

.vac-card {
  background: var(--panel);
  border: 1px solid var(--ink-14);
  border-radius: calc(var(--radius) * 2);
  padding: clamp(20px, 2.4vw, 28px);
}
.vac-card__tag {
  display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--acc); font-weight: 500; margin-bottom: 10px;
}
.vac-card__title {
  font-family: 'Montserrat Brand', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: clamp(18px, 1.8vw, 23px); line-height: 1.08; margin-bottom: 10px;
}
.vac-card__text { font-size: 14px; line-height: 1.55; color: var(--ink-55); margin-bottom: 20px; }
.vac-card__contacts {
  display: grid; gap: 6px;
  padding-bottom: 20px; margin-bottom: 20px;
  border-bottom: 1px solid var(--ink-14);
}
.vac-card__phone { font-size: 19px; font-weight: 500; }
.vac-card__mail { font-size: 15px; color: var(--ink-70); overflow-wrap: anywhere; }
.vac-card__hours { font-size: 13px; color: var(--ink-45); }
@media (hover: hover) {
  .vac-card__phone:hover, .vac-card__mail:hover { color: var(--acc); }
}
.vac-card__btn { width: 100%; }

.vac-links {
  background: var(--tile);
  border-radius: calc(var(--radius) * 2);
  padding: clamp(18px, 2vw, 24px);
}
.vac-links__title {
  display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-45); margin-bottom: 12px;
}
.vac-links__item {
  display: block; font-size: 15px; color: var(--ink-70);
  padding: 9px 0; border-bottom: 1px solid var(--ink-14);
}
.vac-links__item:last-child { border-bottom: none; padding-bottom: 0; }
@media (hover: hover) { .vac-links__item:hover { color: var(--acc); } }

/* ---------- Адаптив ---------- */
@media (max-width: 1023px) {
  .vac-layout { grid-template-columns: 1fr; }
  .vac-aside { position: static; }
}
@media (max-width: 640px) {
  /* вилка под названием, а не сбоку — иначе на 360 px обе колонки сплющиваются */
  .vac-item__head { flex-wrap: wrap; padding: 20px 0; }
  .vac-item__main { flex: 1 1 100%; order: 1; }
  .vac-item__pay { order: 2; align-self: flex-start; }
  .vac-item__ic { order: 3; margin-left: auto; align-self: flex-start; }
}

/* Пустой список: когда открытых позиций нет, страница не должна выглядеть сломанной */
.vac-empty{padding:32px 0;font-size:15px;line-height:1.6;color:var(--ink-55)}