/* =========================================
   ASMC ABOUT PAGE
   PHASE 6C
   PARTICIPATION + REGISTRATION
========================================= */


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

.about-participation {
    position: relative;

    padding:
        clamp(
            5rem,
            7vw,
            7rem
        )
        0
        clamp(
            5.5rem,
            8vw,
            8rem
        );

    overflow: hidden;

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



/* =========================================
   SECTION INTRO
========================================= */

.about-participation-heading {
    max-width: 930px;

    margin:
        0
        auto
        clamp(
            3.75rem,
            5.5vw,
            5rem
        );

    text-align: center;
}


.about-participation-kicker {
    width: fit-content;

    margin:
        0
        auto
        1.1rem;

    font-family:
        var(--font-display);

    font-size: 0.85rem;

    font-weight:
        var(--fw-semibold);

    line-height: 1;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;

    color:
        var(--color-orange);
}


.about-participation-title {
    max-width: 900px;

    margin:
        0
        auto
        1.5rem;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            3rem,
            5.5vw,
            5.8rem
        );

    font-weight:
        var(--fw-bold);

    line-height: 0.96;

    letter-spacing:
        -0.055em;

    color:
        var(--color-ink);
}


.about-participation-title span {
    display: block;

    color:
        var(--color-violet);
}


.about-participation-lead {
    max-width: 720px;

    margin:
        0
        auto;

    font-family:
        var(--font-body);

    font-size:
        clamp(
            1.05rem,
            1.4vw,
            1.25rem
        );

    line-height: 1.7;

    color:
        var(--color-text-secondary);
}



/* =========================================
   PARTICIPATION GRID
========================================= */

.about-participation-grid {
    max-width: 1080px;

    margin:
        0
        auto;

    display: grid;

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

    gap:
        clamp(
            1.5rem,
            3vw,
            2.5rem
        );
}



/* =========================================
   PARTICIPATION PATH
========================================= */

.participation-path {
    position: relative;

    min-height: 520px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

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

    background:
        var(--color-white);

    box-shadow:
        0 20px 46px
        rgba(33, 22, 39, 0.08);
}



/* =========================================
   PATH TOP STRIP
========================================= */

.participation-path-top {
    min-height: 82px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 1rem;

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

    background:
        var(--color-deep-ink, #211627);

    color:
        var(--color-white);
}


.participation-path-exhibitor
.participation-path-top {
    background:
        var(--color-violet);
}



/* =========================================
   PATH NUMBER
========================================= */

.participation-path-number {
    font-family:
        var(--font-display);

    font-size: 0.9rem;

    font-weight:
        var(--fw-semibold);

    color:
        var(--color-orange);
}



/* =========================================
   PATH TYPE
========================================= */

.participation-path-type {
    font-family:
        var(--font-display);

    font-size:
        0.82rem;

    font-weight:
        var(--fw-semibold);

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    color:
        rgba(
            255,
            255,
            255,
            0.75
        );
}



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

.participation-path-content {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding:
        clamp(
            2rem,
            3.2vw,
            3rem
        );
}


.participation-path-content h3 {
    max-width: 430px;

    margin:
        0
        0
        1.25rem;

    font-family:
        var(--font-display);

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

    font-weight:
        var(--fw-semibold);

    line-height: 1.02;

    letter-spacing:
        -0.045em;

    color:
        var(--color-ink);
}


.participation-path-content > p {
    max-width: 440px;

    margin:
        0
        0
        2rem;

    font-family:
        var(--font-body);

    font-size:
        clamp(
            1rem,
            1.15vw,
            1.08rem
        );

    line-height: 1.7;

    color:
        var(--color-text-secondary);
}



/* =========================================
   PACKAGE META
========================================= */

.participation-path-meta {
    display: grid;

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

    gap:
        0.75rem;

    margin-bottom:
        2.25rem;
}


.participation-path-meta-single {
    grid-template-columns:
        1fr;
}


.participation-path-meta div {
    padding:
        1rem
        1.1rem;

    border:
        1px solid
        rgba(102, 46, 147, 0.12);

    border-radius: 14px;

    background:
        var(--color-violet-soft);
}


.participation-path-meta span {
    display: block;

    margin-bottom:
        0.35rem;

    font-family:
        var(--font-body);

    font-size: 0.78rem;

    color:
        var(--color-text-secondary);
}


.participation-path-meta strong {
    display: block;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            1.15rem,
            1.45vw,
            1.4rem
        );

    font-weight:
        var(--fw-semibold);

    color:
        var(--color-violet);
}



/* =========================================
   PATH LINK
========================================= */

.participation-path-link {
    width: fit-content;

    margin-top: auto;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap:
        0.75rem;

    min-height: 48px;

    padding:
        0.8rem
        1.2rem;

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

    background:
        var(--color-deep-ink, #211627);

    font-family:
        var(--font-display);

    font-size:
        0.92rem;

    font-weight:
        var(--fw-semibold);

    text-decoration: none;

    color:
        var(--color-white);

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


.participation-path-exhibitor
.participation-path-link {
    background:
        var(--color-violet);
}


.participation-path-link:hover {
    transform:
        translateY(-2px);
}



/* =========================================
   EVENT STRIP
========================================= */

.about-event-strip {
    max-width: 1080px;

    margin:
        clamp(
            3.5rem,
            5vw,
            4.75rem
        )
        auto;

    display: grid;

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

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

    align-items: center;

    padding:
        1.5rem
        0;

    border-top:
        1px solid
        rgba(102, 46, 147, 0.20);

    border-bottom:
        1px solid
        rgba(102, 46, 147, 0.20);
}



/* =========================================
   EVENT ITEM
========================================= */

.about-event-strip-item {
    text-align: center;
}


.about-event-strip-item span {
    display: block;

    margin-bottom:
        0.4rem;

    font-family:
        var(--font-display);

    font-size:
        0.72rem;

    font-weight:
        var(--fw-semibold);

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;

    color:
        var(--color-orange);
}


.about-event-strip-item strong {
    font-family:
        var(--font-display);

    font-size:
        clamp(
            1rem,
            1.4vw,
            1.25rem
        );

    font-weight:
        var(--fw-semibold);

    line-height: 1.3;

    color:
        var(--color-ink);
}



/* =========================================
   STRIP PLUS
========================================= */

.about-event-strip-plus {
    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(102, 46, 147, 0.08);

    font-family:
        var(--font-display);

    font-size: 1rem;

    color:
        var(--color-violet);
}



/* =========================================
   FINAL CTA
========================================= */

.about-registration-cta {
    position: relative;

    max-width: 1080px;

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(260px, 0.6fr);

    gap:
        clamp(
            2rem,
            5vw,
            5rem
        );

    align-items: end;

    padding:
        clamp(
            3rem,
            5vw,
            5rem
        );

    overflow: hidden;

    border-radius:
        clamp(
            28px,
            3vw,
            42px
        );

    background:
        linear-gradient(
            135deg,
            #211627 0%,
            #662E93 55%,
            #92278F 100%
        );

    color:
        var(--color-white);
}



/* =========================================
   CTA DECORATION
========================================= */

.about-registration-cta::after {
    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    right: -110px;
    top: -120px;

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius: 50%;
}



/* =========================================
   CTA COPY
========================================= */

.about-registration-copy {
    position: relative;

    z-index: 2;
}


.about-registration-eyebrow {
    margin:
        0
        0
        1rem;

    font-family:
        var(--font-display);

    font-size:
        0.8rem;

    font-weight:
        var(--fw-semibold);

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

    color:
        var(--color-orange);
}


.about-registration-copy h2 {
    max-width: 720px;

    margin:
        0
        0
        1.5rem;

    font-family:
        var(--font-display);

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

    font-weight:
        var(--fw-bold);

    line-height: 0.98;

    letter-spacing:
        -0.05em;

    color:
        var(--color-white);
}


.about-registration-copy h2 span {
    display: block;

    color:
        #E7C9F5;
}


.about-registration-copy > p:last-child {
    max-width: 620px;

    margin: 0;

    font-family:
        var(--font-body);

    font-size:
        clamp(
            1rem,
            1.2vw,
            1.12rem
        );

    line-height: 1.7;

    color:
        rgba(
            255,
            255,
            255,
            0.70
        );
}



/* =========================================
   CTA ACTIONS
========================================= */

.about-registration-actions {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap:
        0.85rem;
}



/* =========================================
   PRIMARY CTA
========================================= */

.about-registration-primary {
    min-height: 54px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap:
        1rem;

    padding:
        0.85rem
        1.25rem;

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

    background:
        var(--color-orange);

    font-family:
        var(--font-display);

    font-size:
        0.95rem;

    font-weight:
        var(--fw-semibold);

    text-decoration: none;

    color:
        var(--color-deep-ink, #211627);

    transition:
        transform
        200ms
        ease;
}


.about-registration-primary:hover {
    transform:
        translateY(-2px);
}



/* =========================================
   SECONDARY CTA
========================================= */

.about-registration-secondary {
    min-height: 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
        0.8rem
        1.2rem;

    border:
        1px solid
        rgba(255, 255, 255, 0.28);

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

    font-family:
        var(--font-display);

    font-size:
        0.92rem;

    font-weight:
        var(--fw-semibold);

    text-decoration: none;

    color:
        var(--color-white);

    transition:
        background-color
        200ms
        ease;
}


.about-registration-secondary:hover {
    background:
        rgba(255, 255, 255, 0.08);
}



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

.participation-path-link:focus-visible,
.about-registration-primary:focus-visible,
.about-registration-secondary:focus-visible {
    outline:
        3px solid
        rgba(247, 148, 29, 0.38);

    outline-offset: 4px;
}



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

@media (max-width: 900px) {

    .about-participation-grid {
        grid-template-columns:
            1fr;
    }


    .participation-path {
        min-height: 460px;
    }


    .about-registration-cta {
        grid-template-columns:
            1fr;

        align-items:
            start;
    }


    .about-registration-actions {
        max-width:
            420px;
    }

}



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

@media (max-width: 700px) {

    .about-participation {
        padding:
            4rem
            0
            4.5rem;
    }


    .about-participation-heading {
        margin-bottom:
            3rem;
    }


    .about-participation-title {
        font-size:
            clamp(
                2.8rem,
                12vw,
                4.4rem
            );
    }


    .participation-path {
        min-height: auto;
    }


    .participation-path-meta {
        grid-template-columns:
            1fr;
    }


    .about-event-strip {
        grid-template-columns:
            1fr;

        gap:
            1.2rem;

        padding:
            1.75rem
            0;
    }


    .about-event-strip-plus {
        justify-self:
            center;
    }


    .about-registration-cta {
        padding:
            2.5rem
            1.75rem;

        border-radius:
            28px;
    }


    .about-registration-actions {
        width: 100%;
        max-width: none;
    }

}



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

@media (max-width: 480px) {

    .about-participation-title {
        font-size:
            clamp(
                2.6rem,
                12.5vw,
                3.8rem
            );
    }


    .participation-path-top {
        min-height: 72px;

        padding:
            1rem
            1.25rem;
    }


    .participation-path-content {
        padding:
            1.75rem
            1.35rem;
    }


    .participation-path-content h3 {
        font-size:
            2rem;
    }


    .about-registration-cta {
        padding:
            2.25rem
            1.4rem;
    }


    .about-registration-copy h2 {
        font-size:
            clamp(
                2.5rem,
                11vw,
                3.5rem
            );
    }

}



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

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

    .participation-path-link,
    .about-registration-primary,
    .about-registration-secondary {
        transition: none;
    }

}