/**
 * Cover Extension — Graphic positioning
 *
 * Lets a core/cover image act as a positioned decorative graphic instead of
 * a stretched background. Activated by `oiImageFit="contain"` which adds the
 * `.oi-cover-graphic` class to the wrapper; positioning is driven by the
 * CSS variables --oi-cover-img-width, --oi-cover-img-x, --oi-cover-img-y.
 *
 * Position model: X and Y are percentages 0–100 where 0 anchors the matching
 * edge of the image to the matching edge of the cover. So:
 *   X=0,   Y=0   → image's top-left   at cover's top-left
 *   X=100, Y=0   → image's top-right  at cover's top-right
 *   X=50,  Y=50  → image centered
 *   X=100, Y=100 → image's bottom-right at cover's bottom-right
 * Any in-between value works too.
 */

.oi-cover-graphic .wp-block-cover__image-background {
    /* Clear cover's default fill behavior. */
    inset:      auto;
    height:     auto;
    object-fit: contain;

    /* Size — natural unless the author set a width. */
    width: var( --oi-cover-img-width, auto );

    /* Position — anchor by percentage with a matching transform pull-back. */
    top:       var( --oi-cover-img-y, 50% );
    left:      var( --oi-cover-img-x, 50% );
    transform: translate(
        calc( -1 * var( --oi-cover-img-x, 50% ) ),
        calc( -1 * var( --oi-cover-img-y, 50% ) )
    );

    /* Keep the image behind cover content. */
    z-index: 0;
}