/* Responsive styles */
@media (max-width: 1199px) {
	.wl-content-layout {
		grid-template-columns: 260px minmax(0, 1fr);
	}
	
	.wl-sidebar-right {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 1.5rem;
	}
}

@media (max-width: 992px) {
	.wl-grid-cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.wl-content-layout {
		grid-template-columns: 1fr;
		display: flex;
		flex-direction: column;
	}
	
	.wl-main-content {
		order: 1;
	}
	
	.wl-sidebar-right {
		order: 2;
	}
	
	.wl-sidebar-left {
		display: none; /* Hide left sidebar by default on mobile, handled by JS drawer if needed */
	}

	.wl-menu-toggle {
		display: block;
	}

	.wl-main-navigation ul {
		display: none;
		flex-direction: column;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--wl-color-white);
		padding: 1rem;
		box-shadow: var(--wl-shadow-md);
	}

	.wl-main-navigation.toggled ul {
		display: flex;
	}

	.wl-grid-cols-3,
	.wl-grid-cols-2 {
		grid-template-columns: 1fr;
	}

	.wl-hero h2 {
		font-size: 2rem;
	}
}

@media (max-width: 576px) {
	.wl-grid-cols-4 {
		grid-template-columns: 1fr;
	}
}
/* Responsive Drawer CSS */
@media (max-width: 768px) {
	.wl-sidebar-drawer-toggle {
		display: inline-block;
		margin: 1rem 0;
	}

	.wl-sidebar-left {
		position: fixed;
		top: 0;
		left: -300px;
		width: 280px;
		height: 100vh;
		background: var(--wl-color-white);
		z-index: 1000;
		overflow-y: auto;
		transition: left 0.3s ease;
		padding: 1rem;
		box-shadow: var(--wl-shadow-lg);
		display: block !important;
	}

	.wl-sidebar-left.wl-drawer-open {
		left: 0;
	}

	.wl-drawer-close {
		display: block;
		width: 100%;
		background: var(--wl-color-background);
		border: 1px solid var(--wl-color-border);
		padding: 0.75rem;
		margin-bottom: 1rem;
		text-align: right;
		font-weight: bold;
		cursor: pointer;
	}

	.wl-drawer-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,0.5);
		z-index: 999;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease;
	}

	.wl-drawer-overlay.wl-overlay-visible {
		opacity: 1;
		visibility: visible;
	}
}

@media (min-width: 769px) {
	.wl-sidebar-drawer-toggle {
		display: none;
	}
	
	.wl-drawer-close {
		display: none;
	}

	.wl-drawer-overlay {
		display: none;
	}
}