/* ===================================================================
   theme-v2.css — страница «Карьера», вёрстка в стиле stratoplan-school.com/events/
   (формат карточек мероприятий, заголовки, подложки) — тёмно-синяя палитра
   вместо фирменного синего/оранжевого.

   Все классы/ID, за которые держится JS (попапы Magnific Popup, аккордеон,
   бургер-меню, счётчики, трекинг кликов в managed-index.js/managed-vacancy.js)
   сохранены на элементах — ниже переопределяются только цвет/форма/типографика
   плюс несколько новых компонентных классов с префиксом job- для новых блоков
   (герой, карточки вакансий, секции).

   Подключается ПОСЛЕ main.css/plugins.css.
   =================================================================== */

:root {
  /* тёмно-синяя ink-палитра (как на /events/: --ev-ink/--ev-accent) */
  --ink-900: #080B18;
  --ink-800: #0E1226;
  --ink-700: #141934;
  --ink-600: #1B2142;
  --line-on-ink: rgba(255, 255, 255, 0.10);

  --blue-accent: #3D5AFE;
  --blue-accent-dark: #2F45D8;
  --blue-accent-soft: #EAEEFF;
  --blue-text: #2541C7;

  --muted: #6B7280;
  --surface: #F5F6FA;
  --card-border: rgba(14, 18, 38, 0.08);

  /* переопределение переменных шаблона main.css — тащит перекраску каскадом */
  --base: var(--surface);
  --base-tint: #F1F3FA;
  --accent: var(--ink-900);
  --opposite: var(--ink-800);
  --bg-gradient-solid-accent: linear-gradient(135deg, var(--ink-700) 0%, var(--ink-900) 100%);
  --gradient-controls-accent: linear-gradient(135deg, #2867FF 0%, #0D3FE0 100%);
  --t-subt: var(--blue-text);
  --st-subtitle: #C6D1FF;
  --st-footer: var(--blue-accent-dark);
}

.bg-base-tint1 {
  background-color: #ffffff !important;
}

/* ---------------- Базовая типографика ---------------- */

body {
  color: #3A3F4B;
}

h1, h2 {
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

h3, h4 {
  font-weight: var(--font-weight-semibold);
}

.h2-subtitle {
  border-color: #D7DEFF;
  background-color: var(--blue-accent-soft);
  color: var(--blue-text);
}
.h2-subtitle.alternative {
  border-color: var(--blue-accent-dark);
  color: var(--blue-accent-dark);
}

/* ---------------- Шапка ---------------- */

/* Форма и позиция — штатные из main.css (маленькая плавающая стеклянная "таблетка",
   top:1.2rem, по центру, с ограничением по ширине и border-radius — как на events
   и остальных лендингах на этом шаблоне). Здесь только перекраска под тёмную тему:
   было полупрозрачное бело-стеклянное, стало полупрозрачное тёмно-стеклянное. */
.header {
  background-color: rgba(8, 11, 24, 0.55);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(8, 11, 24, 0.25);
}
.header__container {
  padding: 0 0.4rem;
  gap: 3.2rem;
}
/* main.css держит тут отступ под старую "высоту" хедера (11.2rem на десктопе) для плавающей
   таблетки — она сама короче и стоит выше (top:1.2rem), поэтому этот запас оставлял пустую
   белую полосу между таблеткой и тёмным геро под ней (видно было только из-за тёмного фона,
   на белом фоне исходного шаблона эта полоса была незаметна). Первая секция каждой страницы
   (.job-hero, .event-page) уже сама кладёт себе достаточный padding-top под шапку. */
.main {
  padding-top: 0 !important;
}
.nav {
  gap: 3.6rem;
}
.nav li a {
  color: #ffffff;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
}
@media only screen and (max-width: 1199px) {
  .header__menu {
    background-color: #ffffff;
  }
  .header__menu .nav li a {
    color: var(--ink-900);
  }
}
.menu__burger,
.menu__burger i {
  color: #ffffff;
}

/* ---------------- Кнопки ---------------- */

.btn-accent,
.btn-accent span {
  color: #ffffff;
}
.btn-accent {
  box-shadow: 0 14px 28px rgba(13, 63, 224, 0.28);
}

.btn-alternative,
.btn-alternative span {
  color: #ffffff;
}

.btn-line-dark-s,
.btn-line-dark {
  border-color: rgba(14, 18, 38, 0.14);
}

/* ---------------- Новый герой (в стиле events-hero) ---------------- */

.job-hero {
  position: relative;
  padding: 16.4rem 0 7.2rem;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, var(--ink-600) 0%, var(--ink-900) 62%);
  overflow: hidden;
  text-align: center;
}
.job-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 18% 20%, rgba(61, 90, 254, 0.28), transparent 38%),
    radial-gradient(circle at 85% 12%, rgba(61, 90, 254, 0.18), transparent 42%);
  pointer-events: none;
}
.job-hero__row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.job-hero__inner {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.job-hero__plane {
  display: none;
}
@media only screen and (min-width: 1024px) {
  .job-hero__row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 5.6rem;
    text-align: left;
  }
  .job-hero__inner {
    flex: 1 1 auto;
    max-width: 620px;
    align-items: flex-start;
    text-align: left;
  }
  .job-hero__plane {
    display: block;
    flex: 0 0 auto;
    width: min(38vw, 440px);
    aspect-ratio: 1 / 1;
  }
  .job-hero__plane svg {
    width: 100%;
    height: 100%;
  }
}
.job-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1.6rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2.4rem;
}
.job-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue-accent);
  box-shadow: 0 0 0 4px rgba(61, 90, 254, 0.3);
  flex: 0 0 auto;
}
.job-hero__title {
  font-family: var(--_font-accent);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 4.2rem;
  line-height: 1.12;
  color: #ffffff;
  margin: 0;
}
.job-hero__title em {
  font-style: normal;
  color: var(--blue-accent);
}
@media only screen and (min-width: 768px) {
  .job-hero__title {
    font-size: 6rem;
  }
}
@media only screen and (min-width: 1024px) {
  .job-hero__title {
    font-size: 7rem;
  }
}
.job-hero__subtitle {
  margin-top: 2rem;
  font-size: 1.8rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.68);
  max-width: 540px;
}
.job-hero__cta {
  margin-top: 4rem;
}

/* ---------------- Заголовок секции (киккер + h2 + подзаголовок) ---------------- */

.job-section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 620px;
  margin: 0 auto 5.6rem;
}
.job-section-head h2 {
  font-size: 3.2rem;
}
@media only screen and (min-width: 768px) {
  .job-section-head h2 {
    font-size: 4.4rem;
  }
}
.job-section-head p {
  margin-top: 1.4rem;
  font-size: 1.7rem;
  line-height: 1.55;
  color: var(--muted);
}
.job-section-head.is-light .job-kicker {
  background: var(--blue-accent-soft);
  border-color: #D7DEFF;
  color: var(--blue-text);
}
.job-section-head.is-light .job-kicker::before {
  background: var(--blue-accent);
  box-shadow: none;
}

/* ---------------- О школе / статистика ---------------- */

.job-about {
  padding: 8rem 0;
  background: var(--surface);
}
.job-about__text {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.8rem;
  line-height: 1.6;
  color: #3A3F4B;
}
.job-about__text b {
  color: var(--ink-900);
  font-weight: var(--font-weight-semibold);
}
.job-about__clients {
  margin-top: 1.2rem;
}

.job-stats {
  margin-top: 5.6rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
}
@media only screen and (min-width: 768px) {
  .job-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}
.job-stats__item {
  background: #ffffff;
  border: 1px solid var(--card-border);
  border-radius: var(--_radius-l);
  padding: 3.2rem 2.8rem;
  text-align: center;
  box-shadow: 0 1px 2px rgba(14, 18, 38, 0.03);
}
.job-stats__num {
  font-family: var(--_font-accent);
  font-weight: var(--font-weight-bold);
  font-size: 4.4rem;
  line-height: 1.1;
  color: var(--ink-900);
}
.job-stats__label {
  margin-top: 0.8rem;
  font-size: 1.4rem;
  color: var(--muted);
}

/* ---------------- Вакансии: карточки в формате events-card ---------------- */

.job-vacancies {
  padding: 8rem 0;
  background: #ffffff;
}
/* auto-fit вместо repeat(3, 1fr) — так при 1-2 активных вакансиях (скрыли часть
   через админку) грид не тянет карточку на всю лишнюю колонку и не оставляет
   пустой растянутый блок: колонок ровно столько, сколько карточек влезает,
   а остаток просто центрируется, не создавая фантомную ячейку. */
.job-vacancy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 380px));
  justify-content: center;
  gap: 2.4rem;
}

.vcard {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--card-border);
  box-shadow: 0 1px 2px rgba(14, 18, 38, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
}
.no-touch .vcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(14, 18, 38, 0.12);
}

.vcard__head {
  position: relative;
  padding: 2.4rem;
  min-height: 15.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: radial-gradient(circle at 10% 0%, var(--ink-600), var(--ink-900) 70%);
  color: #ffffff;
}
.vcard__badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1.2rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.vcard__badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue-accent);
  flex: 0 0 auto;
}
.vcard__title {
  font-family: var(--_font-accent);
  font-weight: var(--font-weight-semibold);
  font-size: 2.2rem;
  line-height: 1.25;
  /* h4 в main.css жёстко красит текст в var(--t-bright) (#0D0D0D) — это НЕ наследуется
     поверх, а бьёт по прямому попаданию тега, из-за чего заголовок вакансии был
     почти нечитаемым (тёмный текст на тёмной подложке). Явно фиксируем белый. */
  color: #ffffff !important;
}

.vcard .icon-wrapper {
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  z-index: 2;
}
.vcard .icon-wrapper .open-tab-icon {
  width: 2.8rem;
  height: 2.8rem;
  opacity: 0.6;
  filter: brightness(0) invert(1);
  transition: opacity var(--_animspeed-medium) ease;
}
.vcard .icon-wrapper a:hover .open-tab-icon {
  opacity: 1;
}
.vcard .popover1 {
  position: absolute;
  top: 3.6rem;
  right: 0;
  padding: 0.6rem 1.2rem;
  background: var(--ink-900);
  color: #fff;
  font-size: 1.2rem;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 5;
}

.vcard__body {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  flex: 1;
  padding: 2.4rem;
}
.vcard__descr {
  font-size: 1.45rem;
  line-height: 1.55;
  color: var(--muted);
  flex: 1;
}
.vcard__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1.3rem 2rem;
  border-radius: 12px;
  background: var(--blue-accent-soft);
  color: var(--blue-accent-dark);
  font-size: 1.3rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: background var(--_animspeed-medium) ease, color var(--_animspeed-medium) ease;
}
.vcard__cta img {
  width: 1.8rem;
  height: 1.8rem;
}
.no-touch .vcard__cta:hover {
  background: var(--blue-accent);
  color: #ffffff;
}
.no-touch .vcard__cta:hover img {
  filter: brightness(0) invert(1);
}

/* ---------------- Почему выбирают работу (пилюли) ---------------- */

.job-why {
  padding: 8rem 0;
  background: var(--surface);
}
.job-why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
}
@media only screen and (min-width: 640px) {
  .job-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (min-width: 1024px) {
  .job-why-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.job-why__item {
  background: #ffffff;
  border: 1px solid var(--card-border);
  border-radius: var(--_radius-l);
  padding: 2.8rem;
}
.job-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.4rem;
  border-radius: 100px;
  background: var(--blue-accent-soft);
  color: var(--blue-text);
  font-size: 1.2rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.job-why__item p {
  margin-top: 1.4rem;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--muted);
}
.job-why__closing {
  margin-top: 1.6rem;
  background: var(--bg-gradient-solid-accent);
  color: #ffffff;
  border-radius: var(--_radius-l);
  padding: 3.2rem;
  text-align: center;
  font-size: 1.7rem;
  line-height: 1.5;
}

/* ---------------- Важное о нас (тёмная секция + аккордеон) ---------------- */

.job-values {
  padding: 8rem 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--ink-600) 0%, var(--ink-900) 70%);
}
.job-values .job-section-head h2,
.job-values .job-section-head p {
  color: #ffffff;
}
.job-values .job-section-head p {
  color: rgba(255, 255, 255, 0.64);
}
.job-values .job-kicker {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}
.job-values .job-kicker::before {
  background: var(--blue-accent);
}

.job-values .accordion {
  max-width: 820px;
  margin: 0 auto;
}
.job-values .accordion__item.type-2 {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.04) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.job-values .accordion__title-2 h3 {
  color: rgba(255, 255, 255, 0.3);
  font-family: var(--_font-accent);
}
.job-values .titled-text {
  color: #ffffff;
}
.job-values .accordion__info p {
  color: rgba(255, 255, 255, 0.68);
}
.job-values .accordion__btninner::before,
.job-values .accordion__btninner::after {
  background-color: var(--blue-accent);
}
.job-values .card-container__btngroup {
  margin-top: 4.8rem;
}

/* ---------------- Попапы вакансий / техподдержки ---------------- */

.popup__container {
  border-radius: var(--_radius-l);
}
.popup__name.popup-support__name {
  font-family: var(--_font-accent);
}
.popup_but_block .btn-accent {
  color: #ffffff;
}

/* ---------------- Футер ---------------- */

.fdata__coloredblock.st-footer {
  border-color: var(--blue-accent-dark);
}
.footer__container.bg-accent {
  background: linear-gradient(180deg, var(--ink-800) 0%, var(--ink-900) 100%);
}
/* .fdata__title p красится в var(--opposite), а .bright — в var(--t-bright): оба токена
   я переопределил под тёмные цвета (они нужны тёмными в других местах — кнопки и т.п.),
   но тут это как раз текст НА тёмном футере, поэтому он гас. Фиксируем белым явно. */
.footer__container .fdata__title p,
.footer__container .coloredblock__data p {
  color: #ffffff;
}

.text-link.text-link-medium {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)),
    linear-gradient(to right, #9FB2FF, var(--blue-accent));
}

/* ---------------- Страница вакансии (vacancys.php) — в стиле events/example.php:
   описание слева, карточка с формой справа, вместо попапа ---------------- */

.event-page {
  padding: 15.6rem 0 8rem;
  background: var(--surface);
}
.event-page .container-main {
  max-width: 1100px;
}
.event-page__main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-width: 0;
}
.event-page__main--stacked {
  max-width: 760px;
  margin: 0 auto;
}
.event-page__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.events-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.4rem;
  border-radius: 100px;
  background: var(--blue-accent-soft);
  color: var(--blue-text);
  font-size: 1.2rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.event-page__title {
  font-family: var(--_font-accent);
  font-weight: var(--font-weight-bold);
  font-size: 3.6rem;
  line-height: 1.12;
  color: var(--ink-900);
  margin: 0;
}
@media only screen and (min-width: 768px) {
  .event-page__title {
    font-size: 4.6rem;
  }
}
.event-page__copy-row {
  position: relative;
}
.event-page__copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--muted);
  font-size: 1.3rem;
  font-weight: var(--font-weight-semibold);
}
.event-page__copy-btn .open-tab-icon {
  width: 1.8rem;
  height: 1.8rem;
  opacity: 0.7;
}
.event-page__copy-btn:hover {
  color: var(--blue-text);
}
.event-page__about {
  margin-top: 0.8rem;
  padding-top: 2rem;
  border-top: 1px solid var(--card-border);
}
.event-page__about-title {
  font-family: var(--_font-accent);
  font-weight: var(--font-weight-semibold);
  font-size: 1.9rem;
  color: var(--ink-900);
  margin-bottom: 1.2rem;
}
.event-page__about-text {
  font-size: 1.55rem;
  line-height: 1.65;
  color: #3A3F4B;
}
.event-page__about-text b {
  color: var(--ink-900);
}

.event-page__form-plain {
  margin-top: 1.6rem;
}
.events-form-iframe {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
}

@media only screen and (max-width: 767px) {
  .event-page {
    padding-top: 12rem;
  }
  .event-page__title {
    font-size: 3rem;
  }
}

/* ---------------- Попап вакансии на маленьких по ВЫСОТЕ экранах ---------------- */
/* main.css даёт .popup__content.popup-radius-l фиксированный max-height:516px — на низком
   окне (ноутбук с масштабом/уменьшенным окном браузера, невысокий тач-девайс) это внутри
   .popup__container с max-height:90% от вьюпорта просто не помещалось: баннер+заголовок
   съедали весь бюджет высоты ещё до скролла, попап выглядел обрезанным. Переводим лимит
   с фиксированных пикселей на vh, чтобы он всегда был пропорционален реальной высоте окна. */
@media only screen and (max-height: 760px) and (min-width: 768px) {
  .popup__container.popup-radius-l {
    padding: 2.4rem;
    max-height: 94%;
    width: min(94vw, 960px);
    max-width: min(94vw, 960px);
  }
  .popup__content.popup-radius-l {
    max-height: 56vh;
  }
  .popup__headline.popup-radius-l img {
    max-height: 90px;
    object-fit: cover;
  }
}

/* ---------------- Прочее ---------------- */

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #2867FF, var(--blue-accent-dark));
}
html {
  scrollbar-color: var(--blue-accent) transparent;
}