/*
 * TherapyBuilt — layout.css
 *
 * Container, grid system, and section wrapper utilities.
 * Depends on: tokens.css, base.css
 */

/* -------------------------------------------------------------------------
 * Container
 * ------------------------------------------------------------------------ */

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

.tb-container--narrow {
	max-width: 780px;
}

.tb-container--wide {
	max-width: 1400px;
}

/* -------------------------------------------------------------------------
 * Section wrapper
 * ------------------------------------------------------------------------ */

.tb-section {
	padding-block: var(--section-gap);
}

.tb-section--sm {
	padding-block: var(--section-gap-sm);
}

.tb-section--flush {
	padding-block: 0;
}

/* Section alternating background */
.tb-section--alt {
	background-color: var(--tb-surface);
}

/* -------------------------------------------------------------------------
 * Grid
 * ------------------------------------------------------------------------ */

.tb-grid {
	display: grid;
	gap: var(--space-8);
}

/* Responsive auto-fill columns */
.tb-grid--auto {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

/* Explicit column counts */
.tb-grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

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

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

/* Sidebar layout */
.tb-grid--sidebar {
	grid-template-columns: 1fr 340px;
}

@media (max-width: 900px) {
	.tb-grid--2,
	.tb-grid--3,
	.tb-grid--4,
	.tb-grid--sidebar {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.tb-grid--auto {
		grid-template-columns: 1fr;
	}

	:root {
		--container-padding: var(--space-4);
		--section-gap:       var(--space-16);
		--section-gap-sm:    var(--space-10);
	}
}

/* -------------------------------------------------------------------------
 * Flex utilities
 * ------------------------------------------------------------------------ */

.tb-flex {
	display: flex;
	gap: var(--space-4);
}

.tb-flex--center {
	align-items: center;
	justify-content: center;
}

.tb-flex--between {
	align-items: center;
	justify-content: space-between;
}

.tb-flex--wrap {
	flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
 * Stack (vertical rhythm helper)
 * ------------------------------------------------------------------------ */

.tb-stack > * + * {
	margin-top: var(--space-4);
}

.tb-stack--sm > * + * {
	margin-top: var(--space-2);
}

.tb-stack--lg > * + * {
	margin-top: var(--space-8);
}

/* -------------------------------------------------------------------------
 * Text alignment utilities
 * ------------------------------------------------------------------------ */

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