/**
 * jp-1050-ux-design-image-center.css — diagram images sit left of centre (JP-1050)
 *
 * Pages: /de/themen/shopsystem/ux-design-onlineshop  (288441)
 *        /en/topics/ecommerce/ux-design              (293984)
 * Band:  below the lg breakpoint. Reported on iPad at 818px.
 *
 * Three boxes on this page are NARROWER than the container that holds them and
 * carry margin:0, so each sits flush against its left edge with all the slack on
 * the right. Measured at 818px (right-hand gutter in brackets):
 *
 *   A. The hero image column. The widget plugin's global sheet
 *      (wpb-oop-widget-with-global/assets/style.css:280) gives
 *      .hero-product-section__image a fixed `width: 49%` and gates its
 *      full-width fallback at `max-width: 767px` — but the row it sits in does not
 *      stack until 992px. Through 768–991.98px the column therefore stays a 49%
 *      box in a full-width row: 384px inside 784px [400px].
 *
 *   B. The figure box. dist/app.css:71738 sets `.figure { display: table }`,
 *      overriding Bootstrap's `inline-block` at :4816, so the figure shrink-wraps
 *      to its image. In a full-width column that leaves the whole remainder on the
 *      right: 690/667/616/706px inside 754px [64/87/138/48px].
 *
 *   C. The image inside a figure whose CAPTION is wider than the image. There the
 *      figure does fill its column and the image is the narrow box: 671px inside
 *      754px [83px]. (overrides/jp-586-blog-image-caption.css forces the caption
 *      back to an in-flow block, so it drives the table box's width.)
 *
 * Rules 1, 2 and 4 below are auto-margin rules. An auto margin moves a box only
 * when it is narrower than its container, so each is self-limiting: figures that
 * already fill their column are untouched, and below 768px — where the plugin's
 * own fallback sets the hero column to width:100% — rule 1 becomes a no-op on its
 * own.
 *
 * Rule 3 is NOT an auto-margin rule and that argument does not cover it. It flips
 * `picture` from inline to block unconditionally within the media query, because
 * auto margins cannot move an inline box; it is a prerequisite for rule 4, not a
 * fix in itself. It is bounded to <figure class="figure"> (see the element
 * qualifier note below). Measured impact: the captured element heights are
 * byte-identical with and without this sheet at 818px and at 375px in both
 * languages, so it introduces no reflow.
 *
 * Above 991.98px the sections are deliberately two-column: the hero image column
 * sits to the RIGHT of the copy, and every figure measures exactly its column.
 * Centring there would drag the hero column back into the text, so the media query
 * is load-bearing, not cosmetic. Verified: at 992px the computed geometry of the
 * hero column and all 8 figures is identical with and without this sheet.
 *
 * Three dependencies, each of which would break a rule silently:
 *   - Rule 1 needs the column in normal flow. The plugin sets `position: absolute`,
 *     where auto margins do NOT centre. Two separate overrides put it back, and
 *     this page relies on both being present: custom-clone.css:10585
 *     (`body:not(.home)`) and :13473 (`.purple`) — the hero section here is
 *     `hero-product-section purple`.
 *   - Rules 2 and 4 need the global `img { display: block }` at dist/app.css:72095.
 *     Auto margins centre a BLOCK box; `.img-fluid` sets only max-width/height.
 *   - The `figure` ELEMENT qualifier. Do not shorten to `.figure`: the slider emits
 *     `div.figure.figure-slider` (jtl-pagebuilder Slider/Main/Item/Template.php:11)
 *     and the gallery `a.figure.figure-square` (Gallery/Grid/Template.php:4), whose
 *     inner image is absolutely positioned. Neither element type occurs on these
 *     two pages today (measured: 0 `div.figure`, 0 `a.figure`, 8 `figure.figure`),
 *     but the qualifier is what keeps that true if one is added later.
 *
 * Only the image boxes are centred. The caption keeps its own alignment — the
 * report is about the image, and re-aligning caption text is a separate change.
 *
 * Scoping: each twin is named by its OWN page-id, and naming both is load-bearing.
 * The German id reaches the English body only through the `20-en-pageid-bridge`
 * mu-plugin (our own bridge, not WPML behaviour — see
 * prod-hotfixes/2026-06-18-en-pageid-bridge/README.md). That bridge is installed
 * per box rather than shipped with the theme, and staging has been missing it
 * entirely before, which left every English page unstyled. Naming 293984 keeps the
 * English page fixed in that state.
 *
 * Scope note: the ticket lists six images; these rules cover all eight figures on
 * the page. The other two are the same widget with the same defect and are
 * centred by the same self-limiting rules.
 */

@media (max-width: 991.98px) {

    /* 1 — hero image column: fixed 49% box left-flush in a full-width row */
    body.page-id-288441 section.hero-product-section .hero-product-section__image,
    body.page-id-293984 section.hero-product-section .hero-product-section__image {
        margin-left: auto;
        margin-right: auto;
    }

    /* 2 — the figure's shrink-wrapped table box, narrower than its column */
    body.page-id-288441 figure.figure,
    body.page-id-293984 figure.figure {
        margin-left: auto;
        margin-right: auto;
    }

    /* 3 — prerequisite for rule 4: `picture` is inline by default, and an auto
       margin cannot move an inline box. */
    body.page-id-288441 figure.figure > picture,
    body.page-id-293984 figure.figure > picture {
        display: block;
    }

    /* 4 — the image inside a figure that a wider caption has stretched */
    body.page-id-288441 figure.figure > picture > img.figure-img,
    body.page-id-288441 figure.figure > img.figure-img,
    body.page-id-293984 figure.figure > picture > img.figure-img,
    body.page-id-293984 figure.figure > img.figure-img {
        margin-left: auto;
        margin-right: auto;
    }
}