/*
 * Rendering styles for CKEditor 5 rich-text content displayed outside the
 * editor (blog articles, product descriptions, reviews, ticket messages).
 * CKEditor stores alignment/size as `image-style-*` / `image_resized` classes
 * and inline `width` styles; without these rules the published page always
 * shows the original, centered image regardless of what was set in the editor.
 * Subset of the official CKEditor 5 content styles, unscoped because our
 * pages don't wrap content in `.ck-content`.
 */

figure.image {
	display: table;
	clear: both;
	text-align: center;
	margin: 0.9em auto;
	min-width: 50px;
}

figure.image img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	min-width: 100%;
	height: auto;
}

figure.image > figcaption {
	display: table-caption;
	caption-side: bottom;
	word-break: break-word;
	color: #6c757d;
	font-size: 0.875em;
	padding: 0.3em 0.6em;
}

/* Block alignments */
figure.image.image-style-align-left {
	float: left;
	clear: none;
	margin: 0.9em 1.5em 0.9em 0;
}

figure.image.image-style-align-right {
	float: right;
	clear: none;
	margin: 0.9em 0 0.9em 1.5em;
}

figure.image.image-style-align-center {
	margin-left: auto;
	margin-right: auto;
}

figure.image.image-style-block {
	margin-left: auto;
	margin-right: auto;
}

figure.image.image-style-side {
	float: right;
	clear: none;
	margin-left: 1.5em;
	max-width: 50%;
}

/* Inline images (image-inline spans) */
.image-inline {
	display: inline-flex;
	max-width: 100%;
	align-items: flex-start;
}

.image-inline img {
	max-width: 100%;
	height: auto;
}

img.image_resized {
	height: auto;
}

/* Resized figures carry their target width as an inline style */
figure.image.image_resized {
	max-width: 100%;
	display: block;
	box-sizing: border-box;
}

figure.image.image_resized img {
	width: 100%;
}

figure.image.image_resized > figcaption {
	display: block;
}