/**
 * Shared section-level backgrounds for homepage Elementor containers.
 * Applied via each container's "CSS Classes" (Advanced tab) setting so a
 * dark/textured or gold background can span multiple widgets in one section.
 */

.bbp-section {
	position: relative;
}

.bbp-section--dark {
	background-color: var(--bbp-bg-section);
}

.bbp-section--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../../images/homepage/shared/section-hexagon-bg.png");
	background-size: cover;
	background-position: center;
	opacity: 0.15;
	mix-blend-mode: luminosity;
	pointer-events: none;
	z-index: 0;
}

.bbp-section--dark > * {
	position: relative;
	z-index: 1;
}

.bbp-section--gold {
	background-color: var(--bbp-gold);
}