/* =====================================================================
   Лендинг вакансии — парный файл к templates/vacancy/landing.html
   и vacancy/closed.html. Подключается после tokens.css; каркаса у страницы
   нет, app-shell.css и lms.css сюда не приезжают — всё своё, префикс .vac.

   Числа сняты с публичного лендинга Edler (README вход §7–§9): поле 500×50,
   кружки шагов 42×42 с зазором 40, кнопка 165×50, модалка 590 / баннер 171 /
   поле 550×50 radius 10 / кнопка 170×50 radius 8, шапка экрана урока 73,
   оглавление 340, строка урока 46 radius 10, заглушка: картинка mb 38,
   заголовок 28/600 mb 18, текст 18. Цвета, шрифт и знак — наши.
   ===================================================================== */

[hidden]{display:none!important}

body.vac{margin:0;min-height:100vh;font-family:var(--font);color:var(--ink);background:var(--bg)}
.vac *{box-sizing:border-box}
.vac input,.vac button{font-family:inherit}

/* ---------- общее: слайды, поля, ошибка, согласие, кнопки ---------- */

/* Без скрипта оба слайда видны и уезжают одной кнопкой; скрипт помечает
   форму data-js и прячет неактивный. */
.vac-form{display:flex;flex-direction:column;min-width:0}
.vac-form[data-js] .vac-slide:not(.is-active){display:none}
.vac-slide{display:flex;flex-direction:column;min-width:0}

.vac-field{display:flex;flex-direction:column;min-width:0}
.vac-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;min-width:0}
.vac-row--phone{grid-template-columns:90px minmax(0,1fr)}

.vac-inp{
  width:100%;height:50px;padding:0 20px;border-radius:8px;
  font-size:16px;line-height:1;outline:none;min-width:0;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}

/* Ошибка — одна строка на слайд, в разметке всегда, видна классом. */
.vac-form__error{display:none;margin:0;font-size:16px;line-height:1.3;font-weight:600}
.vac-slide.is-error .vac-form__error{display:block}

.vac-agree{display:flex;align-items:flex-start;gap:10px;cursor:pointer;min-width:0;font-size:14px;line-height:1.45;text-wrap:pretty}
.vac-agree input{flex:none;margin:0;cursor:pointer}
.vac-agree a{text-decoration:underline;text-underline-offset:2px}
.vac-agree input:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

.vac-form__buttons{display:flex;align-items:center;gap:10px}
.vac-btn{
  height:50px;padding:0 24px;border:0;border-radius:8px;cursor:pointer;
  font-size:16px;font-weight:600;white-space:nowrap;
  transition:background var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.vac-btn:disabled{opacity:.5;cursor:not-allowed}

/* Ловушка для машин: поле настоящее, но за краем окна и вне обхода. */
.vac-trap{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* =====================================================================
   1. «Стандартный» — auth-каркас, как у входа (кадр 11-стандартный.png)
   ===================================================================== */

body.vac--t1{background:var(--enter-grad);background-attachment:fixed;color:#fff}
.vac-auth{min-height:100vh;display:flex;flex-direction:column}
.vac-auth__main{width:100%;max-width:560px;padding:72px 24px 40px;display:flex;flex-direction:column;min-width:0}

.vac-auth__logo{height:68px;width:auto;flex:none;align-self:flex-start;margin-bottom:56px}
.vac-auth__title{
  margin:0 0 10px;font-size:clamp(32px,4.5vw,54px);line-height:1.05;font-weight:800;
  letter-spacing:-.02em;color:#fff;
}
.vac-auth__text{margin:0 0 30px;font-size:18px;line-height:1.3;color:rgba(255,255,255,.92)}
.vac-auth__text span{font-weight:600;color:#fff}

/* Кружки «1 — 2»: 42×42, между ними 40 и линия. */
.vac-steps{list-style:none;margin:0 0 20px;padding:0;display:flex;align-items:center}
.vac-steps__item{
  width:42px;height:42px;flex:none;border-radius:50%;
  display:grid;place-content:center;font-size:16px;font-weight:600;
  color:#fff;border:1px solid rgba(255,255,255,.5);position:relative;
}
.vac-steps__item + .vac-steps__item{margin-left:40px}
.vac-steps__item + .vac-steps__item::before{
  content:"";position:absolute;right:100%;top:50%;width:40px;height:1px;
  background:rgba(255,255,255,.5);
}
.vac-steps__item.is-active{background:#fff;color:var(--nav);border-color:#fff}

.vac-auth__subtitle{margin:0 0 20px;font-size:clamp(24px,3vw,34px);line-height:1.15;font-weight:700;color:#fff}

.vac--t1 .vac-slide{gap:12px}
.vac--t1 .vac-field{max-width:500px}
.vac--t1 .vac-row{max-width:500px}
.vac--t1 .vac-inp{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);color:#fff;
}
.vac--t1 .vac-inp::placeholder{color:rgba(255,255,255,.5)}
.vac--t1 .vac-inp:hover{background:rgba(255,255,255,.19)}
.vac--t1 .vac-inp:focus{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.6)}
/* Двойной селектор: одиночный .is-err проиграл бы правилу .vac--t1 .vac-inp. */
.vac--t1 .vac-inp.is-err{border-color:#FF8A78;border-width:1.5px}
.vac--t1 .vac-form__error{color:#FFC9C0}

.vac--t1 .vac-agree{margin-top:8px;color:#fff;max-width:640px}
.vac--t1 .vac-agree input{width:21px;height:21px;accent-color:#fff}
.vac--t1 .vac-agree a{color:#fff}

/* Кнопки внизу колонки, как у Edler (`.auth-form__buttons` @797 при окне
   963): между чекбоксом и кнопками — воздух, а не сразу. */
.vac--t1 .vac-form__buttons{margin-top:clamp(40px,18vh,200px)}
/* Ровно 165×50, как у Edler: ширину задаёт число, а не текст. */
.vac--t1 .vac-btn--next{width:165px;padding:0;background:#fff;color:var(--nav)}
.vac--t1 .vac-btn--next:hover:not(:disabled){background:var(--acc-hov-bg)}
.vac--t1 .vac-btn--back{background:rgba(255,255,255,.15);color:#fff}
.vac--t1 .vac-btn--back:hover{background:rgba(255,255,255,.25)}

/* =====================================================================
   2. «С уроками» — экран урока под модалкой (кадр 22-demo-с-уроками.png)
   ===================================================================== */

.vac-head{
  height:73px;padding:0 31px;display:flex;flex-direction:column;justify-content:center;gap:2px;
  background:var(--card);border-radius:0 0 20px 20px;box-shadow:0 4px 8px rgba(217,217,217,.25);
  min-width:0;
}
.vac-head__company{font-size:20px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vac-head__pos{font-size:16px;font-style:normal;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.vac-lesson{
  display:grid;grid-template-columns:340px minmax(0,1fr);gap:20px;align-items:start;
  padding:27px 15px 40px;min-width:0;
}
.vac-aside{
  position:sticky;top:15px;background:var(--card);border-radius:10px;padding:24px 12px;min-width:0;
}
.vac-aside__title{margin:0 0 20px;font-size:22px;font-weight:600;line-height:1.2;color:var(--ink);overflow-wrap:anywhere}
.vac-aside__progress{display:flex;justify-content:space-between;font-size:18px;color:var(--mut);margin-bottom:8px}
.vac-aside__line{height:6px;border-radius:3px;background:rgba(41,92,201,.25);margin-bottom:24px}
.vac-aside__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.vac-aside__item{
  height:46px;padding:0 12px;border-radius:10px;display:flex;align-items:center;gap:12px;min-width:0;
  font-size:16px;color:var(--mut);
}
.vac-aside__item.is-active{background:rgba(41,92,201,.25);color:var(--ink)}
.vac-aside__icon{width:24px;height:24px;flex:none;border-radius:50%;border:1.5px solid var(--line);background:var(--card)}
.vac-aside__text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.vac-content{background:var(--card);border-radius:10px;min-width:0;overflow:hidden}
.vac-content__head{padding:44px 121px 15px;border-bottom:1px solid var(--hair)}
.vac-content__body{padding:30px 121px 60px;display:flex;flex-direction:column;gap:14px}
.vac-sk{display:block;height:24px;border-radius:12px;background:var(--soft)}
.vac-sk--title{width:40%;height:28px}
.vac-sk--short{width:55%}
.vac-sk--gap{background:transparent;height:12px}
.vac-sk-frame{height:200px;border-radius:12px;background:var(--soft);margin:10px 0}

/* =====================================================================
   3. «Видео заставка» — фон на весь экран (у Edler ролик, у нас обложка)
   ===================================================================== */

.vac-bg{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;display:block}
.vac-bg--grad{background:var(--enter-grad)}

/* ---------- модалка регистрации (шаблоны 2 и 3) ---------- */

/* Закрыть нельзя: ни крестика, ни клика по подложке — как в оригинале. */
.vac-modal__wrapper{
  position:fixed;inset:0;z-index:10;background:rgba(51,51,51,.25);
  display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto;
}
.vac-modal{
  width:100%;max-width:590px;background:var(--card);border-radius:10px;padding:20px;
  box-shadow:0 18px 44px rgba(11,29,53,.18);gap:0;
}
.vac-modal__header{display:none;margin:-20px -20px 20px;padding:14px 20px;border-radius:10px 10px 0 0;background:var(--nav);color:#fff;text-align:center}
.vac-modal__header p{margin:0;font-size:16px;font-weight:600}

.vac-modal__banner{
  min-height:171px;padding:40px;border-radius:8px;background:var(--nav);
  display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px;min-width:0;
}
.vac-modal__banner-title{margin:0;font-size:36px;line-height:1;font-weight:900;color:#fff;letter-spacing:-.01em}
.vac-modal__banner-logo{height:92px;width:auto;flex:none}

.vac-modal__step{margin:0 0 20px;font-size:22px;font-weight:600;color:var(--ink)}
.vac-modal .vac-slide{gap:14px}
.vac-field__cap{font-size:16px;color:var(--ink);margin-bottom:10px}
.vac-modal .vac-inp{border:1px solid var(--hair);border-radius:10px;background:var(--card);color:var(--ink)}
.vac-modal .vac-inp::placeholder{color:var(--faint)}
.vac-modal .vac-inp:hover{border-color:var(--acc-hov-bord)}
.vac-modal .vac-inp:focus{border-color:var(--acc)}
.vac-modal .vac-inp.is-err{border-color:var(--fire);border-width:1.5px}
.vac-modal .vac-form__error{color:var(--fire-ink)}

.vac-modal .vac-agree{margin-top:14px;color:var(--ink)}
.vac-modal .vac-agree input{width:24px;height:24px;border-radius:5px;accent-color:var(--acc)}
.vac-modal .vac-agree a{color:var(--ink)}

.vac-modal .vac-form__buttons{margin-top:56px;justify-content:center}
.vac-modal .vac-btn{min-width:170px}
.vac-modal .vac-btn--next{background:var(--acc);color:var(--on-acc);font-weight:500}
.vac-modal .vac-btn--next:hover:not(:disabled){background:var(--acc-2)}
.vac-modal .vac-btn--back{background:var(--soft);color:var(--ink)}
.vac-modal .vac-btn--back:hover{background:var(--hair)}

/* =====================================================================
   Заглушка «демонстрация недоступна» (кадр найм/71-landing-2-public-390.png)
   ===================================================================== */

body.vac--plug{background:var(--bg)}
.vac-plug{min-height:100vh;padding:20px;background:var(--card);display:flex}
.vac-plug__inner{margin:auto 0;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}
.vac-plug__image{width:min(100%,396px);height:auto;margin-bottom:38px}
.vac-plug__title{margin:0 0 18px;font-size:28px;line-height:32px;font-weight:600;color:var(--ink);max-width:560px;text-wrap:balance}
.vac-plug__text{margin:0;font-size:18px;line-height:1.4;color:var(--mut);max-width:560px;text-wrap:pretty}

/* ---------- узкие окна ---------- */

@media (max-width:1024px){
  .vac-content__head{padding:32px 40px 15px}
  .vac-content__body{padding:24px 40px 40px}
}

@media (max-width:860px){
  .vac-lesson{grid-template-columns:minmax(0,1fr)}
  .vac-aside{position:static}
  .vac-modal__header{display:block}
  .vac-modal__banner{padding:24px}
  .vac-modal__banner-title{font-size:28px}
  .vac-modal__banner-logo{height:64px}
}

@media (max-width:480px){
  .vac-auth__main{padding:24px 24px 32px}
  .vac-auth__logo{height:48px;margin-bottom:40px}
  .vac--t1 .vac-form__buttons{margin-top:clamp(32px,12vh,120px)}
  .vac-row:not(.vac-row--phone){grid-template-columns:minmax(0,1fr)}
  .vac-modal{padding:16px}
  .vac-modal__header{margin:-16px -16px 16px}
  .vac-modal__banner-logo{display:none}
  .vac-modal .vac-form__buttons{flex-direction:column;align-items:stretch}
  .vac-modal .vac-btn{min-width:0}
  .vac-plug__title{font-size:24px;line-height:28px}
}