/**
 * Layout Utilities
 *
 * @package EpicMarks
 */

/* ==========================================================================
   Container
   ========================================================================== */

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

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

.em-container--wide {
	max-width: var(--em-container-wide);
}

.em-container--fluid {
	max-width: none;
}

/* ==========================================================================
   CSS Grid Utilities
   ========================================================================== */

.em-grid {
	display: grid;
	gap: var(--em-space-4);
}

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

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

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

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

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

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

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

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

/* Grid gap variants */
.em-grid--gap-sm {
	gap: var(--em-space-2);
}

.em-grid--gap-lg {
	gap: var(--em-space-6);
}

.em-grid--gap-xl {
	gap: var(--em-space-8);
}

/* ==========================================================================
   Flexbox Utilities
   ========================================================================== */

.em-flex {
	display: flex;
}

.em-flex--inline {
	display: inline-flex;
}

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

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

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

.em-flex--between {
	justify-content: space-between;
}

.em-flex--around {
	justify-content: space-around;
}

.em-flex--start {
	justify-content: flex-start;
}

.em-flex--end {
	justify-content: flex-end;
}

.em-flex--align-start {
	align-items: flex-start;
}

.em-flex--align-center {
	align-items: center;
}

.em-flex--align-end {
	align-items: flex-end;
}

.em-flex--gap-sm {
	gap: var(--em-space-2);
}

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

.em-flex--gap-lg {
	gap: var(--em-space-6);
}

/* Flex item utilities */
.em-flex-1 {
	flex: 1 1 0%;
}

.em-flex-auto {
	flex: 1 1 auto;
}

.em-flex-none {
	flex: none;
}

/* ==========================================================================
   Spacing Utilities
   ========================================================================== */

/* Margin top */
.em-mt-0 { margin-top: 0; }
.em-mt-1 { margin-top: var(--em-space-1); }
.em-mt-2 { margin-top: var(--em-space-2); }
.em-mt-3 { margin-top: var(--em-space-3); }
.em-mt-4 { margin-top: var(--em-space-4); }
.em-mt-6 { margin-top: var(--em-space-6); }
.em-mt-8 { margin-top: var(--em-space-8); }

/* Margin bottom */
.em-mb-0 { margin-bottom: 0; }
.em-mb-1 { margin-bottom: var(--em-space-1); }
.em-mb-2 { margin-bottom: var(--em-space-2); }
.em-mb-3 { margin-bottom: var(--em-space-3); }
.em-mb-4 { margin-bottom: var(--em-space-4); }
.em-mb-6 { margin-bottom: var(--em-space-6); }
.em-mb-8 { margin-bottom: var(--em-space-8); }

/* Margin left */
.em-ml-0 { margin-left: 0; }
.em-ml-1 { margin-left: var(--em-space-1); }
.em-ml-2 { margin-left: var(--em-space-2); }
.em-ml-4 { margin-left: var(--em-space-4); }
.em-ml-auto { margin-left: auto; }

/* Margin right */
.em-mr-0 { margin-right: 0; }
.em-mr-1 { margin-right: var(--em-space-1); }
.em-mr-2 { margin-right: var(--em-space-2); }
.em-mr-4 { margin-right: var(--em-space-4); }
.em-mr-auto { margin-right: auto; }

/* Margin horizontal */
.em-mx-auto {
	margin-left: auto;
	margin-right: auto;
}

/* Padding top */
.em-pt-0 { padding-top: 0; }
.em-pt-2 { padding-top: var(--em-space-2); }
.em-pt-4 { padding-top: var(--em-space-4); }
.em-pt-6 { padding-top: var(--em-space-6); }
.em-pt-8 { padding-top: var(--em-space-8); }

/* Padding bottom */
.em-pb-0 { padding-bottom: 0; }
.em-pb-2 { padding-bottom: var(--em-space-2); }
.em-pb-4 { padding-bottom: var(--em-space-4); }
.em-pb-6 { padding-bottom: var(--em-space-6); }
.em-pb-8 { padding-bottom: var(--em-space-8); }

/* Padding all */
.em-p-0 { padding: 0; }
.em-p-2 { padding: var(--em-space-2); }
.em-p-4 { padding: var(--em-space-4); }
.em-p-6 { padding: var(--em-space-6); }
.em-p-8 { padding: var(--em-space-8); }

/* ==========================================================================
   Display Utilities
   ========================================================================== */

.em-block {
	display: block;
}

.em-inline {
	display: inline;
}

.em-inline-block {
	display: inline-block;
}

.em-hidden {
	display: none;
}

/* Screen reader only - visually hidden but accessible */
.em-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Responsive Visibility
   ========================================================================== */

/* Hide on mobile, show on larger screens */
.em-hide-mobile {
	display: none;
}

@media (min-width: 640px) {
	.em-hide-mobile {
		display: block;
	}
}

/* Show on mobile, hide on larger screens */
@media (min-width: 640px) {
	.em-hide-desktop {
		display: none;
	}
}

/* Hide on tablet and up */
@media (min-width: 768px) {
	.em-hide-tablet-up {
		display: none;
	}
}

/* ==========================================================================
   Text Utilities
   ========================================================================== */

.em-text-left {
	text-align: left;
}

.em-text-center {
	text-align: center;
}

.em-text-right {
	text-align: right;
}

/* ==========================================================================
   Width Utilities
   ========================================================================== */

.em-w-full {
	width: 100%;
}

.em-w-auto {
	width: auto;
}

.em-max-w-full {
	max-width: 100%;
}

/* ==========================================================================
   Section Spacing
   ========================================================================== */

.em-section {
	padding-top: var(--em-space-12);
	padding-bottom: var(--em-space-12);
}

.em-section--sm {
	padding-top: var(--em-space-8);
	padding-bottom: var(--em-space-8);
}

.em-section--lg {
	padding-top: var(--em-space-16);
	padding-bottom: var(--em-space-16);
}

@media (min-width: 1024px) {
	.em-section {
		padding-top: var(--em-space-16);
		padding-bottom: var(--em-space-16);
	}

	.em-section--lg {
		padding-top: var(--em-space-24);
		padding-bottom: var(--em-space-24);
	}
}