/* =========================================
   ASMC CONTACT PAGE
   PHASE 7C
   LOCATION + FINAL CTA
========================================= */


/* =========================================
   SECTION
========================================= */

.contact-details {
    position: relative;

    padding:
        clamp(
            5rem,
            7vw,
            7rem
        )
        0
        clamp(
            5rem,
            7vw,
            7rem
        );

    overflow: hidden;

    background:
        var(--color-white);
}



/* =========================================
   HEADING
========================================= */

.contact-details-heading {
    max-width:
        900px;

    margin:
        0
        auto
        clamp(
            4rem,
            6vw,
            5.5rem
        );

    text-align:
        center;
}


.contact-details-kicker {
    width:
        fit-content;

    margin:
        0
        auto
        1rem;

    font-family:
        var(--font-display);

    font-size:
        0.82rem;

    font-weight:
        var(--fw-semibold);

    line-height:
        1;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;

    color:
        var(--color-orange);
}


.contact-details-title {
    max-width:
        850px;

    margin:
        0
        auto
        1.4rem;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            3rem,
            5.4vw,
            5.7rem
        );

    font-weight:
        var(--fw-bold);

    line-height:
        0.96;

    letter-spacing:
        -0.055em;

    color:
        var(--color-deep-ink, #211627);
}


.contact-details-title span {
    display:
        block;

    color:
        var(--color-violet);
}


.contact-details-lead {
    max-width:
        660px;

    margin:
        0
        auto;

    font-family:
        var(--font-body);

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.16rem
        );

    line-height:
        1.7;

    color:
        var(--color-text-secondary);
}



/* =========================================
   PLACE LIST
========================================= */

.contact-place-list {
    width:
        100%;

    max-width:
        1080px;

    margin:
        0
        auto
        clamp(
            4rem,
            6vw,
            5.5rem
        );

    border-top:
        1px solid
        rgba(
            33,
            22,
            39,
            0.14
        );
}



/* =========================================
   PLACE ROW
========================================= */

.contact-place {
    display:
        grid;

    grid-template-columns:
        70px
        minmax(0, 1fr)
        minmax(250px, 0.55fr);

    gap:
        clamp(
            1.5rem,
            4vw,
            4rem
        );

    align-items:
        center;

    padding:
        clamp(
            2.25rem,
            4vw,
            3.5rem
        )
        0;

    border-bottom:
        1px solid
        rgba(
            33,
            22,
            39,
            0.14
        );
}



/* =========================================
   INDEX
========================================= */

.contact-place-index {
    align-self:
        start;

    padding-top:
        0.35rem;

    font-family:
        var(--font-display);

    font-size:
        0.82rem;

    font-weight:
        var(--fw-semibold);

    color:
        var(--color-orange);
}



/* =========================================
   PLACE MAIN
========================================= */

.contact-place-type {
    width:
        fit-content;

    margin:
        0
        0
        0.8rem;

    font-family:
        var(--font-display);

    font-size:
        0.76rem;

    font-weight:
        var(--fw-semibold);

    line-height:
        1;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;

    color:
        var(--color-violet);
}


.contact-place-main h3 {
    max-width:
        580px;

    margin:
        0
        0
        1rem;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            2rem,
            3.4vw,
            3.6rem
        );

    font-weight:
        var(--fw-semibold);

    line-height:
        1;

    letter-spacing:
        -0.045em;

    color:
        var(--color-deep-ink, #211627);
}


.contact-place-main address {
    margin:
        0;

    font-family:
        var(--font-body);

    font-size:
        clamp(
            1rem,
            1.2vw,
            1.1rem
        );

    font-style:
        normal;

    line-height:
        1.65;

    color:
        var(--color-text-secondary);
}



/* =========================================
   PLACE SIDE
========================================= */

.contact-place-side {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        0.55rem;

    padding-left:
        clamp(
            1.5rem,
            3vw,
            2.5rem
        );

    border-left:
        1px solid
        rgba(
            102,
            46,
            147,
            0.16
        );
}


.contact-place-label {
    margin-bottom:
        0.3rem;

    font-family:
        var(--font-display);

    font-size:
        0.72rem;

    font-weight:
        var(--fw-semibold);

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    color:
        var(--color-orange);
}


.contact-place-side a,
.contact-place-side strong {
    font-family:
        var(--font-display);

    font-size:
        clamp(
            1.05rem,
            1.35vw,
            1.25rem
        );

    font-weight:
        var(--fw-semibold);

    line-height:
        1.35;

    text-decoration:
        none;

    color:
        var(--color-deep-ink, #211627);
}


.contact-place-side a {
    transition:
        color
        180ms
        ease;
}


.contact-place-side a:hover {
    color:
        var(--color-violet);
}


.contact-place-note {
    max-width:
        280px;

    font-family:
        var(--font-body);

    font-size:
        0.88rem;

    line-height:
        1.5;

    color:
        var(--color-text-secondary);
}



/* =========================================
   FINAL CTA
========================================= */

.contact-final-cta {
    position:
        relative;

    width:
        100%;

    max-width:
        1080px;

    margin:
        0
        auto;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(280px, 0.7fr);

    gap:
        clamp(
            2.5rem,
            6vw,
            6rem
        );

    align-items:
        center;

    padding:
        clamp(
            3rem,
            5vw,
            5rem
        );

    overflow:
        hidden;

    border-radius:
        clamp(
            26px,
            3vw,
            40px
        );

    background:
        linear-gradient(
            135deg,
            #211627 0%,
            #331A40 48%,
            #4A205F 100%
        );

    color:
        var(--color-white);
}



/* =========================================
   CTA GEOMETRY
========================================= */

.contact-final-cta::before {
    content:
        "";

    position:
        absolute;

    width:
        260px;

    height:
        260px;

    right:
        -110px;

    top:
        -130px;

    border:
        1px solid
        rgba(
            247,
            148,
            29,
            0.16
        );

    border-radius:
        50%;

    pointer-events:
        none;
}


.contact-final-cta::after {
    content:
        "";

    position:
        absolute;

    width:
        140px;

    height:
        140px;

    right:
        8%;

    bottom:
        -90px;

    border:
        1px solid
        rgba(
            207,
            175,
            232,
            0.14
        );

    transform:
        rotate(45deg);

    pointer-events:
        none;
}



/* =========================================
   FINAL COPY
========================================= */

.contact-final-copy {
    position:
        relative;

    z-index:
        2;
}


.contact-final-kicker {
    margin:
        0
        0
        1rem;

    font-family:
        var(--font-display);

    font-size:
        0.78rem;

    font-weight:
        var(--fw-semibold);

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

    color:
        var(--color-orange);
}


.contact-final-copy h2 {
    max-width:
        650px;

    margin:
        0
        0
        1.35rem;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            3rem,
            5vw,
            5.3rem
        );

    font-weight:
        var(--fw-bold);

    line-height:
        0.95;

    letter-spacing:
        -0.055em;

    color:
        var(--color-white);
}


.contact-final-copy h2 span {
    display:
        block;

    color:
        #CFAFE8;
}


.contact-final-copy > p:last-child {
    max-width:
        560px;

    margin:
        0;

    font-family:
        var(--font-body);

    font-size:
        clamp(
            1rem,
            1.25vw,
            1.12rem
        );

    line-height:
        1.7;

    color:
        rgba(
            255,
            255,
            255,
            0.66
        );
}



/* =========================================
   FINAL ACTIONS
========================================= */

.contact-final-actions {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.85rem;
}



/* =========================================
   PARTICIPANT BUTTON
========================================= */

.contact-final-primary,
.contact-final-secondary {
    min-height:
        54px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;

    padding:
        0.85rem
        1.25rem;

    border-radius:
        var(--radius-pill);

    font-family:
        var(--font-display);

    font-size:
        0.9rem;

    font-weight:
        var(--fw-semibold);

    text-decoration:
        none;

    transition:
        transform
        180ms
        ease,
        background-color
        180ms
        ease;
}


.contact-final-primary {
    background:
        var(--color-orange);

    color:
        var(--color-deep-ink, #211627);
}


.contact-final-primary:hover {
    transform:
        translateY(-2px);
}



/* =========================================
   EXHIBITOR BUTTON
========================================= */

.contact-final-secondary {
    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.24
        );

    background:
        rgba(
            255,
            255,
            255,
            0.04
        );

    color:
        var(--color-white);
}


.contact-final-secondary:hover {
    transform:
        translateY(-2px);

    background:
        rgba(
            255,
            255,
            255,
            0.09
        );
}



/* =========================================
   FOCUS
========================================= */

.contact-place-side a:focus-visible,
.contact-final-primary:focus-visible,
.contact-final-secondary:focus-visible {
    outline:
        3px solid
        rgba(
            247,
            148,
            29,
            0.38
        );

    outline-offset:
        4px;
}



/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .contact-place {
        grid-template-columns:
            50px
            minmax(0, 1fr);

        gap:
            1rem
            2rem;
    }


    .contact-place-side {
        grid-column:
            2;

        padding-left:
            0;

        padding-top:
            1.5rem;

        border-left:
            0;

        border-top:
            1px solid
            rgba(
                102,
                46,
                147,
                0.14
            );
    }


    .contact-final-cta {
        grid-template-columns:
            1fr;

        align-items:
            start;
    }


    .contact-final-actions {
        max-width:
            440px;
    }

}



/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    .contact-details {
        padding:
            4rem
            0;
    }


    .contact-details-heading {
        margin-bottom:
            3.25rem;
    }


    .contact-details-title {
        font-size:
            clamp(
                2.8rem,
                12vw,
                4.3rem
            );
    }


    .contact-place {
        grid-template-columns:
            1fr;

        gap:
            1rem;

        padding:
            2rem
            0;
    }


    .contact-place-index {
        padding-top:
            0;
    }


    .contact-place-side {
        grid-column:
            auto;

        padding-top:
            1.25rem;
    }


    .contact-final-cta {
        padding:
            2.5rem
            1.75rem;

        border-radius:
            28px;
    }


    .contact-final-actions {
        width:
            100%;

        max-width:
            none;
    }

}



/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .contact-details {
        padding:
            3.5rem
            0;
    }


    .contact-details-title {
        font-size:
            clamp(
                2.6rem,
                12vw,
                3.7rem
            );
    }


    .contact-place-main h3 {
        font-size:
            2rem;
    }


    .contact-final-cta {
        padding:
            2.25rem
            1.35rem;
    }


    .contact-final-copy h2 {
        font-size:
            clamp(
                2.6rem,
                12vw,
                3.7rem
            );
    }

}



/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .contact-place-side a,
    .contact-final-primary,
    .contact-final-secondary {
        transition:
            none;
    }

}