/* ============================================================
   ASMC
   PHASE 8A
   REGISTRATION GATEWAY
   SINGLE-SCREEN VERSION
============================================================ */


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

.registration-gateway-page {
    background:
        #F6F2F9;
}


.reg8a-page {
    width:
        100%;

    overflow-x:
        hidden;
}



/* ============================================================
   CONTAINER
============================================================ */

.reg8a-container {
    width:
        min(
            1120px,
            calc(100% - 3rem)
        );

    margin-inline:
        auto;
}



/* ============================================================
   CHOICE SECTION
============================================================ */

.reg8a-choice {
    display:
        flex;

    align-items:
        center;

    min-height:
        calc(
            72svh
            -
            var(--header-height)
        );

    padding:
        clamp(
            2rem,
            3.5vw,
            3.25rem
        )
        0;

    background:
        linear-gradient(
            180deg,
            #FBF9FC 0%,
            #F6F2F9 100%
        );
}



/* ============================================================
   HEADING
============================================================ */

.reg8a-choice-heading {
    max-width:
        700px;

    margin:
        0
        auto
        clamp(
            1.75rem,
            2.5vw,
            2.5rem
        );

    text-align:
        center;
}


.reg8a-choice-kicker {
    margin:
        0
        0
        0.65rem;

    font-family:
        var(--font-display, "Poppins", sans-serif);

    font-size:
        0.72rem;

    font-weight:
        600;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

    color:
        #F7941D;
}


.reg8a-choice-heading h1 {
    margin:
        0;

    font-family:
        var(--font-display, "Poppins", sans-serif);

    font-size:
        clamp(
            2.8rem,
            4.6vw,
            4.8rem
        );

    font-weight:
        700;

    line-height:
        0.94;

    letter-spacing:
        -0.055em;

    color:
        #211627;
}


.reg8a-choice-heading h1 span {
    display:
        block;

    color:
        #662E93;
}



/* ============================================================
   CARD GRID
============================================================ */

.reg8a-card-grid {
    display:
        grid;

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

    gap:
        clamp(
            1.25rem,
            2.5vw,
            2rem
        );

    align-items:
        stretch;
}



/* ============================================================
   BASE CARD
============================================================ */

.reg8a-card {
    position:
        relative;

    min-height:
        285px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    padding:
        clamp(
            1.5rem,
            2.5vw,
            2.25rem
        );

    overflow:
        hidden;

    border-radius:
        clamp(
            24px,
            2.5vw,
            34px
        );
}



/* ============================================================
   PARTICIPANT CARD
============================================================ */

.reg8a-card-participant {
    border:
        1px solid
        rgba(
            102,
            46,
            147,
            0.14
        );

    background:
        linear-gradient(
            145deg,
            #FFFFFF 0%,
            #F4E9F4 100%
        );

    box-shadow:
        0 18px 44px
        rgba(
            33,
            22,
            39,
            0.06
        );

    color:
        #211627;
}



/* ============================================================
   EXHIBITOR CARD
============================================================ */

.reg8a-card-exhibitor {
    background:
        linear-gradient(
            145deg,
            #211627 0%,
            #351A42 55%,
            #4A205F 100%
        );

    box-shadow:
        0 18px 44px
        rgba(
            33,
            22,
            39,
            0.14
        );

    color:
        #FFFFFF;
}



/* ============================================================
   CARD DECORATION
============================================================ */

.reg8a-card::before {
    content:
        "";

    position:
        absolute;

    width:
        170px;

    height:
        170px;

    right:
        -80px;

    top:
        -80px;

    border-radius:
        50%;

    pointer-events:
        none;
}


.reg8a-card-participant::before {
    border:
        1px solid
        rgba(
            102,
            46,
            147,
            0.12
        );
}


.reg8a-card-exhibitor::before {
    border:
        1px solid
        rgba(
            247,
            148,
            29,
            0.18
        );
}



/* ============================================================
   CARD HEADER
============================================================ */

.reg8a-card-header {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;
}


.reg8a-card-number {
    font-family:
        var(--font-display, "Poppins", sans-serif);

    font-size:
        0.76rem;

    font-weight:
        600;

    color:
        #F7941D;
}


.reg8a-card-type {
    font-family:
        var(--font-display, "Poppins", sans-serif);

    font-size:
        0.68rem;

    font-weight:
        600;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.reg8a-card-participant
.reg8a-card-type {
    color:
        #662E93;
}


.reg8a-card-exhibitor
.reg8a-card-type {
    color:
        #CFAFE8;
}



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

.reg8a-card-content {
    position:
        relative;

    z-index:
        2;

    padding:
        1.6rem
        0;
}


.reg8a-card-content h2 {
    max-width:
        430px;

    margin:
        0
        0
        0.8rem;

    font-family:
        var(--font-display, "Poppins", sans-serif);

    font-size:
        clamp(
            2rem,
            3vw,
            3.15rem
        );

    font-weight:
        700;

    line-height:
        0.98;

    letter-spacing:
        -0.05em;
}


.reg8a-card-participant
.reg8a-card-content h2 {
    color:
        #211627;
}


.reg8a-card-exhibitor
.reg8a-card-content h2 {
    color:
        #FFFFFF;
}


.reg8a-card-content p {
    max-width:
        410px;

    margin:
        0;

    font-family:
        var(--font-body, "Inter", sans-serif);

    font-size:
        0.88rem;

    line-height:
        1.55;
}


.reg8a-card-participant
.reg8a-card-content p {
    color:
        rgba(
            58,
            45,
            64,
            0.76
        );
}


.reg8a-card-exhibitor
.reg8a-card-content p {
    color:
        rgba(
            255,
            255,
            255,
            0.64
        );
}



/* ============================================================
   BUTTON
============================================================ */

.reg8a-button {
    position:
        relative;

    z-index:
        2;

    min-height:
        48px;

    width:
        100%;

    box-sizing:
        border-box;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;

    padding:
        0.75rem
        1.15rem;

    border-radius:
        999px;

    font-family:
        var(--font-display, "Poppins", sans-serif);

    font-size:
        0.82rem;

    font-weight:
        600;

    line-height:
        1.2;

    text-decoration:
        none;

    transition:
        transform
        180ms
        ease,
        background-color
        180ms
        ease;
}



/* ============================================================
   PARTICIPANT BUTTON
============================================================ */

.reg8a-button-participant {
    background:
        #662E93;

    color:
        #FFFFFF;
}


.reg8a-button-participant:hover {
    transform:
        translateY(-2px);

    background:
        #92278F;
}



/* ============================================================
   EXHIBITOR BUTTON
============================================================ */

.reg8a-button-exhibitor {
    background:
        #F7941D;

    color:
        #211627;
}


.reg8a-button-exhibitor:hover {
    transform:
        translateY(-2px);

    background:
        #FFFFFF;
}



/* ============================================================
   FOCUS
============================================================ */

.reg8a-button:focus-visible {
    outline:
        3px solid
        rgba(
            247,
            148,
            29,
            0.42
        );

    outline-offset:
        4px;
}



/* ============================================================
   TABLET
============================================================ */

@media (max-width: 950px) {

    .reg8a-choice {
        min-height:
            auto;

        padding:
            3rem
            0;
    }


    .reg8a-card {
        min-height:
            270px;
    }

}



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

@media (max-width: 700px) {

    .reg8a-container {
        width:
            min(
                100% - 2rem,
                1120px
            );
    }


    .reg8a-choice {
        padding:
            2.5rem
            0;
    }


    .reg8a-choice-heading {
        margin-bottom:
            2rem;
    }


    .reg8a-choice-heading h1 {
        font-size:
            clamp(
                2.6rem,
                11vw,
                3.8rem
            );
    }


    .reg8a-card-grid {
        grid-template-columns:
            1fr;

        gap:
            1rem;
    }


    .reg8a-card {
        min-height:
            230px;

        padding:
            1.5rem;
    }


    .reg8a-card-content {
        padding:
            1.25rem
            0;
    }


    .reg8a-card-content h2 {
        font-size:
            clamp(
                2rem,
                9vw,
                2.8rem
            );
    }

}



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

@media (max-width: 480px) {

    .reg8a-choice {
        padding:
            2rem
            0;
    }


    .reg8a-choice-kicker {
        margin-bottom:
            0.5rem;
    }


    .reg8a-choice-heading {
        margin-bottom:
            1.6rem;
    }


    .reg8a-card {
        min-height:
            220px;

        padding:
            1.3rem;
    }


    .reg8a-card-content {
        padding:
            1.1rem
            0;
    }


    .reg8a-card-content p {
        font-size:
            0.82rem;
    }


    .reg8a-button {
        min-height:
            46px;
    }

}



/* ============================================================
   REDUCED MOTION
============================================================ */

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

    .reg8a-button {
        transition:
            none;
    }

}

/* ============================================================
   FINAL 8A VERTICAL BALANCE
============================================================ */

.reg8a-choice {
    padding-bottom:
        clamp(
            3.5rem,
            6vw,
            5rem
        );
}