@charset "UTF-8";

/**
 * Columns block — mobile invert utility.
 *
 * Reverses the vertical stacking order of columns on mobile when
 * the gnext-columns-invert class is applied via the editor toggle.
 * Mirrors the WordPress core stacking breakpoint (max-width: 781px).
 */

@media (max-width: 781px) {
	/* flex-wrap: nowrap prevents flex-basis: 100% from being interpreted as 100% height */
	.wp-block-columns.gnext-columns-invert {
		flex-direction: column-reverse;
		flex-wrap: nowrap;
	}

	/* Reset flex-basis to auto so columns size by content, not parent height */
	/* min-width: 0 prevents flex children from overflowing their container */
	.wp-block-columns.gnext-columns-invert > .wp-block-column {
		flex-basis: auto !important;
		min-width: 0;
	}
}

/**
 * Columns block — sticky button alignment utility.
 *
 * Pins the last button group to the bottom of each column,
 * regardless of content height differences between columns.
 * Applied via the "Sticky buttons" toggle in the block editor.
 */

.wp-block-columns.gnext-columns-sticky-button .wp-block-column {
	display: flex;
	flex-direction: column;
}

.wp-block-columns.gnext-columns-sticky-button .wp-block-column > .wp-block-group:last-child {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.wp-block-columns.gnext-columns-sticky-button .wp-block-column > .wp-block-group:last-child > .wp-block-buttons {
	margin-top: auto;
}

.wp-block-columns.gnext-columns-sticky-button .wp-block-column > .wp-block-group:last-child > .wp-block-separator {
	width: 100%;
}