/**
 * Responsive Columns for Post Template
 * 
 * @package QuickCommerce
 */

/* Use CSS custom properties for responsive columns */
.wp-block-post-template.qcom-post-template-responsive,
.facetwp-template.qcom-post-template-responsive,
ul.facetwp-template {
	display: grid !important;
	gap: 1.25em;
	list-style: none;
	margin: 0;
	padding: 0;
	/* Mobile: default (applies up to 640px) */
	grid-template-columns: repeat(var(--qcom-mobile-columns, 1), 1fr);
	/* Ensure grid container maintains structure */
	grid-auto-flow: row;
	width: 100%;
	align-items: stretch;
}

/* Tablet breakpoint (640px and up) */
@media (min-width: 640px) {
	.wp-block-post-template.qcom-post-template-responsive,
	.facetwp-template.qcom-post-template-responsive {
		grid-template-columns: repeat(var(--qcom-tablet-columns, 2), 1fr);
	}
}

/* Desktop breakpoint (1024px and up) */
@media (min-width: 1024px) {
	.wp-block-post-template.qcom-post-template-responsive,
	.facetwp-template.qcom-post-template-responsive {
		grid-template-columns: repeat(var(--qcom-desktop-columns, 4), 1fr);
	}
}

/* Ensure list items don't have default styling and have relative positioning for absolute children */
.wp-block-post-template.qcom-post-template-responsive > li,
.facetwp-template.qcom-post-template-responsive > li,
ul.facetwp-template > li {
	margin: 0;
	position: relative;
	/* Ensure items stay within grid */
	min-width: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 100%;
}

/* Ensure grid maintains structure when items are dynamically added */
.wp-block-post-template.qcom-post-template-responsive li,
.facetwp-template.qcom-post-template-responsive li,
ul.facetwp-template li {
	position: relative;
	min-width: 0;
}

/* Ensure inner post content stretches */
.wp-block-post-template.qcom-post-template-responsive > li > .wp-block-post,
.facetwp-template.qcom-post-template-responsive > li > .wp-block-post,
ul.facetwp-template > li > .wp-block-post {
	height: 100%;
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Ensure FacetWP templates maintain grid even without our classes */
ul.facetwp-template:not(.qcom-post-template-responsive) {
	display: grid !important;
	gap: 1.25em;
	list-style: none;
	margin: 0;
	padding: 0;
	grid-template-columns: repeat(1, 1fr);
	align-items: stretch;
}

@media (min-width: 640px) {
	ul.facetwp-template:not(.qcom-post-template-responsive) {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	ul.facetwp-template:not(.qcom-post-template-responsive) {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Fallback for when CSS custom properties aren't supported */
/* Mobile styles (apply only below 640px) */
@media (max-width: 639px) {
	.wp-block-post-template.qcom-responsive-columns-mobile-1,
	.facetwp-template.qcom-responsive-columns-mobile-1 {
		grid-template-columns: repeat(1, 1fr) !important;
	}

	.wp-block-post-template.qcom-responsive-columns-mobile-2,
	.facetwp-template.qcom-responsive-columns-mobile-2 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* Tablet styles (640px and up) */
@media (min-width: 640px) {
	.wp-block-post-template.qcom-responsive-columns-tablet-1,
	.facetwp-template.qcom-responsive-columns-tablet-1 {
		grid-template-columns: repeat(1, 1fr);
	}
	
	.wp-block-post-template.qcom-responsive-columns-tablet-2,
	.facetwp-template.qcom-responsive-columns-tablet-2 {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.wp-block-post-template.qcom-responsive-columns-tablet-3,
	.facetwp-template.qcom-responsive-columns-tablet-3 {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.wp-block-post-template.qcom-responsive-columns-tablet-4,
	.facetwp-template.qcom-responsive-columns-tablet-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 1024px) {
	.wp-block-post-template.qcom-responsive-columns-desktop-1,
	.facetwp-template.qcom-responsive-columns-desktop-1 {
		grid-template-columns: repeat(1, 1fr);
	}
	
	.wp-block-post-template.qcom-responsive-columns-desktop-2,
	.facetwp-template.qcom-responsive-columns-desktop-2 {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.wp-block-post-template.qcom-responsive-columns-desktop-3,
	.facetwp-template.qcom-responsive-columns-desktop-3 {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.wp-block-post-template.qcom-responsive-columns-desktop-4,
	.facetwp-template.qcom-responsive-columns-desktop-4 {
		grid-template-columns: repeat(4, 1fr);
	}
	
	.wp-block-post-template.qcom-responsive-columns-desktop-5,
	.facetwp-template.qcom-responsive-columns-desktop-5 {
		grid-template-columns: repeat(5, 1fr);
	}
	
	.wp-block-post-template.qcom-responsive-columns-desktop-6,
	.facetwp-template.qcom-responsive-columns-desktop-6 {
		grid-template-columns: repeat(6, 1fr);
	}
}