/**
 * AUDIMAC Layout System
 * ----------------------------------------------------------------------
 * File: assets/css/layout.css
 * Phụ thuộc: tokens.css.
 * Container / Section / Grid — không dùng fixed width tuyệt đối, luôn
 * dựa trên token + max-width + %, để không gây overflow mobile.
 * Mọi override theo breakpoint nằm ở responsive.css.
 */

/* ============================================================
   Container
   ============================================================ */
.audm-container {
	width: 100%;
	max-width: var(--audm-container);
	margin-inline: auto;
	padding-inline: var(--audm-container-gutter);
	box-sizing: border-box;
}

.audm-container-wide {
	width: 100%;
	max-width: var(--audm-container-wide);
	margin-inline: auto;
	padding-inline: var(--audm-container-gutter);
	box-sizing: border-box;
}

/* ============================================================
   Section
   ============================================================ */
.audm-section {
	padding-block: var(--audm-space-16);
}

.audm-section-sm {
	padding-block: var(--audm-space-8);
}

.audm-section-lg {
	padding-block: var(--audm-space-16);
	padding-bottom: calc(var(--audm-space-16) + var(--audm-space-8));
}

.audm-section--alt {
	background: var(--audm-color-bg-alt);
}

/* ============================================================
   Grid system — 2 / 3 / 4 cột
   ============================================================ */
.audm-grid {
	display: grid;
	gap: var(--audm-space-6);
	width: 100%;
}

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

/* Responsive collapse cho grid nằm ở responsive.css */

/* ============================================================
   Flex utility tối thiểu (dùng nội bộ cho component, không lạm dụng)
   ============================================================ */
.audm-flex {
	display: flex;
}
.audm-flex--center {
	align-items: center;
}
.audm-flex--between {
	justify-content: space-between;
}
.audm-flex--wrap {
	flex-wrap: wrap;
}
.audm-flex--gap-2 { gap: var(--audm-space-2); }
.audm-flex--gap-3 { gap: var(--audm-space-3); }
.audm-flex--gap-4 { gap: var(--audm-space-4); }