@layer blocks {
    .event-dates {
        display: grid;
        column-gap: var(--space-unit);
    }

    @container (min-width: 40rem) {
        .event-dates {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    .place-picker {
        position: relative;
    }

    .place-suggestions {
        position: absolute;
        z-index: 10;
        left: 0;
        right: 0;
        background: var(--tone-bg);
        color: var(--tone-fg);
        border: 1px solid var(--tone-border);
        border-radius: var(--radius-surface);
    }

    .place-suggestions-list {
        margin: 0;
        padding: 0;
        list-style: none;
        max-height: 18rem;
        overflow-y: auto;
    }

    .place-suggestion {
        display: flex;
        flex-direction: column;
        padding: calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 0.75);
        cursor: pointer;
    }

    .place-suggestion[aria-selected='true'],
    .place-suggestion:hover {
        background: var(--tone-card);
    }

    .place-suggestion-name {
        font-weight: 600;
    }

    .place-suggestion-label,
    .place-suggestion-detail,
    .place-detail,
    .place-attribution,
    .event-place {
        color: var(--tone-muted);
        font-size: 0.875rem;
    }

    .place-attribution {
        margin: 0;
        padding: calc(var(--space-unit) * 0.25) calc(var(--space-unit) * 0.75);
    }

    .place-attribution a {
        color: inherit;
    }

    .event-date {
        margin: 0 0 calc(var(--space-unit) * 0.25);
        color: var(--tone-muted);
        font-family: var(--font-ui);
        font-size: 0.875rem;
    }

    .event-place {
        margin: 0 0 calc(var(--space-unit) * 0.5);
        font-family: var(--font-ui);
    }

    .event > .image {
        max-width: 40rem;
        margin: calc(var(--space-unit) * 1.5) 0;
    }

    .event-links {
        margin: var(--space-unit) 0 0;
    }

    .upcoming-events {
        display: grid;
        gap: var(--space-unit);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .upcoming-event {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: calc(var(--space-unit) * 0.25);
    }

    .upcoming-event > .image {
        max-width: 10rem;
    }

    .upcoming-event > p {
        margin: 0;
    }

    .upcoming-event-title {
        margin: 0;
    }

    .upcoming-event-private-label {
        color: var(--tone-muted);
        font-style: italic;
    }

    .upcoming-event-private {
        border-style: dashed;
        border-color: var(--tone-border);
    }

    .block-calendar-upcoming_events[data-variant='cards'] .upcoming-event {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        column-gap: var(--space-unit);
    }

    .upcoming-event-meta {
        display: grid;
        gap: calc(var(--space-unit) * 0.25);
        min-width: 0;
    }

    .upcoming-event-meta p {
        margin: 0;
    }

    .upcoming-event-time {
        color: var(--tone-muted);
        font-family: var(--font-ui);
        font-size: 0.875rem;
    }

    .event-heading {
        display: flex;
        align-items: flex-start;
        gap: var(--space-unit);
    }

    .event-heading > h1 {
        min-width: 0;
        margin-top: 0;
    }

    .upcoming-events-empty {
        margin: 0;
        color: var(--tone-muted);
    }

    @container (min-width: 40rem) {
        .upcoming-event:has(> .image) {
            grid-template-columns: 10rem minmax(0, 1fr);
            column-gap: calc(var(--space-unit) * 1.25);
        }

        .upcoming-event > .image {
            grid-row: span 4;
        }
    }

    @container (min-width: 40rem) {
        .block-calendar-upcoming_events[data-variant='cards'] .upcoming-events {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @container (min-width: 60rem) {
        .block-calendar-upcoming_events[data-variant='cards'] .upcoming-events {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }
}