/* ==========================================================================
   Flex Layout — Home Hero
   rw-hh = home hero

   Layer order (bottom → top):
     1. .rw-hh__video / CSS bg image  (background layer)
     2. .rw-hh::after                 (red accent wedge, conditional)
     3. .rw-hh__inner                 (content + media card)

   Modifier:
     .rw-hh--accent  → renders red accent wedge via ::after
   ========================================================================== */

/* ── Section ─────────────────────────────────────────────────────────────── */

.rw-hh {
    position:         relative;
    min-height:       100vh;
    overflow:         hidden;
    display:          flex;
    align-items:      center;

    /* Image bg — set via --hh-bg CSS var from inline style */
    background-image:    var( --hh-bg );
    background-size:     cover;
    background-position: center center;
    background-repeat:   no-repeat;
}

/* ── Background video ────────────────────────────────────────────────────── */

.rw-hh__video {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    z-index:    0;
}

/* ── Red accent wedge ────────────────────────────────────────────────────── */

.rw-hh--accent::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: var( --rw-primary );
    clip-path:  polygon( 48% 0, 100% 0, 100% 100%, 70% 100% );
    z-index:    1;
    pointer-events: none;
}

/* ── Inner flex row ──────────────────────────────────────────────────────── */

.rw-hh__inner {
    position:       relative;
    z-index:        2;
    display:        flex;
    align-items:    stretch;
    gap:            40px;
    width:          100%;
    padding-top:    230px;
    padding-bottom: 60px;
    padding-left:   20px;
    padding-right:  20px;
}

/* ── Left — Content ──────────────────────────────────────────────────────── */

.rw-hh__content {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    color:           #fff;
}

.rw-hh__content .content-block__eyebrow,
.rw-hh__content .content-block__title,
.rw-hh__content .content-block__body,
.rw-hh__content .content-block__body p {
    color: #fff;
}

.rw-hh__content .content-block__eyebrow {
    font-size: 18px;
}

.rw-hh__content .content-block__body {
    font-size: 20px;
}

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

/* ── Right — Media card ──────────────────────────────────────────────────── */

.rw-hh__media {
    flex:     0 0 calc( 50% - 20px );
    position: relative;
    z-index:  3;
}

.rw-hh__media .rw-media {
    border-radius: var( --rw-corners );
    overflow:      clip;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media ( max-width: 992px ) {

    .rw-hh {
        /* Replace video with fallback image via CSS var on mobile */
        background-image: var( --hh-bg );
        min-height:       unset;
        align-items:      flex-start;
    }

    /* Hide video element on mobile */
    .rw-hh__video {
        display: none;
    }

    /* Red accent — simplify to a solid top strip on mobile */
    .rw-hh--accent::after {
        clip-path: none;
        inset:     0 0 auto 0;
        height:    6px;
        display: none;
    }

    .rw-hh__inner {
        flex-direction: column;
        padding-top:    150px;
        padding-bottom: 40px;
        gap:            30px;
    }

    /* Content always first on mobile */
    .rw-hh__content {
        order: 1;
        flex:  0 0 auto;
    }

    .rw-hh__media {
        order:        2;
        flex:         0 0 auto;
        width:        100%;
        aspect-ratio: 3 / 2;
    }

    /* Video mobile toggle — override hide when enabled */
    .rw-hh[data-video-mobile="1"] .rw-hh__video {
        display: block;
    }

}

@media ( max-width: 640px ) {

    .rw-hh__inner {
        padding-top:    150px;
        padding-bottom: 30px;
        gap:            24px;
    }

}