/**
 * Caldera — page scaffolding: containers, sections, grids.
 */

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

.caldera-container--narrow {
	max-width: calc(var(--content-max-width) + (var(--gutter) * 2));
}

.caldera-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.caldera-site-main {
	flex: 1 0 auto;
	padding-block: var(--spacing-48) var(--section-gap);
}

/* Sections ---------------------------------------------------------------- */

.caldera-section {
	margin-block: var(--section-gap);
}

.caldera-section:first-child {
	margin-top: 0;
}

.caldera-section--inverse {
	padding-block: var(--spacing-80);
	background: var(--surface-inverse);
	color: var(--text-on-inverse);
}

.caldera-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--spacing-24);
	margin-bottom: var(--spacing-40);
}

.caldera-section__title {
	margin: 0;
	font-size: var(--text-heading-2xl);
	line-height: var(--leading-heading-2xl);
}

.caldera-section__lede {
	max-width: 52ch;
	margin: var(--spacing-16) 0 0;
	color: var(--text-muted);
}

.caldera-section--inverse .caldera-section__lede {
	color: var(--color-chalk-70);
}

/* Grids ------------------------------------------------------------------- */

.caldera-grid {
	display: grid;
	gap: var(--spacing-24);
}

.caldera-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.caldera-grid--3 {
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.caldera-grid--4 {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/*
 * Those minimums are fine from a tablet upward, but a 360px phone has only 320px
 * left once the gutter is removed — enough for the grid to demand more width than
 * the screen has. Below the small breakpoint everything is a single column.
 */
@media (max-width: 640px) {
	.caldera-grid--2,
	.caldera-grid--3,
	.caldera-grid--4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Content column ---------------------------------------------------------- */

.caldera-prose {
	max-width: var(--content-max-width);
}

.caldera-prose > .alignwide {
	width: min(100vw - (var(--gutter) * 2), 1040px);
	max-width: none;
	margin-inline: calc(50% - min(100vw - (var(--gutter) * 2), 1040px) / 2);
}

.caldera-prose > .alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
	border-radius: 0;
}

/*
 * In-article headings run on their own scale.
 *
 * The document scale is built for page and section titles standing alone across
 * a full-width container. Inside the 760px reading column it put an 80px h2 over
 * 16px body copy — five times the size of the text it introduces — so a
 * three-word heading wrapped to two lines and swamped the article.
 *
 * The steps keep the compressed face at or above the 26px floor the system sets
 * for it, and the levels below that drop into the body family rather than
 * shrinking the display face past where it holds together — the same move the
 * document scale makes at h6.
 */
.caldera-prose h2,
.caldera-prose h3,
.caldera-prose h4,
.caldera-prose h5,
.caldera-prose h6 {
	margin-top: var(--spacing-48);
	margin-bottom: var(--spacing-16);
}

.caldera-prose h2 {
	font-size: var(--text-prose-heading);
	line-height: var(--leading-subheading);
}

.caldera-prose h3 {
	font-size: var(--text-subheading);
	line-height: var(--leading-subheading);
	margin-top: var(--spacing-40);
}

.caldera-prose h4,
.caldera-prose h5,
.caldera-prose h6 {
	margin-top: var(--spacing-32);
	font-family: var(--font-body);
	font-size: var(--text-body-lg);
	font-weight: var(--font-weight-medium);
	line-height: var(--leading-body-sm);
	letter-spacing: 0;
	text-transform: none;
}

.caldera-prose > :first-child {
	margin-top: 0;
}

.caldera-prose ul,
.caldera-prose ol {
	padding-left: var(--spacing-24);
}

.caldera-prose li + li {
	margin-top: var(--spacing-8);
}

/* Sidebar layout ---------------------------------------------------------- */

.caldera-layout {
	display: grid;
	gap: var(--spacing-48);
	align-items: start;
}

@media (min-width: 1024px) {
	.caldera-layout--with-sidebar {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: var(--spacing-64);
	}
}

.caldera-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);
}

@media (min-width: 1024px) {
	.caldera-sidebar {
		position: sticky;
		top: var(--spacing-24);
	}
}