/**
 * Exact column counts for Grid layouts at mobile, tablet, and desktop.
 *
 * Overrides core auto-fill so a 4-item grid can be 4 / 2+2 / stacked
 * instead of collapsing to 3+1 when the min-width still fits three tracks.
 *
 * Breakpoints match WordPress $break-medium (782px) and $break-xlarge (1080px).
 * Custom properties cannot be used inside @media, so the values are hardcoded
 * here and kept in sync with theme.json settings.custom.breakpoints.
 */

.sanc-responsive-grid {
	--sanc-cols: var(--sanc-cols-mobile, 1);
	grid-template-columns: repeat(var(--sanc-cols), minmax(0, 1fr)) !important;
}

@media (min-width: 782px) {
	.sanc-responsive-grid {
		--sanc-cols: var(--sanc-cols-tablet, 2);
	}
}

@media (min-width: 1080px) {
	.sanc-responsive-grid {
		--sanc-cols: var(--sanc-cols-desktop, 4);
	}
}

@media (max-width: 781px) {
	.sanc-responsive-grid--reverse-mobile {
		display: flex !important;
		flex-direction: column-reverse;
	}
}

/*
 * Editor mobile preview: the canvas iframe can be wider than 781px, so JS
 * adds this preview class only when the Mobile device is selected.
 */
.editor-styles-wrapper .sanc-responsive-grid--reverse-mobile-preview {
	display: flex !important;
	flex-direction: column-reverse;
}