/**
 * CKEditor 5 layout fixes for public pages (blog detail, sections, CMS blocks).
 * Load after ckeditor5-content.css so theme rules do not break editor alignment.
 */

/* Text alignment (class-based + inline style from the editor) */
.cms-rich-content .has-text-align-left,
.cms-rich-content [style*="text-align: left"],
.cms-rich-content [style*="text-align:left"] {
	text-align: left !important;
}

.cms-rich-content .has-text-align-center,
.cms-rich-content [style*="text-align: center"],
.cms-rich-content [style*="text-align:center"] {
	text-align: center !important;
}

.cms-rich-content .has-text-align-right,
.cms-rich-content [style*="text-align: right"],
.cms-rich-content [style*="text-align:right"] {
	text-align: right !important;
}

.cms-rich-content .has-text-align-justify,
.cms-rich-content [style*="text-align: justify"],
.cms-rich-content [style*="text-align:justify"] {
	text-align: justify !important;
}

/* Block image layouts (figure.image) */
.cms-rich-content figure.image,
.cms-rich-content .image:not(.image-inline) {
	display: table;
	clear: both;
	text-align: center;
	margin: 0.9em auto;
	min-width: 50px;
	max-width: 100%;
	box-sizing: border-box;
}

.cms-rich-content figure.image img,
.cms-rich-content .image:not(.image-inline) img {
	display: block;
	height: auto;
	margin: 0 auto;
	max-width: 100%;
	min-width: 100%;
}

.cms-rich-content figure.image.image_resized,
.cms-rich-content .image.image_resized {
	display: block;
	max-width: 100%;
	box-sizing: border-box;
}

.cms-rich-content figure.image.image_resized img,
.cms-rich-content .image.image_resized img {
	width: 100%;
}

.cms-rich-content figure.image.image-style-side,
.cms-rich-content .image.image-style-side {
	float: right !important;
	margin-left: var(--ck-image-style-spacing, 1.5em);
	max-width: 50%;
}

.cms-rich-content figure.image.image-style-align-left,
.cms-rich-content .image.image-style-align-left {
	float: left !important;
	margin-right: var(--ck-image-style-spacing, 1.5em);
	clear: none;
}

.cms-rich-content figure.image.image-style-align-right,
.cms-rich-content .image.image-style-align-right {
	float: right !important;
	margin-left: var(--ck-image-style-spacing, 1.5em);
	clear: none;
}

.cms-rich-content figure.image.image-style-block-align-left,
.cms-rich-content .image.image-style-block-align-left {
	margin-left: 0;
	margin-right: auto;
	max-width: calc(100% - var(--ck-image-style-spacing, 1.5em));
}

.cms-rich-content figure.image.image-style-block-align-right,
.cms-rich-content .image.image-style-block-align-right {
	margin-left: auto;
	margin-right: 0;
	max-width: calc(100% - var(--ck-image-style-spacing, 1.5em));
}

.cms-rich-content .image-style-align-center {
	margin-left: auto;
	margin-right: auto;
}

.cms-rich-content p + figure.image.image-style-align-left,
.cms-rich-content p + figure.image.image-style-align-right,
.cms-rich-content p + figure.image.image-style-side,
.cms-rich-content p + .image.image-style-align-left,
.cms-rich-content p + .image.image-style-align-right,
.cms-rich-content p + .image.image-style-side {
	margin-top: 0;
}

/* Inline images */
.cms-rich-content .image-inline {
	display: inline-flex;
	max-width: 100%;
	align-items: flex-start;
	vertical-align: bottom;
}

.cms-rich-content .image-inline img {
	flex-grow: 1;
	flex-shrink: 1;
	max-width: 100%;
	height: auto;
}

.cms-rich-content .image-inline.image-style-align-left {
	float: left;
	margin-right: var(--ck-inline-image-style-spacing, 0.75em);
	margin-top: var(--ck-inline-image-style-spacing, 0.75em);
	margin-bottom: var(--ck-inline-image-style-spacing, 0.75em);
}

.cms-rich-content .image-inline.image-style-align-right {
	float: right;
	margin-left: var(--ck-inline-image-style-spacing, 0.75em);
	margin-top: var(--ck-inline-image-style-spacing, 0.75em);
	margin-bottom: var(--ck-inline-image-style-spacing, 0.75em);
}

/* Resized images saved inside a paragraph (no figure wrapper) */
.cms-rich-content p > img.image_resized {
	height: auto;
	max-width: 100%;
}

.cms-rich-content p[style*="text-align: center"] > img.image_resized,
.cms-rich-content p[style*="text-align:center"] > img.image_resized,
.cms-rich-content p.has-text-align-center > img.image_resized {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.cms-rich-content p[style*="text-align: right"] > img.image_resized,
.cms-rich-content p[style*="text-align:right"] > img.image_resized,
.cms-rich-content p.has-text-align-right > img.image_resized {
	display: block;
	margin-left: auto;
	margin-right: 0;
}

.cms-rich-content p[style*="text-align: left"] > img.image_resized,
.cms-rich-content p[style*="text-align:left"] > img.image_resized,
.cms-rich-content p.has-text-align-left > img.image_resized {
	display: block;
	margin-right: auto;
	margin-left: 0;
}

/* Clear floats after rich content */
.cms-rich-content::after {
	content: '';
	display: block;
	clear: both;
}