/**
 * Хлебные крошки и геро-блок «О компании».
 * Макет: Figma 92:1512 и 92:1521 (about, канвас 1440, контент 1280).
 */

/* ---------- Хлебные крошки ---------- */

.sm-crumbs {
	padding-top: 14px;
}

.sm-crumbs__list {
	display: flex;
	align-items: center;
	gap: 11px;
	font-family: var(--sm-font-ui);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
}

.sm-crumbs__item {
	display: flex;
	align-items: center;
	gap: 11px;
}

.sm-crumbs__link {
	color: #9c9c9c;
	transition: color 0.2s ease;
}

.sm-crumbs__link:hover {
	color: var(--sm-ink);
}

/*
 * Уголок-разделитель в макете нарисован в поле 10x10, но сам штрих
 * выходит за него: файл 13x13. Сжатие до 10 делало линию тоньше и мельче,
 * поэтому svg рисуем в натуральную величину.
 */
.sm-crumbs__sep {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 10px;
	height: 10px;
}

.sm-crumbs__sep svg {
	width: 13px;
	height: 13px;
	overflow: visible;
}

.sm-crumbs__item--current {
	color: var(--sm-ink);
}

/* ---------- Геро-блок ---------- */

.sm-about-hero {
	padding-top: 19px;
}

/*
 * Тёмная плашка со скруглением 25 и подсветкой. В макете подсветка —
 * растровое размытое пятно; здесь это градиент: тот же рисунок,
 * но без лишних 500 кб картинки.
 */
.sm-about-hero__block {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	min-height: 570px;
	padding: 55px 0 55px 67px;
	overflow: hidden;
	background:
		radial-gradient(60% 70% at 78% 45%, rgba(139, 106, 224, 0.55) 0%, rgba(139, 106, 224, 0) 100%),
		radial-gradient(45% 55% at 30% 90%, rgba(104, 84, 168, 0.35) 0%, rgba(104, 84, 168, 0) 100%),
		linear-gradient(180deg, #1e1c25 0%, #322a4f 134%);
	border-radius: 25px;
}

.sm-about-hero__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 695px;
	max-width: 100%;
}

.sm-about-hero__title {
	display: flex;
	flex-direction: column;
	max-width: 666px;
	margin: 0;
	font-size: 45px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--sm-white);
}

.sm-about-hero__title-line--accent {
	color: var(--sm-yellow);
}

.sm-about-hero__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 8px;
	margin-top: 27px;
}

.sm-about-hero__tag {
	display: flex;
	align-items: center;
	min-height: 39px;
	padding: 9px 14px 13px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--sm-white);
	background: #3b364f;
	border-radius: 38px;
}

.sm-about-hero__text {
	max-width: 448px;
	margin-top: 76px;
	font-family: var(--sm-font-ui);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--sm-white);
}

.sm-about-hero__btn {
	width: 423px;
	max-width: 100%;
	margin-top: 25px;
	font-size: 12px;
}

/*
 * Иллюстрация выходит за правый край плашки — в макете она обрезается
 * скруглением блока, поэтому позиционируем абсолютом внутри overflow: hidden.
 */
.sm-about-hero__art {
	position: absolute;
	top: 60px;
	right: 55px;
	width: 491px;
	height: 491px;
	max-width: none;
}

/* ---------- Планшет и мобильные ---------- */

@media (max-width: 1200px) {
	.sm-about-hero__block {
		padding: 40px;
	}

	.sm-about-hero__art {
		right: 20px;
		width: 380px;
		height: 380px;
	}

	.sm-about-hero__body {
		width: 58%;
	}
}

@media (max-width: 900px) {
	.sm-about-hero__block {
		flex-direction: column;
		min-height: 0;
		padding: 32px 24px;
	}

	.sm-about-hero__body {
		width: 100%;
	}

	.sm-about-hero__title {
		font-size: 32px;
	}

	.sm-about-hero__text {
		margin-top: 32px;
	}

	.sm-about-hero__btn {
		width: 100%;
	}

	/* На узких экранах иллюстрация встаёт под текстом и перестаёт быть фоном. */
	.sm-about-hero__art {
		position: static;
		width: 280px;
		height: 280px;
		margin: 24px auto 0;
	}
}

@media (max-width: 600px) {
	.sm-about-hero__title {
		font-size: 26px;
	}

	.sm-about-hero__tag {
		min-height: 34px;
		padding: 7px 12px 9px;
		font-size: 14px;
	}
}