/**
 * Layout Patterns — indranil-theme
 *
 * Container, grid, section spacing, and flex utility classes for structural
 * layout across the theme. All values reference custom properties defined in
 * variables.css, which must be enqueued before this file.
 *
 * Mobile-first: grid columns default to single-column (1fr). Multi-column
 * breakpoints are defined in responsive.css.
 */


/* ----------------------------------------
 * Containers
 * ---------------------------------------- */

.site-container {
	width: 100%;
	max-width: var(--max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-md);
	padding-right: var(--space-md);
}

.site-container--narrow {
	max-width: var(--max-text-width);
}

.site-container--full {
	max-width: none;
	padding: 0;
}


/* ----------------------------------------
 * Section Spacing
 * ---------------------------------------- */

.site-section {
	padding-top: var(--space-4xl);
	padding-bottom: var(--space-4xl);
}

.site-section--sm {
	padding-top: var(--space-2xl);
	padding-bottom: var(--space-2xl);
}

.site-section--lg {
	padding-top: var(--space-5xl);
	padding-bottom: var(--space-5xl);
}

.site-section--alt {
	background-color: var(--color-gray-50);
}


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

.site-grid {
	display: grid;
	gap: var(--space-lg);
}

/* Mobile default: single column. Multi-column defined in responsive.css. */
.site-grid--2 {
	grid-template-columns: 1fr;
}

.site-grid--3 {
	grid-template-columns: 1fr;
}


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

.site-flex {
	display: flex;
	gap: var(--space-md);
}

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

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

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