/*
 * CKEditor 5 content image styles — front-end subset.
 *
 * The admin RichEditor (CKEditor 5) writes image alignment / wrap classes
 * (image-style-align-left/right, image-style-block-align-*, image-style-side,
 * image_resized) into Topic.Body / News.Full / Product.FullDescription / blog body.
 * Those classes only carry visual meaning when the matching content styles are
 * present on the rendered page. This file ports the image-relevant rules from
 * lib/ckeditor5/ckeditor5.css (which are scoped to .ck-content) so floated
 * ("wrap text") images render on the storefront exactly as in the editor.
 *
 * Blast radius: every selector below is qualified by a CKEditor-specific class
 * (.image, .image-inline, .image-style-*, .image_resized) under .ck-content, so a
 * wrapper carrying .ck-content never restyles non-editor markup — product grids,
 * legacy plain <img>, paragraphs and the like are untouched.
 */

:root {
    --ck-content-image-style-spacing: 1.5em;
    --ck-content-inline-image-style-spacing: calc(var(--ck-content-image-style-spacing) / 2);
    --ck-content-color-image-caption-background: #f7f7f7;
    --ck-content-color-image-caption-text: #333;
}

/* Contain floated images so a tall image never bleeds past its content wrapper. */
.ck-content::after {
    content: "";
    display: table;
    clear: both;
}

/* Block image (figure.image) */
.ck-content .image {
    clear: both;
    text-align: center;
    min-width: 50px;
    margin: .9em auto;
    display: table;
}

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

/* Inline image */
.ck-content .image-inline {
    align-items: flex-start;
    max-width: 100%;
    display: inline-flex;
}

.ck-content .image-inline picture {
    display: flex;
}

.ck-content .image-inline picture,
.ck-content .image-inline img {
    flex-grow: 1;
    flex-shrink: 1;
    max-width: 100%;
}

/* Caption */
.ck-content .image > figcaption {
    caption-side: bottom;
    word-break: normal;
    overflow-wrap: anywhere;
    break-before: avoid;
    color: var(--ck-content-color-image-caption-text);
    background-color: var(--ck-content-color-image-caption-background);
    padding: .6em;
    font-size: .75em;
    display: table-caption;
}

/* Resized image */
.ck-content img.image_resized {
    height: auto;
}

.ck-content .image.image_resized {
    box-sizing: border-box;
    max-width: 100%;
    display: block;
}

.ck-content .image.image_resized img {
    width: 100%;
}

.ck-content .image.image_resized > figcaption {
    display: block;
}

/* breakText — block-level alignment (image breaks the text flow) */
.ck-content .image.image-style-block-align-left,
.ck-content .image.image-style-block-align-right {
    max-width: calc(100% - var(--ck-content-image-style-spacing));
}

.ck-content .image.image-style-block-align-right {
    margin-left: auto;
    margin-right: 0;
}

.ck-content .image.image-style-block-align-left {
    margin-left: 0;
    margin-right: auto;
}

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

/* wrapText — float (text wraps around the image) */
.ck-content .image.image-style-align-left,
.ck-content .image.image-style-align-right {
    clear: none;
}

.ck-content .image.image-style-side {
    float: right;
    margin-left: var(--ck-content-image-style-spacing);
    max-width: 50%;
}

.ck-content .image.image-style-align-left {
    float: left;
    margin-right: var(--ck-content-image-style-spacing);
}

.ck-content .image.image-style-align-right {
    float: right;
    margin-left: var(--ck-content-image-style-spacing);
}

.ck-content .image-style-align-left {
    float: left;
    margin-right: var(--ck-content-image-style-spacing);
}

.ck-content .image-style-align-right {
    float: right;
    margin-left: var(--ck-content-image-style-spacing);
}

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

/* Inline floated images (wrapText applied to an inline image) */
.ck-content .image-inline.image-style-align-left,
.ck-content .image-inline.image-style-align-right {
    margin-top: var(--ck-content-inline-image-style-spacing);
    margin-bottom: var(--ck-content-inline-image-style-spacing);
}

.ck-content .image-inline.image-style-align-left {
    margin-right: var(--ck-content-inline-image-style-spacing);
}

.ck-content .image-inline.image-style-align-right {
    margin-left: var(--ck-content-inline-image-style-spacing);
}