/*
 * Hahn AO court background vs KV player (On Prem 26-0664 + On Pack 26-0665).
 *
 * The desktop background is a 2880x1600 court with a white baseline at
 * x 1110-1130 (library/806, pinned in integrations/hahn-ao/background-image). The centre mark sits on the left of the line, so left is the
 * court and right is behind the baseline. The server in every desktop KV
 * (1400x1400) has to stand on the right of it. Measured from the alpha
 * channel of all four KVs, the player spans x 919-1289: left foot at
 * >= 65.6% of the KV width, racket tip at <= 92.1%.
 *
 * The base background is object-cover centred, which moves the line with
 * the aspect ratio. Safari's taller toolbar gives a MacBook a wider, shorter
 * viewport than Chrome, and that was enough to put the line under the foot.
 *
 * Here the background is always full height and pinned left, so the line's
 * right edge is at exactly 1130/1600 = 70.625vh and depends only on the
 * viewport height. Its edges fade to #004B7F (left) and #00628F (right), and
 * the box paints those colours where the image does not reach.
 *
 * The KV is then placed against that line, in container coordinates (the
 * creative column starts at x=80, lg:px-20):
 *   --kvw  the template's size, shrunk only when the player would not fit
 *          between the line and the form, and never below 85% of it.
 *   --kvx  the template's centred position, pushed right until the left foot
 *          clears the line by --kv-clear, and capped so the racket stays
 *          --kv-form-gap off the form.
 * Where even that cannot clear the line (near 4:3, e.g. iPad landscape or a
 * 1280x1024 monitor, where the line falls under the form), --bgx slides the
 * background left until the line sits behind the player. Everywhere else it
 * is 0 and the background stays pinned left.
 *
 * The form sits 60px right of the creative column in both layout bands. The
 * column is 100vw - 720px below 1536px and 100vw - 836px from 1536px, where
 * the form widens from 500 to 616px. Those two bands are the only media
 * queries the maths needs. Below 1024px the background is hidden and the
 * mobile KV carries its own court, so nothing here applies.
 *
 * Re-measure the 70.625vh / 0.656 / 0.921 constants if the background or the
 * KVs are swapped for art with the line or player somewhere else.
 */

@media (min-width: 1024px) {
    :root {
        --kv-clear: 16px;
        --kv-form-gap: 24px;
        --kv-line: calc(70.625vh - 80px);
        --kv-nat: min(var(--kv-col), calc(100vh - 80px));
        --kv-room: calc(var(--kv-col) + 60px - var(--kv-form-gap) - var(--kv-line) - var(--kv-clear));
        --kvw: min(var(--kv-nat), max(calc(var(--kv-room) / 0.265), calc(var(--kv-nat) * 0.85)));
        --kvx: max(
            calc((var(--kv-col) - var(--kvw)) / 2),
            min(
                calc(var(--kv-line) + var(--kv-clear) - 0.656 * var(--kvw)),
                calc(var(--kv-col) + 60px - var(--kv-form-gap) - 0.921 * var(--kvw))
            )
        );
        --bgx: min(0px, calc(80px + var(--kvx) + 0.656 * var(--kvw) - var(--kv-clear) - 70.625vh));
        --kv-col: calc(100vw - 720px);
    }

    [data-testid="BACKGROUND_IMAGE"] img {
        width: 100vw;
        height: 100vh;
        object-fit: cover;
        object-position: var(--bgx) center;
        background: linear-gradient(to right, #004b7f 50%, #00628f 50%);
    }

    [data-testid="CREATIVE_ROOT"] picture {
        display: flex;
        align-items: center;
    }

    [data-testid="CREATIVE_ROOT"] picture img {
        flex: none;
        width: var(--kvw);
        height: var(--kvw);
        max-width: none;
        position: relative;
        left: var(--kvx);
    }
}

/* Wider than the art: contain keeps it full height, and the right gap paints #00628F. */
@media (min-width: 1024px) and (min-aspect-ratio: 9/5) {
    [data-testid="BACKGROUND_IMAGE"] img {
        object-fit: contain;
    }
}

@media (min-width: 1536px) {
    :root {
        --kv-col: calc(100vw - 836px);
    }
}