/**
 * PX Section Background - Static CSS
 * Pseudo-element split: top 50% via ::before, bottom 50% via ::after.
 * Usage: add .px-section-bg + .px-section-bg--top-{color} / --bottom-{color}
 */

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

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

/* Bottom half — base structure */
[class*="px-section-bg--bottom-"]::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 50%;
	z-index: -1;
}

/* -- Top color variants -- */
.px-section-bg--top-white::before    { background-color: var(--white); }
.px-section-bg--top-bone::before     { background-color: var(--bone); }
.px-section-bg--top-action::before   { background-color: var(--action); }
.px-section-bg--top-navy::before     { background-color: var(--navy); }
.px-section-bg--top-ice-blue::before { background-color: var(--ice-blue); }
.px-section-bg--top-sky-blue::before { background-color: var(--sky-blue); }
.px-section-bg--top-coral::before    { background-color: var(--coral); }
.px-section-bg--top-sand::before     { background-color: var(--sand); }
.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-bone::after     { background-color: var(--bone); }
.px-section-bg--bottom-action::after   { background-color: var(--action); }
.px-section-bg--bottom-navy::after     { background-color: var(--navy); }
.px-section-bg--bottom-ice-blue::after { background-color: var(--ice-blue); }
.px-section-bg--bottom-sky-blue::after { background-color: var(--sky-blue); }
.px-section-bg--bottom-coral::after    { background-color: var(--coral); }
.px-section-bg--bottom-sand::after     { background-color: var(--sand); }
.px-section-bg--bottom-yellow::after   { background-color: var(--yellow); }