/*!
 * Sticky image for .scroll-image-section (desktop only)
 * Theme: Impreza Child
 * Purpose: Keep the right-side image sticky while scrolling until the end of the text section.
 */

@media (min-width: 1024px) {
    /* Ensure no ancestor clips the sticky element */
    .scroll-image-section,
    .scroll-image-section .l-section-h,
    .scroll-image-section .g-cols,
    .scroll-image-section .g-cols > .one-half {
        overflow: visible !important;
        contain: none !important;
    }

    /* Optional: help align columns at the top */
    .scroll-image-section .g-cols {
        align-items: flex-start !important;
    }
    /* If section has .fixed-columns, center items vertically */
    .fixed-columns .g-cols {
        display: flex !important;
        align-items: center !important;
    }

    /* Fallback: make the column sticky if the inner wrapper is constrained */
    .scroll-image-section .g-cols > .one-half {
        position: -webkit-sticky;
        position: sticky;
        top: 120px !important;
        align-self: flex-start;
        z-index: 1;
    }

    /* Make the image wrapper sticky */
    .scroll-image-section .g-cols > .one-half .w-image {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 120px !important; /* Adjust for sticky header height */
        z-index: 2;
        align-self: flex-start;
        height: auto !important;
        display: block;
    }

    /* If WP admin bar is visible on desktop, add extra offset */
    @media (min-width: 782px) {
        body.admin-bar .scroll-image-section .g-cols > .one-half .w-image {
            top: 152px !important; /* 120px + 32px admin bar */
        }
    }

    /* Image resets to avoid layout jumps */
    .scroll-image-section .g-cols > .one-half .w-image img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* Make sure overlay isn't above the content */
    .scroll-image-section .l-section-overlay {
        z-index: 0;
    }
}

/* Note:
   If the right column (with the image) is shorter than the left (text) column,
   position: sticky will stop early because it sticks within the height of its parent column.
   A small JS equalizer can set the right column min-height to match the left column
   if needed. This CSS handles the standard case in Impreza where columns naturally align.
*/