/**
 * PX Section Background - Static CSS
 *
 * Color mode: top 50% via ::before, bottom 50% via ::after.
 * Pattern mode: single ::before at full height.
 *
 * Uses isolation: isolate + z-index: 0/1 to keep pseudo-elements
 * behind content regardless of parent stacking context.
 */

.px-section-bg {
	position: relative;
	isolation: isolate;
}

/* Lift content above the background pseudo-elements */
.px-section-bg > * {
	position: relative;
	z-index: 1;
}

/* Top half — base structure (activates when any --top- class is present) */
[class*="px-section-bg--top-"]::before {
	content: "" !important;
	position: absolute;
	top: 0;
	left: 0;
	display: block !important;
	width: 100%;
	height: calc(50% + var(--bg-split-offset, 0px));
	z-index: 0;
}

/* Bottom half — base structure */
[class*="px-section-bg--bottom-"]::after {
	content: "" !important;
	position: absolute;
	bottom: 0;
	left: 0;
	display: block !important;
	width: 100%;
	height: calc(50% - var(--bg-split-offset, 0px));
	z-index: 0;
}

/* -- Top color variants -- */
.px-section-bg--top-white::before    { background-color: var(--white); }
.px-section-bg--top-sky-blue::before { background-color: var(--blue-light); }
.px-section-bg--top-yellow::before   { background-color: var(--yellow); }

/* -- Bottom color variants -- */
.px-section-bg--bottom-white::after    { background-color: var(--white); }
.px-section-bg--bottom-sky-blue::after { background-color: var(--blue-light); }
.px-section-bg--bottom-yellow::after   { background-color: var(--yellow); }


/* ==========================================================================
   Pattern backgrounds — single pseudo-element, full height
   ========================================================================== */

.px-section-bg--pattern-full::before {
	content: "" !important;
	position: absolute;
	top: 0;
	left: 0;
	display: block !important;
	width: 100%;
	height: 100%;
	z-index: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* ==========================================================================
   Mobile: hide all section backgrounds (colors + patterns)
   ========================================================================== */

@media (max-width: 767px) {
	[class*="px-section-bg--top-"]::before {
		display: none !important;
	}

	[class*="px-section-bg--bottom-"]::after {
		display: none !important;
	}

	.px-section-bg--pattern-full::before {
		display: none !important;
	}
}


/* -- Pattern image: Leaves -- */
.px-section-bg--pattern-leaves.px-section-bg--pattern-full::before {
	background-image: url('../images/patterns/leaves.jpg');
}