/* Слайды первого экрана.
   Разметка: templates/node/node--hero-slide.html.twig
   Фон приходит инлайном из поля материала, поэтому прежние .top-banner1—4
   с background-image в CSS больше не участвуют. */

.hero-slide {
	background-position: center;
}

.hero-slide__title {
	font-size: clamp(30px, 3.6vw, 54px);
	line-height: 1.05;
	text-transform: uppercase;
}

.hero-slide__subtitle {
	font-size: clamp(20px, 2.4vw, 38px);
	line-height: 1.15;
	text-transform: none;
	margin-top: 0.3em;
	max-width: 22em;
}

/* Белая плашка: первая строка акцентная, остальное обычным текстом */
.hero-slide__note {
	width: max-content;
	max-width: 34em;
	margin-top: 1.1em;
	padding: 1em 2em;
	background-color: #ffffff;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.6em;
	font-weight: 400;
	text-transform: none;
}

.hero-slide__note-accent {
	display: block;
	font-size: 21px;
	font-weight: 700;
	color: #f79521;
}

.hero-slide__note-text {
	color: #000000;
}

/* Ссылка слайда — третье действие после «Вызвать замерщика» и «Расчет
   стоимости». Кнопкой она спорила с ними: три почти одинаковых кнопки в
   одном экране не дают понять, что здесь главное. Поэтому текстовая ссылка. */
.hero-slide__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 1.1em;
	padding-bottom: 3px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	color: #ffffff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.45);
	transition: color 0.2s, border-color 0.2s;
}

.hero-slide__link::after {
	content: "";
	width: 7px;
	height: 7px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	margin-top: 1px;
}

.hero-slide__link:hover,
.hero-slide__link:focus-visible {
	color: #f79521;
	border-bottom-color: #f79521;
}

@media (max-width: 900px) {
	.hero-slide__note {
		width: auto;
		padding: 0.8em 1.2em;
	}

	.hero-slide__subtitle {
		max-width: none;
	}
}