/* =====================================================
   VANTI BG HERO
===================================================== */

.vbh-hero{
    position:relative;
    width:100%;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    color:#fff;
}

/* =====================================================
   VIDEO
===================================================== */

.vbh-hero__video{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
}

.vbh-hero__iframe{
    position:absolute;
    top:50%;
    left:65%;
    width:100%;
    height:100%;
    transform:translate(-50%,-50%);
    border:0;
    pointer-events:none;
}

/* =====================================================
   OVERLAY IMAGE
===================================================== */

.vbh-hero__overlay{
    position:absolute;
    inset:0;
    z-index:1;

    background-repeat:no-repeat;
    background-position:center bottom;
    background-size:cover;

    pointer-events:none;
}

/* =====================================================
   MASK
===================================================== */

.vbh-hero::before{

    content:"";

    position:absolute;
    inset:0;

    z-index:2;

    pointer-events:none;

    background:

    linear-gradient(
        90deg,
        rgba(2,6,12,1) 0%,
        rgba(2,6,12,.98) 15%,
        rgba(2,6,12,.94) 28%,
        rgba(2,6,12,.82) 42%,
        rgba(2,6,12,.55) 56%,
        rgba(2,6,12,.20) 70%,
        rgba(2,6,12,0) 82%
    ),

    linear-gradient(
        -90deg,
        rgba(2,6,12,.75) 0%,
        rgba(2,6,12,.30) 18%,
        rgba(2,6,12,0) 42%
    ),

    linear-gradient(
        180deg,
        rgba(2,6,12,.45) 0%,
        rgba(2,6,12,.10) 22%,
        transparent 40%
    ),

    linear-gradient(
        180deg,
        transparent 45%,
        rgba(2,6,12,.35) 68%,
        rgba(2,6,12,.92) 100%
    ),

    radial-gradient(
        ellipse at center,
        rgba(0,0,0,0) 35%,
        rgba(0,0,0,.28) 68%,
        rgba(0,0,0,.70) 100%
    );
}

/* =====================================================
   ALIGNMENTS
===================================================== */

.vbh-hero--align-top{
    align-items:flex-start;
}

.vbh-hero--align-center{
    align-items:center;
}

.vbh-hero--align-bottom{
    align-items:flex-end;
}

/* =====================================================
   CONTENT
===================================================== */

.vbh-hero__inner{

    position:relative;
    z-index:3;

    width:100%;
    max-width:1320px;

    margin:0 auto;

    display:grid;
    grid-template-columns:50% 50%;
}

.vbh-hero__inner-inner{

    width:100%;
    max-width:none;

    padding:
        clamp(5rem,8vw,9rem)
        clamp(2rem,5vw,4rem);

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;

    text-align:left;
}

.vbh-hero__inner-inner .wp-block-buttons{
    justify-content:flex-start !important;
}

/* =====================================================
   TYPOGRAPHY
===================================================== */

.vbh-hero__inner *{
    text-shadow:0 3px 18px rgba(0,0,0,.65); 
}

.vbh-hero h1{
    margin-bottom:.35em; font-size:3.3em!important; line-height:1em; 
}

.vbh-hero h1 em{
  
}

.vbh-hero h2{
    margin-bottom:.6em; font-weight:400!important;
}

.vbh-hero h4{
    line-height:1.45; font-weight:400!important;
}

.vbn-hero p{color:white!important;}

/* =====================================================
   EDITOR
===================================================== */

.vbh-hero--editor-preview{
    background-size:cover;
    background-position:center;
}

.vbh-hero__video-placeholder{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#111;
    color:#fff;
    z-index:1;
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width:768px){

    .vbh-hero{
        justify-content:center;
    }

    .vbh-hero__inner{

        max-width:100%;
        display:block;
    }

    .vbh-hero__inner-inner{

        width:100%;
        max-width:none;

        padding:5rem 2rem;

        text-align:center;
        align-items:center;
    }

    .vbh-hero__inner-inner .wp-block-buttons{
        justify-content:center !important;
    }

    .vbh-hero::before{

        background:

        linear-gradient(
            180deg,
            rgba(2,6,12,.92) 0%,
            rgba(2,6,12,.65) 35%,
            rgba(2,6,12,.92) 100%
        ),

        radial-gradient(
            ellipse at center,
            rgba(0,0,0,0) 30%,
            rgba(0,0,0,.35) 70%,
            rgba(0,0,0,.75) 100%
        );
    }

}


.vbh-hero .wp-block-button__link{

    display:inline-flex;
    align-items:center;
    gap:.75rem;
}

.vbh-hero .wp-block-button__link::after{

    content:"›";

    font-size:1.35em;
    font-weight:300;
    line-height:1;

    transition:transform .25s ease;
}

.vbh-hero .wp-block-button:hover .wp-block-button__link::after{

    transform:translateX(4px);
}

.after-CTA{margin-top:20px!important;}