/* ============================================================
   КАРЬЕРА (18 сентября 2026)
   Все классы с приставкой crr-. Общий файл стилей и общие
   скрипты не тронуты ни строкой.

   Устройство страницы. Чёрный первый экран, дальше белое полотно
   во всю ширину окна. Шесть направлений работы стоят полем
   карточек, взгляд на работу идёт сплошной прозой, две вакансии
   стоят карточками, у каждой два перечня рядом. Внизу чёрная
   карточка с откликом.

   Размеры. Заголовки трёх уровней приходят из общего файла сайта
   с пометкой важности, поэтому здесь они не переопределяются.
   Основной текст ровно 17 точек с межстрочным 1,5 везде, кроме
   вводного абзаца первого экрана, там 19. Полужирных кусков в
   тексте нет ни одного.

   Цвета. Оранжевый сайта #f16428, синий ссылок #12a5ff,
   волосяные линии #E8E8E8.
   ============================================================ */

/* ── ЧЁРНЫЙ ПЕРВЫЙ ЭКРАН ВО ВСЮ ШИРИНУ ────────────────────── */
.crr-top{background:#000;
  padding:clamp(24px,3vw,44px) 0 clamp(40px,4.4vw,68px)}
/* Сетка первого экрана. Разметка идёт в порядке текста (заголовок,
   вводный абзац, вторая фраза, ссылка), а места в сетке расставлены
   так, что вторая фраза стоит справа, а ссылка под вводным абзацем. */
.crr-hero{display:grid;
  grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);
  column-gap:clamp(30px,4vw,72px);row-gap:clamp(24px,2.8vw,34px)}
.crr-hero-main{grid-column:1;grid-row:1}
.crr-hero-side{grid-column:2;grid-row:1;align-self:center;
  border-left:1px solid rgba(255,255,255,.16);
  padding:2px 0 4px clamp(20px,2.2vw,32px)}
.crr-hero-btn{grid-column:1;grid-row:2;justify-self:start}
.crr-hero h1{margin:0;color:#fff}
.crr-lead{margin:clamp(18px,2vw,28px) 0 0;
  font-size:19px;line-height:1.45;color:rgba(255,255,255,.86)}
.crr-hero-side p{margin:0;font-size:17px;line-height:1.5;color:#9a9a9a}

/* ── БЕЛОЕ ПОЛОТНО ВО ВСЮ ШИРИНУ ──────────────────────────── */
.crr-white{background:#fff;color:#1f2229;
  padding:clamp(28px,3.2vw,50px) 0 clamp(48px,5.6vw,92px)}

/* Хлебные крошки набраны как на прочих внутренних страницах. */
.crr-crumbs{font-size:13px;color:#8a8a8a;margin:0 0 clamp(24px,3vw,42px)}
.crr-crumbs a{color:#8a8a8a;text-decoration:none;transition:color .14s ease}
.crr-crumbs a:hover{color:#141414}
.crr-crumbs .sep{margin:0 8px;opacity:.6}

/* ── РАЗДЕЛ ───────────────────────────────────────────────────
   Линий между разделами нет, их разводит воздух и смена набора. */
.crr-sec{padding-bottom:clamp(42px,4.8vw,76px);scroll-margin-top:18px}
.crr-sec h2{margin:0 0 clamp(18px,2vw,28px);color:#1f2229}
.crr-sec-tight h2{margin-bottom:clamp(14px,1.6vw,22px)}

.crr-tx p{margin:0 0 15px;font-size:17px;line-height:1.5;
  color:#3a3a3a;max-width:74ch}
.crr-tx p:last-child{margin-bottom:0}

/* ── ПОЛЕ НАПРАВЛЕНИЙ РАБОТЫ ──────────────────────────────────
   Шесть карточек одного набора. Значков внутри нет, выделений в
   тексте нет: название стоит первым словом самой фразы. */
.crr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.2vw,18px)}
.crr-cell{border:1px solid #E8E8E8;border-radius:22px;
  padding:clamp(20px,2.2vw,28px) clamp(18px,2vw,26px)}
.crr-cell p{margin:0;font-size:17px;line-height:1.5;color:#3a3a3a}

/* ── ВАКАНСИЯ ─────────────────────────────────────────────────
   Номер стоит в поле слева, сама вакансия лежит в обводке. Два
   перечня стоят рядом, поэтому вакансия помещается в один экран
   и её видно целиком. */
.crr-job{display:grid;
  grid-template-columns:clamp(52px,5vw,76px) minmax(0,1fr);
  gap:0 clamp(14px,1.4vw,22px);align-items:start}
.crr-job + .crr-job{margin-top:clamp(16px,1.8vw,26px)}
/* Первая вакансия отодвинута от строки над списком: без этого номер
   вакансии липнул к ней вплотную. */
.crr-tx + .crr-job{margin-top:clamp(22px,2.6vw,34px)}
.crr-num{font-family:'Montserrat',sans-serif;font-weight:900;
  font-size:clamp(19px,1.8vw,25px);line-height:1;letter-spacing:-.01em;
  color:#E8E8E8;padding-top:clamp(26px,3vw,42px)}
.crr-job-in{border:1px solid #E8E8E8;border-radius:26px;
  padding:clamp(24px,2.8vw,40px) clamp(20px,2.4vw,36px)}
.crr-job-in h3{margin:0;color:#1f2229}
.crr-job-lead{margin:clamp(14px,1.5vw,20px) 0 0;
  font-size:17px;line-height:1.5;color:#3a3a3a;max-width:74ch}

.crr-cols{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  gap:clamp(24px,3vw,48px);margin-top:clamp(22px,2.4vw,34px)}
/* Надпись над перечнем. Это метка, а не заголовок и не абзац:
   набрана так же, как названия столбцов в подвале сайта. */
.crr-label{display:block;font-family:'Montserrat',sans-serif;
  font-weight:800;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:#8a8d94;margin:0 0 14px}
.crr-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.crr-list li{position:relative;padding-left:20px;
  font-size:17px;line-height:1.5;color:#3a3a3a}
.crr-list li::before{content:'';position:absolute;left:0;top:.56em;
  width:7px;height:7px;border-radius:2px;background:#f16428}

/* ── ЧЁРНАЯ КАРТОЧКА ОТКЛИКА ──────────────────────────────────
   Два последних раздела текста стоят рядом в одной карточке:
   слева отклик и ссылка, справа ответ тем, кому сейчас ничего
   не подошло. Кнопка стоит внутри своего текста, а не сама по
   себе в пустоте. */
.crr-end{background:#000;color:#fff;border-radius:26px;
  padding:clamp(28px,3.4vw,52px) clamp(22px,2.8vw,48px)
          clamp(30px,3.4vw,52px);
  box-shadow:0 10px 28px rgba(0,0,0,.34);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(26px,3.4vw,58px);align-items:start;scroll-margin-top:18px}
.crr-end h2{margin:0 0 clamp(16px,1.8vw,24px);color:#fff}
.crr-end p{margin:0 0 14px;font-size:17px;line-height:1.5;color:#b9b9b9}
.crr-end p:last-of-type{margin-bottom:0}
.crr-end-btn{margin-top:clamp(20px,2.2vw,28px)}

/* ── ШИРИНЫ ─────────────────────────────────────────────────── */
@media(max-width:1039px){
  .crr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:899px){
  .crr-hero{grid-template-columns:minmax(0,1fr);
    row-gap:clamp(22px,3vw,30px)}
  .crr-hero-main,.crr-hero-side,.crr-hero-btn{grid-column:1}
  .crr-hero-main{grid-row:1}
  .crr-hero-side{grid-row:2;align-self:start;
    border-left:0;border-top:1px solid rgba(255,255,255,.16);
    padding:clamp(20px,3vw,26px) 0 0}
  .crr-hero-btn{grid-row:3}
  /* Номер вакансии уходит над названием строкой и становится
     оранжевым: в поле слева места больше нет. */
  .crr-job{grid-template-columns:minmax(0,1fr);gap:0}
  .crr-num{font-size:12px;line-height:1;letter-spacing:.12em;
    color:#f16428;padding:0 0 10px}
  .crr-cols{grid-template-columns:minmax(0,1fr);
    gap:clamp(22px,3vw,30px)}
  .crr-end{grid-template-columns:minmax(0,1fr)}
}

@media(max-width:639px){
  .crr-grid{grid-template-columns:minmax(0,1fr)}
  .crr-hero-btn,.crr-end-btn{width:100%;justify-content:center}
}

/* ======================================================================
   ПЛАВНЫЙ ХОД ПО СТРАНИЦЕ
   Сделано так же, как на странице трансграничных переводов. Щелчок по
   ссылке «Посмотреть вакансии» доводит страницу до списка ходом, а не
   рывком, и человек не теряет место, где он был. Правило висит на самой
   странице, соседние страницы им не задеты. Если человек отключил
   движение в настройках, ход мгновенный.
   ====================================================================== */
.crr{scroll-behavior:smooth}
html:has(.crr){scroll-behavior:smooth}

@media (prefers-reduced-motion:reduce){
  .crr, html:has(.crr){scroll-behavior:auto}
}

/* Запас сверху при переходе по внутренней ссылке. Общий файл сайта даёт
   разделам 96 точек про запас под липкую шапку, а здесь шапка обычная,
   и этот запас показывал бы сверху хвост прошлого раздела. Селектор
   усилен нарочно, чтобы перебить общее правило, сам общий файл при этом
   не тронут. */
section[id].crr-sec, section[id].crr-end{scroll-margin-top:18px}