/*
 * blog-app-images.css
 *
 * Purpose
 * -------
 * Layout for the small app-store badges (~30px) and app logos (~150px, floated)
 * inside rich-text bodies: blog articles (templates/_blog/show.twig) and
 * pageBlocks Text matrix blocks (templates/_blocks/_text.twig).
 *
 * Why this file exists
 * --------------------
 * Sizing itself comes from Craft named image transforms (30x30 / 150x150),
 * picked from the same CKEditor dropdown as Original / Header Image / Image
 * Below Header. Those transforms persist as #asset:id:transform:handle on the
 * image src, so they survive a normal editor save. This stylesheet only adds
 * what a transform cannot: inline placement for the 30px badge, and float-right
 * for the 150px logo. Selectors key off the width or height attribute CKEditor
 * writes when the transform is applied (fit keeps aspect ratio, so a portrait
 * image may have height="150" and a smaller width).
 *
 * Where this is loaded
 * --------------------
 * Frontend: templates/_blog/show.twig and templates/_blocks/_text.twig.
 * Optional in the editor: point the field's CKEditor "CSS file" setting at
 * /css/blog-app-images.css. Until that is set, the published page floats
 * correctly and the editor shows the image at the transformed pixel size,
 * but not floated.
 *
 * Kept as a standalone static file (not part of the Vite bundle) so it has a
 * stable, unhashed URL that the CKEditor field setting can reference.
 */

/* Small store badge (App Store / Google Play), sits inline in a line of text. */
:is(.blog-full-content, .block-text) figure.image:has(img:is([width="30"], [height="30"])) {
    display: inline;
    width: auto;
    margin: 0 0.25rem 0 0;
    vertical-align: middle;
}

:is(.blog-full-content, .block-text) img:is([width="30"], [height="30"]) {
    display: inline;
    width: 30px;
    height: auto;
    margin-right: 0.25rem;
    vertical-align: middle;
}

/* App logo, floated to the right of the paragraph. */
:is(.blog-full-content, .block-text) figure.image:has(img:is([width="150"], [height="150"])) {
    float: right;
    width: 150px;
    margin: 0 0 0.5rem 1rem;
}

:is(.blog-full-content, .block-text) img:is([width="150"], [height="150"]) {
    width: 150px;
    height: auto;
}