/**
 * Stack breakpoint — force a Group/Row to column below a chosen width.
 *
 * Classes come from the pmStackBelow attribute (see stack-breakpoint.php).
 * Selectors intentionally do NOT require .is-layout-flex: many Groups stay
 * layout:default while theme CSS makes them flex (e.g. archive headers).
 *
 * max-width uses (breakpoint − 1) to match WordPress desktop-first pairs
 * (e.g. 782 → 781px), same as core Columns stacking.
 *
 * On stack, gap resets to 20px so large horizontal gaps do not carry
 * into the column layout.
 */

.pm-stack-below-480,
.pm-stack-below-600,
.pm-stack-below-782,
.pm-stack-below-960,
.pm-stack-below-1080,
.pm-stack-below-1280 {
	/* Class markers; stacking rules live in the media queries below. */
}

@media (max-width: 479px) {
	.pm-stack-below-480 {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		gap: 20px !important;
	}

	.pm-stack-below-480 > * {
		flex: 0 0 auto !important;
		flex-basis: auto !important;
		max-width: 100% !important;
		width: 100% !important;
	}
}

@media (max-width: 599px) {
	.pm-stack-below-600 {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		gap: 20px !important;
	}

	.pm-stack-below-600 > * {
		flex: 0 0 auto !important;
		flex-basis: auto !important;
		max-width: 100% !important;
		width: 100% !important;
	}
}

@media (max-width: 781px) {
	.pm-stack-below-782 {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		gap: 20px !important;
	}

	.pm-stack-below-782 > * {
		flex: 0 0 auto !important;
		flex-basis: auto !important;
		max-width: 100% !important;
		width: 100% !important;
	}
}

@media (max-width: 959px) {
	.pm-stack-below-960 {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		gap: 20px !important;
	}

	.pm-stack-below-960 > * {
		flex: 0 0 auto !important;
		flex-basis: auto !important;
		max-width: 100% !important;
		width: 100% !important;
	}
}

@media (max-width: 1079px) {
	.pm-stack-below-1080 {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		gap: 20px !important;
	}

	.pm-stack-below-1080 > * {
		flex: 0 0 auto !important;
		flex-basis: auto !important;
		max-width: 100% !important;
		width: 100% !important;
	}
}

@media (max-width: 1279px) {
	.pm-stack-below-1280 {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		gap: 20px !important;
	}

	.pm-stack-below-1280 > * {
		flex: 0 0 auto !important;
		flex-basis: auto !important;
		max-width: 100% !important;
		width: 100% !important;
	}
}