/* Modern CSS-First Responsive System */

:root {
	/* New breakpoint values as CSS custom properties */
	--bp-mobile-v2: 23.4375em; /* 375px */
	--bp-tablet-v2: 48em; /* 768px */
	--bp-laptop-v2: 80em; /* 1280px */
	--bp-desktop-v2: 90em; /* 1440px */
	--bp-wide-v2: 120em; /* 1920px */
	--bp-ultrawide-v2: 160em; /* 2560px */
	--bp-uhd-v2: 240em; /* 3840px */

	/* Fluid spacing system using clamp() - updated for ultra-wide */
	--space-xs-v2: clamp(0.5rem, 1vw, 1.25rem);
	--space-sm-v2: clamp(1rem, 1.5vw, 2rem);
	--space-md-v2: clamp(1.5rem, 2vw, 3rem);
	--space-lg-v2: clamp(2rem, 3vw, 5rem);
	--space-xl-v2: clamp(3rem, 4vw, 8rem);

	/* Fluid typography scale - updated for ultra-wide */
	--text-xs-v2: clamp(0.75rem, 0.5vw, 1rem);
	--text-sm-v2: clamp(0.875rem, 0.75vw, 1.125rem);
	--text-base-v2: clamp(1rem, 1vw, 1.25rem);
	--text-lg-v2: clamp(1.125rem, 1.25vw, 1.375rem);
	--text-xl-v2: clamp(1.25rem, 1.5vw, 1.625rem);
	--text-2xl-v2: clamp(1.5rem, 2vw, 2.25rem);
	--text-3xl-v2: clamp(2rem, 2.5vw, 3.5rem);
	--text-4xl-v2: clamp(2.5rem, 3vw, 5rem);

	/* Grid gaps - updated for ultra-wide */
	--grid-gap-v2: clamp(1rem, 2vw, 3rem);
	--card-gap-v2: clamp(1rem, 1.5vw, 2rem);
}

/* Container Query Utilities */
.responsive-container-v2 {
	container-type: inline-size;
	container-name: layout;
}

.card-container-v2 {
	container-type: inline-size;
	container-name: card;
}

.nav-container-v2 {
	container-type: inline-size;
	container-name: navigation;
}

/* Auto-responsive Grid Patterns */
.auto-grid-v2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: var(--grid-gap-v2);
}

.responsive-columns-v2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--card-gap-v2);
}

/* Responsive Image Base */
.responsive-image-v2 {
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Container Query Examples */
@container card (width > 400px) {
	.card-horizontal-v2 {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 1rem;
	}
}

@container card (width > 600px) {
	.card-enhanced-v2 {
		padding: 1.5rem;
	}
}

/* Feature Detection for Container Queries */
@supports (container-type: inline-size) {
	.container-query-supported-v2 {
		/* Enhanced styles for browsers that support container queries */
		display: block; /* Ensure the element is displayed */
	}
}

@supports not (container-type: inline-size) {
	.container-query-fallback-v2 {
		/* Fallback styles using media queries */
		display: block; /* Ensure the element is displayed */
	}
}

/* Ultra-wide specific utilities */
@media (min-width: 160em) {
	/* 2560px+ */
	.container-ultrawide-v2 {
		max-width: 140rem; /* 2240px */
		margin: 0 auto;
	}
}

@media (min-width: 240em) {
	/* 3840px+ */
	.container-uhd-v2 {
		max-width: 200rem; /* 3200px */
		margin: 0 auto;
	}
}

/* Container query patterns for ultra-wide */
@container (width > 2560px) {
	.ultra-wide-layout-v2 {
		grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
		gap: var(--space-lg-v2);
	}
}

@container (width > 3840px) {
	.uhd-layout-v2 {
		grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
		gap: var(--space-xl-v2);
	}
}