/* ==========================================================================
   EasyRemoteJob.ru — слой проекта поверх NEWBUS UI v2.
   Только токены фреймворка (--nb-*), собственных цветов не вводим.
   ========================================================================== */

/* --- базовое ---
   Атрибут hidden обязан побеждать display из компонентов фреймворка:
   .nb-modal-backdrop и .nb-alert объявлены с display:flex, из-за чего
   браузерное правило [hidden]{display:none} не срабатывает. */
[hidden] { display: none !important; }

/* --- каркас страницы --- */
.erj-shell { min-height: 100vh; display: flex; flex-direction: column; }
.erj-main  { flex: 1 0 auto; padding: var(--nb-space-8) 0 var(--nb-space-12); }

/* --- шапка --- */
.erj-header {
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--nb-border);
  position: sticky; top: 0; z-index: 50;
}
.erj-header-inner {
  display: flex; align-items: center; gap: var(--nb-space-6);
  min-height: 72px;
}
.erj-logo {
  display: inline-flex; align-items: center;
  font-family: var(--nb-font-display); font-weight: 700; font-size: 19px;
  color: var(--nb-ink); letter-spacing: -0.035em; white-space: nowrap;
}
.erj-logo:hover { text-decoration: none; }
.erj-logo span { color: var(--nb-primary); }
/* Высотой задаём размер, ширина считается сама: пропорции 480×180 */
.erj-logo img { height: 40px; width: auto; display: block; }
.erj-logo-footer { display: block; margin-bottom: var(--nb-space-3); }
.erj-logo-footer img { height: 46px; }

.erj-nav {
  display: flex; align-items: center; gap: var(--nb-space-1);
  margin-left: auto; flex-wrap: wrap;
  min-width: 0;
}
/* :not(.nb-btn) обязательно: иначе этот селектор специфичнее .nb-btn-primary
   и перекрашивает текст кнопок в шапке во вторичный серый. */
.erj-nav a:not(.nb-btn) {
  display: inline-flex; align-items: center;
  padding: 9px 16px; border-radius: var(--nb-radius-pill);
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--nb-text-secondary); white-space: nowrap;
}
.erj-nav a:not(.nb-btn):hover { background: var(--nb-surface-sunk); color: var(--nb-ink); text-decoration: none; }
.erj-nav a:not(.nb-btn).is-active { background: var(--nb-ink); color: #fff; }
.erj-nav .nb-btn { padding: 0 20px; }

/* --- меню аккаунта в шапке ---
   Построено на <details>: раскрывается без JS и доступно с клавиатуры.
   app.js добавляет только закрытие по клику мимо и по Esc. */
.erj-menu { position: relative; flex-shrink: 0; }

.erj-menu-trigger {
  display: inline-flex; align-items: center; gap: var(--nb-space-2);
  padding: 5px 12px 5px 5px;
  border-radius: var(--nb-radius-pill);
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--nb-text-secondary); white-space: nowrap;
  cursor: pointer; list-style: none;
  transition: background var(--nb-fast), color var(--nb-fast);
}
.erj-menu-trigger::-webkit-details-marker { display: none; }
.erj-menu-trigger:hover { background: var(--nb-surface-sunk); color: var(--nb-ink); }
.erj-menu[open] > .erj-menu-trigger { background: var(--nb-surface-sunk); color: var(--nb-ink); }

/* Иконка человека у анонимного посетителя — вместо аватара */
.erj-menu-trigger > svg:not(.erj-menu-caret) {
  width: 32px; height: 32px; padding: 6px;
  border-radius: 50%; background: var(--nb-primary-soft); color: var(--nb-primary-active);
  flex-shrink: 0;
}
.erj-menu-caret { width: 16px; height: 16px; flex-shrink: 0; transition: transform var(--nb-fast); }
.erj-menu[open] .erj-menu-caret { transform: rotate(180deg); }

.erj-menu-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 250px; max-width: calc(100vw - 2 * var(--nb-space-4));
  padding: var(--nb-space-2);
  background: var(--nb-surface);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-radius-md);
  box-shadow: var(--nb-shadow-lg);
}
.erj-menu-panel a,
.erj-menu-panel button {
  display: block; width: 100%;
  padding: 10px var(--nb-space-3);
  border: none; background: none; border-radius: var(--nb-radius-sm);
  font-size: 14.5px; font-weight: 500; line-height: 1.3; text-align: left;
  color: var(--nb-text-secondary); cursor: pointer;
}
.erj-menu-panel a:hover,
.erj-menu-panel button:hover { background: var(--nb-surface-sunk); color: var(--nb-ink); text-decoration: none; }
.erj-menu-panel a.is-active { background: var(--nb-ink); color: #fff; }

.erj-menu-email {
  padding: var(--nb-space-2) var(--nb-space-3) var(--nb-space-3);
  font-size: 12.5px; color: var(--nb-text-muted);
  word-break: break-all;
}
.erj-menu-divider { height: 1px; margin: var(--nb-space-2) 0; background: var(--nb-border); }
.erj-menu-danger { color: var(--nb-danger) !important; }
.erj-menu-danger:hover { background: var(--nb-danger-soft) !important; }

/* --- герой на главной --- */
.erj-hero { padding: var(--nb-space-12) 0 var(--nb-space-10); }
.erj-hero h1 {
  font-size: clamp(34px, 6vw, 64px);
  line-height: 1.04; letter-spacing: -0.04em;
  max-width: 20ch; margin-bottom: var(--nb-space-5);
}
.erj-hero p { max-width: 54ch; font-size: clamp(16px, 2vw, 19px); line-height: 1.5; }
.erj-hero-actions { display: flex; gap: var(--nb-space-3); flex-wrap: wrap; margin-top: var(--nb-space-7); }

/* Первый экран: на десктопе текст слева, иллюстрация справа во всю высоту.
   Раскладка областями, а не порядком источника, — так DOM остаётся в том
   порядке, в котором блоки читаются на телефоне. */
.erj-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  grid-template-areas:
    "head art"
    "body art";
  column-gap: var(--nb-space-8);
  row-gap: 0;
  align-items: center;
}
.erj-hero-head { grid-area: head; align-self: end; }
.erj-hero-body { grid-area: body; align-self: start; }
.erj-hero-art  { grid-area: art; display: flex; justify-content: center; }
.erj-hero-head .nb-badge { margin-bottom: var(--nb-space-4); }
.erj-hero-art img {
  width: 100%; max-width: 460px; height: auto;
  /* Исходник 1222x1287 — задаём соотношение, чтобы место резервировалось
     до загрузки и первый экран не дёргался. */
  aspect-ratio: 1222 / 1287;
  object-fit: contain;
}

/* --- поисковая панель --- */
.erj-searchbar { display: grid; grid-template-columns: 2fr 1fr auto; gap: var(--nb-space-3); align-items: end; }
.erj-filters { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--nb-space-3); }

/* --- карточки списков --- */
.erj-list { display: flex; flex-direction: column; gap: var(--nb-space-4); }
.erj-item-title {
  font-family: var(--nb-font-display); font-size: 18px; font-weight: 700;
  letter-spacing: -0.025em; margin: 0 0 6px;
}
.erj-item-title a { color: var(--nb-ink); }
.erj-item-title a:hover { color: var(--nb-primary); text-decoration: none; }
.erj-meta {
  display: flex; flex-wrap: wrap; gap: var(--nb-space-2) var(--nb-space-4);
  font-size: 13.5px; color: var(--nb-text-secondary);
}
.erj-salary { font-weight: 700; color: var(--nb-ink); white-space: nowrap; font-size: 16px; }
.erj-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--nb-space-3); }
.erj-tag {
  font-size: 12.5px; font-weight: 600; padding: 5px 12px;
  border-radius: var(--nb-radius-pill);
  background: var(--nb-surface-sunk); color: var(--nb-text-secondary);
}

/* --- страница вакансии и резюме: контент + боковая колонка ---
   Именно классом, а не инлайновым style: инлайн невозможно перебить
   медиазапросом, из-за чего на телефоне колонка 320px растягивала
   документ шире экрана и браузер ужимал всю страницу. */
.erj-detail-layout {
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
}

/* --- двухколоночный макет кабинета --- */
.erj-layout { display: grid; grid-template-columns: 258px 1fr; gap: var(--nb-space-6); align-items: start; }
/* min-width:0 обязателен. По умолчанию у элемента сетки min-width:auto, и его
   минимальная ширина равна min-content содержимого — широкая таблица внутри
   .erj-scroll растягивала колонку, а с ней и всю страницу, вместо того чтобы
   прокручиваться внутри себя. */
.erj-layout > * { min-width: 0; }
.erj-sidebar-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--nb-text-muted); font-weight: 700;
  padding: 0 var(--nb-space-4) var(--nb-space-2);
}
.nb-nav-item.is-active svg { color: #fff; }

/* --- блоки согласий --- */
.erj-consent-box {
  border: 1px solid var(--nb-border); border-radius: var(--nb-radius-md);
  padding: var(--nb-space-4); background: var(--nb-surface-alt);
}
.erj-consent-box + .erj-consent-box { margin-top: var(--nb-space-3); }

.erj-visibility-option {
  display: block; border: 1.5px solid var(--nb-border); border-radius: var(--nb-radius-md);
  padding: var(--nb-space-4); margin-bottom: var(--nb-space-3); cursor: pointer;
  transition: border-color var(--nb-fast), background var(--nb-fast);
  background: var(--nb-surface);
}
.erj-visibility-option:hover { border-color: var(--nb-border-strong); }
.erj-visibility-option.is-selected { border-color: var(--nb-primary); background: var(--nb-primary-soft); }
.erj-visibility-option .nb-radio { font-weight: 700; font-size: 15px; }
.erj-visibility-hint { margin: 8px 0 0 34px; font-size: 13.5px; color: var(--nb-text-secondary); }

.erj-category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--nb-space-3) var(--nb-space-4); }
.erj-category-sensitive { color: var(--nb-danger); font-size: 11.5px; font-weight: 700; margin-left: 4px; }

/* --- статистика --- */
.erj-stat { text-align: left; }
.erj-stat-value {
  font-family: var(--nb-font-display); font-size: 32px; font-weight: 700;
  line-height: 1.05; letter-spacing: -0.035em; color: var(--nb-ink);
}
.erj-stat-label { font-size: 13px; color: var(--nb-text-secondary); margin-top: 4px; }

/* --- юридический документ --- */
.erj-doc { max-width: 74ch; }
.erj-doc h1 { font-size: clamp(26px, 4vw, 34px); margin-top: var(--nb-space-8); }
.erj-doc h2 { font-size: clamp(20px, 3vw, 24px); margin-top: var(--nb-space-7); }
.erj-doc h3 { font-size: 17px; margin-top: var(--nb-space-6); }
.erj-doc p, .erj-doc li { color: var(--nb-text); font-size: 15px; line-height: 1.62; }
.erj-doc ul { list-style: disc; padding-left: 22px; margin: 0 0 var(--nb-space-4); }
.erj-doc li { margin-bottom: 6px; }
.erj-doc hr { border: none; border-top: 1px solid var(--nb-border); margin: var(--nb-space-6) 0; }
.erj-doc code { background: var(--nb-surface-sunk); padding: 2px 6px; border-radius: 5px; font-size: 13px; }

/* --- подвал --- */
.erj-footer {
  background: var(--nb-ink); color: rgba(255,255,255,.72);
  padding: var(--nb-space-10) 0 var(--nb-space-8);
  margin-top: var(--nb-space-10);
}
.erj-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--nb-space-8); }
.erj-footer h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255,255,255,.45); font-weight: 700; margin-bottom: var(--nb-space-4);
}
.erj-footer li { margin-bottom: 10px; }
.erj-footer a { font-size: 14px; color: rgba(255,255,255,.72); }
.erj-footer a:hover { color: #fff; text-decoration: none; }
.erj-footer p { color: rgba(255,255,255,.55); }
.erj-footer .erj-logo { color: #fff; font-size: 20px; }
.erj-disclaimer {
  font-size: 12.5px; color: rgba(255,255,255,.45);
  margin-top: var(--nb-space-8); padding-top: var(--nb-space-6);
  border-top: 1px solid rgba(255,255,255,.12); max-width: 88ch;
}

/* --- служебное --- */
.erj-flashes { position: sticky; top: 72px; z-index: 40; padding-top: var(--nb-space-4); }
.erj-empty { text-align: center; padding: var(--nb-space-12) var(--nb-space-6); color: var(--nb-text-secondary); }
.erj-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--nb-space-4); flex-wrap: wrap; margin-bottom: var(--nb-space-6);
}
.erj-code { font-family: var(--nb-font-mono); font-size: 12.5px; }
.erj-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
details.erj-details summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: var(--nb-space-2) 0; }
.erj-inline-form { display: flex; gap: var(--nb-space-2); align-items: center; flex-wrap: wrap; }

/* ==========================================================================
   ГЛАВНАЯ СТРАНИЦА
   ========================================================================== */
.erj-home-links{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--nb-space-2); }
.erj-home-chips{ display: flex; flex-wrap: wrap; gap: var(--nb-space-2); }
.erj-home-vacancies{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--nb-space-4); }

.erj-home-checklist li{ display: flex; gap: var(--nb-space-3); align-items: flex-start; margin-bottom: var(--nb-space-3); }
.erj-home-checklist li:last-child{ margin-bottom: 0; }
.erj-home-checklist svg{ width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }

.erj-home-icon{
  width: 48px; height: 48px; display: grid; place-content: center;
  border-radius: var(--nb-radius-md); background: var(--nb-primary-soft);
  color: var(--nb-primary-active); margin-bottom: var(--nb-space-4);
}
.erj-home-icon svg{ width: 24px; height: 24px; }

.erj-home-head{ max-width: 62ch; margin-bottom: var(--nb-space-6); }

.erj-home-cat h3{
  font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--nb-text-muted); margin-bottom: var(--nb-space-3);
}
.erj-home-cat li{ margin-bottom: 8px; }
.erj-home-cat a{ color: var(--nb-text-secondary); font-size: 14.5px; }
.erj-home-cat a:hover{ color: var(--nb-primary); text-decoration: none; }

/* Крупные акцентные полосы. Отступы здесь, а не инлайном, — иначе их
   не перебить медиазапросом на телефоне. */
.erj-home-feature{ padding: var(--nb-space-8); }
.erj-home-band{ text-align: center; padding: 48px var(--nb-space-6); }

/* Компактная карточка режима видимости резюме */
.erj-home-mode{ padding: var(--nb-space-4) var(--nb-space-5); }
.erj-home-mode p{ margin: 6px 0 0; font-size: 14px; }

/* ==========================================================================
   АДАПТИВ
   ========================================================================== */

@media (max-width: 980px) {
  /* Верхний отступ уже даёт .erj-main — второй превращался в пустую полосу */
  .erj-hero { padding-top: 0; }

  /* Одна колонка: заголовок → маскот → текст с кнопками */
  .erj-hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "art" "body";
    row-gap: var(--nb-space-5);
  }
  .erj-hero-head, .erj-hero-body { align-self: auto; }
  /* Отступ задаёт row-gap, иначе он удвоится */
  .erj-hero-head h1 { margin-bottom: 0; }
  .erj-hero-art img { max-width: 300px; }

  .erj-layout { grid-template-columns: 1fr; }

  /* Боковое меню кабинета превращается в прокручиваемую ленту вкладок */
  .erj-layout > .nb-sidebar {
    display: flex; gap: var(--nb-space-2);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: var(--nb-space-2);
    margin-bottom: var(--nb-space-2);
  }
  .erj-layout > .nb-sidebar::-webkit-scrollbar { display: none; }
  .erj-layout > .nb-sidebar .erj-sidebar-title { display: none; }
  .erj-layout > .nb-sidebar .nb-nav-item {
    white-space: nowrap; flex-shrink: 0;
    padding: 10px var(--nb-space-4);
    border-radius: var(--nb-radius-pill);
    background: var(--nb-surface-sunk);
    font-size: 14px;
  }
  .erj-layout > .nb-sidebar .nb-nav-item.is-active { background: var(--nb-ink); }
}

@media (max-width: 1024px) {
  .erj-home-links{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .erj-home-vacancies{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 860px) {
  .erj-detail-layout { grid-template-columns: 1fr; }
  .erj-searchbar, .erj-filters { grid-template-columns: 1fr; }
  .erj-category-grid { grid-template-columns: 1fr; }
  .erj-footer-grid { grid-template-columns: 1fr; gap: var(--nb-space-6); }
}

@media (max-width: 720px) {
  .erj-main { padding: var(--nb-space-6) 0 var(--nb-space-10); }

  /* Шапка остаётся одной строкой: после переноса пунктов в меню аккаунта
     она стала достаточно короткой, лента с прокруткой больше не нужна. */
  .erj-header-inner { min-height: 60px; gap: var(--nb-space-3); }
  .erj-logo { font-size: 18px; }
  .erj-logo img { height: 30px; }
  .erj-nav { gap: 0; flex-wrap: nowrap; }
  .erj-nav a:not(.nb-btn) { padding: 8px 10px; font-size: 13.5px; }

  /* В триггере остаётся только аватар и стрелка — подпись съедала ширину */
  .erj-menu-label { display: none; }
  .erj-menu-trigger { padding: 5px 8px 5px 5px; }
  .erj-menu-panel { min-width: 230px; }

  .erj-flashes { position: static; }

  /* Только низ: верхний отступ обнулён выше и шорткат его бы вернул */
  .erj-hero { padding-bottom: var(--nb-space-7); }
  .erj-hero-art img { max-width: 220px; }
  .erj-hero h1 { max-width: none; }
  .erj-hero-actions { margin-top: var(--nb-space-6); }
  /* Длинная подпись в одну строку задавала минимальную ширину всей страницы
     (~288px) и на 320-пиксельных экранах вызывала горизонтальную прокрутку.
     На всю ширину кнопке перенос не мешает. */
  .erj-hero-actions .nb-btn {
    flex: 1 1 100%;
    height: auto; min-height: var(--nb-control-h-lg);
    padding-top: 12px; padding-bottom: 12px;
    white-space: normal; line-height: 1.3; text-align: center;
  }

  .erj-toolbar { align-items: stretch; }
  .erj-toolbar > .nb-btn { width: 100%; }

  .erj-inline-form { flex-direction: column; align-items: stretch; }
  .erj-inline-form .nb-select,
  .erj-inline-form .nb-input { max-width: none !important; width: 100%; }
  .erj-inline-form .nb-btn { width: 100%; }

  .erj-empty { padding: var(--nb-space-8) var(--nb-space-4); }
  .erj-doc h1 { margin-top: var(--nb-space-6); }
  .erj-footer { padding: var(--nb-space-8) 0 var(--nb-space-6); }

  .erj-home-links{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .erj-home-vacancies{ grid-template-columns: 1fr; }
  .erj-home-feature{ padding: var(--nb-space-5); }
  .erj-home-band{ padding: var(--nb-space-8) var(--nb-space-4); }

  /* В списках правая колонка с кнопкой уходит под текст */
  .erj-list .nb-flex.nb-justify-between { flex-direction: column; align-items: stretch !important; }
  .erj-list .nb-flex.nb-justify-between > div:last-child { margin-top: var(--nb-space-4); }
}