/**
 * layout.css — the CSS Grid/container system theme.json's layout settings
 * can't fully express on their own (contentSize/wideSize handle max-width;
 * this handles the actual column/gutter/margin values per breakpoint).
 * Breakpoints match ditechted-design-system.md §6.1 exactly — no arbitrary
 * additional breakpoint is introduced.
 */

:root {
	--ditechted-columns: 4;
	--ditechted-gutter: 16px;
	--ditechted-margin: 20px;
}

@media (min-width: 768px) {
	:root {
		--ditechted-columns: 8;
		--ditechted-gutter: 24px;
		--ditechted-margin: 40px;
	}
}

@media (min-width: 1280px) {
	:root {
		--ditechted-columns: 12;
		--ditechted-gutter: 24px;
	}
}

@media (min-width: 1600px) {
	:root {
		--ditechted-gutter: 32px;
	}
}

.wp-block-group.is-layout-constrained,
main#main-content {
	padding-inline: var(--ditechted-margin);
}

.ditechted-grid {
	display: grid;
	grid-template-columns: repeat(var(--ditechted-columns), 1fr);
	gap: var(--ditechted-gutter);
}

/* Text-measure constraint for long-form editorial content (Insights
   articles, Case Study/Service narrative body). */
.ditechted-editorial-content {
	max-width: var(--ditechted-measure);
	margin-inline: auto;
}