/**
 * Layout primitives: containers, section rhythm, grids.
 *
 * These are the only classes allowed to own outer spacing. Components inside
 * them stay spacing-agnostic, which is what keeps sections composable — any
 * section part can be dropped into any page without a margin collision.
 */

/* -- Containers ---------------------------------------------------------- */

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

.lg-container--prose {
	max-width: var(--lg-container-prose);
}

.lg-container--narrow {
	max-width: var(--lg-container-narrow);
}

/* -- Section rhythm ------------------------------------------------------ */

/*
 * One vertical scale for every marketing section, so the page cadence stays
 * even as sections are reordered. Modifiers adjust density, never the gutter.
 */
.lg-section {
	padding-block: var(--lg-space-20);
}

.lg-section--tight {
	padding-block: var(--lg-space-12);
}

.lg-section--flush {
	padding-block: var(--lg-space-16);
}

.lg-section--muted {
	background-color: color-mix(in srgb, var(--lg-muted) 55%, var(--lg-bg));
}

.lg-section--bordered {
	border-block: 1px solid var(--lg-border);
}

.lg-section--border-top {
	border-top: 1px solid var(--lg-border);
}

.lg-section--border-bottom {
	border-bottom: 1px solid var(--lg-border);
}

@media (min-width: 640px) {
	.lg-section {
		padding-block: var(--lg-space-24);
	}

	.lg-section--tight {
		padding-block: var(--lg-space-14);
	}
}

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

.lg-grid {
	display: grid;
	gap: var(--lg-space-5);
}

/*
 * Column counts step up at the breakpoint where each card still holds a
 * readable measure, rather than at a fixed device width. Queries are ordered
 * ascending so the widest matching rule is always the one that wins.
 *
 *   --2      cards that need room to breathe (tool cards)
 *   --3      feature cards
 *   --steps  numbered "how it works" cards, which read best 1-up or 3-up
 *   --4      pricing plans
 *   --stats  compact figure/label pairs; never drops below two columns
 */
.lg-grid--stats {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
	.lg-grid--2,
	.lg-grid--3,
	.lg-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.lg-grid--steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.lg-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.lg-grid--4,
	.lg-grid--stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Stack utility for vertical rhythm inside a column. */
.lg-stack {
	display: flex;
	flex-direction: column;
	gap: var(--lg-space-5);
}

.lg-stack--lg {
	gap: var(--lg-space-14);
}

/* -- Content well (block-editor output) ---------------------------------- */

/*
 * Wraps `the_content()` on pages and posts. Bare elements get sensible
 * spacing here rather than in base.css, so editor content is readable without
 * the theme having to style every block individually.
 */
.lg-prose {
	max-width: 100%;
	font-size: var(--lg-text-base);
	line-height: var(--lg-leading-relaxed);
	color: var(--lg-fg);
}

.lg-prose > * + * {
	margin-top: var(--lg-space-5);
}

.lg-prose h2 {
	margin-top: var(--lg-space-12);
	font-size: var(--lg-text-2xl);
}

.lg-prose h3 {
	margin-top: var(--lg-space-10);
	font-size: var(--lg-text-lg);
}

.lg-prose h2 + *,
.lg-prose h3 + * {
	margin-top: var(--lg-space-3);
}

.lg-prose p,
.lg-prose li {
	color: color-mix(in srgb, var(--lg-fg) 82%, var(--lg-bg));
}

.lg-prose a:not([class]) {
	color: var(--lg-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.lg-prose a:not([class]):hover {
	text-decoration-thickness: 2px;
}

.lg-prose ul,
.lg-prose ol {
	padding-left: var(--lg-space-6);
}

.lg-prose li + li {
	margin-top: var(--lg-space-2);
}

.lg-prose ul {
	list-style: disc;
}

.lg-prose ol {
	list-style: decimal;
}

.lg-prose blockquote {
	padding-left: var(--lg-space-5);
	border-left: 3px solid var(--lg-primary);
	font-size: var(--lg-text-lg);
	line-height: var(--lg-leading-relaxed);
}

.lg-prose img,
.lg-prose figure {
	border-radius: var(--lg-radius-xl);
	overflow: hidden;
}

.lg-prose figcaption {
	margin-top: var(--lg-space-2);
	font-size: var(--lg-text-sm);
	color: var(--lg-muted-fg);
	text-align: center;
}

.lg-prose pre {
	padding: var(--lg-space-4);
	border: 1px solid var(--lg-border);
	border-radius: var(--lg-radius-lg);
	background-color: var(--lg-muted);
	overflow-x: auto;
}

.lg-prose :not(pre) > code {
	padding: 0.15em 0.4em;
	border-radius: var(--lg-radius-sm);
	background-color: var(--lg-muted);
}

.lg-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--lg-text-sm);
}

.lg-prose th,
.lg-prose td {
	padding: var(--lg-space-3);
	border-bottom: 1px solid var(--lg-border);
	text-align: left;
}

/* Wide tables scroll inside their own box rather than the page body. */
.lg-prose .wp-block-table {
	overflow-x: auto;
}

/* Block editor alignment support. */
.lg-prose .alignwide {
	width: min(100%, 64rem);
	margin-inline: auto;
}

.lg-prose .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.lg-prose .alignleft {
	float: left;
	margin: 0 var(--lg-space-5) var(--lg-space-4) 0;
}

.lg-prose .alignright {
	float: right;
	margin: 0 0 var(--lg-space-4) var(--lg-space-5);
}

.lg-prose .aligncenter {
	margin-inline: auto;
}