/**
 * Gutenberg content laid out on Beaver Builder's grid (front end only).
 *
 * Measured against BB pages at 390 / 800 / 1024 / 1200 / 1400px viewports:
 *   - Content (theme.json contentSize 1020px) = a BB Text module inside a
 *     fixed row; bb-theme's .container already gives post content exactly
 *     that width and the same 20px / 40px side gutters.
 *   - Wide (theme.json wideSize 1100px) = a BB fixed-width row:
 *     min(1100px, viewport − 40px), centred.
 *   - Full = a BB full-width row: edge to edge (bb-theme handles the breakout).
 *
 * Anchored on bb-theme's #fl-main-content wrapper so these win over the
 * theme's own alignment rules without !important.
 */

/*
 * Wide = min(1100px, viewport - 40px), centred. Replaces bb-theme's -5%
 * margins (off-centre once capped at 1100px), its zero margins on wide
 * groups, and its max-width: 100vw that overrode WordPress's wide cap.
 */
#fl-main-content .fl-post-content {
	--cs-wide: min(1100px, 100vw - 40px);
}

/* Top level: the column is narrower than a BB row, so extend both sides. */
#fl-main-content .fl-post-content > .alignwide {
	width: auto;
	max-width: none;
	margin-left: calc((100% - var(--cs-wide)) / 2);
	margin-right: calc((100% - var(--cs-wide)) / 2);
}

/* Inside groups: core centres children with margin: auto !important, so cap
   the width instead. */
#fl-main-content .fl-post-content .is-layout-constrained > .alignwide {
	max-width: var(--cs-wide);
}

/*
 * Full-width groups escape .container and lose its side gutters; give their
 * contents the same gutters (20px phones, 40px from 768px) so text never
 * touches the screen edge. A padding set in the block sidebar still wins.
 */
#fl-main-content .fl-post-content .wp-block-group.alignfull.is-layout-constrained:not([style*="padding-left"]) {
	padding-left: 20px;
	padding-right: 20px;
}

@media (min-width: 768px) {
	#fl-main-content .fl-post-content .wp-block-group.alignfull.is-layout-constrained:not([style*="padding-left"]) {
		padding-left: 40px;
		padding-right: 40px;
	}
}