/**
 * Orca Blocks layout preset component classes (op_grid-*).
 *
 * Used by the Layout Preset sidebar control. When the Orca Tailwind module is
 * enabled, this file is loaded into the editor canvas via editor_stylesheets.
 */
.op_grid-1 {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.op_grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.op_grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.op_grid-4 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.op_grid-5 {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.op_grid-6 {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (min-width: 768px) {
	.op_grid-md-2 {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.op_grid-md-3 {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.op_grid-md-4 {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/**
 * Flex-item width pass-through for the editor.
 *
 * The JS copies a w-* class from the inner .ob-ib-portal-target (the Bricks
 * element root) up to the .wp-block.ob-innerblock-composite flex item so the
 * column is sized correctly.  The inner element must then fill 100% of that
 * flex item rather than be constrained by its own w-* class — otherwise the
 * content ends up as 25% of an already-narrow column instead of 25% of the
 * full container.  The SSR wrapper <div> also needs to fill the flex item.
 */
.ob-innerblock-composite > div {
	width: 100%;
}
.ob-innerblock-composite > div > .ob-ib-portal-target {
	width: 100% !important;
}