/* ===================================================================
   РЕДИЗАЙН 2026 — страница «Карьера / Вакансии» (/career/)
   Скоуп: .rd-career . Токены/шрифты — из redesign.css.
   =================================================================== */

.rd-career {
	--cr-red: #E1011C;

	background: var(--rd-bg);
	color: #fff;
	font-family: 'Roboto Flex', Arial, sans-serif;
	overflow: hidden;
}
.rd-career .rd-cr-h2 {
	font-family: var(--rd-font-head);
	text-transform: uppercase;
	font-weight: 900;
	line-height: .98;
	letter-spacing: .5px;
	font-size: clamp(32px, 4vw, 56px);
	margin: 0 0 48px;
}
.rd-career .rd-cr-h2--center { text-align: center; }

/* ---- Кнопки-пилюли ---- */
.rd-career .rd-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 30px;
	border-radius: 100px;
	font-family: 'Roboto Flex', Arial, sans-serif;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .5px;
	line-height: 1;
	border: 0;
	cursor: pointer;
	transition: transform .2s ease, background .2s ease, color .2s ease;
	text-decoration: none;
}
.rd-career .rd-btn svg { display: block; }
.rd-career .rd-btn--white { background: #fff; color: #151515; }
.rd-career .rd-btn--white:hover { transform: translateY(-2px); background: #ececec; }
.rd-career .rd-btn--accent { background: var(--rd-accent); color: #fff; }
.rd-career .rd-btn--accent:hover { transform: translateY(-2px); background: #8f2fe6; }

/* ===================================================================
   1. HERO
   =================================================================== */
.rd-cr-hero {
	position: relative;
	overflow: hidden;
	/* фон — картинка-паттерн (Clip path group.png) на фиолетовом */
	background: var(--rd-accent) url("../img/redesign/career/hero_bg.png") center / cover no-repeat;
}
.rd-cr-hero__in {
	position: relative;
	min-height: clamp(400px, 26.5vw, 508px);   /* по макету hero ~508px */
}
.rd-cr-hero__left {
	position: relative;
	z-index: 2;
	max-width: 600px;
	padding: 52px 0 64px;               /* крошки — 52px от верха hero (по макету) */
}
.rd-cr-crumbs { display: flex; align-items: center; gap: 20px; font-size: 16px; font-weight: 400; margin-bottom: 48px; }
.rd-cr-crumbs a, .rd-cr-crumbs span { color: rgba(255,255,255,.7); text-decoration: none; }
.rd-cr-crumbs a:hover { color: #fff; }
.rd-cr-crumbs__cur { color: #fff; }
.rd-cr-hero__title {
	font-family: var(--rd-font-head);
	text-transform: uppercase;
	font-weight: 900;
	line-height: .95;
	letter-spacing: .5px;
	font-size: clamp(40px, 5vw, 76px);
	margin: 0 0 26px;
	color: #fff;
}
.rd-cr-hero__lead {
	max-width: 460px;
	font-size: 17px;
	line-height: 1.5;
	color: rgba(255,255,255,.92);
	margin: 0;
}
/* Блок маскот+бейдж — единая группа справа (масштабируются вместе, не расходятся при зуме).
   Позиции маскота и бейджа заданы в % от .rd-cr-hero__media. */
.rd-cr-hero__media {
	position: absolute;
	top: 0; bottom: 0; right: 0;
	width: 60%;
	pointer-events: none;
	z-index: 1;
}
/* маскот — готовая вырезка «по пояс» dino_hero_crop.png (558×496 = 1:1 с макетом), пояс по низу hero */
.rd-cr-hero__dino {
	position: absolute;
	bottom: 0;
	left: 10%;
	width: 48.5%;
	height: auto;
	z-index: 2;                /* поверх бейджа → лапа спереди */
	display: block;
}
/* бейдж «Ждём и тебя!» — картинка wait_you.png (434×182), ЗА лапой маскота */
.rd-cr-hero__badge {
	position: absolute;
	right: 13%;
	bottom: 18%;
	width: 37%;
	height: auto;
	z-index: 1;                /* под маскотом */
	display: block;
}

/* ===================================================================
   2. О КОМПАНИИ
   =================================================================== */
.rd-cr-about { padding: 90px 0 100px; }
/* 2×2 сетка (по макету): ряд 1 = [фото | лид+кнопка], ряд 2 = [текст+HH+HR | счётчики].
   Колонки НЕравные: левая (фото) уже правой (замер макета 750:809, промежуток ~81).
   align-items:start + row-gap → нижний ряд авто-выравнивается: текст слева на уровне «>100» справа. */
.rd-cr-about__grid {
	display: grid;
	grid-template-columns: 650fr 809fr;      /* по макету левая колонка уже правой */
	column-gap: clamp(48px, 8.2vw, 150px);
	row-gap: 100px;                           /* по макету зазор низ-фото→текст ≈63px */
	align-items: start;
}
.rd-cr-about__cell-photo { grid-column: 1; grid-row: 1; }
/* intro тянется на всю высоту ряда (=высота фото), кнопка прижата вниз — как на макете */
.rd-cr-about__intro     { grid-column: 2; grid-row: 1; align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; }
.rd-cr-about__more      { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; }
.rd-cr-counters         { grid-column: 2; grid-row: 2; }

/* фото-карусель */
.rd-cr-gallery {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	aspect-ratio: 1 / 1;            /* по макету фото ~750×750 (квадрат) */
	background: #0e0e0e;
}
.rd-cr-gallery__track {
	display: flex;
	height: 100%;
	transition: transform .4s ease;
}
.rd-cr-gallery__slide { flex: 0 0 100%; height: 100%; }
.rd-cr-gallery__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-cr-gallery__arr {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 0;
	background: var(--rd-accent);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background .2s ease;
}
.rd-cr-gallery__arr:hover { background: #8f2fe6; }
.rd-cr-gallery__arr--prev { left: 16px; }
.rd-cr-gallery__arr--next { right: 16px; }

/* крупный лид (правая колонка) */
.rd-cr-about__lead p {
	margin: 0 0 40px;
	font-family: var(--rd-font-head);
	font-weight: 700;
	line-height: 1.15;
	font-size: clamp(20px, 2vw, 32px);
	color: #fff;
}
.rd-cr-about__lead p + p {
	font-family: 'Roboto Flex', Arial, sans-serif;
	font-weight: 500;
	font-size: 24px;
	line-height: 1.15;
	color: rgba(255,255,255);
}
/* кнопка «Посмотреть вакансии» — прижата к низу колонки (≈75px над низом фото), как на макете */
.rd-cr-about__scroll { align-self: flex-start; margin: auto 0 75px; }

/* мелкий текст (левая колонка) */
.rd-cr-about__text p {
	margin: 0 0 40px;
	font-size: 16px;
	line-height: 1.55;
	color: rgba(255,255,255, 1);
}
.rd-cr-about__hh { align-self: flex-start; margin: 8px 0 48px; }

/* HR-карточка — по макету уже колонки (~520px), не на всю ширину */
.rd-cr-hr {
	box-sizing: border-box;
	align-self: flex-start;
	width: 520px;
	max-width: 100%;
	background: var(--rd-accent);
	border-radius: 24px;
	padding: 30px 34px 34px;
}
.rd-cr-hr__name {
	font-family: 'Roboto Flex', Arial, sans-serif;
	text-transform: none;
	font-weight: 700;
	font-size: 32px;
	margin-bottom: 24px;
}
.rd-cr-hr__rows { display: flex; gap: 56px; flex-wrap: wrap; }
.rd-cr-hr__label { display: block; font-size: 14px; color: rgba(255,255,255,.75); margin-bottom: 8px; }
.rd-cr-hr__val { font-size: 22px; font-weight: 700; color: #fff; text-decoration: none; }
.rd-cr-hr__val:hover { text-decoration: underline; }

/* счётчики */
.rd-cr-counters { display: flex; flex-direction: column; gap: 40px; }
.rd-cr-counter__num {
	font-family: var(--rd-font-head);
	text-transform: uppercase;
	font-weight: 900;
	line-height: 1;
	font-size: clamp(48px, 5vw, 84px);
	margin-bottom: 14px;
}
.rd-cr-counter__label {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.35;
	color: rgba(255,255,255,.7);
}

/* ===================================================================
   3. НАШИ ВАКАНСИИ
   =================================================================== */
.rd-cr-vac { padding: 30px 0 100px; }
.rd-vac__tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 48px;
}
.rd-vac__tab {
	border: 0;
	background: #262626;
	color: rgba(255,255,255,.85);
	font-family: 'Roboto Flex', Arial, sans-serif;
	text-transform: none;
	font-weight: 600;
	font-size: 16px;
	padding: 14px 28px;
	border-radius: 100px;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
	white-space: nowrap;
}
.rd-vac__tab:hover { background: #333; }
.rd-vac__tab.is-active { background: var(--rd-accent); color: #fff; }

.rd-vac__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.rd-vac {
	position: relative;
	display: block;
    background: #212121;
    border: 1px solid #464545;
	border-radius: 18px;
	padding: 36px 36px 40px;
	min-height: 300px;
	text-decoration: none;
	color: inherit;
	transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.rd-vac:hover { border-color: var(--rd-accent); transform: translateY(-3px); background: #202020; }
.rd-vac__title {
	font-family: var(--rd-font-head);
	text-transform: uppercase;
	font-weight: 900;
	line-height: 1;
	font-size: 24px;
	margin: 0 0 20px;
	color: #fff;
	max-width: 80%;
}
.rd-vac__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 44px; }
.rd-vac__tag {
	background: #151515;

	color: rgba(255,255,255,.85);
	font-size: 14px;
	padding: 9px 16px;
	border-radius: 8px;
	white-space: nowrap;
}
.rd-vac__meta { list-style: none; margin: 0; padding: 0; }
.rd-vac__meta li {
	font-size: 15px;
	line-height: 1.4;
	color: rgba(255,255,255,.6);
	margin-bottom: 10px;
	max-width: 78%;
}
.rd-vac__meta li:last-child { margin-bottom: 0; }
.rd-vac__go {
	position: absolute;
	right: 30px;
	bottom: 34px;
	width: 46px; height: 46px;
	border-radius: 50%;
	background: #151515;

	color: #fff;
	display: flex; align-items: center; justify-content: center;
	transition: background .2s ease;
}
.rd-vac:hover .rd-vac__go { background: var(--rd-accent); }

.rd-vac__empty {
	grid-column: 1 / -1;
	text-align: center;
	color: rgba(255,255,255,.55);
	font-size: 17px;
	padding: 30px 0;
}

/* ===================================================================
   4. МЫ ИЩЕМ ЛЮДЕЙ
   =================================================================== */
.rd-cr-cta { padding: 90px 0 100px; background: #212121; }
.rd-cr-cta__in { text-align: center; max-width: 970px; margin: 0 auto; }
.rd-cr-cta__title {
	font-family: var(--rd-font-head);
	text-transform: uppercase;
	font-weight: 900;
	line-height: 1;
	font-size: clamp(30px, 4vw, 52px);
	margin: 0 0 26px;
	color: #fff;
}
.rd-cr-cta__accent { color: var(--rd-accent); }
.rd-cr-cta__text {
	max-width: 460px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.55;
	color: rgba(255,255,255, 1);
}

/* ===================================================================
   5. ДВЕ КОЛОНКИ (HH.RU / Советы)
   =================================================================== */
.rd-cr-links { display: grid; grid-template-columns: 1fr 1fr; }
.rd-cr-links__col {
	position: relative;
	overflow: hidden;
	min-height: clamp(680px, 64vw, 930px);   /* по макету блок высокий (~1030px) */
	display: flex;
	flex-direction: column;
	align-items: center;                       /* контент по центру по горизонтали */
	justify-content: flex-start;
	text-align: center;
	padding: clamp(120px, 16vw, 250px) clamp(24px, 4vw, 80px) 60px; /* контент в верхней-средней части */
}
.rd-cr-links__col--hh { background: var(--cr-red); }
.rd-cr-links__col--tips { background: #101010; }
/* Фон HH-блока — картинка hh_ru.png (вместо крупного текста «hh.ru») */
.rd-cr-links__bg {
	position: absolute;
	inset: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
}
.rd-cr-links__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.rd-cr-links__sup {
	display: block;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1px;
	color: rgba(255,255,255,.85);
	margin-bottom: 22px;
}
.rd-cr-links__h {
	font-family: var(--rd-font-head);
	text-transform: uppercase;
	font-weight: 900;
	line-height: .95;
	font-size: clamp(36px, 4.5vw, 52px);
	margin: 0 0 40px;
	color: #fff;
}
.rd-cr-links__dino {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: clamp(300px, 35vw, 540px);
	height: auto;
	z-index: 1;
	pointer-events: none;
}

/* ===================================================================
   АДАПТИВ
   =================================================================== */
/* узкие десктопы — сужаем блок маскота (сам маскот+бейдж уходят правее и меньше,
   их взаимное расположение сохраняется — бейдж остаётся за лапой) */
@media (max-width: 1600px) {
	.rd-cr-hero__media { width: 52%; }
}

@media (max-width: 1149px) {
	.rd-cr-about__grid { gap: 40px; }
	.rd-vac__grid { grid-template-columns: repeat(2, 1fr); }
	.rd-cr-hero__media { width: 46%; }
}

@media (max-width: 900px) {
	.rd-cr-about__lead p + p {font-size: 14px;}
	.rd-cr-hero__in { min-height: 0; }
	.rd-cr-hero__left { max-width: 100%; padding: 28px 0 0; }
	.rd-cr-crumbs { margin-bottom: 24px; font-size: 14px; }
	.rd-cr-hero__title { font-size: clamp(30px, 8.5vw, 40px); overflow-wrap: break-word; }
	.rd-cr-hero__lead { max-width: 100%; }
	/* на моб. (по макету): СНАЧАЛА бейдж «Ждём и тебя!», НИЖЕ дино — оба в потоке, по центру */
	.rd-cr-hero__media { position: relative; inset: auto; width: auto; margin-top: 20px; min-height: 0;
		display: flex; flex-direction: column; align-items: center; gap: 6px; }
	.rd-cr-hero__badge { position: static; order: -1; right: auto; bottom: auto; width: clamp(210px, 64vw, 330px); z-index: 2; }
	.rd-cr-hero__dino { position: static; bottom: auto; left: auto; width: auto; max-height: 420px; z-index: 1; display: block; }

	.rd-cr-about { padding: 56px 0 64px; }
	.rd-cr-about__grid { grid-template-columns: 1fr; column-gap: 0; row-gap: 0; }
	/* моб. порядок (по макету): фото → крупный лид → счётчики → мелкий текст+HH+HR.
	   Блочная перестановка через order (без display:contents — надёжнее для iOS Safari).
	   Кнопка «Посмотреть вакансии» на моб. скрыта. */
	.rd-cr-about__cell-photo { grid-column: 1; grid-row: auto; order: 1; }
	.rd-cr-about__intro      { grid-column: 1; grid-row: auto; order: 2; }
	.rd-cr-counters          { grid-column: 1; grid-row: auto; order: 3; flex-direction: column; gap: 32px; margin: 0 0 36px; }
	.rd-cr-about__more       { grid-column: 1; grid-row: auto; order: 4; }
	.rd-cr-about__intro { align-self: stretch; }
	.rd-cr-gallery { aspect-ratio: 4 / 3; margin-bottom: 28px; }
	.rd-career .rd-cr-about__scroll { display: none; }
	.rd-cr-hr__rows { gap: 40px; }
	/* HR-карточка на моб — на всю ширину экрана */
	.rd-cr-hr {
		width: auto;
		align-self: stretch;
		margin: 0 calc(-1 * var(--rd-gutter)) 0;
		border-radius: 0;
		padding: 40px var(--rd-gutter) 44px;
	}

	.rd-cr-h2 { margin-bottom: 32px; }

	.rd-cr-vac { padding: 10px 0 64px; }
	.rd-vac__tabs {
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		margin: 0 calc(-1 * var(--rd-gutter)) 36px;
		padding: 0 var(--rd-gutter) 6px;
		scrollbar-width: none;
	}
	.rd-vac__tabs::-webkit-scrollbar { display: none; }
	.rd-vac__grid { grid-template-columns: 1fr; gap: 18px; }
	.rd-vac { min-height: 0; padding: 28px 26px 32px; }
	.rd-vac__title, .rd-vac__meta li { max-width: 74%; }
	.rd-vac__tags { margin-bottom: 30px; }

	.rd-cr-cta { padding: 64px 0 64px; }

	.rd-cr-links { grid-template-columns: 1fr; }
	.rd-cr-links__col { min-height: 605px; padding: 64px 24px 40px; }
	.rd-cr-links__bg {    top: 200px;} 
	.rd-cr-links__col--tips { min-height: 620px; }
	.rd-cr-links__dino { width: clamp(200px, 60%, 320px); }
}