/*
 * Layout primitives: container, sections, grid, stacks.
 * Breakpoints (min-width): 30rem 480 · 48rem 768 · 64rem 1024 · 80rem 1280 · 100rem 1600.
 */

.ax-container {
	width: 100%;
	max-width: calc(var(--ax-container-max) + var(--ax-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--ax-gutter);
}

.ax-narrow {
	max-width: calc(var(--ax-measure-wide) + var(--ax-gutter) * 2);
}

/* Full-bleed escape from a container. */
.ax-bleed {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.ax-section {
	position: relative;
	padding-block: var(--ax-section);
}

.ax-section--tight {
	padding-block: var(--ax-space-2xl);
}

.ax-section--flush-top {
	padding-top: 0;
}

/* 12-column editorial grid. Children opt into spans. */
.ax-grid-12 {
	display: grid;
	grid-template-columns: repeat(var(--ax-columns), minmax(0, 1fr));
	column-gap: var(--ax-column-gap);
	row-gap: var(--ax-space-xl);
}

.ax-grid-12 > * {
	grid-column: 1 / -1;
}

@media (min-width: 64rem) {
	.ax-span-5 { grid-column: span 5; }
	.ax-span-6 { grid-column: span 6; }
	.ax-span-7 { grid-column: span 7; }
	.ax-span-8 { grid-column: span 8; }
	.ax-start-7 { grid-column-start: 7; }
	.ax-start-8 { grid-column-start: 8; }
}

/* Card grids. */
.ax-grid {
	display: grid;
	gap: var(--ax-space-xl) var(--ax-column-gap);
}

.ax-grid--cards {
	grid-template-columns: 1fr;
}

.ax-grid--people {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ax-space-l) var(--ax-column-gap);
}

@media (min-width: 48rem) {
	.ax-grid--cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.ax-grid--people {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.ax-grid--cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.ax-grid--people {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Flow utilities. */
.ax-stack > * + * {
	margin-top: var(--ax-space-m);
}

.ax-stack-l > * + * {
	margin-top: var(--ax-space-xl);
}

.ax-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ax-space-m);
}

/* Media frames with fixed ratios; images cover. */
.ax-media {
	position: relative;
	overflow: hidden;
	background: var(--ax-stone);
}

.ax-media > img,
.ax-media > picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ax-media--16x9 { aspect-ratio: 16 / 9; }
.ax-media--3x2 { aspect-ratio: 3 / 2; }
.ax-media--4x5 { aspect-ratio: 4 / 5; }
.ax-media--1x1 { aspect-ratio: 1; }

.ax-media__fallback {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, transparent 0 48%, rgb(0 96 118 / 0.12) 48% 52%, transparent 52%),
		var(--ax-stone);
}

/* On stone sections the frame switches to white so empty media stays visible. */
.ax-surface--stone .ax-media {
	background: var(--ax-white);
}

.ax-surface--stone .ax-media__fallback {
	background:
		linear-gradient(135deg, transparent 0 48%, rgb(0 96 118 / 0.12) 48% 52%, transparent 52%),
		var(--ax-white);
}

.ax-media__fallback.ax-media__fallback--monogram {
	background: var(--ax-bg, var(--ax-stone)) url("../images/brand/axlaw-monogram-256.png") center / 34% no-repeat;
	opacity: 0.9;
}