.events-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.segmented {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
}

.segmented__opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    min-height: 44px;
    padding: 0 var(--space-5);
    border-radius: 999px;
    font-weight: 600;
    color: var(--color-text-mid);
    transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.segmented__opt:hover { color: var(--color-text); }

.segmented__opt.is-active {
    background: var(--color-white);
    color: var(--color-primary-dark);
    box-shadow: var(--shadow-sm);
}

.chip-row {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.chip-row::-webkit-scrollbar { display: none; }

.chip-row__opt {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-4);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: 999px;
    background: var(--color-white);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-mid);
    white-space: nowrap;
    scroll-snap-align: start;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.chip-row__opt:hover {
    border-color: var(--color-primary-dark);
    color: var(--color-primary-dark);
}

.chip-row__opt.is-active {
    border-color: var(--color-primary-dark);
    background: var(--color-primary-dark);
    color: var(--color-white);
}

.date-range {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    padding: var(--space-5);
    border-radius: var(--radius-card);
    background: var(--color-soft);
}

.date-range__field {
    display: flex;
    flex: 1 1 160px;
    flex-direction: column;
    gap: 6px;
    font-size: var(--text-sm);
    font-weight: 600;
}

.date-range__field input {
    min-height: 48px;
    padding: 0 12px;
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius);
    background: var(--color-white);
    font: inherit;
    font-weight: 500;
    color: var(--color-text);
}

.date-range__field input:focus {
    border-color: var(--color-primary-dark);
    box-shadow: 0 0 0 4px var(--color-primary-tint);
    outline: none;
}

.event-month-group {
    display: grid;
    gap: var(--space-3);
}

.event-month-group + .event-month-group { margin-top: var(--space-7); }

.event-month {
    font-size: var(--text-lg);
    color: var(--color-text-mid);
}

/* Agenda layout: month on the left, one full-width row per event. */
@media (min-width: 900px) {
    .event-month-group {
        grid-template-columns: 200px minmax(0, 1fr);
        gap: var(--space-6);
        align-items: start;
    }

    .event-month-group + .event-month-group { margin-top: var(--space-6); }

    .event-month { padding-top: var(--space-4); }

    .event-month-group .event-list { grid-template-columns: minmax(0, 1fr); }
}

.event-type {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.event-type__note {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-soft);
}

.event-admin { margin-top: var(--space-4); }

.event-detail__photo {
    width: 100%;
    border-radius: var(--radius-card);
}

.event-detail__heading {
    margin-bottom: var(--space-3);
    font-size: var(--text-xl);
}

.video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-card);
    background: var(--color-text);
}

.video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.watch-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-card);
    background: var(--color-primary-tint);
}

.watch-cta__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-live);
}

.watch-cta__icon svg {
    width: 20px;
    height: 20px;
    margin-left: 2px;
}

.site-body .watch-cta__text {
    flex: 1 1 240px;
    color: var(--color-text);
}

@media (max-width: 640px) {
    /* nowrap: a wrapping column sizes itself to the widest child, which is the
       unscrolled chip row, and that widened the whole page. */
    .events-toolbar {
        flex-flow: column nowrap;
        align-items: stretch;
    }

    .segmented { display: flex; }

    .segmented__opt {
        flex: 1;
        min-width: 0;
    }

    /* Chips scroll edge to edge so the last one visibly runs off screen. */
    .chip-row {
        margin: 0 calc(-1 * var(--space-5));
        padding: 0 var(--space-5);
        scroll-padding: 0 var(--space-5);
    }

}