/**
 * Layouts - Layout Patterns and Grid Systems
 * 
 * @package Pachamama
 * @version 1.1.0
 */

/* ========================================
   CONTAINER WIDTHS
   ======================================== */

.container {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 80px;
}

.container-narrow {
	max-width: 760px;
	margin: 0 auto;
}

.container-article {
	max-width: 840px;
	margin: 0 auto;
}

/* ========================================
   GRID SYSTEMS
   ======================================== */

.grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.grid-8 {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 16px;
}

.grid-auto-fill {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 24px;
}

.grid-auto-fill-sm {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}

/* ========================================
   TWO-COLUMN LAYOUTS
   ======================================== */

.layout-main-sidebar {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 60px;
	align-items: start;
}

.layout-article {
	display: grid;
	grid-template-columns: 840px 1fr;
	gap: 60px;
	align-items: start;
}

.layout-hero-split {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 60px;
	align-items: start;
}

/* ========================================
   SECTION PADDING
   ======================================== */

.section {
	padding: 80px 0;
}

.section-lg {
	padding: 100px 0;
}

.section-sm {
	padding: 60px 0;
}

/* ========================================
   STICKY ELEMENTS
   ======================================== */

.sticky-sidebar {
	position: sticky;
	top: 100px;
}

.sticky-filters {
	position: sticky;
	top: 68px;
	z-index: 50;
}

/* ========================================
   FLEX UTILITIES
   ======================================== */

.flex {
	display: flex;
}

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

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

.flex-col {
	display: flex;
	flex-direction: column;
}

.gap-sm {
	gap: var(--space-md);
}

.gap-md {
	gap: var(--space-xl);
}

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

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

@media (max-width: 1100px) {
	.container {
		padding: 0 40px;
	}
	
	.grid-4 {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	
	.grid-3 {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	
	.grid-8 {
		grid-template-columns: repeat(4, 1fr);
	}
	
	.layout-main-sidebar,
	.layout-article,
	.layout-hero-split {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	
	.sticky-sidebar {
		position: static;
	}
	
	.section {
		padding: 60px 0;
	}
	
	.section-lg {
		padding: 80px 0;
	}
	
	.section-sm {
		padding: 40px 0;
	}
}

@media (max-width: 700px) {
	.container {
		padding: 0 20px;
		max-width: 100%;
		overflow-x: hidden;
	}
	
	.grid-4,
	.grid-3,
	.grid-8 {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	
	.grid-auto-fill,
	.grid-auto-fill-sm {
		grid-template-columns: 1fr;
	}
	
	.section {
		padding: 48px 0;
	}
	
	.section-lg {
		padding: 60px 0;
	}
	
	.section-sm {
		padding: 32px 0;
	}
}