/* ============================
   CAREER PAGE
   ============================ */

.cr-main .container,
.cr-values .container,
.cr-services .container,
.cr-vacancies .container,
.cr-stages .container,
.cr-callback .container {
  max-width: 1440px;
}


/* ── HERO ── */

.cr-main {
  padding: 40px 0 60px;
}

.cr-main__inner {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.cr-main__title {
  font-family: var(--font-montserrat);
  font-weight: var(--fw-medium);
  font-size: clamp(28px, 4vw, var(--fs-h1));
  line-height: var(--lh-heading);
  color: var(--color-black);
  margin: 0;
}

@media (min-width: 1024px) {
  .cr-main {
    padding: 80px 0 0;
  }
}


/* ── VALUES ── */

.cr-values {
  padding: 60px 0;
}

.cr-values__inner {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.cr-values__left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cr-values__heading {
  font-family: var(--font-montserrat);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--color-black);
  margin: 0;
}

.cr-values__cards {
  display: grid;
  grid-template-columns: 1fr;
}

.cr-values__cards .description-card {
  border-bottom: var(--border-gray-light);
}

.cr-values__cards .description-card:last-child {
  border-bottom: none;
}

@media (min-width: 640px) {
  .cr-values__cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .cr-values__cards .description-card {
    border-right: var(--border-gray-light);
    border-bottom: var(--border-gray-light);
  }

  .cr-values__cards .description-card:nth-child(2n) {
    border-right: none;
  }

  .cr-values__cards .description-card:nth-last-child(-n+2) {
    border-bottom: none;
  }
}

@media (min-width: 1024px) {
  .cr-values {
    padding: 100px 0;
  }

  .cr-values__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 80px;
  }

  .cr-values__left {
    width: 480px;
    flex-shrink: 0;
  }

  .cr-values__cards {
    flex: 1;
    min-width: 0;
  }
}


/* ── УСЛОВИЯ ТРУДА (SERVICES) ── */

.cr-services {
  padding: 60px 0;
}

.cr-services__heading {
  font-family: var(--font-montserrat);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--color-black);
  margin: 0 0 40px;
}

.cr-services__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 50px;
}

.cr-service-item {
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding-bottom: 20px;
  width: 100%;
}

.cr-service-item__icon {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}

.cr-service-item__body {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.cr-service-item__title {
  font-family: var(--font-golos);
  font-weight: var(--fw-medium);
  font-size: 20px;
  line-height: var(--lh-subheading);
  color: var(--color-black);
  margin: 0;
}

.cr-service-item__desc {
  font-family: var(--font-pt-sans);
  font-size: var(--fs-text);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-black);
  margin: 0;
}

@media (min-width: 768px) {
  .cr-service-item {
    width: calc(50% - 25px);
  }
}

@media (min-width: 1440px) {
  .cr-service-item__title {
    font-size: var(--fs-h4);
  }
}

@media (min-width: 1024px) {
  .cr-services {
    padding: 100px 0;
  }

  .cr-services__heading {
    margin-bottom: 60px;
  }
}


/* ── ВАКАНСИИ ── */

.cr-vacancies {
  padding: 60px 0;
}

.cr-vacancies__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.cr-vacancies__header-left {
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1;
  min-width: 0;
}

.cr-vacancies__heading {
  font-family: var(--font-montserrat);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--color-black);
  margin: 0;
}

.cr-vacancies__subtitle {
  font-family: var(--font-pt-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-gray);
  margin: 0;
  max-width: 480px;
}

.cr-vacancies__grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cr-vacancies__grid::-webkit-scrollbar {
  display: none;
}

/* Scroll nav */
.cr-vacancies__nav {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.cr-vacancies__scroll-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cr-vacancies__scroll-btn::after {
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  background-color: var(--color-gray);
  -webkit-mask-image: url('../assets/icons/ic_arrow_forward_thin.svg');
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url('../assets/icons/ic_arrow_forward_thin.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  transition: background-color var(--transition-fast);
}

.cr-vacancies__scroll-btn:hover::after {
  background-color: var(--color-blue);
}

.cr-vacancy-card {
  background-color: #EEEEEE;
  border-radius: var(--radius-card);
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
}

.cr-vacancy-card__top {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cr-vacancy-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cr-vacancy-card__exp {
  font-family: var(--font-pt-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-gray);
  margin: 20px 0 0;
}

.cr-vacancy-card__title {
  font-family: var(--font-golos);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h4);
  line-height: var(--lh-subheading);
  color: var(--color-black);
  margin: 0;
}

.cr-vacancy-card__desc {
  font-family: var(--font-pt-sans);
  font-size: var(--fs-text);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-black);
  margin: 0;
}

.cr-vacancy-card__footer {
  display: flex;
}

@media (min-width: 768px) {
  .cr-vacancies__grid {
    flex-direction: row;
    align-items: stretch;
    gap: 20px;
    scroll-snap-type: x mandatory;   /* слайдер: прилипание к карточкам */
  }

  .cr-vacancy-card {
    /* ровно 3 карточки в видимой области; остальные уходят вправо (скролл стрелкой) */
    flex: 0 0 calc((100% - 40px) / 3);
    min-width: 0;
    scroll-snap-align: start;
  }
}

@media (min-width: 1024px) {
  .cr-vacancies {
    padding: 100px 0;
  }

  .cr-vacancies__header {
    margin-bottom: 60px;
  }

  .cr-vacancies__grid {
    gap: 30px;
  }

  .cr-vacancy-card {
    /* учитываем gap 30px: 3 карточки + 2 промежутка = 100% */
    flex-basis: calc((100% - 60px) / 3);
  }
}


/* ── ЭТАПЫ НАЙМА ── */

.cr-stages {
  padding: 60px 0;
}

.cr-stages__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.cr-stages__left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cr-stages__heading {
  font-family: var(--font-montserrat);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--color-black);
  margin: 0;
}

.cr-stages__subtitle {
  font-family: var(--font-pt-sans);
  font-size: var(--fs-text);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-black);
  margin: 0;
}

.cr-stages__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.cr-stages__item {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px 0;
  border-top: var(--border-gray-light);
}

.cr-stages__item:last-child {
  border-bottom: var(--border-gray-light);
}

.cr-stages__label .starlline__label {
  font-weight: var(--fw-regular);
}

.cr-stages__desc {
  font-family: var(--font-pt-sans);
  font-size: var(--fs-text);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-gray);
  margin: 0;
}

@media (min-width: 1024px) {
  .cr-stages {
    padding: 100px 0;
  }

  .cr-stages__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 80px;
  }

  .cr-stages__left {
    width: 300px;
    flex-shrink: 0;
    padding-top: 0;
    margin-top: -9px;
  }

  .cr-stages__list {
    flex: 1;
    min-width: 0;
  }

  .cr-stages__item {
    flex-direction: row;
    gap: 60px;
    align-items: flex-start;
    padding: 30px;
    min-height: 180px;
  }

  .cr-stages__label {
    width: 280px;
    flex-shrink: 0;
  }

  .cr-stages__desc {
    flex: 1;
    padding-top: 4px;
  }
}


/* ── ФОРМА ЗАЯВКИ ── */

.cr-callback {
  padding: 60px 0 80px;
}

.cr-callback__inner {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.cr-callback__heading {
  font-family: var(--font-montserrat);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--color-black);
  margin: 0;
}

.cr-callback__form {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.cr-callback__fields {
  display: flex;
  flex-direction: column;
  gap: var(--form-row-gap);
}

.cr-callback__footer {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cr-callback__footer .form__error-msg {
  max-width: none;
}

.cr-callback__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  width: 100%;
}

.cr-callback__attach {
  cursor: pointer;
  color: var(--color-gray);
}

.cr-callback .callback__success {
  font-family: var(--font-golos);
  font-size: var(--fs-body);
  color: var(--color-orange);
  display: none;
  flex: 1;
}
.cr-callback .callback__success--visible {
  display: block;
}

.cr-callback__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 1024px) {
  .cr-callback {
    padding: 100px 0;
  }

  .cr-callback__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 30px;
  }

  .cr-callback__heading {
    flex: 1;
    min-width: 0;
  }

  .cr-callback__form {
    width: 680px;
    flex-shrink: 0;
  }

  .cr-callback__footer {
    flex-direction: column;
  }
}


/* ============================================================
   МОБ (≤767px): «Наши ценности» (карьера) — горизонтальный скролл-ряд
   (как на главной). Десктоп/планшет не затрагиваются.
   ============================================================ */
@media (max-width: 767px) {
  .cr-values__cards {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    align-items: stretch;          /* равная высота = по самой длинной карточке */
  }
  .cr-values__cards::-webkit-scrollbar {
    display: none;
  }

  .cr-values__cards .description-card {
    flex: 0 0 80%;                 /* одна видна, следующая выглядывает справа */
    scroll-snap-align: start;
    min-height: 0;
    padding: 20px;
  }

  /* убрать сетку-границы, оставить вертикальный разделитель между карточками */
  .cr-values__cards .description-card,
  .cr-values__cards .description-card:nth-child(2n),
  .cr-values__cards .description-card:nth-last-child(-n+2) {
    border-bottom: none;
    border-right: var(--border-gray-light);
  }
  .cr-values__cards .description-card:last-child {
    border-right: none;
  }

  /* стр.253: уменьшить шрифт числа (64px → 40px) и заголовка блока (36px → 24px) */
  .cr-values__heading {
    font-size: 24px;
  }
  .cr-values__cards .description-card__number {
    font-size: 40px;
    margin-bottom: 0;
  }

  /* стр.255-256: остальные h2-заголовки секций → 24px как на главной */
  .cr-services__heading,
  .cr-vacancies__heading,
  .cr-stages__heading,
  .cr-callback__heading {
    font-size: 24px;
  }
}


/* ── МОБ (≤767px): шапка вакансий — заголовок → описание → кнопка (в столбик) ── */
@media (max-width: 767px) {
  .cr-vacancies__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}


/* ── МОБ (≤767px): форма карьеры — кнопки в столбик, меньше отступы ── */
@media (max-width: 767px) {
  /* меньше расстояние между секциями формы (поля, согласие, кнопки) */
  .cr-callback__form {
    gap: 30px;
  }
  /* пустое сообщение об ошибке не должно добавлять зазор */
  .cr-callback__footer .form__error-msg:empty {
    display: none;
  }
  /* «Прикрепить резюме» над чекбоксом согласия:
     растворяем обёртки — их дети участвуют в flex-контейнере формы */
  .cr-callback__footer {
    display: contents;
  }
  .cr-callback__actions {
    display: contents;
  }
  /* 1. поля формы (cr-callback__fields) — order 0 по умолчанию */
  /* 2. кнопка «Прикрепить резюме» */
  .cr-callback__attach {
    order: 1;
    align-self: flex-start;
  }
  /* 3. чекбокс согласия */
  .cr-callback__form .form-consent {
    order: 2;
  }
  /* 4. сообщения об ошибке / успехе */
  .cr-callback__form .form__error-msg,
  .cr-callback__form .callback__success {
    order: 3;
  }
  /* 5. кнопка «Отправить отклик» */
  .cr-callback__form button[type="submit"] {
    order: 4;
    align-self: flex-start;
  }
}