/*
 * SEALCOIN layout utilities (Phase 4, docs/05 §3, docs/22 Phase 4).
 *
 * Ported from the redesign PoC (css/site.css @ ed0ab9f7) using theme.json
 * tokens only. Breakpoints (docs/05 §3.1) are literal in media queries
 * because CSS custom properties cannot be used there:
 *   lg 1080px · md 900px · sm 760px · xs 520px
 *
 * Block content normally uses WordPress's own constrained/flow/grid layouts.
 * These classes exist for template parts and patterns that need the PoC's
 * exact layout behaviour.
 */

.wrap {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--custom--gutter);
}

.section {
	position: relative;
	padding-block: var(--wp--preset--spacing--section);
}

.stack {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--gap--stack);
}

.stack-lg {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--gap--stack-lg);
}

.grid {
	display: grid;
	gap: var(--wp--custom--gap--grid);
}

.g2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.g3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.g5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.g6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--custom--gap--split);
	align-items: center;
}

.split.top {
	align-items: start;
}

/* lg */
@media (max-width: 1080px) {

	.g5,
	.g6 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.g4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* md: also the navigation-drawer threshold (docs/05 §3.1). */
@media (max-width: 900px) {

	.split {
		grid-template-columns: 1fr;
	}
}

/* sm */
@media (max-width: 760px) {

	.g2,
	.g3,
	.g4 {
		grid-template-columns: 1fr;
	}

	.g5,
	.g6 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Section heading (eyebrow, heading, lead) used by the section patterns.
   Moved here from components/usecases.css in Phase 10, because every
   section uses it. The offset is on `.wrap > .sc-section-head` so the
   sections' margin resets (one class) do not remove it. */
.sc-section-head {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--s);
	max-width: var(--wp--style--global--content-size);
}

.wrap > .sc-section-head {
	margin-bottom: var(--wp--custom--section-head--offset);
}

.sc-section-head > * {
	margin-block: 0;
}