/*
 * Intro block - "image over the shape".
 *
 * The image fills the shape's own box and sits ON TOP of it, masked to the same
 * silhouette so it lies exactly over the shape with no rectangular edges. It is
 * a SIBLING of .intro__background, never a child: a child would sit UNDER the
 * dark wash and be clipped by that element's own mask, which is the layering
 * this exists to avoid. The shape itself is unchanged underneath.
 *
 * WHY THIS FILE EXISTS, and how to remove it
 * ------------------------------------------
 * Hand-authored CSS, deliberately NOT part of the webpack bundle. The compiled
 * frontend bundles rebuild to a different hash even from unmodified source, so
 * rebuilding them for a few lines of CSS would put a large uncontrolled diff
 * across every page of a live site. It is loaded only on pages that actually
 * set an image (mena_enqueue_intro_overlay in includes/functions-acf-gutenberg.php),
 * so pages without it are untouched - they do not even get a <link>.
 *
 * NEXT LEGITIMATE REBUILD: move these rules into
 * resources/scss/blocks/_intro.scss as `&__overlay-image`, delete this file and
 * the enqueue, and drop the version query string. Nothing else depends on it.
 *
 * STACKING - the numbers here are load-bearing, see _intro.scss:
 *   .intro__background    mask-image, min-height 510px   (no z-index)
 *   .intro__overlay       z-index 9    dark 40% wash, same mask
 *   .intro__ring          z-index 9    teal circle
 *   .intro__overlay-image z-index 10   <- THIS: above the shape, its wash and
 *                                         the ring, so it reads as sitting on
 *                                         top of the shape rather than inside it
 *   .intro__title         z-index 12   stays above the image so the heading is
 *                                         never obscured, whatever is uploaded
 */

.intro__overlay-image {
    position: absolute;
    /* exactly the shape's box: .intro__left is the positioned parent and
       .intro__background fills it (height 100%, min-height 510px) */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    line-height: 0;
    /* purely decorative: never intercept clicks meant for the heading or CTA */
    pointer-events: none;
    /* The same mask the shape itself uses, so the picture takes the shape's
       outline exactly rather than sitting over it as a rectangle. Without this
       a rectangular upload's top corners stick out past the dome's shoulders,
       which is not "exactly over the shape". */
    -webkit-mask-image: url('/wp-content/themes/wondercar/assets/images/robot-shape.svg');
    mask-image: url('/wp-content/themes/wondercar/assets/images/robot-shape.svg');
    -webkit-mask-size: cover;
    mask-size: cover;
    border-radius: 0 0 25px 25px;
}

.intro__overlay-image img {
    width: 100%;
    height: 100%;
    /* cover, not contain: the picture fills the shape edge to edge with no
       letterboxing. The trade is that a file whose aspect ratio differs from the
       shape's is trimmed at the edges - the field description says so. */
    object-fit: cover;
    /*
     * Anchor the crop to the TOP, not the centre.
     *
     * This is not a tweak for one photograph. The shape's box is roughly 1.9:1
     * and the pictures people put here are photographs of people, which are
     * square or portrait - so cover always has to discard height. Centre-cropping
     * discards it symmetrically, which takes the top off the subject's head:
     * measured on the asset in use, centre keeps source rows 243-781 of 1024 and
     * the head occupies rows 50-310, so the face is cut just below the mouth.
     *
     * Anchoring to the top keeps rows 0-538 instead - the whole head with about
     * 50px of headroom above it - and does the right thing for any standing
     * portrait, which is the expected content. Any anchor below about 10% starts
     * clipping this subject's cap, so a percentage buys nothing.
     *
     * At narrow widths the box becomes taller than it is wide, cover crops the
     * WIDTH instead, and the vertical anchor is a no-op - so this is safe there.
     */
    object-position: center top;
}

/*
 * Below 1024px _intro.scss gives .intro__left a 20px padding-top. Absolute
 * positioning resolves against the padding box, so top:0 would sit 20px above
 * .intro__background and the overlay box would no longer match the shape.
 * Measured: 530px box against a 510px shape. This realigns them exactly.
 */
@media (max-width: 1023px) {
    .intro__overlay-image { top: 20px; }
}