/*
 * Layout: page shell, containers, content width and section headings.
 * Component-level styles live in components.css.
 */

:root {
	--vys-gutter: var(--wp--custom--gutter);

	@media (max-width: 640px) {
		--vys-gutter: var(--wp--custom--gutter-mobile);
	}
}

.site {
	min-height: 100vh;
	overflow-x: clip; /* .alignfull uses 100vw, which includes the scrollbar width */
	display: flex;
	flex-direction: column;
}

.site-main {
	flex: 1;
}

.container {
	width: min(100% - 2 * var(--vys-gutter), var(--wp--style--global--wide-size, 1280px));
	margin-inline: auto;
}

.content-area {
	width: min(100% - 2 * var(--vys-gutter), var(--wp--style--global--wide-size, 1280px));
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--60);
}

/* Page with a left column (section navigation / support box). */
.content-area--aside {
	display: grid;
	gap: 40px 64px;

	@media (min-width: 900px) {
		grid-template-columns: 280px minmax(0, 1fr);
		align-items: start;
	}
}

.page-aside {
	display: flex;
	flex-direction: column;
	gap: 24px;

	/* Below the two-column breakpoint the content comes first. */
	@media (max-width: 899px) {
		order: 2;
	}

	@media (min-width: 900px) {
		position: sticky;
		top: 120px;
	}
}

/* Next to the aside the content column is not centred in the viewport: content sits
 * left, and wide / full blocks fill the column instead of breaking out. */
.content-area--aside .entry-content > :is(*, .alignwide, .alignfull) {
	max-width: var(--wp--style--global--content-size, 760px);
	width: auto;
	margin-inline: 0;
}

.content-area--aside .entry-content > :is(.alignwide, .alignfull) {
	max-width: 100%;
}

/* Readable line length for single-column views. Post/page content children are
 * constrained in blocks.css; wide views (card grids) opt out with .content-area--wide. */
.content-area:not(.content-area--wide) :where(.entry-header, .post-thumbnail, .entry-footer, .no-results, .post-navigation, .pagination, .comments-area) {
	width: 100%; /* auto margins would shrink grid items to their content */
	max-width: var(--wp--style--global--content-size, 760px);
	margin-inline: auto;
}

/* Section heading row: title left, "more" link right (front-page sections, archives). */
.section-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 12px;
}

.section-head__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
}

.section-head__link {
	font-weight: 700;
	text-decoration: none;
}