/* 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;
    /* Break out of any parent .container so the hero renders full-bleed */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* Override the negative margin-block that .block-module applies globally,
       which was causing the next section to overlap this one. */
    margin-top: 0;
    margin-bottom: 0;
}

.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;
}

/* === TYPED-FIELD CLASSES (Split mode) ===
   These win over global rich-text cascade because they carry a specific class,
   not a generic tag selector. */

.fullwidth-text-media-row__typed {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.fullwidth-text-media-row .fullwidth-text-media-row__program-name {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 900 !important;
    font-size: 2.25rem;
    line-height: 1.1;
    color: #264583 !important;
    letter-spacing: -0.5px;
    margin: 0 0 16px 0 !important;
    text-transform: none;
}

.fullwidth-text-media-row .fullwidth-text-media-row__headline {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 500 !important;
    font-size: 1.25rem;
    line-height: 1.4;
    color: #1B2838 !important;
    margin: 0 0 24px 0 !important;
    text-transform: none;
    letter-spacing: normal;
}

.fullwidth-text-media-row .fullwidth-text-media-row__subtitle {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: #264583 !important;
    margin: 0 0 32px 0 !important;
    max-width: 540px;
}

.fullwidth-text-media-row .fullwidth-text-media-row__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 14px 28px !important;
    border-radius: 8px !important;
    background: #0074BC !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    min-height: 48px;
    border: none;
    align-self: flex-start;
    transition: background 0.2s, transform 0.1s;
}

.fullwidth-text-media-row .fullwidth-text-media-row__cta:hover {
    background: #005A91 !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}

/* Dark backgrounds — invert typed field colors */
.fullwidth-text-media-row--split[data-backgroundcolor="dark blue"] .fullwidth-text-media-row__program-name,
.fullwidth-text-media-row--split[data-backgroundcolor="dark blue"] .fullwidth-text-media-row__headline,
.fullwidth-text-media-row--split[data-backgroundcolor="dark blue"] .fullwidth-text-media-row__subtitle,
.fullwidth-text-media-row--split[data-backgroundcolor="dark-navy"] .fullwidth-text-media-row__program-name,
.fullwidth-text-media-row--split[data-backgroundcolor="dark-navy"] .fullwidth-text-media-row__headline,
.fullwidth-text-media-row--split[data-backgroundcolor="dark-navy"] .fullwidth-text-media-row__subtitle,
.fullwidth-text-media-row--split[data-backgroundcolor="blue"] .fullwidth-text-media-row__program-name,
.fullwidth-text-media-row--split[data-backgroundcolor="blue"] .fullwidth-text-media-row__headline,
.fullwidth-text-media-row--split[data-backgroundcolor="blue"] .fullwidth-text-media-row__subtitle,
.fullwidth-text-media-row--split[data-backgroundcolor="hss-blue"] .fullwidth-text-media-row__program-name,
.fullwidth-text-media-row--split[data-backgroundcolor="hss-blue"] .fullwidth-text-media-row__headline,
.fullwidth-text-media-row--split[data-backgroundcolor="hss-blue"] .fullwidth-text-media-row__subtitle,
.fullwidth-text-media-row--split[data-backgroundcolor="black"] .fullwidth-text-media-row__program-name,
.fullwidth-text-media-row--split[data-backgroundcolor="black"] .fullwidth-text-media-row__headline,
.fullwidth-text-media-row--split[data-backgroundcolor="black"] .fullwidth-text-media-row__subtitle {
    color: #FFFFFF !important;
}

.fullwidth-text-media-row--split[data-backgroundcolor="dark blue"] .fullwidth-text-media-row__cta,
.fullwidth-text-media-row--split[data-backgroundcolor="dark-navy"] .fullwidth-text-media-row__cta,
.fullwidth-text-media-row--split[data-backgroundcolor="blue"] .fullwidth-text-media-row__cta,
.fullwidth-text-media-row--split[data-backgroundcolor="hss-blue"] .fullwidth-text-media-row__cta {
    background: #FFFFFF !important;
    color: #0074BC !important;
}

.fullwidth-text-media-row--split[data-backgroundcolor="dark blue"] .fullwidth-text-media-row__cta:hover,
.fullwidth-text-media-row--split[data-backgroundcolor="dark-navy"] .fullwidth-text-media-row__cta:hover,
.fullwidth-text-media-row--split[data-backgroundcolor="blue"] .fullwidth-text-media-row__cta:hover,
.fullwidth-text-media-row--split[data-backgroundcolor="hss-blue"] .fullwidth-text-media-row__cta:hover {
    background: #F0F5F7 !important;
}

/* === SPLIT MODE TYPOGRAPHY DEFAULTS ===
   Scoped to split layout only. Overlay mode is untouched. */

.fullwidth-text-media-row--split .fullwidth-text-media-row__card h1 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 900;
    font-size: 2.25rem;
    line-height: 1.1;
    color: #264583;
    letter-spacing: -0.5px;
    margin: 0 0 16px 0;
}

.fullwidth-text-media-row--split .fullwidth-text-media-row__card h2 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.4;
    color: #1B2838;
    margin: 0 0 24px 0;
}

.fullwidth-text-media-row--split .fullwidth-text-media-row__card h3 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
    color: #264583;
    margin: 0 0 12px 0;
}

.fullwidth-text-media-row--split .fullwidth-text-media-row__card p {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #264583;
    margin: 0 0 16px 0;
    max-width: 540px;
}

.fullwidth-text-media-row--split .fullwidth-text-media-row__card p:last-child {
    margin-bottom: 0;
}

/* Primary CTA — matches .pas-hero__cta from prototype */
.fullwidth-text-media-row--split .fullwidth-text-media-row__card a.btn-primary,
.fullwidth-text-media-row--split .fullwidth-text-media-row__card a.button--primary,
.fullwidth-text-media-row--split .fullwidth-text-media-row__card a.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    padding: 14px 28px;
    border-radius: 8px;
    background: #0074BC;
    color: #FFFFFF;
    text-decoration: none;
    min-height: 48px;
    border: none;
    margin-top: 8px;
    transition: background 0.2s, transform 0.1s;
}

.fullwidth-text-media-row--split .fullwidth-text-media-row__card a.btn-primary:hover,
.fullwidth-text-media-row--split .fullwidth-text-media-row__card a.button--primary:hover,
.fullwidth-text-media-row--split .fullwidth-text-media-row__card a.cta-button:hover {
    background: #005A91;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Light-on-dark variant when the section background is dark */
.fullwidth-text-media-row--split[data-backgroundcolor="dark blue"] .fullwidth-text-media-row__card h1,
.fullwidth-text-media-row--split[data-backgroundcolor="dark blue"] .fullwidth-text-media-row__card h2,
.fullwidth-text-media-row--split[data-backgroundcolor="dark blue"] .fullwidth-text-media-row__card h3,
.fullwidth-text-media-row--split[data-backgroundcolor="dark blue"] .fullwidth-text-media-row__card p,
.fullwidth-text-media-row--split[data-backgroundcolor="dark-navy"] .fullwidth-text-media-row__card h1,
.fullwidth-text-media-row--split[data-backgroundcolor="dark-navy"] .fullwidth-text-media-row__card h2,
.fullwidth-text-media-row--split[data-backgroundcolor="dark-navy"] .fullwidth-text-media-row__card h3,
.fullwidth-text-media-row--split[data-backgroundcolor="dark-navy"] .fullwidth-text-media-row__card p,
.fullwidth-text-media-row--split[data-backgroundcolor="blue"] .fullwidth-text-media-row__card h1,
.fullwidth-text-media-row--split[data-backgroundcolor="blue"] .fullwidth-text-media-row__card h2,
.fullwidth-text-media-row--split[data-backgroundcolor="blue"] .fullwidth-text-media-row__card h3,
.fullwidth-text-media-row--split[data-backgroundcolor="blue"] .fullwidth-text-media-row__card p,
.fullwidth-text-media-row--split[data-backgroundcolor="hss-blue"] .fullwidth-text-media-row__card h1,
.fullwidth-text-media-row--split[data-backgroundcolor="hss-blue"] .fullwidth-text-media-row__card h2,
.fullwidth-text-media-row--split[data-backgroundcolor="hss-blue"] .fullwidth-text-media-row__card h3,
.fullwidth-text-media-row--split[data-backgroundcolor="hss-blue"] .fullwidth-text-media-row__card p,
.fullwidth-text-media-row--split[data-backgroundcolor="black"] .fullwidth-text-media-row__card h1,
.fullwidth-text-media-row--split[data-backgroundcolor="black"] .fullwidth-text-media-row__card h2,
.fullwidth-text-media-row--split[data-backgroundcolor="black"] .fullwidth-text-media-row__card h3,
.fullwidth-text-media-row--split[data-backgroundcolor="black"] .fullwidth-text-media-row__card p {
    color: #FFFFFF;
}

.fullwidth-text-media-row--split[data-backgroundcolor="dark blue"] .fullwidth-text-media-row__card h2,
.fullwidth-text-media-row--split[data-backgroundcolor="dark-navy"] .fullwidth-text-media-row__card h2,
.fullwidth-text-media-row--split[data-backgroundcolor="dark blue"] .fullwidth-text-media-row__card p,
.fullwidth-text-media-row--split[data-backgroundcolor="dark-navy"] .fullwidth-text-media-row__card p {
    color: rgba(255, 255, 255, 0.85);
}

/* 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 (only meaningful at desktop where min-height creates room) */
@media (min-width: 1024px) {
    .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; }
}

/* Mobile: always top-align the content column, regardless of CMS valign setting */
@media (max-width: 1023px) {
    .fullwidth-text-media-row--split .fullwidth-text-media-row__split-content {
        justify-content: flex-start;
    }
}

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

    .fullwidth-text-media-row--split .fullwidth-text-media-row__card h1 {
        font-size: 2.75rem;
    }

    .fullwidth-text-media-row--split .fullwidth-text-media-row__card h2 {
        font-size: 1.375rem;
    }

    .fullwidth-text-media-row .fullwidth-text-media-row__program-name {
        font-size: 2.75rem;
    }

    .fullwidth-text-media-row .fullwidth-text-media-row__headline {
        font-size: 1.375rem;
    }
}

/* 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;
    }

    .fullwidth-text-media-row--split .fullwidth-text-media-row__card h1 {
        font-size: 3.25rem;
    }

    .fullwidth-text-media-row--split .fullwidth-text-media-row__card h2 {
        font-size: 1.5rem;
    }

    .fullwidth-text-media-row .fullwidth-text-media-row__program-name {
        font-size: 3.25rem;
    }

    .fullwidth-text-media-row .fullwidth-text-media-row__headline {
        font-size: 1.5rem;
    }

    /* 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%);
    }
}

/* === CONTAINED CONTENT VARIANT (opt-in) ===
   Keeps the section image full-bleed but aligns the text column's inner
   edge with the site's Bootstrap container so the copy lines up with the
   page content beneath. Applied only when the block toggles it on. */
@media (min-width: 1024px) {
    .fullwidth-text-media-row--contained-content.fullwidth-text-media-row--image-right .fullwidth-text-media-row__split-content {
        padding-left: max(40px, calc((100vw - 960px) / 2));
    }
    .fullwidth-text-media-row--contained-content.fullwidth-text-media-row--image-left .fullwidth-text-media-row__split-content {
        padding-right: max(40px, calc((100vw - 960px) / 2));
    }
}

@media (min-width: 1200px) {
    .fullwidth-text-media-row--contained-content.fullwidth-text-media-row--image-right .fullwidth-text-media-row__split-content {
        padding-left: max(40px, calc((100vw - 1140px) / 2));
    }
    .fullwidth-text-media-row--contained-content.fullwidth-text-media-row--image-left .fullwidth-text-media-row__split-content {
        padding-right: max(40px, calc((100vw - 1140px) / 2));
    }
}

/* Extra-large desktop bump */
@media (min-width: 1280px) {
    .fullwidth-text-media-row--split .fullwidth-text-media-row__card h1 {
        font-size: 3.75rem;
    }

    .fullwidth-text-media-row--split .fullwidth-text-media-row__card h2 {
        font-size: 1.625rem;
    }

    .fullwidth-text-media-row .fullwidth-text-media-row__program-name {
        font-size: 3.75rem;
    }

    .fullwidth-text-media-row .fullwidth-text-media-row__headline {
        font-size: 1.625rem;
    }
}