/**
 * Component: layout of content pages (practice area…): table of contents,
 * body and sidebar.
 *
 * - Below tablet: one column (table of contents, body, sidebar).
 * - Tablet (48em): body and sidebar side by side (agency decision, so the
 *   sidebar is in reach without scrolling past the body); the table of
 *   contents stays at the top of the body column. The sidebar column is
 *   wider than its desktop ratio (3 : 2) so its modules keep a usable
 *   width; from laptop (64em) the Figma ratio (793 / 375 of 1500).
 * - Desktop (80em): three columns at the Figma ratios (248 / 793 / 375 of
 *   1500); the table of contents sticks within its column, below the sticky
 *   header, with its own scroll when it's taller than the viewport. The
 *   sidebar never sticks.
 * - Blog archives (.page-layout--archive): cards and sidebar; the Figma
 *   ratio (1049 / 375 of 1500) from desktop, the body / sidebar ratio on
 *   laptops so the sidebar keeps its width.
 * - Single posts (.page-layout--has-header): the post header sits above the
 *   table of contents on mobile, and above the body (next to the table of
 *   contents) from desktop.
 */

.page-layout {
	display: grid;
	grid-template-areas:
		"toc"
		"content"
		"sidebar";
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	max-inline-size: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--80) var(--wp--custom--gutter);
}

.page-layout__toc {
	grid-area: toc;
	margin-block-end: var(--wp--preset--spacing--40);
}

.page-layout__content {
	grid-area: content;
	min-inline-size: 0;
}

.page-layout__sidebar {
	grid-area: sidebar;
	margin-block-start: var(--wp--preset--spacing--70);
}

.page-layout__header {
	grid-area: header;
	margin-block-end: var(--wp--preset--spacing--50);
}

.page-layout--has-header {
	grid-template-areas:
		"header"
		"toc"
		"content"
		"sidebar";
}

/* Headings reached from the table of contents keep some space above. */
.page-layout .firm-content :is(h2, h3, h4) {
	scroll-margin-block-start: var(--wp--preset--spacing--60);
}

/* tablet: body and sidebar. */
@media (min-width: 48em) {
	.page-layout--has-sidebar {
		grid-template-areas:
			"toc sidebar"
			"content sidebar";
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		grid-template-rows: auto 1fr;
		column-gap: var(--wp--preset--spacing--60);
	}

	.page-layout__sidebar {
		margin-block-start: 0;
	}

	.page-layout--has-header.page-layout--has-sidebar {
		grid-template-areas:
			"header sidebar"
			"toc sidebar"
			"content sidebar";
		grid-template-rows: auto auto 1fr;
	}

	.page-layout--archive.page-layout--has-sidebar {
		grid-template-areas: "content sidebar";
		grid-template-rows: auto;
	}
}

/* laptop: the Figma column ratio. */
@media (min-width: 64em) {
	.page-layout {
		padding-block: calc(var(--wp--preset--spacing--80) + var(--wp--preset--spacing--60));
	}

	.page-layout--has-sidebar {
		grid-template-columns: minmax(0, 793fr) minmax(0, 375fr);
		column-gap: var(--wp--preset--spacing--70);
	}
}

/* desktop: three columns, sticky table of contents. Without a sidebar or
   a table of contents, the remaining columns keep the same widths. */
@media (min-width: 80em) {
	.page-layout {
		grid-template-areas: "toc content sidebar";
		grid-template-columns: minmax(0, 248fr) minmax(0, 793fr) minmax(0, 375fr);
		grid-template-rows: auto;
		column-gap: var(--wp--preset--spacing--70);
	}

	.page-layout:not(.page-layout--has-toc) {
		grid-template-areas: "content sidebar";
		grid-template-columns: minmax(0, 793fr) minmax(0, 375fr);
	}

	/* One text column at the reading measure. Wide content blocks (e.g. the
	   firm/reviews widget) can break out to the full container: its width,
	   less the gutters, is --firm-layout-full-width. Layouts with a sidebar or
	   a table of contents don't set it, so blocks stay in their column. */
	.page-layout:not(.page-layout--has-toc):not(.page-layout--has-sidebar) {
		--firm-layout-full-width: calc(min(var(--wp--style--global--content-size), 100vw) - 2 * var(--wp--custom--gutter));
		grid-template-areas: "content";
		grid-template-columns: minmax(0, 793fr);
		max-inline-size: calc(793 / 1500 * var(--wp--style--global--content-size));
	}

	.page-layout--has-header.page-layout--has-toc {
		grid-template-areas:
			"toc header sidebar"
			"toc content sidebar";
		grid-template-rows: auto 1fr;
	}

	.page-layout--has-header:not(.page-layout--has-toc) {
		grid-template-areas:
			"header sidebar"
			"content sidebar";
		grid-template-rows: auto 1fr;
	}

	.page-layout--archive.page-layout--has-sidebar {
		grid-template-areas: "content sidebar";
		grid-template-columns: minmax(0, 1049fr) minmax(0, 375fr);
		column-gap: var(--wp--preset--spacing--80);
	}

	/* Below the sticky header (and the fixed admin bar): --firm-sticky-offset
	   from site-header.css, so the box is never covered by the header. */
	.page-layout__toc {
		position: sticky;
		inset-block-start: calc(var(--firm-sticky-offset, var(--wp-admin--admin-bar--height, 0px)) + var(--wp--preset--spacing--40));
		max-block-size: calc(100vh - var(--firm-sticky-offset, var(--wp-admin--admin-bar--height, 0px)) - var(--wp--preset--spacing--40) * 2);
		overflow-y: auto;
		/* Room for the box shadow inside the scroll container. */
		margin: calc(var(--wp--preset--spacing--10) * -1);
		padding: var(--wp--preset--spacing--10);
	}
}