/* Unit Ad Responsive Enhancements */

/* Ensure wifi and r32 images have max-width of 200px */
.wifi,
.r32 {
	max-width: 200px !important;
	width: auto;
	height: auto;
}

/* Fix horizontal scroll issues while allowing header overflow */
html {
	max-width: 100vw;
}

/* Override body overflow to allow header elements to extend */
body {
	max-width: 100vw;
	overflow-x: visible !important;
	overflow-y: auto;
}

/* Allow header elements to overflow for proper display */
header {
	overflow: visible !important;
	z-index: 1;
}

header .warehouse-wrap {
	overflow: visible !important;
	max-width: 100%;
}

header .warehouse {
	overflow: visible !important;
	max-width: 100%;
}

/* Prevent horizontal scroll on main content */
#app {
	overflow-x: hidden;
}

/* Ensure consistent spacing between unit ads across all breakpoints */
#unit-ads {
	width: 100%;
	max-width: 100%;
}

/* Override the default article styles that cause issues */
#unit-ads article,
article.unit-ad,
.unit-ad {
	max-height: none !important;
	overflow: visible !important;
	height: auto !important;
	flex: 0 0 auto !important; /* Prevent flex: 1 0 auto expansion */
	.r32,
	.r410a,
	.wifi {
		max-width: 75px !important;
		width: auto !important;
		height: auto !important;
	}
}

/* Intermediate screen optimizations (800px to 1099px) */
@media (min-width: 800px) and (max-width: 1099px) {
	#unit-ads {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 0.5rem !important;
	}

	.unit-ad {
		max-height: none !important;
		overflow: visible !important;
		height: auto !important;
		flex: 0 0 auto !important; /* Prevent flex expansion */
	}

	.unit-ad .images img,
	.unit-ad img {
		max-width: 500px !important;
		width: 100% !important;
		height: auto !important;
		object-fit: contain !important;
	}
}

/* Mobile optimizations */
@media (max-width: 799px) {
	main {
		padding: 4px !important;
	}

	#unit-ads {
		gap: 4px !important;
		grid-template-columns: 1fr !important;
	}

	.unit-ad:not(.noborder) {
		border: 1px solid #bbb;
		padding: 4px;
	}

	/* Fix height to show all content without internal scrolling or extreme expansion */
	#unit-ads article,
	article.unit-ad,
	.unit-ad {
		max-height: none !important;
		overflow: visible !important;
		height: auto !important;
		min-height: auto !important;
		flex: 0 0 auto !important; /* Prevent flex expansion */
	}

	.ad-head {
		height: auto !important;
		min-height: auto !important;
		max-height: fit-content !important;
	}

	/* Ensure images and content fit properly */
	.unit-ad .images img,
	.unit-ad img {
		object-fit: contain;
	}

	/* Ensure data bars are fully visible */
	.data-bars {
		overflow: visible !important;
		max-height: fit-content !important;
	}
}

/* Tablet optimizations */
@media (min-width: 1100px) and (max-width: 1299px) {
	main {
		padding: 0.75rem 0 0 0 !important;
	}

	#unit-ads {
		gap: 0.75rem !important;
	}

	.unit-ad:not(.noborder) {
		padding: 0.75rem;
	}
}

/* Desktop grid layout */
@media (min-width: 1100px) {
	#unit-ads {
		grid-template-columns: 1fr 1fr !important;
	}

	.unit-ad {
		max-height: none !important;
		overflow: visible !important;
		height: auto !important;
		flex: 0 0 auto !important; /* Prevent flex expansion */
		.images img,
		img {
			/* max-height: 200px; */
			max-width: 100%;
			object-fit: contain;
		}
	}
}

/* Fix for small ads to span properly */
@media (min-width: 1100px) {
	.unit-ad:not(.small) {
		grid-column: 1 / 3;
	}

	.unit-ad.small {
		grid-column: span 1;
	}
}

/* Ensure white space is visible on all screen sizes above 1100px */
@media (min-width: 1100px) {
	body {
		background: #05f;
		padding: 0;
		margin: 0;
	}

	#app {
		background: #fff;
		/*box-shadow: 0 0 20px rgba(0,0,0,0.1);*/
		box-shadow: none;
	}
}

/* Fix header positioning across breakpoints */
@media (min-width: 1100px) and (max-width: 1299px) {
	header {
		margin: 1rem auto 0 !important;
	}
}

/* Optimize sidebars on intermediate screens */
@media (min-width: 1100px) and (max-width: 1299px) {
	aside.left,
	aside.right {
		font-size: 0.75rem;
	}

	aside nav ul li {
		font-size: 0.7rem !important;

		span {
			padding-left: 0.125rem !important;
		}
	}
}

/* Ensure proper text wrapping on smaller screens */
@media (max-width: 1099px) {
	.nobreak {
		white-space: normal !important;
		word-break: break-word;
	}

	/* Fix text overlays that might cause height issues */
	.text-overlay,
	.blue-model-overlay,
	.red-model-overlay,
	.blue-model3-overlay {
		height: auto !important;
		min-height: auto !important;
		max-height: fit-content !important;
		overflow: visible !important;
	}

	/* Ensure all wrapper elements allow content to flow */
	wrap,
	.wrap {
		height: auto !important;
		max-height: fit-content !important;
		overflow: visible !important;
	}

	/* Fix any column or row height restrictions */
	column,
	.column,
	row,
	.row {
		height: auto !important;
		max-height: fit-content !important;
	}
}

/* Fix DataBar responsive issues */
@media (max-width: 1099px) {
	.data-bar {
		font-size: 0.7rem !important;
		padding: 2px !important;
		height: auto !important;
		overflow: visible !important;
	}

	.data-bar .price {
		font-size: 0.8rem !important;
	}
}