/* Full Width Image with Text/Media Overlay — SPLIT LAYOUT
   Loaded in addition to the compiled overlay styles in styles.css.
   Only applies when the block renders in split mode. */

.fullwidth-text-media-row--split {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    overflow: hidden;
}

.fullwidth-text-media-row--split .fullwidth-text-media-row__split-image {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
}

.fullwidth-text-media-row--split .fullwidth-text-media-row__split-image img,
.fullwidth-text-media-row--split .fullwidth-text-media-row__split-image picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fullwidth-text-media-row--split .fullwidth-text-media-row__split-content {
    padding: 32px 16px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.fullwidth-text-media-row--split .fullwidth-text-media-row__card {
    max-width: 640px;
}

/* Seam gradient — fades the image edge into the surrounding surface */
.fullwidth-text-media-row--split .fullwidth-text-media-row__seam {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Mobile default: seam fades bottom of image into content */
.fullwidth-text-media-row--seam .fullwidth-text-media-row__seam {
    background: linear-gradient(to bottom, transparent 30%, var(--fw-seam-color, #F0F5F7) 100%);
}

/* Per-background seam colors — picked up from the section's data attribute */
.fullwidth-text-media-row--split[data-backgroundcolor="white"] { --fw-seam-color: #FFFFFF; background: #FFFFFF; }
.fullwidth-text-media-row--split[data-backgroundcolor="cool-neutral"] { --fw-seam-color: #F0F5F7; background: #F0F5F7; }
.fullwidth-text-media-row--split[data-backgroundcolor="gray"] { --fw-seam-color: #F5F5F5; background: #F5F5F5; }
.fullwidth-text-media-row--split[data-backgroundcolor="blue"] { --fw-seam-color: #0074BC; background: #0074BC; color: #FFFFFF; }
.fullwidth-text-media-row--split[data-backgroundcolor="hss-blue"] { --fw-seam-color: #0074BC; background: #0074BC; color: #FFFFFF; }
.fullwidth-text-media-row--split[data-backgroundcolor="dark blue"] { --fw-seam-color: #264583; background: #264583; color: #FFFFFF; }
.fullwidth-text-media-row--split[data-backgroundcolor="dark-navy"] { --fw-seam-color: #1B2838; background: #1B2838; color: #FFFFFF; }
.fullwidth-text-media-row--split[data-backgroundcolor="black"] { --fw-seam-color: #000000; background: #000000; color: #FFFFFF; }
.fullwidth-text-media-row--split[data-backgroundcolor="cyan"] { --fw-seam-color: #00ADE6; background: #00ADE6; color: #FFFFFF; }

/* Component height variants (min-height on desktop) */
.fullwidth-text-media-row--split[data-height="small"] { --fw-min-height: 320px; }
.fullwidth-text-media-row--split[data-height="medium"] { --fw-min-height: 400px; }
.fullwidth-text-media-row--split[data-height="large"] { --fw-min-height: 480px; }
.fullwidth-text-media-row--split[data-height="x-large"] { --fw-min-height: 600px; }

/* Mobile stack order: default = image on top, reverse = text on top */
.fullwidth-text-media-row--split .fullwidth-text-media-row__split-image { order: 1; }
.fullwidth-text-media-row--split .fullwidth-text-media-row__split-content { order: 2; }

.fullwidth-text-media-row--mobile-reverse .fullwidth-text-media-row__split-image { order: 2; }
.fullwidth-text-media-row--mobile-reverse .fullwidth-text-media-row__split-content { order: 1; }

/* Vertical alignment of the text column (matters when min-height applies at desktop) */
.fullwidth-text-media-row--valign-top .fullwidth-text-media-row__split-content { justify-content: flex-start; }
.fullwidth-text-media-row--valign-center .fullwidth-text-media-row__split-content { justify-content: center; }
.fullwidth-text-media-row--valign-bottom .fullwidth-text-media-row__split-content { justify-content: flex-end; }

/* Tablet+ padding polish */
@media (min-width: 768px) {
    .fullwidth-text-media-row--split .fullwidth-text-media-row__split-content {
        padding: 48px 32px;
    }
}

/* Desktop — 2 column split, min-height, seam gradient direction change */
@media (min-width: 1024px) {
    .fullwidth-text-media-row--split {
        grid-template-columns: 1fr 1fr;
        min-height: var(--fw-min-height, 480px);
    }

    .fullwidth-text-media-row--split .fullwidth-text-media-row__split-image {
        height: 100%;
        min-height: var(--fw-min-height, 480px);
    }

    /* Image position: image on the right (text left) */
    .fullwidth-text-media-row--image-right .fullwidth-text-media-row__split-image { order: 2; }
    .fullwidth-text-media-row--image-right .fullwidth-text-media-row__split-content { order: 1; }

    /* Image position: image on the left (text right) */
    .fullwidth-text-media-row--image-left .fullwidth-text-media-row__split-image { order: 1; }
    .fullwidth-text-media-row--image-left .fullwidth-text-media-row__split-content { order: 2; }

    .fullwidth-text-media-row--split .fullwidth-text-media-row__split-content {
        padding: 64px 40px;
    }

    /* Seam fades horizontally toward the text side on desktop */
    .fullwidth-text-media-row--image-right.fullwidth-text-media-row--seam .fullwidth-text-media-row__seam {
        background: linear-gradient(to left, transparent 60%, var(--fw-seam-color, #F0F5F7) 100%);
    }

    .fullwidth-text-media-row--image-left.fullwidth-text-media-row--seam .fullwidth-text-media-row__seam {
        background: linear-gradient(to right, transparent 60%, var(--fw-seam-color, #F0F5F7) 100%);
    }
}