/**
 * jp-1048-vorzuege-onlineshop.css — captioned diagram images sit left (JP-1048)
 *
 * Pages: /de/themen/shopsystem/vorzuege-onlineshop  (288423)
 *        /en/topics/ecommerce/benefits              (294014)
 * Band:  768–991.98px. Reported on iPad at 818px.
 *
 * Two independent boxes sit left of centre in this band, plus the image inside
 * the second one. All three need centring; fixing any one alone leaves the
 * others offset.
 *
 *   1. The hero image column. The widget plugin's global sheet
 *      (wpb-oop-widget-with-global/assets/style.css:280) gives
 *      .hero-product-section__image `position:absolute; width:49%`, and gates its
 *      full-width fallback at `max-width: 767px` — but the grid it pairs with does
 *      not stack until 992px. So through 768–991.98px the column stays a fixed 49%
 *      box at the left of a full-width row: measured 384px inside a 784px row at
 *      818px, a ~400px gutter. The column does NOT shrink-wrap, and the image is
 *      sized BY it (`picture`/`img` are width:100% there), not the reverse.
 *
 *   2. The figure box. `figure.figure` is `display:table`, so it shrink-wraps
 *      around image AND caption. dist/app.css pairs that with
 *      `.figure-caption { display: table-caption }`, which would keep the caption
 *      out of the width calculation — but overrides/jp-586-blog-image-caption.css
 *      forces the caption back to an in-flow block, so a caption longer than the
 *      image drives the box width while the box stays narrower than its column.
 *
 *   3. The image inside that box, narrower than the caption and left-aligned
 *      because an image is a plain block.
 *
 * Centring rather than shrinking the boxes to the image is deliberate: a caption
 * beside a small diagram has to stay readable, so the extra width is legitimate.
 * Auto margins move a box only when it is narrower than its container, so rules 2
 * and 3 are self-limiting and figures that already fill their column are untouched.
 *
 * Above 991.98px these sections are deliberately two-column and every figure box
 * measures exactly its image width, so there is nothing to centre. Below 768px the
 * plugin's own fallback already sets the column full-width.
 *
 * Three dependencies, all easy to break silently:
 *   - Rule 1 needs the column to be in normal flow. The plugin sets
 *     `position:absolute`, where auto margins do NOT centre; it only works because
 *     custom-clone.css forces it back to `position:static !important` (twice — once
 *     for `body:not(.home)`, once for `.purple`). Remove those and rule 1 dies with
 *     no other symptom.
 *   - Rules 2/3 need the global `img { display: block }` in dist/app.css. 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` and the gallery `a.figure.figure-square`, whose
 *     inner image is absolutely positioned.
 *
 * Each twin is named by its OWN page-id. The German id reaches the English page
 * only through the 20-en-pageid-bridge mu-plugin, which is installed per box rather
 * than shipped with the theme and has been missing from a box before.
 */

@media (max-width: 991.98px) {

    /* 1 — hero image column: fixed 49% box, left-aligned, 768–991.98px */
    body.page-id-288423 section.hero-product-section .hero-product-section__image,
    body.page-id-294014 section.hero-product-section .hero-product-section__image {
        margin-left: auto;
        margin-right: auto;
    }

    /* 2 — the figure's table box, narrower than the column that holds it */
    body.page-id-288423 figure.figure,
    body.page-id-294014 figure.figure {
        margin-left: auto;
        margin-right: auto;
    }

    /* 3 — the image inside that box. `picture` is inline by default, so it has to
       become a block before auto margins can move it. */
    body.page-id-288423 figure.figure > picture,
    body.page-id-294014 figure.figure > picture {
        display: block;
    }

    body.page-id-288423 figure.figure > picture > img.figure-img,
    body.page-id-288423 figure.figure > img.figure-img,
    body.page-id-294014 figure.figure > picture > img.figure-img,
    body.page-id-294014 figure.figure > img.figure-img {
        margin-left: auto;
        margin-right: auto;
    }
}