/**
 * CLM Layout — containers, grid system, flex utilities.
 * Mobile-first. Breakpoints: 375 -> 640 -> 768 -> 1024 -> 1280.
 */

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

.clm-container {
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--clm-space-4);
}

@media (min-width: 640px) {
	.clm-container {
		padding-inline: var(--clm-space-5);
	}
}

@media (min-width: 1024px) {
	.clm-container {
		max-width: 1024px;
		padding-inline: var(--clm-space-6);
	}
}

@media (min-width: 1280px) {
	.clm-container {
		max-width: 1200px;
	}
}

.clm-container--narrow {
	max-width: 720px;
}

.clm-container--wide {
	max-width: 1440px;
}

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

.clm-grid {
	display: grid;
	gap: var(--clm-space-4);
	grid-template-columns: 1fr;
}

.clm-grid--tight {
	gap: var(--clm-space-2);
}

.clm-grid--loose {
	gap: var(--clm-space-6);
}

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

@media (min-width: 768px) {
	.clm-grid--2-tablet {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

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

@media (min-width: 1280px) {
	.clm-grid--5 {
		grid-template-columns: repeat(5, 1fr);
	}

	.clm-grid--6 {
		grid-template-columns: repeat(6, 1fr);
	}
}

/* Sidebar layout: stacked on mobile, two-column from 1024px up. */
.clm-layout-with-sidebar {
	display: grid;
	gap: var(--clm-space-6);
	grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
	.clm-layout-with-sidebar {
		grid-template-columns: minmax(0, 1fr) 320px;
		align-items: start;
	}

	.clm-layout-with-sidebar__sidebar {
		position: sticky;
		top: var(--clm-space-6);
	}
}

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

.clm-flex {
	display: flex;
}

.clm-flex--column {
	flex-direction: column;
}

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

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

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

.clm-flex--gap-1 { gap: var(--clm-space-1); }
.clm-flex--gap-2 { gap: var(--clm-space-2); }
.clm-flex--gap-3 { gap: var(--clm-space-3); }
.clm-flex--gap-4 { gap: var(--clm-space-4); }
.clm-flex--gap-5 { gap: var(--clm-space-5); }

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

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

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

.clm-stack--loose > * + * {
	margin-top: var(--clm-space-6);
}

/* ---------------------------------------------------------------------
   Responsive visibility helpers
--------------------------------------------------------------------- */

.clm-hide-mobile {
	display: none;
}

@media (min-width: 768px) {
	.clm-hide-mobile {
		display: revert;
	}

	.clm-hide-desktop {
		display: none;
	}
}

.clm-only-mobile {
	display: revert;
}

@media (min-width: 1024px) {
	.clm-only-mobile {
		display: none;
	}
}

.clm-only-desktop {
	display: none;
}

@media (min-width: 1024px) {
	.clm-only-desktop {
		display: revert;
	}
}

/* ---------------------------------------------------------------------
   Section spacing
--------------------------------------------------------------------- */

.clm-section {
	padding-block: var(--clm-space-6);
}

@media (min-width: 1024px) {
	.clm-section {
		padding-block: var(--clm-space-8);
	}
}

.clm-section--tight {
	padding-block: var(--clm-space-4);
}