/*
 * talentrocks/promo-banner — перенос solutions/adaptation/banner/banner.scss
 * (+ .adaptation-page__header-wrapper из solutions/adaptation/adaptation.scss).
 *
 * Переменные: --tr-promo-banner-height, --tr-promo-banner-bg, --tr-promo-banner-image.
 */

.tr-promo-banner {
	--tr-promo-banner-height: 60px;
	display: block;
	position: relative;
	z-index: 99;
	width: 100%;
	height: var(--tr-promo-banner-height);
	box-sizing: border-box;
	background-color: var(--tr-promo-banner-bg, var(--tr-violet, #670dce));
	background-image: var(--tr-promo-banner-image, url(../../assets/images/promo-banner/banner-image.png));
	background-image: var(--tr-promo-banner-image, image-set(url(../../assets/images/promo-banner/banner-image.webp) 1x, url(../../assets/images/promo-banner/banner-image@2x.webp) 2x));
	background-position: left center;
	background-size: contain;
	background-repeat: no-repeat;
	color: #ffffff;
	text-decoration: none;
	font-family: var(--tr-font-ui, 'Manrope', sans-serif);
}

.tr-promo-banner__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	height: 100%;
}

/* Не заголовок, а просто текст: на странице уже есть свои h1/h2 (FRONT-2127) */
.tr-promo-banner__title {
	margin: 0;
	font-family: var(--tr-font-ui, 'Manrope', sans-serif);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.5;
	color: #ffffff;
}

.tr-promo-banner .tr-promo-banner__button {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	padding: 12px 24px;
	font-size: 12px;
	line-height: 1;
	pointer-events: none;
}

.tr-promo-banner__button svg {
	position: relative;
	top: 1px;
	margin-left: 8px;
}

/*
 * Шапка после плашки: не накладывается на неё, а идёт следом в потоке.
 * Обёртка части шаблона липкая с отрицательным top на высоту плашки — при прокрутке плашка
 * уезжает, а шапка прилипает к верху (аналог .adaptation-page__header-wrapper в legacy).
 */
.wp-block-template-part:has(> .tr-promo-banner) {
	position: sticky;
	/* --wp-admin--admin-bar--height задаёт WordPress, когда показан админ-бар (залогиненный пользователь) */
	top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--tr-promo-banner-height, 60px));
	z-index: 100;
}

.tr-promo-banner ~ .tr-header {
	position: relative !important;
	top: 0 !important;
}

/*
 * Выпадающие списки меню (position: fixed; top: 90px) с плашкой опускаются на её высоту,
 * пока страница не прокручена (шапка без .fixed); после прокрутки — как обычно
 * (перенос .adaptation-page__header-wrapper header .submenu_block из legacy).
 */
.tr-promo-banner ~ .tr-header .submenu_block {
	top: calc(var(--tr-promo-banner-height, 60px) + 90px + var(--wp-admin--admin-bar--height, 0px));
}

.tr-promo-banner ~ .tr-header.fixed .submenu_block {
	top: calc(90px + var(--wp-admin--admin-bar--height, 0px));
}

@media only screen and (max-width: 1160px) {
	/* В мобильном меню подменю — аккордеон в потоке */
	.tr-promo-banner ~ .tr-header .submenu_block,
	.tr-promo-banner ~ .tr-header.fixed .submenu_block {
		top: 0;
	}
}

/*
 * Первая секция после шапки в потоке: hero-блоки резервируют место под наложенную шапку
 * (padding-top: 182px у .adaptation__welcome__inner), с плашкой шапка уже в потоке —
 * оставляем 40px, как .adaptation-page .adaptation__welcome__inner в legacy.
 */
.wp-block-template-part:has(> .tr-promo-banner) + main .adaptation__welcome__inner {
	padding-top: 40px;
}

@media only screen and (max-width: 667px) {
	.tr-promo-banner--hide-phone {
		display: none;
	}

	.wp-block-template-part:has(> .tr-promo-banner--hide-phone) {
		top: var(--wp-admin--admin-bar--height, 0px);
	}
}

/* В редакторе показываем плашку статично, без ссылки */
.editor-styles-wrapper .tr-promo-banner {
	cursor: default;
}