/*
 * layout/blocks.css — corrections to WordPress's own block layout CSS.
 *
 * Every rule in here exists because theme.json has no field for it. If a rule
 * COULD live in theme.json, move it there: the Site Editor then shows it to the
 * user and the editor canvas matches the front end for free.
 *
 * Keep each rule commented with WHY core's default is wrong for this site.
 */

/*
 * theme.json's layout offers only contentSize and wideSize. Patterns that need
 * to break out to the full viewport with a gutter (a full-bleed section that is
 * still padded on mobile) use .alignfull plus this class on the inner group.
 */
.fcs-bleed {
	padding-inline: var( --fcs-gutter );
}

@media ( min-width: 1024px ) {
	.fcs-bleed {
		padding-inline: var( --fcs-gutter-lg );
	}
}

/*
 * WP applies margin-block-start: 24px between top-level blocks under
 * .wp-site-blocks. Our page sections carry their own vertical padding, so that
 * extra margin double-spaces them. Templates set blockGap: 0 on <main>, and
 * this belts-and-braces the site-level wrapper.
 */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/*
 * The header/footer template parts must still be able to stick and layer above
 * page content.
 */
.wp-site-blocks > header {
	z-index: var( --fcs-z-header );
}

/*
 * Equal-height columns. WP's flex layout sets align-items: center on
 * .wp-block-columns, so cards in a row end up different heights. Add
 * .fcs-columns--stretch to the columns block when the children are cards.
 */
.fcs-columns--stretch {
	align-items: stretch;
}

.fcs-columns--stretch > .wp-block-column {
	display: flex;
	flex-direction: column;
}

/*
 * Core blocks have no "hide at this breakpoint" control. These two utilities
 * cover the cases where a design genuinely needs different markup per
 * breakpoint (e.g. a carousel on mobile, a grid on desktop). Use sparingly —
 * duplicated content is a maintenance and a11y cost.
 */
@media ( max-width: 767px ) {
	.fcs-hide-mobile {
		display: none !important;
	}
}

@media ( min-width: 768px ) {
	.fcs-hide-desktop {
		display: none !important;
	}
}

/* Images inside a constrained column should never letterbox oddly. */
.wp-block-image.has-custom-border img,
.wp-block-image :where( img ) {
	display: block;
}