/**
 * Content Fit — keeps classic-editor content inside its container.
 *
 * The problem this solves: the classic editor writes fixed pixel sizes into
 * the markup — width="960" on the image, style="width: 960px" on the caption
 * figure, width="560" height="315" on an embed. A block theme constrains the
 * figure but nothing constrains the image inside it, so the picture spills out
 * of the column and over whatever sits next to it.
 *
 * Selectors are scoped to content areas so nothing here touches the theme's
 * own layout, header or widgets.
 */

/* --- Images ------------------------------------------------------------- */

.wsk-fit img,
.wsk-fit .wp-caption img,
.wsk-fit figure img {
    max-width: 100%;
    /* The width/height attributes are still on the tag; without this the image
       keeps its original height and distorts once the width is capped. */
    height: auto;
}

/* The caption figure carries an inline style="width: NNNpx", which no plain
   selector can beat — hence !important, used deliberately and only here.
   Only `width` is touched. Declaring max-width here as well would compete with
   the theme's own content-width limit at equal specificity and, being later in
   the cascade, win — the picture would then fill the whole column instead of
   lining up with the text. With width:auto the figure is a plain block and
   the theme's limit applies by itself. */
.wsk-fit .wp-caption {
    width: auto !important;
}

.wsk-fit .wp-caption-text,
.wsk-fit figcaption {
    max-width: 100%;
}

/* Alignment classes still need to work once the width is released. */
.wsk-fit .aligncenter,
.wsk-fit img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* --- Embeds ------------------------------------------------------------- */

.wsk-fit iframe,
.wsk-fit embed,
.wsk-fit object,
.wsk-fit video {
    max-width: 100%;
}

/* Wrapper added around video embeds. aspect-ratio keeps the frame in
   proportion once its fixed width and height stop applying. */
.wsk-embed {
    position: relative;
    width: 100%;
    margin: 1.5em 0;
    aspect-ratio: 16 / 9;
    background: #000;
}

.wsk-embed > iframe,
.wsk-embed > object,
.wsk-embed > embed,
.wsk-embed > video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Browsers without aspect-ratio (older Safari) fall back to a padding box. */
@supports not (aspect-ratio: 16 / 9) {
    .wsk-embed {
        height: 0;
        padding-bottom: 56.25%;
    }
}

/* --- Everything else that overflows -------------------------------------- */

.wsk-fit pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.wsk-fit table {
    max-width: 100%;
}

/* Wrapper added around wide tables so the table scrolls, not the page. */
.wsk-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* A long unbroken URL in a paragraph pushes the column wider on mobile. */
.wsk-fit p,
.wsk-fit li,
.wsk-fit dd {
    overflow-wrap: break-word;
}