/* ============================================================
   Utilities — STRUCTURAL only.
   No color, typography, or border utilities here.
   ============================================================ */

/* ---------- containers ---------- */

.dt-container,
.dt-container-narrow,
.dt-container-prose {
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--space-6);
}

@media (min-width: 768px) {
	.dt-container,
	.dt-container-narrow,
	.dt-container-prose {
		padding-inline: var(--space-8);
	}
}

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

/* ---------- section ---------- */

.dt-section { padding-block: var(--section-pad-m); }

@media (min-width: 768px)  { .dt-section { padding-block: var(--section-pad-t); } }
@media (min-width: 1024px) { .dt-section { padding-block: var(--section-pad-d); } }

/* ---------- vertical stack ---------- */

.dt-stack    { display: flex; flex-direction: column; }
.dt-stack-1  { display: flex; flex-direction: column; row-gap: var(--space-1); }
.dt-stack-2  { display: flex; flex-direction: column; row-gap: var(--space-2); }
.dt-stack-3  { display: flex; flex-direction: column; row-gap: var(--space-3); }
.dt-stack-4  { display: flex; flex-direction: column; row-gap: var(--space-4); }
.dt-stack-5  { display: flex; flex-direction: column; row-gap: var(--space-5); }
.dt-stack-6  { display: flex; flex-direction: column; row-gap: var(--space-6); }
.dt-stack-8  { display: flex; flex-direction: column; row-gap: var(--space-8); }
.dt-stack-10 { display: flex; flex-direction: column; row-gap: var(--space-10); }
.dt-stack-12 { display: flex; flex-direction: column; row-gap: var(--space-12); }
.dt-stack-16 { display: flex; flex-direction: column; row-gap: var(--space-16); }

/* ---------- horizontal cluster ---------- */

.dt-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
}

.dt-cluster--gap-2     { gap: var(--space-2); }
.dt-cluster--gap-4     { gap: var(--space-4); }
.dt-cluster--gap-6     { gap: var(--space-6); }
.dt-cluster--between   { justify-content: space-between; }
.dt-cluster--end       { justify-content: flex-end; }
.dt-cluster--center    { justify-content: center; }
.dt-cluster--align-top { align-items: flex-start; }

/* ---------- responsive grid ---------- */

.dt-grid { display: grid; gap: var(--space-6); }

.dt-grid-2 { grid-template-columns: repeat(1, 1fr); }
.dt-grid-3 { grid-template-columns: repeat(1, 1fr); }
.dt-grid-4 { grid-template-columns: repeat(1, 1fr); }
.dt-grid-6 { grid-template-columns: repeat(2, 1fr); }

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

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

/* ---------- bento grid (mixed-size tile layout) ----------
   Children that need to span 2x2 get .dt-bento__featured. */

.dt-bento {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
}

@media (min-width: 768px) {
	.dt-bento { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
}

@media (min-width: 1024px) {
	.dt-bento {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: 1fr;
		gap: var(--space-5);
	}
	.dt-bento__featured {
		grid-column: span 2;
		grid-row: span 2;
	}
}

/* ---------- main + aside split (60/40 desktop) ---------- */

.dt-split {
	display: grid;
	gap: var(--space-10);
	grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
	.dt-split {
		grid-template-columns: 6fr 5fr;
		gap: var(--space-16);
	}
}

.dt-split--reverse > :first-child { order: 2; }
.dt-split--reverse > :last-child  { order: 1; }

/* ---------- responsive table wrapper ---------- */

.dt-table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--radius-card);
	border: var(--border-thin);
	background: var(--dt-surface);
}
.dt-table-wrap table { border-radius: inherit; overflow: hidden; }

/* ---------- alignment ---------- */

.dt-align-center { text-align: center; }
.dt-align-left   { text-align: left; }
.dt-align-right  { text-align: right; }

/* ---------- accessibility ---------- */

.visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}