/* ==========================================================
   BRITISH MIDLAND VIRTUAL
   JOIN PAGE v5.0
   Designed for the new Join HTML
========================================================== */

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

.join-hero{

    padding:0;

}

.join-hero .hero-content{

    max-width:760px;

    padding-top:170px;

    padding-bottom:150px;

}

.join-hero .hero-overlay{

    background:
        linear-gradient(
            90deg,
            rgba(0,26,58,.90),
            rgba(0,26,58,.60),
            rgba(0,26,58,.18)
        );

}

/* ==========================================================
   BUTTONS
========================================================== */

.hero-buttons{

    display:flex;

    gap:22px;

    margin-top:48px;

    align-items:center;

}

.hero-buttons a{

    min-width:220px;

}

.discord-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    height:58px;

    padding:0 34px;

    border-radius:999px;

    background:#5865F2;

    color:#ffffff;

    font-weight:700;

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;

    box-shadow:
        0 12px 28px rgba(88,101,242,.32);

}

.discord-button:hover{

    background:#4752C4;

    transform:translateY(-3px);

    box-shadow:
        0 22px 42px rgba(88,101,242,.40);

}

.discord-button i{

    font-size:1.15rem;

}

.hero-buttons .secondary-button{

    background:transparent;

}
/* ==========================================================
   WHY BRITISH MIDLAND
========================================================== */

.join-standard{

    padding:120px 0;

    background:#ffffff;

}

.section-intro{

    max-width:760px;

    margin:28px 0 60px;

    color:var(--text);

    line-height:1.9;

}

.standard-grid{

    display:grid;

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

    gap:32px;

}

.standard-grid .card{

    position:relative;

    overflow:hidden;

    padding:42px 34px;

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

    background:#ffffff;

    box-shadow:var(--shadow);

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

}

.standard-grid .card:hover{

    transform:translateY(-8px);

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

}

.standard-grid .card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:var(--bm-red);

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .30s ease;

}

.standard-grid .card:hover::before{

    transform:scaleX(1);

}

.standard-grid i{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:68px;

    height:68px;

    margin-bottom:26px;

    border-radius:18px;

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

    color:var(--bm-red);

    font-size:1.7rem;

}

.standard-grid h3{

    margin-bottom:18px;

    color:var(--bm-blue);

}

.standard-grid p{

    color:var(--text);

    line-height:1.85;

}
/* ==========================================================
   YOUR JOURNEY
========================================================== */

.join-journey{

    padding:120px 0;

    background:var(--bm-cream);

}

.journey-grid{

    position:relative;

    display:grid;

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

    gap:34px;

    margin-top:70px;

}

.journey-grid::before{

    content:"";

    position:absolute;

    top:40px;

    left:12%;

    right:12%;

    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--bm-red),
            rgba(208,40,35,.25)
        );

    z-index:0;

}

.journey-step{

    position:relative;

    z-index:2;

    background:#ffffff;

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

    padding:42px 34px;

    text-align:center;

    box-shadow:var(--shadow);

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

}

.journey-step:hover{

    transform:translateY(-8px);

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

}

.step-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:80px;

    height:80px;

    margin:0 auto 18px;

    border-radius:50%;

    background:var(--bm-blue);

    color:#ffffff;

    font-size:1.8rem;

    box-shadow:
        0 14px 30px rgba(0,26,58,.20);

}

.step-number{

    display:block;

    margin-bottom:18px;

    color:var(--bm-red);

    font-size:.8rem;

    font-weight:800;

    letter-spacing:.22em;

}

.journey-step h3{

    margin-bottom:18px;

    color:var(--bm-blue);

}

.journey-step p{

    color:var(--text);

    line-height:1.85;

}
/* ==========================================================
   MEMBERSHIP REQUIREMENTS
========================================================== */

.membership{

    padding:120px 0;

    background:#ffffff;

}

.requirements-grid{

    display:grid;

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

    gap:28px;

    margin-top:60px;

}

.requirement{

    position:relative;

    overflow:hidden;

    padding:42px 28px;

    background:#ffffff;

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

    text-align:center;

    box-shadow:var(--shadow);

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

}

.requirement:hover{

    transform:translateY(-8px);

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

}

.requirement::before{

    content:"";

    position:absolute;

    inset:0 auto auto 0;

    width:100%;

    height:4px;

    background:var(--bm-red);

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .30s ease;

}

.requirement:hover::before{

    transform:scaleX(1);

}

.requirement i{

    display:flex;

    align-items:center;

    justify-content:center;

    width:72px;

    height:72px;

    margin:0 auto 24px;

    border-radius:18px;

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

    color:var(--bm-blue);

    font-size:1.8rem;

}

.requirement h3{

    margin-bottom:14px;

    color:var(--bm-blue);

}

.requirement p{

    color:var(--text);

    line-height:1.8;

}
/* ==========================================================
   CTA
========================================================== */

.join-cta{

    padding:140px 0;

    background:
        linear-gradient(
            135deg,
            var(--bm-blue),
            var(--bm-blue-light)
        );

    color:#ffffff;

    text-align:center;

}

.join-cta .container{

    max-width:900px;

}

.join-cta h2{

    color:#ffffff;

    margin-bottom:24px;

}

.join-cta p{

    max-width:720px;

    margin:0 auto;

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

    line-height:1.95;

}

.join-cta .cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:48px;

}

/* ==========================================================
   FOOTER FIX
========================================================== */

footer{

    margin-top:0;

    background:var(--bm-blue) !important;

    color:#ffffff;

}

.footer-grid{

    background:transparent;

}

.footer-bottom{

    background:rgba(0,0,0,.15);

}

.footer-bottom p{

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

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:1200px){

    .standard-grid{

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

    }

    .journey-grid{

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

    }

    .journey-grid::before{

        display:none;

    }

    .requirements-grid{

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

    }

}

@media(max-width:768px){

    .join-standard,

    .join-journey,

    .membership,

    .join-cta{

        padding:90px 0;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:stretch;

    }

    .standard-grid,

    .journey-grid,

    .requirements-grid{

        grid-template-columns:1fr;

    }

    .hero-buttons a{

        width:100%;

    }

}

@media(max-width:480px){

    .join-hero h1{

        font-size:2.4rem;

    }

}
/* ==========================================================
   MICRO INTERACTIONS
========================================================== */

.standard-grid .card,
.journey-step,
.requirement{

    will-change:transform;

}

.standard-grid .card:hover i{

    transform:rotate(-6deg) scale(1.08);

    background:var(--bm-red);

    color:#ffffff;

}

.requirement:hover i{

    transform:translateY(-4px);

    background:var(--bm-blue);

    color:#ffffff;

}

.step-icon{

    transition:
        transform .30s ease,
        background .30s ease;

}

.journey-step:hover .step-icon{

    transform:scale(1.08);

    background:var(--bm-red);

}

/* ==========================================================
   ICON TRANSITIONS
========================================================== */

.standard-grid i,
.requirement i{

    transition:
        transform .30s ease,
        background .30s ease,
        color .30s ease;

}

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

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

    .standard-grid .card,

    .journey-step,

    .requirement,

    .standard-grid i,

    .requirement i,

    .step-icon{

        transition:none !important;

        animation:none !important;

    }

}

/* ==========================================================
   END OF JOIN.CSS
========================================================== */