/* =========================================
   ASMC SHARED PAGE STYLES
========================================= */


/* =========================================
   1. INTERIOR HERO
========================================= */

.interior-hero {

    padding-top:
        clamp(
            5rem,
            9vw,
            8rem
        );

    padding-bottom:
        clamp(
            4rem,
            8vw,
            7rem
        );

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


.interior-hero-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(280px, 0.65fr);

    gap:
        clamp(
            var(--space-xl),
            6vw,
            var(--space-4xl)
        );

    align-items:
        end;
}


.interior-hero .eyebrow {

    margin-bottom:
        var(--space-md);
}


.interior-hero h1 {

    margin-bottom:
        0;
}


.interior-hero-summary {

    max-width:
        520px;
}


.interior-hero-summary p:last-child {

    margin-bottom:
        0;
}


/* =========================================
   2. PAGE SECTIONS
========================================= */

.page-section {

    padding-block:
        var(--section-space);
}


.page-section-soft {

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


.page-section-mist {

    background:
        var(--color-mist);
}


/* =========================================
   3. SECTION HEADER
========================================= */

.page-section-header {

    max-width:
        760px;

    margin-bottom:
        var(--space-xl);
}


.page-section-header .eyebrow {

    margin-bottom:
        var(--space-sm);
}


.page-section-header h2 {

    margin-bottom:
        var(--space-md);
}


/* =========================================
   4. PLACEHOLDER CONTENT BLOCK
========================================= */

.content-placeholder {

    padding:
        clamp(
            2rem,
            5vw,
            4rem
        );

    border:
        1px dashed
        rgba(
            102,
            46,
            147,
            0.35
        );

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

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


.content-placeholder h3 {

    margin-bottom:
        var(--space-sm);
}


.content-placeholder p:last-child {

    margin-bottom:
        0;
}


/* =========================================
   5. REGISTRATION GATEWAY
========================================= */

.registration-grid {

    display:
        grid;

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

    gap:
        var(--space-lg);
}


.registration-choice {

    position:
        relative;

    min-height:
        390px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    padding:
        clamp(
            2rem,
            4vw,
            3.5rem
        );

    border:
        1px solid
        var(--color-border);

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

    overflow:
        hidden;

    text-decoration:
        none;

    transition:
        transform
        var(--motion-base)
        var(--ease-standard),

        box-shadow
        var(--motion-base)
        var(--ease-standard);
}


.registration-choice:hover {

    transform:
        translateY(-7px);

    box-shadow:
        var(--shadow-md);
}


.registration-choice-participant {

    background:
        var(--gradient-brand);

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


.registration-choice-exhibitor {

    background:
        var(--color-orange-soft);

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


.registration-choice h2 {

    max-width:
        520px;

    margin-bottom:
        var(--space-md);
}


.registration-choice-participant h2,
.registration-choice-participant p {

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


.registration-choice-label {

    margin-bottom:
        var(--space-md);

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

    font-size:
        var(--fs-label);

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

    letter-spacing:
        var(--ls-wide);

    text-transform:
        uppercase;
}


.registration-choice-participant
.registration-choice-label {

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


.registration-choice-exhibitor
.registration-choice-label {

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


.registration-choice-arrow {

    width:
        56px;

    height:
        56px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    align-self:
        flex-end;

    border-radius:
        50%;

    font-size:
        1.5rem;

    transition:
        transform
        var(--motion-base)
        var(--ease-standard);
}


.registration-choice-participant
.registration-choice-arrow {

    background:
        var(--color-white);

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


.registration-choice-exhibitor
.registration-choice-arrow {

    background:
        var(--color-orange);

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


.registration-choice:hover
.registration-choice-arrow {

    transform:
        translateX(5px);
}


/* =========================================
   6. CONTACT GRID
========================================= */

.contact-grid {

    display:
        grid;

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

    gap:
        var(--space-lg);
}


.contact-card {

    padding:
        var(--space-xl);

    background:
        var(--color-white);

    border:
        1px solid
        var(--color-border);

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


.contact-card-label {

    margin-bottom:
        var(--space-sm);

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

    font-size:
        0.875rem;

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

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

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


.contact-card h3 {

    margin-bottom:
        var(--space-sm);
}


.contact-card p {

    margin-bottom:
        0;
}


.contact-card a {

    color:
        var(--color-violet);

    text-decoration:
        none;
}


.contact-card a:hover {

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


/* =========================================
   7. REGISTRATION FORM SHELL
========================================= */

.registration-shell {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(280px, 0.75fr);

    gap:
        clamp(
            var(--space-xl),
            6vw,
            var(--space-4xl)
        );

    align-items:
        start;
}


.registration-form-placeholder {

    padding:
        clamp(
            2rem,
            5vw,
            4rem
        );

    background:
        var(--color-white);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-xl);
}


.registration-form-placeholder h2 {

    margin-bottom:
        var(--space-md);
}


.registration-side-card {

    padding:
        var(--space-xl);

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

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


.registration-side-card h3 {

    margin-bottom:
        var(--space-md);
}


.registration-side-card p:last-child {

    margin-bottom:
        0;
}


/* =========================================
   8. TABLET
========================================= */

@media (max-width: 1024px) {

    .interior-hero-grid,
    .registration-shell {

        grid-template-columns:
            1fr;
    }


    .interior-hero-summary {

        max-width:
            760px;
    }
}


/* =========================================
   9. MOBILE
========================================= */

@media (max-width: 768px) {

    .interior-hero {

        padding-top:
            var(--space-3xl);

        padding-bottom:
            var(--space-2xl);
    }


    .registration-grid,
    .contact-grid {

        grid-template-columns:
            1fr;
    }


    .registration-choice {

        min-height:
            320px;

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


    .contact-card {

        padding:
            var(--space-lg);
    }


    .registration-form-placeholder,
    .registration-side-card {

        padding:
            var(--space-lg);

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