/* =====================================================
   NXA.CO EVENTS PAGE
   APPEND TO BOTTOM OF style.css
===================================================== */

.events-page,
.event-detail-page {
    background: #FFFDF8;
    color: var(--text);
}


/* =====================================================
   EVENTS HERO
===================================================== */

.events-hero {
    min-height: 82vh;

    padding:
        150px 5vw
        75px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background-color:
        #FFFDF8;

    background-image:
        url("assets/bg.texture.jpg");

    background-repeat:
        repeat;

    background-size:
        900px auto;
}


.events-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom:
        17px;

    border-bottom:
        1px solid
        rgba(93,11,11,.16);
}


.events-hero-top p,
.events-hero-top span {
    font-family:
        "Red Hat Display",
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;
}


.events-hero-top p {
    color:
        var(--maroon);
}


.events-hero-top span {
    color:
        rgba(93,11,11,.45);
}


.events-hero-main {
    display:
        grid;

    grid-template-columns:
        1.35fr .65fr;

    gap:
        90px;

    align-items:
        end;
}


.events-hero h1 {
    max-width:
        920px;

    font-family:
        "Red Hat Display",
        sans-serif;

    font-size:
        clamp(
            70px,
            8.5vw,
            138px
        );

    font-weight:
        600;

    line-height:
        .84;

    letter-spacing:
        -.055em;
}


.events-hero h1 em {
    display:
        block;

    font-family:
        "Lora",
        serif;

    font-weight:
        400;

    color:
        var(--maroon);
}


.events-hero-copy {
    max-width:
        390px;
}


.events-hero-copy p {
    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.8;
}


.events-hero-copy a {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        17px;

    margin-top:
        28px;

    padding-bottom:
        7px;

    border-bottom:
        1px solid
        rgba(93,11,11,.45);

    color:
        var(--maroon);

    font-size:
        9px;

    letter-spacing:
        .14em;
}


/* =====================================================
   COMMON
===================================================== */

.events-kicker {
    color:
        var(--maroon);

    font-family:
        "Red Hat Display",
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        .17em;

    text-transform:
        uppercase;
}


.events-kicker.light {
    color:
        rgba(255,255,255,.55);
}


.events-section-head {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        60px;

    padding-bottom:
        18px;

    border-bottom:
        1px solid
        rgba(93,11,11,.16);
}


.events-section-head h2 {
    margin-top:
        16px;

    font-size:
        clamp(
            45px,
            5vw,
            78px
        );

    line-height:
        .92;

    letter-spacing:
        -.04em;
}


.events-section-head h2 em {
    color:
        var(--maroon);

    font-weight:
        400;
}


.events-section-head > span {
    color:
        rgba(93,11,11,.42);

    font-size:
        9px;

    letter-spacing:
        .15em;
}


/* =====================================================
   UPCOMING DATABASE LIST
===================================================== */

.events-database-list {
    padding:
        105px 5vw
        125px;

    background-color:
        #FFFDF8;

    background-image:
        url("assets/bg.texture.jpg");

    background-repeat:
        repeat;

    background-size:
        900px auto;
}


.events-editorial-list {
    border-top:
        1px solid
        rgba(93,11,11,.16);
}


.events-editorial-card {
    min-height:
        470px;

    display:
        grid;

    grid-template-columns:
        70px
        .88fr
        1.12fr;

    border-bottom:
        1px solid
        rgba(93,11,11,.16);

    overflow:
        hidden;
}


.events-card-number {
    padding-top:
        28px;

    color:
        rgba(93,11,11,.44);

    font-size:
        8px;

    letter-spacing:
        .13em;
}


.events-card-image {
    position:
        relative;

    min-height:
        470px;

    overflow:
        hidden;
}


.events-card-image img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform
        .8s
        cubic-bezier(.2,.8,.2,1);
}


.events-card-image-overlay {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to top,
            rgba(40,0,0,.20),
            transparent 58%
        );
}


.events-editorial-card:hover
.events-card-image img {
    transform:
        scale(1.04);
}


.events-card-content {
    position:
        relative;

    padding:
        50px 5vw;

    display:
        grid;

    grid-template-columns:
        100px 1fr;

    gap:
        45px;

    align-content:
        center;
}


.events-card-date strong {
    display:
        block;

    font-family:
        "Red Hat Display",
        sans-serif;

    font-size:
        48px;

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        -.05em;

    color:
        var(--maroon);
}


.events-card-date span {
    display:
        block;

    margin-top:
        6px;

    color:
        var(--muted);

    font-size:
        9px;

    letter-spacing:
        .14em;
}


.events-card-label {
    margin-bottom:
        15px;

    color:
        rgba(93,11,11,.48);

    font-size:
        8px;

    letter-spacing:
        .15em;
}


.events-card-text h3 {
    max-width:
        540px;

    font-family:
        "Red Hat Display",
        sans-serif;

    font-size:
        clamp(
            30px,
            3.2vw,
            50px
        );

    font-weight:
        600;

    line-height:
        .96;

    letter-spacing:
        -.035em;
}


.events-card-location {
    margin-top:
        18px;

    color:
        var(--maroon);

    font-size:
        11px;

    line-height:
        1.55;
}


.events-card-description {
    max-width:
        470px;

    margin-top:
        18px;

    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.7;

    display:
        -webkit-box;

    -webkit-line-clamp:
        3;

    -webkit-box-orient:
        vertical;

    overflow:
        hidden;
}


.events-card-arrow {
    position:
        absolute;

    right:
        5vw;

    bottom:
        45px;

    color:
        var(--maroon);

    font-size:
        20px;

    transition:
        transform .3s ease;
}


.events-editorial-card:hover
.events-card-arrow {
    transform:
        translate(
            5px,
            -5px
        );
}


/* =====================================================
   EMPTY STATE
===================================================== */

.events-empty {
    padding:
        85px 0
        20px;

    max-width:
        700px;
}


.events-empty h3 {
    margin-top:
        18px;

    font-size:
        clamp(
            38px,
            4.4vw,
            67px
        );

    line-height:
        .95;
}


.events-empty h3 em {
    color:
        var(--maroon);
}


.events-empty > p:not(.events-kicker) {
    max-width:
        430px;

    margin-top:
        25px;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.75;
}


.events-empty a {
    display:
        inline-block;

    margin-top:
        28px;

    padding-bottom:
        5px;

    border-bottom:
        1px solid
        var(--maroon);

    color:
        var(--maroon);

    font-size:
        9px;

    letter-spacing:
        .14em;
}


/* =====================================================
   EXPERIENCE
===================================================== */

.events-experience {
    padding:
        110px 5vw
        130px;

    background:
        var(--maroon);

    color:
        #FFFFFF;
}


.events-experience-head {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding-bottom:
        18px;

    border-bottom:
        1px solid
        rgba(255,255,255,.18);
}


.events-experience-head
.events-kicker {
    color:
        rgba(255,255,255,.62);
}


.events-experience-head > span {
    color:
        rgba(255,255,255,.38);

    font-size:
        8px;

    letter-spacing:
        .15em;
}


.events-experience-layout {
    margin-top:
        68px;

    display:
        grid;

    grid-template-columns:
        .8fr
        1.2fr;

    gap:
        100px;
}


.events-experience-layout > h2 {
    max-width:
        560px;

    font-size:
        clamp(
            48px,
            5vw,
            80px
        );

    line-height:
        .94;

    letter-spacing:
        -.04em;
}


.events-experience-layout > h2 em {
    color:
        rgba(255,255,255,.48);

    font-weight:
        400;
}


.events-experience-list {
    border-top:
        1px solid
        rgba(255,255,255,.18);
}


.events-experience-list article {
    display:
        grid;

    grid-template-columns:
        50px
        1fr
        1fr;

    gap:
        25px;

    padding:
        28px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.18);
}


.events-experience-list span {
    color:
        rgba(255,255,255,.36);

    font-size:
        8px;
}


.events-experience-list h3 {
    font-family:
        "Red Hat Display",
        sans-serif;

    font-size:
        20px;

    font-weight:
        500;

    color:
        #FFFFFF;
}


.events-experience-list p {
    color:
        rgba(255,255,255,.62);

    font-size:
        11px;

    line-height:
        1.65;
}


/* =====================================================
   PAST EVENTS
===================================================== */

.events-past {
    padding:
        105px 5vw
        125px;

    background-color:
        #FFFDF8;

    background-image:
        url("assets/bg.texture.jpg");

    background-repeat:
        repeat;

    background-size:
        900px auto;
}


.events-past-grid {
    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        18px;
}


.events-past-card {
    overflow:
        hidden;

    border-bottom:
        1px solid
        rgba(93,11,11,.16);
}


.events-past-image {
    height:
        430px;

    overflow:
        hidden;
}


.events-past-image img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    filter:
        saturate(.8);

    transition:
        transform .7s ease,
        filter .4s ease;
}


.events-past-card:hover
.events-past-image img {
    transform:
        scale(1.045);

    filter:
        saturate(1);
}


.events-past-bottom {
    min-height:
        115px;

    padding:
        22px 2px;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        25px;
}


.events-past-bottom h3 {
    font-family:
        "Red Hat Display",
        sans-serif;

    font-size:
        18px;

    font-weight:
        500;
}


.events-past-bottom p {
    margin-top:
        8px;

    color:
        var(--muted);

    font-size:
        10px;
}


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

.events-final-cta {
    position:
        relative;

    min-height:
        85vh;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    color:
        #FFFFFF;
}


.events-final-image {
    position:
        absolute;

    inset:
        0;
}


.events-final-image img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.events-final-overlay {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(46,0,0,.90),
            rgba(46,0,0,.60) 55%,
            rgba(46,0,0,.20)
        );
}


.events-final-content {
    position:
        relative;

    z-index:
        2;

    width:
        min(
            760px,
            90%
        );

    margin-left:
        5vw;
}


.events-final-content h2 {
    margin-top:
        22px;

    font-size:
        clamp(
            48px,
            6vw,
            92px
        );

    line-height:
        .92;

    letter-spacing:
        -.045em;
}


.events-final-content h2 em {
    display:
        block;

    color:
        rgba(255,255,255,.56);

    font-weight:
        400;
}


.events-final-content > p:not(.events-kicker) {
    max-width:
        420px;

    margin-top:
        28px;

    color:
        rgba(255,255,255,.68);

    font-size:
        12px;

    line-height:
        1.75;
}


.events-final-content a {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        16px;

    margin-top:
        30px;

    padding-bottom:
        7px;

    border-bottom:
        1px solid
        rgba(255,255,255,.58);

    font-size:
        9px;

    letter-spacing:
        .14em;
}


/* =====================================================
   EVENT DETAIL PAGE
===================================================== */

.event-detail-hero {
    position:
        relative;

    min-height:
        92vh;

    display:
        flex;

    align-items:
        flex-end;

    overflow:
        hidden;

    color:
        #FFFFFF;
}


.event-detail-media {
    position:
        absolute;

    inset:
        0;
}


.event-detail-media img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.event-detail-overlay {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to top,
            rgba(35,0,0,.88),
            rgba(35,0,0,.14) 68%
        );
}


.event-detail-content {
    position:
        relative;

    z-index:
        2;

    width:
        100%;

    padding:
        150px 5vw
        70px;
}


.event-detail-content h1 {
    max-width:
        1100px;

    margin-top:
        25px;

    font-family:
        "Red Hat Display",
        sans-serif;

    font-size:
        clamp(
            58px,
            8vw,
            130px
        );

    font-weight:
        600;

    line-height:
        .86;

    letter-spacing:
        -.055em;
}


.event-detail-meta {
    max-width:
        720px;

    margin-top:
        55px;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        35px;
}


.event-detail-meta > div {
    padding-top:
        15px;

    border-top:
        1px solid
        rgba(255,255,255,.24);
}


.event-detail-meta span {
    color:
        rgba(255,255,255,.48);

    font-size:
        8px;

    letter-spacing:
        .15em;
}


.event-detail-meta p {
    margin-top:
        8px;

    color:
        rgba(255,255,255,.84);

    font-size:
        12px;

    line-height:
        1.55;
}


.event-detail-body {
    padding:
        115px 5vw
        130px;

    display:
        grid;

    grid-template-columns:
        .35fr
        1.65fr;

    gap:
        80px;

    background-color:
        #FFFDF8;

    background-image:
        url("assets/bg.texture.jpg");

    background-repeat:
        repeat;

    background-size:
        900px auto;
}


.event-detail-index {
    color:
        rgba(93,11,11,.38);

    font-size:
        9px;

    letter-spacing:
        .14em;
}


.event-detail-copy {
    max-width:
        780px;
}


.event-detail-copy h2 {
    margin-top:
        20px;

    font-size:
        clamp(
            46px,
            5vw,
            78px
        );

    line-height:
        .94;

    letter-spacing:
        -.04em;
}


.event-detail-copy h2 em {
    color:
        var(--maroon);
}


.event-detail-copy > p:not(.events-kicker) {
    max-width:
        610px;

    margin-top:
        30px;

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.85;
}


.event-detail-copy > a {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        15px;

    margin-top:
        32px;

    padding-bottom:
        7px;

    border-bottom:
        1px solid
        rgba(93,11,11,.48);

    color:
        var(--maroon);

    font-size:
        9px;

    letter-spacing:
        .14em;
}


.event-detail-back {
    padding:
        28px 5vw;

    border-top:
        1px solid
        rgba(93,11,11,.16);

    background:
        var(--maroon);

    color:
        #FFFFFF;
}


.event-detail-back a {
    font-size:
        9px;

    letter-spacing:
        .14em;
}


.event-not-found {
    min-height:
        80vh;

    padding:
        160px 5vw
        90px;

    background-color:
        #FFFDF8;

    background-image:
        url("assets/bg.texture.jpg");

    background-size:
        900px auto;
}


.event-not-found > p {
    color:
        var(--maroon);

    font-size:
        9px;

    letter-spacing:
        .15em;
}


.event-not-found h1 {
    margin-top:
        30px;

    font-size:
        clamp(
            60px,
            8vw,
            120px
        );

    line-height:
        .9;
}


.event-not-found h1 em {
    color:
        var(--maroon);
}


.event-not-found a {
    display:
        inline-block;

    margin-top:
        35px;

    color:
        var(--maroon);

    font-size:
        9px;

    letter-spacing:
        .14em;
}


/* =====================================================
   HOME DATABASE EVENTS
===================================================== */

.home-events-database-link {
    margin-top:
        35px;

    text-align:
        center;
}


.home-events-database-link a {
    display:
        inline-block;

    padding-bottom:
        6px;

    border-bottom:
        1px solid
        rgba(255,255,255,.60);

    color:
        #FFFFFF;

    font-size:
        9px;

    letter-spacing:
        .14em;
}


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

@media (max-width: 900px) {

    .events-hero-main {
        grid-template-columns:
            1fr;

        gap:
            50px;
    }

    .events-editorial-card {
        grid-template-columns:
            45px
            .9fr
            1.1fr;
    }

    .events-card-content {
        grid-template-columns:
            1fr;

        gap:
            25px;
    }

    .events-experience-layout {
        grid-template-columns:
            1fr;

        gap:
            55px;
    }

    .events-past-grid {
        grid-template-columns:
            1fr 1fr;
    }
}


@media (max-width: 700px) {

    .events-hero {
        min-height:
            auto;

        padding:
            125px 5vw
            80px;

        gap:
            90px;
    }

    .events-hero h1 {
        font-size:
            clamp(
                55px,
                17vw,
                82px
            );
    }

    .events-database-list,
    .events-experience,
    .events-past {
        padding:
            80px 5vw
            95px;
    }

    .events-editorial-card {
        display:
            block;

        min-height:
            auto;

        padding:
            28px 0;
    }

    .events-card-number {
        padding:
            0 0 15px;
    }

    .events-card-image {
        min-height:
            0;

        height:
            110vw;

        max-height:
            520px;
    }

    .events-card-content {
        padding:
            28px 0
            5px;

        display:
            grid;

        grid-template-columns:
            72px
            1fr;

        gap:
            22px;
    }

    .events-card-date strong {
        font-size:
            38px;
    }

    .events-card-arrow {
        right:
            0;

        bottom:
            8px;
    }

    .events-experience-list article {
        grid-template-columns:
            35px
            1fr;
    }

    .events-experience-list p {
        grid-column:
            2;
    }

    .events-past-grid {
        grid-template-columns:
            1fr;
    }

    .events-past-image {
        height:
            115vw;

        max-height:
            530px;
    }

    .events-final-cta {
        min-height:
            76vh;
    }

    .event-detail-hero {
        min-height:
            82vh;
    }

    .event-detail-content {
        padding:
            125px 5vw
            50px;
    }

    .event-detail-meta {
        grid-template-columns:
            1fr;

        gap:
            20px;
    }

    .event-detail-body {
        grid-template-columns:
            1fr;

        gap:
            35px;

        padding:
            85px 5vw
            100px;
    }
}


.events-reveal-item {
    opacity: 0;
    transform: translateY(26px);

    transition:
        opacity .65s ease,
        transform .75s
        cubic-bezier(.2,.8,.2,1);
}

.events-reveal-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =====================================================
   FINAL UPCOMING EVENTS CONTRAST FIX
   Force all text inside maroon Upcoming Events section
   to readable cream / white tones.
===================================================== */

.events-database-list {
    background: #5D0B0B !important;
    background-image: none !important;
    color: #FFFDF8 !important;
}

/* Main headings and event text */
.events-database-list h1,
.events-database-list h2,
.events-database-list h3,
.events-database-list h4,
.events-database-list p,
.events-database-list span,
.events-database-list strong,
.events-database-list em,
.events-database-list a {
    color: #FFFDF8 !important;
}

/* Secondary / small text */
.events-database-list .events-kicker,
.events-database-list .events-card-label,
.events-database-list .events-card-number,
.events-database-list .events-section-head > span,
.events-database-list .events-card-date span {
    color: rgba(255,253,248,.60) !important;
}

/* Description */
.events-database-list .events-card-description {
    color: rgba(255,253,248,.72) !important;
}

/* Location */
.events-database-list .events-card-location {
    color: rgba(255,253,248,.88) !important;
}

/* Lines / borders */
.events-database-list .events-section-head,
.events-database-list .events-editorial-list,
.events-database-list .events-editorial-card {
    border-color: rgba(255,255,255,.20) !important;
}

/* RSVP button */
.events-database-list .events-card-rsvp {
    color: #FFFDF8 !important;
    border: 1px solid rgba(255,253,248,.72) !important;
    background: transparent !important;
}

.events-database-list .events-card-rsvp:hover {
    background: #FFFDF8 !important;
    color: #5D0B0B !important;
}

/* Arrow */
.events-database-list .events-card-arrow {
    color: #FFFDF8 !important;
}


/* =====================================================
   FIX "SEE YOU THERE." EMPHASIS
===================================================== */

.events-database-list .events-section-head h2 em {
    color: #F4EFE6 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #F4EFE6 !important;
}