/**
 * Стили UI-блока: Главный баннер-слайдер
 *
 * @package medexpress-by-fin-code
 */

.me-banner2 {
	position: relative;
	overflow: hidden;
}

/* лента слайдов (перелистывание влево/вправо) */

.me-banner2__track {
	display: flex;
	transition: transform 0.5s ease;
	will-change: transform;
	min-height: 538px;
}

.me-banner2__slide {
	position: relative;
	flex: 0 0 100%;
	min-width: 100%;
	min-height: 680px;
}

/* изображение слайда: на десктопе — фон на всю площадь */

.me-banner2__media {
	position: absolute;
	inset: 0;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* промо-карточка — левый верхний угол */

.me-banner2__card {
	position: absolute;
	top: 40px;
	left: 40px;
	width: 521px;
	max-width: calc(100% - 80px);
	background: var(--primary-color);
	color: #fff;
	padding: 40px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.me-banner2__title {
	color: #fff;
	margin: 0;
}

.me-banner2__text {
	color: rgba(255, 255, 255, 0.85);
	margin: 16px 0 0;
	max-width: 420px;
}

.me-banner2__card .me-btn {
	margin-top: 45px;
}

/* нижняя строка-переключатель (поверх изображения, белая) */

.me-banner2__inner {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 40px;
	z-index: 2;
}

.me-banner2__tabs {
	display: flex;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.me-banner2__tab {
	flex: 1;
	padding: 18px 10px 15px;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	margin-bottom: -1px;
	font-family: var(--font-family);
	font-size: 18px;
	line-height: 0.92;
	color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.me-banner2__tab.is-active {
	color: #fff;
	border-bottom-color: #fff;
}

@media (min-width: 769px) {
	.me-banner2__tab:hover {
		background: rgba(255, 255, 255, 0.08);
		color: #fff;
	}
}

/* средние разрешения */

@media (max-width: 1100px) {
	.me-banner2__slide {
		min-height: 520px;
	}
}

/* mobile */

@media (max-width: 768px) {
	/* высота слайдера = видимая область экрана под фиксированной шапкой */
	.me-banner2 {
		height: calc(100vh - var(--me-alert-height) - var(--mobile-header-height));
		display: flex;
		flex-direction: column;
	}

	/* persons.php (главная / «Частным лицам»): вторая строка шапки на мобилке */
	.me-header--home-mobile-sub ~ .me-content .me-banner2 {
		height: calc(550px + 15vw - 2vh);
		transition: height 0.3s ease;
	}

	.me-banner2__track {
		flex: 1 1 auto;
		min-height: 0;
	}

	.me-banner2__slide {
		box-sizing: border-box;
		min-height: 0;
		height: 100%;
		display: flex;
		flex-direction: column;
		padding: 0;
	}

	/* изображение над текстовым блоком, занимает оставшуюся высоту, cover */
	.me-banner2__media {
		position: static;
		flex: 1 1 auto;
		min-height: 0;
		background-position: center center;
	}

	/* синяя карточка во всю ширину, без белых краёв, высота по содержимому */
	.me-banner2__card {
		position: static;
		flex: 0 0 auto;
		width: auto;
		max-width: unset;
		padding: 32px 16px;
		gap: 0;
	}

	.me-banner2__card .me-btn {
		margin-top: 32px;
		width: 100%;
	}

	/* нижняя строка-переключатель — продолжение синего блока, фикс. высота */
	.me-banner2__inner {
		position: static;
		flex: 0 0 auto;
		height: 64px;
		display: flex;
		align-items: center;
		margin: 0;
		padding: 0;
		background: var(--primary-color);
	}

	/* отступ переносим на саму линию (скроллится вместе с табами:
	   при прокрутке табы доходят до краёв, но в начале/конце остаётся отступ) */
	.me-banner2__tabs {
		width: 100%;
		gap: 28px;
		padding: 0 16px;
		border-bottom-color: rgba(255, 255, 255, 0.2);
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.me-banner2__tabs::-webkit-scrollbar {
		display: none;
	}

	.me-banner2__tab {
		flex: 0 0 auto;
		padding: 0 0 16px;
		font-size: 16px;
		color: rgba(255, 255, 255, 0.6);
	}

	.me-banner2__tab.is-active {
		color: #fff;
		border-bottom-color: #fff;
	}
}