/*
 * Base layout: container + Gutenberg content width.
 * Standard blocks stay within a readable column; .alignwide widens and
 * .alignfull (and full-width Lazy Blocks) break out to the viewport edges.
 */

:root {
	--metroesk-container: 1280px;
	--metroesk-content: 760px;
	--metroesk-gutter: 32px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: var(--font-body, Verdana, sans-serif);
	color: var(--color-dark, #1a1a2e);
}

.container {
	width: 100%;
	max-width: var(--metroesk-container);
	margin-inline: auto;
	padding-inline: var(--metroesk-gutter);
}

.site-main {
	overflow-x: clip;
}

/* Gutenberg content flow */
.entry-content > * {
	max-width: var(--metroesk-content);
	margin-inline: auto;
	padding-inline: var(--metroesk-gutter);
}

.entry-content > .alignwide {
	max-width: var(--metroesk-container);
}

.entry-content > .alignfull {
	max-width: none;
	padding-inline: 0;
}

/* Full-width custom sections / Lazy Blocks opt out of the content column */
.entry-content > .section,
.entry-content > [class*="lazyblock-"] {
	max-width: none;
	padding-inline: 0;
}

img,
svg {
	max-width: 100%;
	height: auto;
}