/*
 * Classic inline images
 * Posts imported from the old site use the classic editor's markup: an
 * <img class="alignleft|alignright|aligncenter|alignnone"> inside a paragraph,
 * or a [caption] shortcode rendered as <figure class="wp-caption align…">.
 * Core only floats .alignleft/.alignright when they are direct children of a
 * layout, so the images inside paragraphs got no styling at all.
 */
.wp-block-post-content :is(img, .wp-caption):is(.alignleft, .alignright, .aligncenter, .alignnone) {
    height: auto;
    max-width: 100%;
}

.wp-block-post-content img:is(.alignleft, .alignright, .aligncenter, .alignnone),
.wp-block-post-content .wp-caption img {
    border-radius: 0.25em;
}

.wp-block-post-content .wp-caption img {
    display: block;
    width: 100%;
    height: auto;
}

/* Never let a float take more than half the text column. */
.wp-block-post-content :is(img, .wp-caption):is(.alignleft, .alignright) {
    max-width: min(50%, calc(var(--wp--style--global--content-size) / 2));
    margin-block: 0.35em 1rem;
}

.wp-block-post-content :is(img, .wp-caption).alignleft {
    float: left;
    margin-inline: 0 2em;
}

.wp-block-post-content :is(img, .wp-caption).alignright {
    float: right;
    margin-inline: 2em 0;
}

/*
 * A caption figure sits directly in the full-width post content, so a plain
 * float would land at the edge of the viewport. Push it in to the edge of the
 * text column instead.
 */
.wp-block-post-content.is-layout-constrained > .wp-caption.alignleft {
    margin-inline-start: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2));
}

.wp-block-post-content.is-layout-constrained > .wp-caption.alignright {
    margin-inline-end: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2));
}

.wp-block-post-content :is(img, .wp-caption).aligncenter {
    display: block;
    margin-inline: auto;
}

.wp-block-post-content .wp-caption-text {
    margin-block: 0.5em 0;
    font-size: var(--wp--preset--font-size--small);
    opacity: 0.7;
}

/* Contain the floats, so the tags and navigation below don't wrap round them. */
.wp-block-post-content::after {
    content: "";
    display: table;
    clear: both;
}

/* Too narrow to wrap text round an image: stack it instead. */
@media (max-width: 600px) {
    .wp-block-post-content :is(img, .wp-caption):is(.alignleft, .alignright) {
        float: none;
        display: block;
        max-width: 100%;
        margin-inline: auto;
        margin-block: 1rem;
    }
}