/*
 * plg_system_sppbai - full-width sections on the public site and in the editor preview.
 *
 * The Flex template puts page content in a 1170px container (#sp-main-body.container), so an
 * SP Page Builder section's background stops short of the screen edges. Adding a class to the
 * section's "CSS Class" setting lets it reach the edges:
 *   sppbai-bleed       background spans the screen, content stays in the usual centred width
 *   sppbai-bleed-wide  background and content both span the screen
 * The body already hides horizontal overflow, so 100vw does not add a scrollbar.
 */
.sppb-section.sppbai-bleed,
.sppb-section.sppbai-bleed-wide {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	left: auto;
	right: auto;
}

.sppb-section.sppbai-bleed > .sppb-row-container,
.sppb-section.sppbai-bleed > .sppb-container-inner {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

.sppb-section.sppbai-bleed-wide > .sppb-row-container,
.sppb-section.sppbai-bleed-wide > .sppb-container-inner {
	max-width: none;
	padding-left: 30px;
	padding-right: 30px;
}

@media (max-width: 767px) {
	.sppb-section.sppbai-bleed-wide > .sppb-row-container,
	.sppb-section.sppbai-bleed-wide > .sppb-container-inner {
		padding-left: 15px;
		padding-right: 15px;
	}
}