/* ==========================================================================
   uiux-layout — shared page shell (padding, max-width)
   Apply to <main> on app pages; pair with page-specific classes (uiux-home, etc.)
   ========================================================================== */

:root {
	--uiux-layout-max-width: 1440px;
	--uiux-layout-padding-block-start: 2.5rem;
	--uiux-layout-padding-inline: 1.25rem;
	--uiux-layout-padding-block-end: 5rem;
}

@media ( max-width: 600px ) {
	:root {
		--uiux-layout-padding-block-start: 1.5rem;
		--uiux-layout-padding-inline: 0.875rem;
		--uiux-layout-padding-block-end: 4rem;
	}
}

/* Neutralize block-theme wrapper spacing on classic templates */
.home .wp-site-blocks,
.blog .wp-site-blocks,
.single .wp-site-blocks,
.page .wp-site-blocks {
	padding-top: 0;
	padding-bottom: 0;
}

.uiux-layout {
	width: 100%;
	max-width: var(--uiux-layout-max-width);
	margin-inline: auto;
	padding-block: var(--uiux-layout-padding-block-start) var(--uiux-layout-padding-block-end);
	padding-inline: var(--uiux-layout-padding-inline);
	box-sizing: border-box;
}

.uiux-layout--full {
	max-width: none;
}