/**
 * Multi-Button — Structural layout (Option C: inline CSS vars resolve at first paint).
 *
 * @package celeste_Theme
 * @since 2.18.0 Chunk 23.2
 */

.celeste-multi-button[data-layout="dynamic"] {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: var(--mbtn-justify, flex-start);
}

.celeste-multi-button[data-layout="uniform"] {
	display: grid;
	grid-template-columns: var(--mbtn-grid-cols, repeat(2, 1fr));
	gap: 1rem;
	width: var(--mbtn-width, 100%);
	margin-inline: auto;
}

@media (max-width: 767px) {
	.celeste-multi-button[data-layout="dynamic"][data-mob-layout="force-stack"] {
		flex-direction: column;
	}

	.celeste-multi-button[data-layout="dynamic"][data-mob-layout="force-stack"] > * {
		width: 100%;
	}

	.celeste-multi-button[data-layout="uniform"] {
		grid-template-columns: var(--mbtn-mob-grid-cols, 1fr);
	}
}