/* ETOP Academy product hero background – v1.0.6 */

.etop-kc-product-hero-bg-fix .etop-article-header {
	position: relative;
	overflow: hidden;
	background: #f4f7fc;
	isolation: isolate;
}

.etop-kc-product-hero-bg-fix .etop-article-header-inner {
	position: relative;
	z-index: 3;
}

/*
 * БЯЛА ДЯСНА ЗОНА ПО ЦЯЛАТА ВИСОЧИНА НА HERO.
 * Това вече е върху .etop-article-header, не върху inner container,
 * затова няма сини ивици отгоре и отдолу.
 */
.etop-kc-product-hero-bg-fix .etop-article-header.etop-product-bg-ready::before {
	content: "";
	position: absolute;
	z-index: 0;

	top: 0;
	right: 0;
	bottom: 0;
	width: 46%;

	background: linear-gradient(
		90deg,
		rgba(244,247,252,0) 0%,
		rgba(248,250,253,.22) 10%,
		rgba(252,253,255,.58) 22%,
		rgba(255,255,255,.88) 34%,
		#fff 44%,
		#fff 100%
	);

	pointer-events: none;
}

/*
 * Продуктът е изместен по-вдясно и не влиза в текста.
 * background-size: contain пази целия продукт.
 */
.etop-kc-product-hero-bg-fix .etop-article-header.etop-product-bg-ready::after {
	content: "";
	position: absolute;
	z-index: 1;

	top: 0;
	right: -2.5%;
	bottom: 0;
	width: 43%;

	background-image: var(--etop-product-hero-image);
	background-repeat: no-repeat;
	background-position: 82% center;
	background-size: contain;

	opacity: .98;

	/*
	 * Fade САМО отляво.
	 * Вдясно, отгоре и отдолу няма fade.
	 */
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent 0%,
		rgba(0,0,0,.10) 10%,
		rgba(0,0,0,.34) 20%,
		rgba(0,0,0,.70) 31%,
		rgba(0,0,0,.92) 40%,
		#000 48%,
		#000 100%
	);
	mask-image: linear-gradient(
		90deg,
		transparent 0%,
		rgba(0,0,0,.10) 10%,
		rgba(0,0,0,.34) 20%,
		rgba(0,0,0,.70) 31%,
		rgba(0,0,0,.92) 40%,
		#000 48%,
		#000 100%
	);

	pointer-events: none;
}

.etop-kc-product-hero-bg-fix .etop-article-cover.etop-product-bg-source-cover {
	visibility: hidden !important;
}

/* Tablet */
@media (max-width: 1100px) {
	.etop-kc-product-hero-bg-fix .etop-article-header.etop-product-bg-ready::before {
		width: 44%;
	}

	.etop-kc-product-hero-bg-fix .etop-article-header.etop-product-bg-ready::after {
		width: 40%;
		right: -3%;
		background-position: 86% center;
	}
}

/* Mobile */
@media (max-width: 760px) {
	.etop-kc-product-hero-bg-fix .etop-article-header.etop-product-bg-ready::before {
		width: 66%;
	}

	.etop-kc-product-hero-bg-fix .etop-article-header.etop-product-bg-ready::after {
		width: 58%;
		right: -8%;
		opacity: .20;
		background-position: right center;
	}
}