/* ==========================================================================
   Flex Layout — RightNow Media
   rw-rnm = rightnow media

   Modifiers on .rw-rnm:
     --left    → content panel on the left
     --right   → content panel on the right
     --dark    → red buttons, dark text (default)
     --light   → white buttons, white text

   Mobile (≤ 992px):
     Desktop bg drops. Mobile bg = top card. Content = bottom card.
     Both cards: --rw-accent bg, --rw-corners radius.
     Text and buttons always dark on mobile regardless of style modifier.
     Logos hidden.
   ========================================================================== */

/* ── Section — full-bleed background ─────────────────────────────────────── */

.rw-rnm {
    padding-top: var(--pad-top, 30px);
    padding-bottom: var(--pad-bottom, 30px);
    padding-left: 20px;
    padding-right: 20px;

}

.rw-rnm__wrapper {
    background-image: var(--rnm-bg-desktop);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: var(--rw-corners);
    overflow: clip;
    min-height: 500px;
    display: flex;
    align-items: stretch;
}

.rw-rnm.rw-rnm--right .rw-rnm__wrapper {
    min-height: 600px;
    background-position-x: 80%;
    background-position-y: center;
}

/* ── Inner — constrains to grid width, handles left/right ────────────────── */

.rw-rnm__inner {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: var(--rw-grid);
    margin: 0 auto;
    padding: 115px 100px;
}

.rw-rnm__content.rw-rnm__content_logo_wrap {
    max-width: 950px;
    width: auto;
    display: flex;
    align-items: flex-start;
    gap: 50px;
}

/* Content panel left (default) */
.rw-rnm--left .rw-rnm__inner {
    justify-content: flex-start;
}

/* Content panel right */
.rw-rnm--right .rw-rnm__inner {
    justify-content: flex-end;
}

/* ── Content panel ────────────────────────────────────────────────────────── */

.rw-rnm__content {
    width: 50%;
    max-width: 560px;
}

/* ── Logo lockup ─────────────────────────────────────────────────────────── */

.rw-rnm__logos {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.rw-rnm__favicon {
    width: auto;
    height: auto;
    max-width: 185px;
    max-height: 185px;
    object-fit: contain;
    flex-shrink: 0;
    box-shadow: 0 4px 58px rgba(0, 0, 0, 0.4);
    border-radius: 25px;
}

.rw-rnm__full-logo {
    width: auto;
    height: auto;
    /*max-width: 450px;*/
    object-fit: contain;
}

.rw-rnm_logo_content img {
    margin-bottom: 15px;
}


/* ── Dark style (default) — red buttons, dark text ───────────────────────── */

.rw-rnm--dark .content-block__title,
.rw-rnm--dark .content-block__eyebrow,
.rw-rnm--dark .content-block__body,
.rw-rnm--dark .content-block__body p {
    color: inherit;
}

/* ── Light style — white buttons, white text ─────────────────────────────── */

.rw-rnm--light .content-block__title, .rw-rnm--light .content-block__eyebrow, .rw-rnm--light .content-block__body, .rw-rnm--light .content-block__body p {
    color: #fff;
    text-shadow: 0 4px 8px rgba(0, 0, 0, .25);
    line-height: 1.3;
}

/* White button */
.rw-rnm--light .rw-btn-main {
    background-color: white;
    border-color: #fff;
    color: var(--rw-primary);
}

.rw-rnm--light .rw-btn-main:hover,
.rw-rnm--light .rw-btn-main:focus {
    background-color: transparent;
    border-color: #fff;
    color: white;
}

.rw-rnm_logo_content .rw-btn-wrapper {
    margin-top: 30px;
}

/* ── Responsive — Mobile / Tablet ────────────────────────────────────────── */
@media ( max-width: 1275px ) {
    .rw-rnm__inner {
        padding: 115px 60px;
    }
}

@media ( max-width: 1080px ) {
    .rw-rnm__content {
        width: 60%;
        max-width: 650px;
    }
}
@media ( max-width: 992px ) {

    .rw-rnm {
        padding-top: calc( var( --pad-top, 20px ) / 2 );
        padding-bottom: calc( var( --pad-bottom, 20px ) / 2 );
    }

    /* Kill desktop background — mobile bg handled via top card below */
    .rw-rnm__wrapper,
    .rw-rnm.rw-rnm--right .rw-rnm__wrapper {
        background-image: none;
        background-color: transparent;
        min-height: unset;
        display: block;
    }

    .rw-rnm__inner {
        flex-direction: column;
        gap: 0;
        padding: 0;
    }

    /* ── Top card — mobile background image ─────────────────────────────── */
    .rw-rnm__inner::before {
        content: '';
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
        background-image: var(--rnm-bg-mobile);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        background-color: var(--rw-accent);
        border-radius: var(--rw-corners);
        margin-bottom: 16px;
    }

    /* ── Bottom card — content ───────────────────────────────────────────── */
    .rw-rnm__content {
        width: 100%;
        max-width: 100%;
        background: var(--rw-accent);
        border-radius: var(--rw-corners);
        padding: 32px 28px;
    }

    .rw-rnm__content.rw-rnm__content_logo_wrap {
        width:      100%;
        max-width:  100%;
        display:    block;
    }

    /* Force dark text and red buttons on mobile regardless of style modifier */
    .rw-rnm--light .content-block__title, .rw-rnm--light .content-block__eyebrow, .rw-rnm--light .content-block__body, .rw-rnm--light .content-block__body p {
        color: inherit;
        text-shadow: none;
    }

    .rw-rnm--light .rw-btn-main {
        background-color: var(--rw-primary);
        border-color: var(--rw-primary);
        color: #fff;
    }

    .rw-rnm--light .rw-btn-main:hover,
    .rw-rnm--light .rw-btn-main:focus {
        background-color: var(--rw-secondary);
        border-color: var(--rw-secondary);
        color: #fff;
    }

    /* Hide logos on mobile */
    .rw-rnm__logos,
    .rw-rnm__full-logo {
        display: none;
    }

}

@media ( max-width: 640px ) {

    .rw-rnm__content {
        padding: 28px 20px;
    }

}