/*
 * Events archive.
 * Loaded by slug (see Theme\enqueue_page_assets()).
 *
 * Reference: prod /events/ at 1920px.
 *
 * Geometry at 1920px:
 *   upcoming on #0f1114, then the archive, both 100px in
 *   both lists are the global .carousel with the global event cards
 *
 * The page head itself is global — see css/global/page-head.css.
 */

/* ── Listing sections ──────────────────────────────────────────────────── */
.events {
    padding: 100px 20px;
}

/* The city picker belongs to the list under it, so it pulls in from the 50px
   gap the heading leaves. */
.events--upcoming .city-picker {
    margin-top: -20px;
}

/* The upcoming list sits on the darker ground, as on prod; the archive keeps
   the page's own. */
.events--upcoming {
    padding-bottom:   50px;
    background-color: var(--color-bg-alt);
}

.events__inner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            50px;
}

.events__head {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            16px;
    text-align:     center;
}

.events__kicker {
    margin:         0;
    font-family:    var(--font-body);
    font-weight:    400;
    font-size:      16px;
    line-height:    1.25;
    text-transform: uppercase;
    color:          var(--color-primary);
}

.events__title {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             16px;
    margin:          0;
    font-family:     var(--font-heading);
    font-weight:     400;
    font-size:       40px;
    line-height:     1.2;
    text-transform:  uppercase;
    color:           var(--color-text);
}

.events__deco {
    flex-shrink: 0;
    width:       20.34px;
    height:      21.29px;
}

.events__deco--left {
    transform: scaleX(-1);
}

.events__rule {
    width:      100px;
    height:     1px;
    background: linear-gradient(90deg,
                    rgba(157, 136, 82, 0) 0%,
                    #d0b46d 49.8%,
                    rgba(106, 92, 56, 0) 100%);
}

/* ── Carousel ──────────────────────────────────────────────────────────── */
/* The upcoming list rides the darker ground, so its arrows borrow it. */
.events--upcoming .carousel__arrow {
    background-color: var(--color-bg-alt);
}

/* ── Tablet ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

    .events {
        padding: 60px 20px;
    }

    .events--upcoming {
        padding-bottom: 30px;
    }

    .events__inner {
        gap: 36px;
    }

    .events__title {
        font-size: 32px;
    }
}

/* ── Phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    .events {
        padding: 40px 16px;
    }

    .events--upcoming {
        padding-bottom: 20px;
    }

    .events__inner {
        gap: 28px;
    }

    .events__title {
        font-size: 24px;
    }

    .events__title {
        gap: 10px;
    }

    .events__deco {
        width:  14px;
        height: 14.66px;
    }

}