/* ==========================================================================
   Mind Maprs — layout primitives
   ========================================================================== */

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

.container--narrow { max-width: 900px; }
.container--text { max-width: 760px; }

.section {
	padding-block: var(--mm-section-y);
}

.section--tight { padding-block: var(--mm-section-y-sm); }
.section--flush-top { padding-block-start: 0; }
.section--flush-bottom { padding-block-end: 0; }

.section--surface { background: var(--mm-surface); }
.section--surface-alt { background: var(--mm-surface-alt); }
.section--tint { background: var(--mm-sky-tint); }
.section--ink { background: var(--mm-navy); color: var(--mm-white); }
.section--ruled { border-block-end: var(--mm-border); }
.section--ruled-top { border-block-start: var(--mm-border); }

.section--ink :is(h1, h2, h3, h4, h5, h6) { color: var(--mm-white); }
.section--ink p { color: rgba(255, 255, 255, 0.78); }
.section--ink a { color: var(--mm-sky); }

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

.grid {
	display: grid;
	gap: clamp(20px, 2.4vw, 34px);
}

/* auto-fit alone over-fills a 1320px container: minmax(280px, 1fr) yields four
   tracks, not three. Column counts are fixed above the breakpoint and only
   collapse below it. */
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }

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

.grid--split {
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(32px, 4vw, 64px);
	align-items: center;
}

/* Ruled grid: cells divided by hairlines rather than gaps. */
.grid--ruled {
	gap: 0;
	border-block-start: var(--mm-border-strong);
}

.grid--ruled > * {
	padding: 30px clamp(18px, 2vw, 26px) 34px;
	border-inline-end: var(--mm-border);
}

.grid--ruled > *:last-child { border-inline-end: 0; }

@media (max-width: 700px) {
	.grid--ruled > * {
		border-inline-end: 0;
		border-block-end: var(--mm-border);
	}
	.grid--ruled > *:last-child { border-block-end: 0; }
}

/* --- Main / sidebar ----------------------------------------------------- */

.layout-with-sidebar {
	display: grid;
	gap: clamp(32px, 4vw, 72px);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1000px) {
	.layout-with-sidebar {
		grid-template-columns: minmax(0, 1fr) 300px;
	}
}

body.no-widgets .layout-with-sidebar {
	grid-template-columns: minmax(0, 1fr);
}

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

.site-main { flex: 1 0 auto; }

/* --- Utilities ---------------------------------------------------------- */

.u-measure { max-width: var(--mm-measure); }
.u-measure-narrow { max-width: var(--mm-measure-narrow); }
.u-center { margin-inline: auto; text-align: center; }
.u-stack > * + * { margin-block-start: var(--mm-space-sm); }
.u-hide { display: none !important; }

@media (max-width: 900px) {
	.u-hide\@md { display: none !important; }
}

@media (min-width: 901px) {
	.u-show\@md-only { display: none !important; }
}