/**
 * Infynic Theme - Layout Containers, Grid System & Stack Utilities
 *
 * @package Infynic_Theme
 * @author Jyotirmay Ray <https://jyotirmayray.in/>
 */

/* ==========================================================================
   1. Shell & Document Structure
   ========================================================================== */
.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-header {
	background-color: var(--infynic-glass-bg);
	backdrop-filter: var(--infynic-glass-blur);
	-webkit-backdrop-filter: var(--infynic-glass-blur);
	border-bottom: 1px solid var(--infynic-border-glass);
	position: sticky;
	top: 0;
	z-index: 100;
	padding: var(--infynic-space-4) 0;
	box-shadow: var(--infynic-shadow-xs);
}

.site-main {
	flex: 1 0 auto;
	padding: var(--infynic-space-12) 0;
}

.site-footer {
	background-color: var(--infynic-bg-surface);
	border-top: 1px solid var(--infynic-border-default);
	padding: var(--infynic-space-12) 0 var(--infynic-space-8);
	margin-top: auto;
}

/* ==========================================================================
   2. Layout Containers
   ========================================================================== */
.infynic-container {
	width: 100%;
	max-width: var(--infynic-container-standard);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--infynic-container-pad);
	padding-right: var(--infynic-container-pad);
}

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

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

.infynic-container--full {
	max-width: var(--infynic-container-full);
}

/* ==========================================================================
   3. Grid System
   ========================================================================== */
.infynic-grid {
	display: grid;
	gap: var(--infynic-space-6);
}

.infynic-grid-2 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--infynic-space-6);
}

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

.infynic-grid-3 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--infynic-space-6);
}

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

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

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

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

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

.infynic-grid-auto {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--infynic-space-6);
}

/* Sidebar + Content Layout */
.infynic-grid-sidebar {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--infynic-space-8);
}

@media (min-width: 1024px) {
	.infynic-grid-sidebar {
		grid-template-columns: 280px 1fr;
	}
}

.infynic-grid-sidebar-right {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--infynic-space-8);
}

@media (min-width: 1024px) {
	.infynic-grid-sidebar-right {
		grid-template-columns: 1fr 280px;
	}
}

/* Editorial Asymmetric Composition */
.infynic-grid-editorial {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--infynic-space-6);
}

@media (min-width: 1024px) {
	.infynic-grid-editorial {
		grid-template-columns: 1.4fr 1fr;
	}
}

/* ==========================================================================
   4. Flex & Stack Layout Utilities
   ========================================================================== */
.infynic-stack {
	display: flex;
	flex-direction: column;
	gap: var(--infynic-space-4);
}

.infynic-stack--sm { gap: var(--infynic-space-2); }
.infynic-stack--lg { gap: var(--infynic-space-8); }
.infynic-stack--xl { gap: var(--infynic-space-12); }

.infynic-inline {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--infynic-space-4);
}

.infynic-inline--sm { gap: var(--infynic-space-2); }
.infynic-inline--lg { gap: var(--infynic-space-6); }

.infynic-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--infynic-space-3);
}

.infynic-split {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--infynic-space-4);
}

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

/* ==========================================================================
   5. Dividers
   ========================================================================== */
.infynic-divider {
	border: 0;
	height: 1px;
	background-color: var(--infynic-border-default);
	margin: var(--infynic-space-6) 0;
}

.infynic-divider--subtle {
	background-color: var(--infynic-border-subtle);
}

.infynic-divider--glass {
	background-color: var(--infynic-border-glass);
}

/* ==========================================================================
   6. Responsive Visibility Classes
   ========================================================================== */
.infynic-hide-mobile {
	display: none !important;
}

@media (min-width: 768px) {
	.infynic-hide-mobile {
		display: inline-flex !important;
	}
}

.infynic-hide-desktop {
	display: inline-flex !important;
}

@media (min-width: 768px) {
	.infynic-hide-desktop {
		display: none !important;
	}
}