/* ==========================================================================
   A PICTURE INSIDE AN ARTICLE — WHERE IT SITS, AND WHAT RUNS BESIDE IT
   ==========================================================================
   Ruled by Vivek, 2026-09-07: "can we do the image and content side by side?"

   A picture dropped into the editor took the whole line: the paragraph above
   stopped, the picture sat alone, and the paragraph below started again
   underneath it. On a wide article that leaves half the page empty either
   side of it, and there was no way for a writer to ask for anything else.

   THIS IS THE SAME VOCABULARY AS THE QUOTES, deliberately. A writer already
   chooses a quote's width from the Paragraph dropdown and the article flows
   beside it; a picture now works the identical way, with the identical
   breakpoint and the identical margins, so the two never disagree on a page
   that has both.

   The choice is a CLASS, never inline styling, so a change here changes every
   article already written -- which is the whole reason the designs are in a
   stylesheet rather than baked into each post's text.

   CLEARING IS NOT HERE. global-quotes.css already clears at the END of the
   article -- .yg-quote__flow, .blog-details-content and .entry-content -- and
   a float is a float whether it is a quote or a picture, so that one rule
   covers both. Clearing on the element AFTER a floated picture would push the
   article below it and leave the space beside it empty, which is the layout
   this file exists to avoid.
   ========================================================================== */

/* ---- FULL WIDTH — the default, and what every existing article already has.
   Named so a writer can put a picture BACK after floating it, and so nothing
   written before this file behaves differently than it did. */
.yg-img--full {
    display: block;
    float: none;
    width: 100%;
    height: auto;
    margin: 1rem 0 1.5rem;
}

/* ---- ITS OWN LINE, BUT NOT THE WHOLE WIDTH. A portrait or a logo that
   should not be stretched, standing alone and centred.

   max-width is what makes it safe. This is the one position that does not
   state a width, so the picture is drawn at its own size -- and a photograph
   out of the library is commonly 1280 wide against a column of 593, so it
   ran straight out of the article. Its own size, but never wider than the
   column it is in. */
.yg-img--centre {
    display: block;
    float: none;
    max-width: 100%;
    height: auto;
    margin: 1rem auto 1.5rem;
}

/* ---- HALF WIDTH, BELOW THE BREAKPOINT.
   Narrow enough that two columns would leave four words to a line, so it
   stacks and reads as a full-width picture. The media query below turns the
   float on where there is genuinely room for it. */
.yg-img--half {
    display: block;
    width: 100%;
    height: auto;
    margin: 1rem 0 1.5rem;
}

/* 30rem, matching global-quotes.css exactly. The breakpoint has to be the
   width of the COLUMN, not the window: the editor's own writing area is about
   37rem, so a larger breakpoint would mean a writer picks "half width", sees
   no change, and picks it again. */
@media (min-width: 30rem) {
    /* The picture takes one side; the article keeps reading down the other.
       Right is the default side, so a half-width picture written before the
       sides were named keeps behaving the way it did. */
    .yg-img--half,
    .yg-img--half.yg-img--right {
        float: right;
        width: 45%;
        max-width: 45%;
        margin: .5rem 0 1.5rem 2rem;
    }

    /* On the left instead, so a page of several pictures can alternate
       rather than running them all down one edge. */
    .yg-img--half.yg-img--left {
        float: left;
        margin: .5rem 2rem 1.5rem 0;
    }
}

/* A picture that has been given a side is sized by this stylesheet and by
   nothing else. A writer who drags a corner in the editor leaves a width on
   the tag itself, and that would otherwise beat the class -- so the width the
   layout depends on is stated here on the element's own selector, and the
   editor strips the dragged size when a side is chosen. */
.yg-img--half[width],
.yg-img--full[width],
.yg-img--centre[width] {
    height: auto;
}