/*
 * Split Overlap module — see modules/split_overlap/split_overlap.php.
 *
 * Desktop geometry is expressed as percentages of the content container
 * (1280px at full width, matching the Figma comp 1:1), so the collage
 * scales with the viewport and with any image whose crop keeps the comp's
 * aspect ratio:
 *   - image columns          54.6875%  (700/1280)
 *   - text gutter, image side 4.8%     (61/1280)
 *   - body bottom inset      10.75%    (comp: 134px / 141px)
 *   - corner overlap         --so-overlap custom property, set per
 *                            instance by the editor (percent of width)
 *
 * The section owns the background color, so a grey variant is one solid
 * band behind both rows by construction.
 */

.splitOverlap {
    margin: 0 auto 80px;
}

@media screen and (max-width: 1024px) {
    .splitOverlap {
        margin-bottom: 60px;
    }
}

@media screen and (max-width: 767px) {
    .splitOverlap {
        margin-bottom: 40px;
    }
}

.splitOverlap-bg--grey {
    background-color: #F2F2F2;
    padding: 101px 0 125px;
}

@media screen and (max-width: 1024px) {
    .splitOverlap-bg--grey {
        padding: 60px 0 80px;
    }
}

@media screen and (max-width: 767px) {
    .splitOverlap-bg--grey {
        padding: 40px 0;
    }
}

.splitOverlap-wrapper {
    max-width: 1280px;
    margin: 0 auto;
}

.splitOverlap-img {
    display: block;
    width: 100%;
    height: auto;
}

.splitOverlap-content-container .wysiwyg {
    max-width: 520px;
}

@media screen and (min-width: 768px) {
    .splitOverlap-row {
        display: flex;
    }

    .splitOverlap-row--first {
        align-items: center;
    }

    .splitOverlap-row--second {
        align-items: flex-end;
    }

    .splitOverlap-img-container {
        position: relative;
        width: 54.6875%;
        flex-shrink: 0;
    }

    /* The second image rides up over the first by the per-instance
     * overlap amount. A negative percentage margin resolves against the
     * container WIDTH, so the overlap scales in lockstep with the image
     * heights and never drifts the way fixed px do. DOM order paints it
     * above the first image; the section (not the row) carries the
     * background, so nothing occludes the first image but the photo
     * itself. */
    .splitOverlap-row--second .splitOverlap-img-container {
        margin-top: calc(var(--so-overlap, 6%) * -1);
    }

    .splitOverlap-content-container {
        flex: 1;
        min-width: 0;
    }

    /* Collision guard: the body column always starts below the first
     * image's bottom edge (overlap + 2% breathing room), so long copy can
     * never ride up into the photo above. When copy outgrows the image
     * column at narrower widths, the row stretches and the overlap
     * relaxes instead of anything colliding. */
    .splitOverlap-row--second .splitOverlap-content-container {
        padding-top: calc(var(--so-overlap, 6%) + 2%);
        padding-bottom: 10.75%;
    }

    /* Mirroring. side--left = first image left, so the second image sits
     * right; side--right is the reverse. Text always hugs the container's
     * outer edge with the gutter on its image-facing side. */
    .splitOverlap-side--left .splitOverlap-row--second,
    .splitOverlap-side--right .splitOverlap-row--first {
        flex-direction: row-reverse;
    }

    .splitOverlap-side--left .splitOverlap-row--first .splitOverlap-content-container,
    .splitOverlap-side--right .splitOverlap-row--second .splitOverlap-content-container {
        padding-left: 4.8%;
    }

    .splitOverlap-side--left .splitOverlap-row--second .splitOverlap-content-container,
    .splitOverlap-side--right .splitOverlap-row--first .splitOverlap-content-container {
        padding-right: 4.8%;
    }
}

@media screen and (max-width: 767px) {
    .splitOverlap-img-container {
        margin-bottom: 20px;
    }

    .splitOverlap-content-container {
        margin-bottom: 20px;
    }

    .splitOverlap-row--second .splitOverlap-content-container {
        margin-bottom: 0;
    }
}