/* ============================================================================
 * DS2+ Extensions — 2-layout.css
 *
 * Containers (5 widths + bleed), section variants (tight/spacious/full-bleed),
 * grids (split 2-3 / 1-2 / 3-col / 4-col / bento), stack utility.
 *
 * Depends on --section-padding-y-* from 1-tokens.css and --s-* from tokens.css.
 * ==========================================================================*/

/* === Containers === */
.container--narrow {
	max-width: 48rem;
} /*  768px — prose */
.container--reading {
	max-width: 64rem;
} /* 1024px — long-form */
.container--default {
	max-width: 80rem;
} /* 1280px — marketing standard */
.container--wide {
	max-width: 96rem;
} /* 1536px — bento/dense */
.container--ultrawide {
	max-width: 104rem;
} /* 1664px — mega-hero */
.container--bleed {
	max-width: none;
	padding-inline: 0;
}

.container--narrow,
.container--reading,
.container--default,
.container--wide,
.container--ultrawide {
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 1.5rem);
}

/* === Section variants — additive to .mk-section existing composition ===
   Never touch .mk-section directly (shared with 4 other portails). */
.mk-section--tight {
	padding-block: var(--section-padding-y-sm);
}
.mk-section--spacious {
	padding-block: var(--section-padding-y-lg);
}
.mk-section--full-bleed {
	padding-inline: 0;
}

/* === Grids === */
.grid-split-2-3 {
	display: grid;
	gap: var(--s-8);
	grid-template-columns: 1fr;
}
.grid-split-1-2 {
	display: grid;
	gap: var(--s-8);
	grid-template-columns: 1fr;
}
.grid-3-col {
	display: grid;
	gap: var(--s-6);
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.grid-4-col {
	display: grid;
	gap: var(--s-4);
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

@media (min-width: 1024px) {
	.grid-split-2-3 {
		grid-template-columns: 2fr 1fr;
	}
	.grid-split-1-2 {
		grid-template-columns: 1fr 2fr;
	}
	.grid-3-col {
		grid-template-columns: repeat(3, 1fr);
	}
	.grid-4-col {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Bento — opt-in; children position themselves via inline grid-column/row. */
.grid-bento {
	display: grid;
	gap: var(--s-4);
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: minmax(16rem, auto);
}

/* === Stack utility — NOT for markdown prose (conflicts with native margins) === */
.stack > * + * {
	margin-block-start: var(--stack-gap, var(--s-4));
}
.stack--sm {
	--stack-gap: var(--s-2);
}
.stack--md {
	--stack-gap: var(--s-4);
} /* default */
.stack--lg {
	--stack-gap: var(--s-8);
}
.stack--xl {
	--stack-gap: var(--s-12);
}