/* Breakpoints */
/* Mobile First (Base styles handle < 576px) */

@media (min-width: 576px) {
	.grid-2, .grid-3, .grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.floating-cta {
		flex-direction: column;
		left: 20px;
		bottom: 20px;
	}
}

@media (min-width: 992px) {
	.grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.grid-4 {
		grid-template-columns: repeat(4, 1fr);
	}
	
	.menu-toggle {
		display: none;
	}
	
	.main-navigation {
		display: block;
	}
}

@media (max-width: 991.98px) {
	/* Mobile Nav adjustments */
	.main-navigation ul {
		display: none;
	}
	
	.mobile-menu-panel {
		position: fixed;
		top: 0; left: -300px;
		width: 300px; height: 100vh;
		background: #fff;
		z-index: 10001;
		transition: left 0.3s ease;
		box-shadow: var(--shadow-lg);
		padding: var(--space-4);
		overflow-y: auto;
	}
	
	.mobile-menu-panel.is-active {
		left: 0;
	}
	
	.mobile-menu-overlay {
		position: fixed;
		top: 0; left: 0; width: 100%; height: 100%;
		background: rgba(0,0,0,0.5);
		z-index: 10000;
		display: none;
	}
	
	.mobile-menu-overlay.is-active {
		display: block;
	}
	
	.mobile-primary-navigation ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}
	
	.mobile-primary-navigation li {
		border-bottom: 1px solid var(--color-border);
	}
	
	.mobile-primary-navigation a {
		display: block;
		padding: var(--space-3) 0;
		color: var(--color-text);
		font-weight: 500;
	}
	
	/* Hide topbar on small screens */
	.topbar {
		display: none;
	}
}

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

@media (min-width: 1400px) {
	:root {
		--text-hero: 4rem;
	}
}