/*
 * BEI Upcoming Event Listing
 * Page: /trade-shows/upcoming
 * Version: 1.4.1
 *
 * PARITY BUILD:
 * Geometry / container / breakpoint / filter / listing behavior is aligned
 * with category-landing.css. Upcoming-only hero visuals are retained where
 * the DOM differs from Category Landing.
 */

/* ========================================================================== 
   Root / container — parity with Category Landing
========================================================================== */

.bei-platform.view-events #jbd-container.jbd-container.is-upcoming-landing {
    width: 100vw;
    max-width: none;
    margin-inline: calc(50% - 50vw);
    padding: 0;
    overflow: visible;
}

.is-upcoming-landing,
.is-upcoming-landing * {
    box-sizing: border-box;
}

.is-upcoming-landing .bei-container {
    width: min(var(--bei-container-max), calc(100% - 32px));
    max-width: var(--bei-container-max);
    margin-inline: auto;
}

/* ========================================================================== 
   Hero — Upcoming visual treatment, Category geometry discipline
========================================================================== */

.is-upcoming-landing .bei-upcoming-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 440px;
    margin: 0;
    padding: 25px 0 52px;
    overflow: hidden;
    border-block: 1px solid var(--bei-border, #e8ecf5);
    background: linear-gradient(
        135deg,
        #fff 0%,
        #fff 55%,
        var(--bei-surface, #fafafc) 76%,
        var(--bei-primary-light, #e7eaff) 100%
    );
}

.is-upcoming-landing .bei-upcoming-hero-media {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.is-upcoming-landing .bei-upcoming-hero-picture {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
}

.is-upcoming-landing .bei-upcoming-hero-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    user-select: none;
}

/* Soft white fade from content side to artwork. */
.is-upcoming-landing .bei-upcoming-hero-overlay {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse 92% 150% at -3% 48%,
            #fff 0%,
            rgb(255 255 255 / 99.5%) 46%,
            rgb(255 255 255 / 94%) 58%,
            rgb(255 255 255 / 72%) 68%,
            rgb(255 255 255 / 30%) 78%,
            rgb(255 255 255 / 0%) 89%
        ),
        linear-gradient(
            90deg,
            rgb(255 255 255 / 98%) 0%,
            rgb(255 255 255 / 92%) 34%,
            rgb(255 255 255 / 54%) 52%,
            rgb(255 255 255 / 8%) 70%,
            rgb(255 255 255 / 0%) 82%
        );
}

.is-upcoming-landing .bei-upcoming-hero > .bei-container {
    position: relative;
    z-index: 3;
}

.is-upcoming-landing .bei-upcoming-hero-inner {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    width: min(55%, 760px);
    min-width: 0;
    min-height: 354px;
}

.is-upcoming-landing .bei-upcoming-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: rgb(16 24 40 / 62%);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.is-upcoming-landing .bei-upcoming-breadcrumbs a {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
}

.is-upcoming-landing .bei-upcoming-breadcrumbs a:hover,
.is-upcoming-landing .bei-upcoming-breadcrumbs a:focus-visible {
    color: #4c38c2;
}

.is-upcoming-landing .bei-upcoming-breadcrumb-separator {
    color: rgb(16 24 40 / 38%);
}

.is-upcoming-landing .bei-upcoming-hero-header {
    max-width: 760px;
    margin: 60px 0 0;
}

.is-upcoming-landing .bei-upcoming-title {
    max-width: 760px;
    margin: 0 0 20px;
    color: var(--bei-heading, #101828);
    font-size: clamp(38px, 4.5vw, 42px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.035em;
}

.is-upcoming-landing .bei-upcoming-intro {
    max-width: 720px;
    margin: 0;
    color: var(--bei-text, #5d5f6a);
    font-size: 18px;
    line-height: 1.7;
}

/* ========================================================================== 
   Form / Discovery Controls — parity with Category Landing
========================================================================== */

/* ========================================================================== 
   Upcoming Events — parity with Category Landing
========================================================================== */

.is-upcoming-landing .bei-upcoming-events-section {
    width: 100%;
    padding: 48px 0 56px;
    background: #fff;
}

.is-upcoming-landing .bei-event-listing-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 24px;
}

.is-upcoming-landing .bei-event-listing-heading-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.is-upcoming-landing .bei-event-listing-title {
    margin: 0;
    color: var(--bei-heading, #101828);
    font-size: clamp(24px, 2vw, 32px);
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -0.035em;
}

.is-upcoming-landing .bei-event-result-count {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--bei-primary-light, #ece7ff);
    color: var(--bei-primary, #4c38c2);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.is-upcoming-landing .bei-upcoming-results-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.is-upcoming-landing .bei-upcoming-results-toolbar .jbd-select-box,
.is-upcoming-landing .bei-upcoming-results-toolbar .view-mode {
    margin: 0;
}

.is-upcoming-landing .bei-upcoming-results-toolbar .view-mode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--bei-primary-light, #ece7ff);
}

.is-upcoming-landing .bei-upcoming-results-toolbar .view-mode a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--bei-primary, #4c38c2);
}

.is-upcoming-landing .bei-upcoming-results-toolbar .view-mode a.active {
    border-radius: 10px;
    background: var(--bei-primary, #4c38c2);
    color: #fff;
}

.is-upcoming-landing .bei-upcoming-results-toolbar .view-mode a.active .la {
    color: #e7eaff;
}

.is-upcoming-landing .bei-upcoming-results-toolbar .view-mode .la {
    color: var(--bei-primary, #4c38c2);
    font-size: 24px;
}

.is-upcoming-landing .bei-upcoming-results-toolbar .view-mode:hover {
    background: #e7eaff;
}

.is-upcoming-landing #jbd-grid-view,
.is-upcoming-landing .bei-event-listing-grid,
.is-upcoming-landing .events-grid,
.is-upcoming-landing .bei-event-grid {
    width: 100%;
}

.is-upcoming-landing .pagination {
    margin-top: 28px;
}

/* ========================================================================== 
   Tablet — same breakpoint behavior as Category Landing
========================================================================== */

@media (max-width: 991px) {
    .is-upcoming-landing .bei-upcoming-hero {
        min-height: 400px;
        padding: 30px 0 44px;
    }

    .is-upcoming-landing .bei-upcoming-hero-header {
        margin: 40px 0 0;
    }

    .is-upcoming-landing .bei-upcoming-hero-inner {
        width: 55%;
    }

    .is-upcoming-landing .bei-upcoming-filter-section {
        top: 0;
    }
}

/* ========================================================================== 
   Mobile — CRITICAL parity reset from Category Landing
========================================================================== */

@media (max-width: 767.98px) {
    .bei-platform.view-events #jbd-container.jbd-container.is-upcoming-landing {
        width: 100%;
        margin-inline: 0;
    }

    .is-upcoming-landing .bei-upcoming-hero {
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 0 0 34px;
    }

    .is-upcoming-landing .bei-upcoming-hero-media {
        position: relative;
        inset: auto;
        order: -1;
        width: 100%;
        min-width: 0;
        aspect-ratio: 16 / 9;
    }

    .is-upcoming-landing .bei-upcoming-hero-picture {
        position: absolute;
        inset: 0;
    }

    .is-upcoming-landing .bei-upcoming-hero-overlay {
        background: linear-gradient(
            180deg,
            transparent 0%,
            rgb(255 255 255 / 10%) 45%,
            #fff 100%
        );
    }

    .is-upcoming-landing .bei-upcoming-hero > .bei-container {
        margin-top: 24px;
    }

    .is-upcoming-landing .bei-upcoming-hero-inner {
        width: 100%;
        min-height: 0;
    }

    .is-upcoming-landing .bei-upcoming-breadcrumbs {
        margin-bottom: 22px;
    }

    .is-upcoming-landing .bei-upcoming-hero-header {
        margin: 0;
    }
    
    .is-upcoming-landing .bei-upcoming-title {
        font-size: clamp(32px, 2.4vw, 42px);
    }

    .is-upcoming-landing .bei-upcoming-intro {
        font-size: 16px;
    }

    .is-upcoming-landing .bei-event-listing-title {
        font-size: clamp(26px, 7vw, 32px);
        display: inline;
        margin: 0;
    }
    
    .is-upcoming-landing .bei-event-listing-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .is-upcoming-landing .bei-upcoming-results-toolbar {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .is-upcoming-landing .bei-upcoming-events-section {
        padding: 36px 0 44px;
    }

    
    .is-upcoming-landing .bei-event-listing-heading-group {
        display: block;
    }

    .is-upcoming-landing .bei-event-result-count {
        display: inline-flex;
        vertical-align: middle;
        margin-left: 10px;
        transform: translateY(-2px);
    }
    
}