/* ####################################
   Images
   ################################## */

img {
    /* Images are responsively sized by default but this can be overridden with .fixed-width. */
    max-width: 100%;
    height: auto;
    border: 0;
    border-radius: var(--site-image-border-radius);
}

    main img {
        border-radius: var(--site-content-image-border-radius);
    }

    img.fixed-width {
        max-width: none;
    }

    img[style*="height"] {
        height: auto;
    }

    img[style*="display:block"],
    img[style*="display: block"] {
        /* This is how the image editor places an image in the middle of the page. Actually it's "display: block;margin-left: auto;margin-right: auto;" but that's a difficult CSS rule and this should catch the right images. */
        margin-top: var(--site-box-margin-bottom);
        margin-bottom: var(--site-box-margin-bottom);
    }

figure {
}

    figure.image {
        display: table; /* This + caption handling below is the only way to make all browsers show the image and caption together in a nice box. */
        box-sizing: border-box;
        max-width: 100%;
        margin: 0 0 var(--site-padding-thin);
        padding: 0;
        line-height: 0;
        border-radius: var(--site-figure-image-border-radius);
        overflow: hidden; /* Necessary for border-radius when combined with display:table. So we can't do fancy things with figure.image but that's okay. */
    }

        img[style*="float:left"],
        img[style*="float: left"],
        figure.image.align-left {
            float: left;
            max-width: 50%;
            height: auto;
            margin: 0 var(--site-padding-thin) var(--site-padding-thin) 0;
        }

        img[style*="float:right"],
        img[style*="float: right"],
        figure.image.align-right {
            float: right;
            max-width: 50%;
            height: auto;
            margin: 0 0 var(--site-padding-thin) var(--site-padding-thin);
        }

            /* Figures and images floated just before a heading look better with the top of the figure/image and heading aligned, possibly with some line spacing around the heading too. These settings will depend on heading margins in Variables.css and font choice. Note that h2 and h3 would be the most common cases. */

            img[style*="float:"]:not(:first-child),
            figure.image.align-left:not(:first-child),
            figure.image.align-right:not(:first-child) {
                margin-top: 1.5em;
            }

                img[style*="float:"]:not(:first-child) + h2,
                figure.image.align-left:not(:first-child) + h2,
                figure.image.align-right:not(:first-child) + h2 {
                    margin-top: calc(var(--site-margin) - 0.25em);
                }

                img[style*="float:"]:not(:first-child) + h3,
                figure.image.align-left:not(:first-child) + h3,
                figure.image.align-right:not(:first-child) + h3 {
                    margin-top: calc(var(--site-margin) - 0.5em);
                }

                img[style*="float:"]:not(:first-child) + h4,
                figure.image.align-left:not(:first-child) + h4,
                figure.image.align-right:not(:first-child) + h4 {
                    margin-top: calc(var(--site-margin) + 0.75em);
                }

                img[style*="float:"]:not(:first-child) + h5,
                figure.image.align-left:not(:first-child) + h5,
                figure.image.align-right:not(:first-child) + h5 {
                    margin-top: calc(var(--site-margin) + 1.5em);
                }

                img[style*="float:"]:not(:first-child) + h6,
                figure.image.align-left:not(:first-child) + h6,
                figure.image.align-right:not(:first-child) + h6 {
                    margin-top: calc(var(--site-margin) + 2.75em);
                }

                /* Reset the heading adjustment if the floated figure/image appears just after a heading, this a bit is like being a first-child unless it's immediately followed by another heading, and that case gets complicated so we'll leave it up to authors to handle margins manually if they want to. */

                h1 + img[style*="float:left"]:not(:first-child),
                h1 + figure.image.align-left:not(:first-child),
                h1 + figure.image.align-right:not(:first-child),
                h2 + img[style*="float:left"]:not(:first-child),
                h2 + figure.image.align-left:not(:first-child),
                h2 + figure.image.align-right:not(:first-child),
                h3 + img[style*="float:left"]:not(:first-child),
                h3 + figure.image.align-left:not(:first-child),
                h3 + figure.image.align-right:not(:first-child),
                h4 + img[style*="float:left"]:not(:first-child),
                h4 + figure.image.align-left:not(:first-child),
                h4 + figure.image.align-right:not(:first-child),
                h5 + img[style*="float:left"]:not(:first-child),
                h5 + figure.image.align-left:not(:first-child),
                h5 + figure.image.align-right:not(:first-child),
                h6 + img[style*="float:left"]:not(:first-child),
                h6 + figure.image.align-left:not(:first-child),
                h6 + figure.image.align-right:not(:first-child),
                p + img[style*="float:left"]:not(:first-child),
                p + figure.image.align-left:not(:first-child),
                p + figure.image.align-right:not(:first-child) {
                    margin-top: 0;
                }

        figure.image.align-center {
            /* Note: The visual editor will place this outside <p> blocks. */
            margin: 0 auto 20px; /* margin-left|right: auto; is the centering trick. */
        }

        figure.image img {
            float: none !important;
            max-width: 100%; /* Fix the max-width applied to floated images above, in case the image in the caption is still floated. */
            margin: 0;
            border-radius: 0; /* Don't inherit this setting. */
        }

        figure.image figcaption {
            display: table-caption;
            caption-side: bottom;
            padding: var(--site-figure-caption-padding);
            text-align: left;
            line-height: normal;
            background: var(--site-figure-caption-bg); /* Better than putting a background on the caption, to avoid an occasional 1px top gap in Chrome. */
        }

            figure.image figcaption > :first-child {
                margin-top: 0 !important;
            }

            figure.image figcaption > :last-child {
                margin-bottom: 0 !important;
            }

figure.caption-offset-left {
    padding-left: 90px;
}

    figure.caption-offset-left figcaption {
        color: var(--site-color-white);
        position: absolute;
        margin-left: calc(var(--site-padding-thicker) * -1);
        bottom: var(--site-padding);
        max-width: 50%;
        background: rgba(0,0,0,0.75);
    }

figure.caption-offset-right {
    padding-right: 90px;
}

    figure.caption-offset-right figcaption {
        color: var(--site-color-white);
        position: absolute;
        right: 0;
        bottom: var(--site-padding);
        max-width: 50%;
        background: rgba(0,0,0,0.75);
    }
    
@media all and (-ms-high-contrast:none) {
    /* Rules for IE only. */

    figure.image.align-left,
    figure.image.align-right,
    figure.image.align-left figcaption,
    figure.image.align-right figcaption {
        display: block; /* IE doesn't like table in this context, but float handles the layout okay. */
    }

}

@media all and (-ms-high-contrast:none) and (max-width: 1200px) {
    /* Rules for IE only. */

    figure.image,
    figure.image figcaption {
        display: block;
    }

        figure.image img {
            width: 100%; /* Fill up the space so the caption looks okay. Not great for small images in centred captions, but if they're small why are they centred? */
        }

}

@media screen and (max-width: 900px) {

    img[style*="float:left"],
    img[style*="float: left"],
    figure.align-left,
    img[style*="float:right"],
    img[style*="float: right"],
    figure.align-right {
        /*max-width: 40%;*/ /* Depending on how much padding is in the design, this might need tweaking. */
    }

}

@media screen and (max-width: 600px) { /* Could consider going to 375px - It depends on the site content and design. */

    figure.align-left,
    figure.align-right,
    img[style*="float:left"],
    img[style*="float: left"],
    img[style*="float:right"],
    img[style*="float: right"] {
        float: none !important;
        max-width: 100% !important;
    }

    figure.align-left:not(:last-child),
    figure.align-right:not(:last-child),
    img[style*="float:left"]:not(:last-child),
    img[style*="float: left"]:not(:last-child),
    img[style*="float:right"]:not(:last-child),
    img[style*="float: right"]:not(:last-child) {
        /* :last-child is most likely at the end of a block that has margin of its own. */
        margin: 0 0 var(--site-box-margin-bottom) !important;
    }

    figure.image img {
        margin: 0 !important; /* Fix the margin applied to floated images above, in case the image in the caption is still floated. */
    }

    figure.caption-offset-left,
    figure.caption-offset-right {
        padding-left: 0;
        padding-right: 0;
    }

        figure.caption-offset-left figcaption,
        figure.caption-offset-right figcaption {
            position: relative;
            left: auto;
            right: auto;
            bottom: auto;
            max-width: 100%;
            margin: 0;
            background: var(--site-color-1-dark);
        }

}

/*
    Images that fill the space they're in (when the space has position)
*/

@media screen and (min-width: 1200px) {

    img.fill, .col img.fill {
        margin: auto !important;
        width: auto !important;
        height: auto !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        position: absolute !important;
        top: -10000em !important;
        right: -10000em !important;
        bottom: -10000em !important;
        left: -10000em !important;
    }

        img.fill.width, .col img.fill.width {
            width: 100% !important;
            min-width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            min-height: 100% !important;
            left: 0 !important;
            right: auto !important;
        }

        img.fill.height, .col img.fill.height {
            height: 100% !important;
            min-width: 0 !important;
            left: 0 !important;
            right: auto !important;
        }
}

@media screen and (min-width: 600px) and (max-width: 1200px) {

    img.fill, .col img.fill {
        width: 100% !important;
        height: auto !important;
    }

        img.fill.width, .col img.fill.width {
            margin: auto !important;
            width: auto !important;
            min-width: 100% !important;
            max-width: none !important;
            height: 100% !important;
            min-height: 100% !important;
            position: absolute !important;
            top: -10000em !important;
            right: -10000em !important;
            bottom: -10000em !important;
            left: -10000em !important;
        }
}

/*
    An image block that covers the space it's in. 
*/

div.image-cover {
    position: relative;
    width: 100% !important;
    height: 100% !important;
}

    div.image-cover img {
        object-fit: cover;
        width: 100% !important;
        height: 100% !important;
    }

@media all and (-ms-high-contrast:none) {
    /* Rules for IE only. IE11 support is deprecated so we just provide basic layout. */

    div.image-cover {
        /* IE11 doesn't support object-fit. */
        height: auto !important;
    }
}