/**
 * Full replacement for WordPress core's `wp-block-columns` stylesheet.
 *
 * This is a faithful reimplementation of core's own columns CSS (same
 * selectors, same behavior) with two changes:
 * 1. The stacking breakpoint is 768px instead of core's fixed 782px, to
 *    stay consistent with the mobile/tablet breakpoints used throughout
 *    17b Enhance (see the "Disposition responsive" setting).
 * 2. Three extra classes add alternate responsive behaviors — grid-based,
 *    so they don't need to fight the inline `flex-basis` styles WordPress
 *    sets per column with more specificity/!important tricks than
 *    necessary.
 *
 * Loaded by enhance17b_enqueue_columns_style() in inc/blocks/columns.php,
 * either as a full drop-in replacement for the `wp-block-columns` handle
 * (block themes that load block styles separately) or appended after
 * core's own CSS (everywhere else). Not part of the @wordpress/scripts
 * build — hand-authored to stay a easy-to-diff mirror of core's own file.
 *
 * Class added per "Disposition responsive" choice (see
 * enhance17b_get_columns_responsive_layout_class() in
 * inc/blocks/columns.php):
 * - Stack on mobile (default): no extra class needed.
 * - 50/50 on mobile: .tw17b-cols-grid-mobile
 * - Stack on tablet and mobile: .tw17b-cols-stack-tablet
 * - 50/50 on tablet and stack on mobile: .tw17b-cols-grid-tablet
 */

.wp-block-columns {
	align-items: normal !important;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap !important;
}

.wp-block-columns.are-vertically-aligned-top {
	align-items: flex-start !important;
}

.wp-block-columns.are-vertically-aligned-center {
	align-items: center !important;
}

.wp-block-columns.are-vertically-aligned-bottom {
	align-items: flex-end !important;
}

@media (min-width: 768px) {
	.wp-block-columns {
		flex-wrap: nowrap !important;
	}

	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 0;
		flex-grow: 1;
	}

	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column[style*="flex-basis"] {
		flex-grow: 0;
	}
}

.wp-block-columns.is-not-stacked-on-mobile {
	flex-wrap: nowrap !important;
}

.wp-block-columns.is-not-stacked-on-mobile > .wp-block-column {
	flex-basis: 0;
	flex-grow: 1;
}

.wp-block-columns.is-not-stacked-on-mobile > .wp-block-column[style*="flex-basis"] {
	flex-grow: 0;
}

@media (max-width: 767px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile):not(.tw17b-cols-grid-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}

	.wp-block-columns.tw17b-cols-grid-mobile {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.wp-block-column {
	flex-grow: 1;
	min-width: 0;
	word-break: break-word;
	overflow-wrap: break-word;
}

.wp-block-column.is-vertically-aligned-top {
	align-self: flex-start;
}

.wp-block-column.is-vertically-aligned-center {
	align-self: center;
}

.wp-block-column.is-vertically-aligned-bottom {
	align-self: flex-end;
}

.wp-block-column.is-vertically-aligned-stretch {
	align-self: stretch;
}

.wp-block-column.is-vertically-aligned-bottom,
.wp-block-column.is-vertically-aligned-center,
.wp-block-column.is-vertically-aligned-top {
	width: 100%;
}

/* 17b Enhance: "Stack on tablet and mobile" — side-by-side only from desktop up. */
@media (max-width: 1023px) {
	.wp-block-columns.tw17b-cols-stack-tablet {
		flex-wrap: wrap !important;
	}

	.wp-block-columns.tw17b-cols-stack-tablet > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* 17b Enhance: "50/50 on tablet and stack on mobile" — grid on tablet only. */
@media (min-width: 768px) and (max-width: 1023px) {
	.wp-block-columns.tw17b-cols-grid-tablet {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}