/* =========================================================
   Первый экран
   ========================================================= */

.rs-hero {
	position: relative;

	/* Ширина совпадает с серым блоком меню */
	width: calc(100% - 80px);
	max-width: 1510px;
	min-height: 640px;

	margin: 14px auto 0;

	display: flex;
	align-items: center;
	overflow: hidden;

	border-radius: 8px;

	background-color: #657985;
	color: #ffffff;
}

.rs-hero__background {
	position: absolute;
	inset: 0;
}

.rs-hero__background picture,
.rs-hero__background img {
	display: block;
	width: 100%;
	height: 100%;
}

.rs-hero__background img {
	object-fit: cover;
	object-position: center center;
}

/* Плавный переход от меню и затемнение под текстом */
.rs-hero__background::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;

	background:
		linear-gradient(
			180deg,
			rgba(101, 121, 133, 0.48) 0%,
			rgba(101, 121, 133, 0.36) 10%,
			rgba(87, 107, 120, 0.24) 22%,
			rgba(70, 90, 103, 0.12) 36%,
			rgba(50, 70, 83, 0.04) 48%,
			rgba(50, 70, 83, 0) 58%
		),
		linear-gradient(
			90deg,
			rgba(50, 70, 83, 0.90) 0%,
			rgba(45, 65, 78, 0.75) 28%,
			rgba(38, 56, 69, 0.42) 43%,
			rgba(38, 56, 69, 0.14) 58%,
			rgba(38, 56, 69, 0) 76%
		);
}

/* =========================================================
   Содержимое
   ========================================================= */

.rs-hero__container {
	position: relative;
	z-index: 2;

	width: 100%;
	max-width: none;
	margin: 0;

	padding: 85px 40px;
}

.rs-hero__content {
	max-width: 650px;
}

.rs-hero__eyebrow {
	margin: 0 0 22px;

	color: #ffffff;

	font-size: 14px;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.rs-hero h1 {
	max-width: 650px;
	margin: 0;

	color: #ffffff;

	font-size: clamp(42px, 3.7vw, 60px);
	line-height: 1.12;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.rs-hero__text {
	max-width: 650px;
	margin: 26px 0 0;

	color: rgba(255, 255, 255, 0.88);

	font-size: 18px;
	line-height: 1.65;
}

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

.rs-hero__actions {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;

	gap: 18px;
	margin-top: 36px;
}

.rs-hero__actions .rs-btn {
	min-width: 150px;
	min-height: 52px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	margin: 0;
	padding: 14px 28px;

	border: 1px solid #d71920;
	border-radius: 5px;

	background-color: #d71920;
	color: #ffffff;

	font-size: 15px;
	line-height: 1.2;
	font-weight: 600;
	text-align: center;
	white-space: nowrap;

	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		transform 0.25s ease;
}

.rs-hero__consult {
	min-height: 52px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 10px;
	margin: 0;
	padding: 13px 25px;

	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 5px;

	color: #ffffff;

	font-size: 15px;
	line-height: 1.2;
	font-weight: 600;
	text-align: center;
	white-space: nowrap;

	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		color 0.25s ease;
}

.rs-hero__consult span {
	color: #ffffff;
	font-size: 20px;
	line-height: 1;
}

/* Наведение только на устройствах с мышью */
@media (any-hover: hover) {
	.rs-hero__actions .rs-btn:hover {
		border-color: #b91218;
		background-color: #b91218;
		color: #ffffff;
		transform: translateY(-2px);
	}

	.rs-hero__consult:hover {
		border-color: #ffffff;
		background-color: #ffffff;
		color: #17212b;
	}

	.rs-hero__consult:hover span {
		color: #d71920;
	}
}

/* =========================================================
   Небольшие компьютеры
   ========================================================= */

@media (max-width: 1366px) {
	.rs-hero {
		width: calc(100% - 60px);
	}

	.rs-hero__container {
		padding-right: 30px;
		padding-left: 30px;
	}
}

/* =========================================================
   Планшеты
   ========================================================= */

@media (max-width: 992px) {
	.rs-hero {
		width: calc(100% - 30px);
		min-height: 600px;

		margin-top: 12px;
		border-radius: 8px;
	}

	.rs-hero__background img {
		object-position: 60% center;
	}

	.rs-hero__background::after {
		background:
			linear-gradient(
				180deg,
				rgba(101, 121, 133, 0.52) 0%,
				rgba(101, 121, 133, 0.40) 12%,
				rgba(87, 107, 120, 0.27) 25%,
				rgba(70, 90, 103, 0.14) 40%,
				rgba(50, 70, 83, 0.05) 53%,
				rgba(50, 70, 83, 0) 64%
			),
			linear-gradient(
				90deg,
				rgba(50, 70, 83, 0.94) 0%,
				rgba(45, 65, 78, 0.82) 38%,
				rgba(38, 56, 69, 0.48) 60%,
				rgba(38, 56, 69, 0.10) 84%,
				rgba(38, 56, 69, 0) 100%
			);
	}

	.rs-hero__container {
		padding: 70px 25px;
	}

	.rs-hero__content {
		max-width: 560px;
	}

	.rs-hero h1 {
		max-width: 560px;
		font-size: 46px;
		line-height: 1.12;
	}

	.rs-hero__text {
		max-width: 540px;
		margin-top: 22px;
		font-size: 17px;
		line-height: 1.6;
	}

	.rs-hero__actions {
		margin-top: 30px;
	}
}

/* =========================================================
   Телефоны
   ========================================================= */

@media (max-width: 767px) {
	.rs-hero {
		width: calc(100% - 16px);
		min-height: 650px;

		margin-top: 8px;

		align-items: flex-end;
		border-radius: 6px;
	}

	.rs-hero__background img {
		object-position: 68% center;
	}

	.rs-hero__background::after {
		background:
			linear-gradient(
				180deg,
				rgba(101, 121, 133, 0.55) 0%,
				rgba(101, 121, 133, 0.43) 12%,
				rgba(87, 107, 120, 0.29) 26%,
				rgba(70, 90, 103, 0.24) 42%,
				rgba(50, 70, 83, 0.58) 64%,
				rgba(38, 56, 69, 0.90) 84%,
				rgba(38, 56, 69, 0.97) 100%
			),
			linear-gradient(
				90deg,
				rgba(50, 70, 83, 0.55) 0%,
				rgba(50, 70, 83, 0.24) 62%,
				rgba(50, 70, 83, 0) 100%
			);
	}

	.rs-hero__container {
		padding: 180px 15px 40px;
	}

	.rs-hero__content {
		max-width: 100%;
	}

	.rs-hero__eyebrow {
		margin-bottom: 14px;

		font-size: 11px;
		line-height: 1.4;
		letter-spacing: 0.1em;
	}

	.rs-hero h1 {
		max-width: 100%;

		font-size: 30px;
		line-height: 1.14;
		letter-spacing: -0.01em;

		overflow-wrap: anywhere;
		word-break: normal;
	}

	.rs-hero__text {
		max-width: 100%;
		margin-top: 18px;

		font-size: 15px;
		line-height: 1.55;
	}

	.rs-hero__actions {
		width: 100%;
		margin-top: 25px;
		gap: 12px;
	}

	.rs-hero__actions .rs-btn,
	.rs-hero__consult {
		width: 100%;
		min-height: 50px;

		padding: 13px 18px;

		font-size: 14px;
	}

	.rs-hero__consult span {
		font-size: 18px;
	}
}

/* =========================================================
   Небольшие телефоны
   ========================================================= */

@media (max-width: 420px) {
	.rs-hero {
		width: calc(100% - 12px);
		min-height: 650px;

		margin-top: 6px;
		border-radius: 6px;
	}

	.rs-hero__background img {
		object-position: 67% center;
	}

	.rs-hero__container {
		padding: 130px 12px 30px;
	}

	.rs-hero__eyebrow {
		margin-bottom: 10px;
		font-size: 10px;
	}

	.rs-hero h1 {
		max-width: 100%;

		font-size: 27px;
		line-height: 1.16;
		letter-spacing: -0.01em;

		overflow-wrap: anywhere;
		word-break: normal;
	}

	.rs-hero__text {
		margin-top: 14px;

		font-size: 13px;
		line-height: 1.5;
	}

	.rs-hero__actions {
		margin-top: 18px;
		gap: 10px;
	}

	.rs-hero__actions .rs-btn,
	.rs-hero__consult {
		width: 100%;
		min-height: 46px;

		padding: 11px 14px;

		font-size: 13px;
	}
}