/**
 * MITEL Blue Box Block Styles
 *
 * Gradient card with flexible layouts.
 *
 * @package Mitel
 */



.mitel-blue-box {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: 40px;

    background: linear-gradient(141.12deg, #060E37 42.16%, #1348EF 123.6%);
    border: .5px solid rgba(255, 255, 255, .2);
    box-shadow: inset 0 0 20.9px rgba(255, 255, 255, .1);
    border-radius: 24px;
    padding: 50px;
    margin-bottom: 40px;
}



.mitel-blue-box__content {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mitel-blue-box__title {
	margin: 0;
	color: var(--White, #FFF);
	font-family: var(--otrock-font-base, 'Montserrat', sans-serif);
	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	line-height: 32px; /* 160% */
}

.mitel-blue-box__paragraphs {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.mitel-blue-box__text {
	margin: 0;
	text-align: left;
}

.mitel-blue-box__paragraphs .mitel-blue-box__text:last-child {
	margin-bottom: 0;
}


.mitel-blue-box__media {
	display: flex;
	align-items: center;
	justify-content: center;
}

.mitel-blue-box__media img {
	max-width: 100%;
	height: auto;
	display: block;
}


.mitel-blue-box--stacked {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}

.mitel-blue-box--stacked .mitel-blue-box__content {
	width: 100%;
}

.mitel-blue-box--stacked .mitel-blue-box__media {
	flex: 0 0 auto;
	width: var(--mitel-blue-box-media-width, 60%);
	max-width: var(--mitel-blue-box-media-width, 60%);
	margin-left: auto;
	margin-right: auto;
}


.mitel-blue-box--text-only {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.mitel-blue-box--text-only .mitel-blue-box__media {
	display: none;
}

@media (max-width: 960px) {
	.mitel-blue-box {
		grid-template-columns: 1fr;
		gap: 24px;
        padding: 30px;
	}

	.mitel-blue-box__media {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* Editor UI */
.mitel-blue-box-editor {
	padding: 16px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.mitel-blue-box-editor__paragraphs {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 12px;
}

.mitel-blue-box-editor__image-preview img {
	max-width: 200px;
	height: auto;
	display: block;
	margin-bottom: 8px;
	border-radius: 12px;
}

.mitel-blue-box-editor__image-field {
	margin-top: 16px;
}

.mitel-blue-box-editor__image-field-label {
	display: block;
	margin-bottom: 6px;
}

.mitel-blue-box-editor__image-field .components-button {
	width: 100%;
}

.mitel-blue-box-editor__image-preview {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}