/**
 * Frontend styles for Responsive Columns plugin
 * Provides responsive column layouts for WordPress Columns blocks
 */

/* Base responsive columns styles */
.wp-block-columns[class*='responsive-'] {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.wp-block-columns[class*='responsive-'] .wp-block-column {
	flex: 1;
	min-width: 0;
}

/* Desktop breakpoint (1025px and up) */
@media (min-width: 1025px) {
	.wp-block-columns.responsive-desktop-1 .wp-block-column {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.wp-block-columns.responsive-desktop-2 .wp-block-column {
		flex: 0 0 calc(50% - 12px);
		max-width: calc(50% - 12px);
	}

	.wp-block-columns.responsive-desktop-3 .wp-block-column {
		flex: 0 0 calc(33.333% - 16px);
		max-width: calc(33.333% - 16px);
	}

	.wp-block-columns.responsive-desktop-4 .wp-block-column {
		flex: 0 0 calc(25% - 18px);
		max-width: calc(25% - 18px);
	}

	.wp-block-columns.responsive-desktop-5 .wp-block-column {
		flex: 0 0 calc(20% - 19.2px);
		max-width: calc(20% - 19.2px);
	}

	.wp-block-columns.responsive-desktop-6 .wp-block-column {
		flex: 0 0 calc(16.666% - 20px);
		max-width: calc(16.666% - 20px);
	}
}

/* Tablet breakpoint (769px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
	.wp-block-columns[class*='responsive-'] {
		display: flex;
		flex-wrap: wrap !important;
	}

	.wp-block-columns[class*='responsive-tablet-'] .wp-block-column {
		flex: 1;
	}

	.wp-block-columns.responsive-tablet-1 .wp-block-column {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.wp-block-columns.responsive-tablet-2 .wp-block-column {
		flex: 0 0 calc(50% - 12px);
		max-width: calc(50% - 12px);
	}

	.wp-block-columns.responsive-tablet-3 .wp-block-column {
		flex: 0 0 calc(33.333% - 16px);
		max-width: calc(33.333% - 16px);
	}

	.wp-block-columns.responsive-tablet-4 .wp-block-column {
		flex: 0 0 calc(25% - 18px);
		max-width: calc(25% - 18px);
	}

	.wp-block-columns.responsive-tablet-5 .wp-block-column {
		flex: 0 0 calc(20% - 19.2px);
		max-width: calc(20% - 19.2px);
	}

	.wp-block-columns.responsive-tablet-6 .wp-block-column {
		flex: 0 0 calc(16.666% - 20px);
		max-width: calc(16.666% - 20px);
	}
}

/* Mobile breakpoint (768px and below) */
@media (max-width: 768px) {
	.wp-block-columns[class*='responsive-mobile-'] .wp-block-column {
		flex: 1;
	}

	.wp-block-columns.responsive-mobile-1 .wp-block-column {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.wp-block-columns.responsive-mobile-2 .wp-block-column {
		flex: 0 0 calc(50% - 12px);
		max-width: calc(50% - 12px);
	}

	.wp-block-columns.responsive-mobile-3 .wp-block-column {
		flex: 0 0 calc(33.333% - 16px);
		max-width: calc(33.333% - 16px);
	}

	.wp-block-columns.responsive-mobile-4 .wp-block-column {
		flex: 0 0 calc(25% - 18px);
		max-width: calc(25% - 18px);
	}

	.wp-block-columns.responsive-mobile-5 .wp-block-column {
		flex: 0 0 calc(20% - 19.2px);
		max-width: calc(20% - 19.2px);
	}

	.wp-block-columns.responsive-mobile-6 .wp-block-column {
		flex: 0 0 calc(16.666% - 20px);
		max-width: calc(16.666% - 20px);
	}
}

/* Fallback for blocks without responsive classes */
.wp-block-columns:not([class*='responsive-']) {
	display: flex;
	flex-wrap: wrap;
}

.wp-block-columns:not([class*='responsive-']) .wp-block-column {
	flex: 1;
	min-width: 0;
}