/*------------------------------------------------------------------
[ AB Row Fade — градиенти отгоре/отдолу на vc_row / vc_section ]

Променливите идват inline от ab_row_fade.php:
  --ab-row-fade-top, --ab-row-fade-bottom (px), --ab-row-fade-color
------------------------------------------------------------------*/

.ab-row-fade {
	position: relative;
}

/* WP Bakery слага на децата на .vc_parallax position:relative; z-index:1 —
   затова селекторът е с по-висока специфичност. Span-овете са преди
   колоните в DOM и със същия z-index, така че остават под съдържанието
   и над .vc_parallax-inner (z-index 0). */
.ab-row-fade > .ab-row-fade__top,
.ab-row-fade > .ab-row-fade__bottom,
.vc_parallax.ab-row-fade > .ab-row-fade__top,
.vc_parallax.ab-row-fade > .ab-row-fade__bottom {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1;
	display: block;
	pointer-events: none;
}

.ab-row-fade > .ab-row-fade__top {
	top: 0;
	height: var(--ab-row-fade-top, 180px);
	background: linear-gradient(to bottom, var(--ab-row-fade-color, #241D1D) 0%, rgba(0, 0, 0, 0) 100%);
}

.ab-row-fade > .ab-row-fade__bottom {
	bottom: 0;
	height: var(--ab-row-fade-bottom, 180px);
	background: linear-gradient(to top, var(--ab-row-fade-color, #241D1D) 0%, rgba(0, 0, 0, 0) 100%);
}

/* По-мек преход, където има color-mix */
@supports (background: color-mix(in srgb, red 50%, transparent)) {
	.ab-row-fade > .ab-row-fade__top {
		background: linear-gradient(
			to bottom,
			var(--ab-row-fade-color, #241D1D) 0%,
			color-mix(in srgb, var(--ab-row-fade-color, #241D1D) 60%, transparent) 40%,
			color-mix(in srgb, var(--ab-row-fade-color, #241D1D) 0%, transparent) 100%
		);
	}
	.ab-row-fade > .ab-row-fade__bottom {
		background: linear-gradient(
			to top,
			var(--ab-row-fade-color, #241D1D) 0%,
			color-mix(in srgb, var(--ab-row-fade-color, #241D1D) 60%, transparent) 40%,
			color-mix(in srgb, var(--ab-row-fade-color, #241D1D) 0%, transparent) 100%
		);
	}
}