/* ==========================================================
   BRITISH MIDLAND VIRTUAL
   HOME PAGE
   Home Specific Styles Only
   Requires: base.css v4
========================================================== */


/* ==========================================================
   HERO
   Hero slideshow sits behind the existing hero content.
========================================================== */

.hero{

    position:relative;

    overflow:hidden;

}


/* ==========================================================
   HERO SLIDESHOW
========================================================== */

.hero-slideshow{

    position:absolute;

    inset:0;

    z-index:0;

    overflow:hidden;

}

.hero-slide{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:0;

    transition:opacity 2s ease-in-out;

    user-select:none;

    -webkit-user-drag:none;

}

.hero-slide.active{

    opacity:1;

}


/* ==========================================================
   HERO OVERLAY
   Keeps the existing overlay above the images but
   below the hero content.
========================================================== */

.hero-overlay{

    position:absolute;

    inset:0;

    z-index:1;

}


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

.hero-content{

    position:relative;

    z-index:2;

    max-width:900px;

    text-align:left;

    margin-left:auto;

    margin-right:auto;

}


/* ==========================================================
   HERO TYPOGRAPHY POLISH
========================================================== */

.hero-kicker{

    margin-bottom:22px;

    font-size:.80rem;

    font-weight:700;

    letter-spacing:.24em;

    text-align:left;

}

.hero h1{

    max-width:880px;

    font-size:clamp(3rem,4.5vw,4.4rem);

    line-height:1.12;

    font-weight:700;

    letter-spacing:-.025em;

    margin-bottom:30px;

    text-align:left;

}

.hero-divider{

    width:80px;

    height:4px;

    margin:32px 0;

}

.hero-copy{

    max-width:650px;

    font-size:1.05rem;

    line-height:1.8;

    color:rgba(255,255,255,.88);

    text-align:left;

}

.hero-buttons{

    justify-content:flex-start;

    margin-top:40px;

}


/* ==========================================================
   PAGE LAYOUT
========================================================== */

.homepage-content{

    background:#ffffff;

}

.homepage-content .container{

    width:min(94%,1500px);

    margin-inline:auto;

}


/* ==========================================================
   HOME FEATURE SECTIONS
========================================================== */

.home-feature{

    position:relative;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:90px;

    padding:120px 0;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fcfcfc
        );

}

.home-feature + .home-feature{

    margin-top:110px;

}

.home-feature.reverse .feature-image{

    order:2;

}

.home-feature.reverse .feature-content{

    order:1;

}


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

.feature-content{

    max-width:620px;

}

.feature-content h2{

    margin-bottom:30px;

    transition:
        color .28s ease,
        transform .28s ease;

}

.feature-content p{

    max-width:640px;

    color:var(--text);

    line-height:1.9;

    transition:opacity .25s ease;

}

.feature-content .primary-button{

    margin-top:45px;

}


/* ==========================================================
   FEATURE HOVER
========================================================== */

.home-feature:hover h2{

    color:var(--bm-red);

}

.home-feature:hover p{

    opacity:.96;

}

.home-feature .feature-content{

    transition:transform .35s ease;

}

.home-feature:hover .feature-content{

    transform:translateY(-4px);

}


/* ==========================================================
   FEATURE IMAGE
========================================================== */

.feature-image{

    position:relative;

    overflow:hidden;

    aspect-ratio:16 / 10;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-lg);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.feature-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    user-select:none;

    -webkit-user-drag:none;

    transition:transform .55s ease;

}

.feature-image::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:1;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0),
            rgba(0,26,58,.05)
        );

    opacity:0;

    transition:opacity .35s ease;

}

.feature-image::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.12);

    pointer-events:none;

}

.home-feature:hover .feature-image{

    transform:translateY(-6px);

    box-shadow:var(--shadow-xl);

}

.home-feature:hover .feature-image img{

    transform:scale(1.05);

}

.home-feature:hover .feature-image::before{

    opacity:1;

}


/* ==========================================================
   SECTION DIVIDER
========================================================== */

.home-feature::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    width:120px;

    height:3px;

    transform:translateX(-50%);

    background:rgba(208,40,35,.12);

    border-radius:999px;

}

.home-feature:first-of-type::before{

    display:none;

}


/* ==========================================================
   STATS
========================================================== */

.stats{

    background:#ffffff;

    border-top:1px solid rgba(0,26,58,.06);

    border-bottom:1px solid rgba(0,26,58,.06);

}

.stats-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:40px;

    padding:70px 0;

}

.stat{

    position:relative;

    text-align:center;

}

.stat:not(:last-child)::after{

    content:"";

    position:absolute;

    top:50%;

    right:-20px;

    width:1px;

    height:65px;

    transform:translateY(-50%);

    background:rgba(0,26,58,.08);

}

.stat-number{

    display:block;

    margin-bottom:14px;

    color:var(--bm-blue);

    font-size:2.35rem;

    font-weight:800;

}

.stat-label{

    display:block;

    color:var(--text-light);

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

}


/* ==========================================================
   PARTNER SECTION
========================================================== */

.partner-section{

    position:relative;

    padding:120px 0;

    background:var(--bm-cream);

    text-align:center;

    overflow:hidden;

}

.partner-section .container{

    position:relative;

    z-index:2;

    max-width:920px;

}

.partner-section::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    width:120px;

    height:4px;

    transform:translateX(-50%);

    background:var(--bm-red);

    opacity:.12;

    border-radius:999px;

}

.partner-section .section-kicker{

    margin-bottom:22px;

}

.partner-section h2{

    margin-bottom:28px;

}

.partner-section p{

    max-width:720px;

    margin:0 auto;

    color:var(--text);

    line-height:1.9;

}

.partner-logo{

    width:min(100%,620px);

    margin:55px auto;

    transition:
        transform .35s ease,
        opacity .35s ease;

}

.partner-logo img{

    user-select:none;

    -webkit-user-drag:none;

}

.partner-logo:hover{

    transform:translateY(-4px);

    opacity:.96;

}

.partner-section .primary-button{

    min-width:240px;

    margin-top:60px;

    box-shadow:
        0 12px 28px rgba(208,40,35,.22);

}

.partner-section .primary-button:hover{

    box-shadow:
        0 20px 42px rgba(208,40,35,.30);

}


/* ==========================================================
   JOIN SECTION
========================================================== */

.join-home{

    position:relative;

    padding:120px 0;

    background:#ffffff;

    text-align:center;

    border-top:1px solid rgba(0,26,58,.06);

}

.join-home::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    width:120px;

    height:4px;

    transform:translateX(-50%);

    background:var(--bm-red);

    opacity:.12;

    border-radius:999px;

}

.join-home .container{

    position:relative;

    z-index:2;

    max-width:900px;

}

.join-home .section-kicker{

    margin-bottom:22px;

}

.join-home h2{

    margin-bottom:28px;

}

.join-home p{

    max-width:680px;

    margin:0 auto;

    color:var(--text);

    line-height:1.9;

}

.join-home .button-group{

    justify-content:center;

    margin-top:55px;

}

.join-home .primary-button,
.join-home .secondary-button{

    min-width:220px;

}

.join-home .primary-button{

    box-shadow:
        0 12px 28px rgba(208,40,35,.22);

}

.join-home .primary-button:hover{

    box-shadow:
        0 20px 42px rgba(208,40,35,.30);

}

.join-home .secondary-button{

    background:transparent;

}

.join-home .secondary-button:hover{

    background:var(--bm-blue);

    color:#ffffff;

    border-color:var(--bm-blue);

}


/* ==========================================================
   SECTION RHYTHM
========================================================== */

.home-feature + .partner-section{

    margin-top:30px;

}

.partner-section + .join-home{

    margin-top:0;

}


/* ==========================================================
   RESPONSIVE — LARGE TABLETS
========================================================== */

@media(max-width:1200px){

    .home-feature{

        grid-template-columns:1fr;

        gap:70px;

    }

    .home-feature.reverse .feature-image,
    .home-feature.reverse .feature-content{

        order:unset;

    }

    .feature-content{

        max-width:760px;

        margin:auto;

        text-align:center;

    }

    .feature-content p{

        margin-inline:auto;

    }

    .feature-content .primary-button{

        margin-inline:auto;

    }

}


/* ==========================================================
   RESPONSIVE — TABLETS
========================================================== */

@media(max-width:992px){

    .stats-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .stat::after,
    .stat:not(:last-child)::after{

        display:none;

    }

    .partner-section,
    .join-home{

        text-align:center;

    }

    .partner-section .primary-button{

        margin-inline:auto;

    }

}


/* ==========================================================
   RESPONSIVE — MOBILE
========================================================== */

@media(max-width:768px){

    .hero-content{

        max-width:100%;

        margin-inline:auto;

        padding-top:180px;

        text-align:center;

    }

    .hero-kicker{

        text-align:center;

        letter-spacing:.22em;

    }

    .hero h1{

        max-width:100%;

        font-size:3.2rem;

        line-height:1.08;

        letter-spacing:-.025em;

        text-align:center;

    }

    .hero-divider{

        margin:30px auto;

    }

    .hero-copy{

        max-width:600px;

        margin-inline:auto;

        font-size:1rem;

        line-height:1.75;

        text-align:center;

    }

    .hero-buttons{

        justify-content:center;

    }

    .home-feature,
    .partner-section,
    .join-home{

        padding:90px 0;

    }

    .home-feature{

        gap:55px;

    }

    .stats-grid{

        grid-template-columns:1fr;

        gap:35px;

    }

    .feature-content{

        text-align:center;

    }

    .feature-content h2{

        margin-bottom:22px;

    }

    .feature-content .primary-button{

        width:100%;

        max-width:320px;

    }

    .feature-image{

        aspect-ratio:4 / 3;

        border-radius:var(--radius);

    }

    .partner-logo{

        width:min(100%,380px);

        margin:40px auto 50px;

    }

    .partner-section .primary-button{

        width:100%;

        max-width:320px;

    }

    .join-home .button-group{

        flex-direction:column;

        align-items:center;

    }

    .join-home .primary-button,
    .join-home .secondary-button{

        width:100%;

        max-width:320px;

    }

}


/* ==========================================================
   RESPONSIVE — SMALL MOBILE
========================================================== */

@media(max-width:480px){

    .stats{

        overflow:hidden;

    }

    .stat-number{

        font-size:2rem;

    }

    .feature-content h2{

        font-size:2.2rem;

    }

    .feature-content p{

        font-size:1rem;

    }

    .partner-logo{

        width:min(100%,260px);

    }

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

@media(prefers-reduced-motion:reduce){

    .hero-slide{

        transition:none !important;

    }

    .home-feature,
    .feature-image,
    .feature-image img,
    .feature-content,
    .partner-logo,
    .primary-button,
    .secondary-button{

        transition:none !important;

        animation:none !important;

    }

}


/* ==========================================================
   END OF HOME.CSS
========================================================== */