@layer blocks {
    .events-detail {
        container-type: inline-size;
    }

    .events-detail-columns {
        display: grid;
        gap: calc(var(--space-unit) * 2);
    }

    .events-detail-main {
        display: grid;
        align-content: start;
        gap: calc(var(--space-unit) * 1.5);
        max-width: 48rem;
        min-width: 0;
    }

    .events-detail-aside {
        display: grid;
        align-content: start;
        gap: var(--space-unit);
        min-width: 0;
    }

    .events-detail-cancelled {
        justify-self: start;
        margin: 0;
        padding: calc(var(--space-unit) * 0.25) calc(var(--space-unit) * 0.75);
        border: 1px solid var(--tone-border);
        border-radius: var(--radius-control);
        font-family: var(--font-ui);
        font-weight: 600;
        text-transform: uppercase;
    }

    .events-detail-summary {
        display: grid;
        gap: var(--space-unit);
        align-items: start;
    }

    .events-detail-facts {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr));
        gap: calc(var(--space-unit) * 0.75);
        margin: 0;
    }

    .events-detail-fact {
        display: grid;
        align-content: start;
        gap: calc(var(--space-unit) * 0.375);
        min-width: 0;
        padding: calc(var(--space-unit) * 0.75) var(--space-unit);
        border: 1px solid var(--tone-border);
        border-radius: var(--radius-surface);
        background: var(--tone-card);
    }

    .events-detail-fact dt {
        display: flex;
        align-items: center;
        gap: calc(var(--space-unit) * 0.375);
        color: var(--tone-muted);
        font-family: var(--font-ui);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .events-detail-fact dd {
        margin: 0;
        font-family: var(--font-heading);
        font-weight: var(--heading-weight);
        font-size: 1.125rem;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .events-detail-fact dd a {
        font-family: var(--font-ui);
        font-weight: 400;
        font-size: 0.875rem;
    }

    .events-detail-tags {
        display: flex;
        flex-wrap: wrap;
        gap: calc(var(--space-unit) * 0.25) calc(var(--space-unit) * 0.5);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .events-detail-tags li {
        padding: 0 calc(var(--space-unit) * 0.5);
        border: 1px solid var(--tone-border);
        border-radius: var(--radius-control);
        font-family: var(--font-ui);
        font-size: 0.875rem;
        font-weight: 400;
    }

    .events-detail-actions {
        display: flex;
        flex-wrap: wrap;
        gap: calc(var(--space-unit) * 0.5) var(--space-unit);
        margin: 0;
    }

    .events-detail-description {
        overflow-wrap: anywhere;
    }

    .events-detail-section {
        min-width: 0;
    }

    .events-listing {
        display: grid;
        gap: var(--space-unit);
    }

    .events-listing:not([data-ready]) .events-filter {
        display: none;
    }

    /* The core has no rule for [hidden], and the display of each variant would override a weaker selector. */
    .block-events-event_list .events-listing .events-item[hidden] {
        display: none;
    }

    .events-filter {
        display: flex;
        flex-wrap: wrap;
        gap: calc(var(--space-unit) * 0.5);
    }

    .events-filter-button {
        padding: calc(var(--space-unit) * 0.25) calc(var(--space-unit) * 0.75);
        border: 1px solid var(--tone-border);
        border-radius: var(--radius-control);
        background: var(--tone-bg);
        color: var(--tone-fg);
        font-family: var(--font-ui);
        font-size: 0.875rem;
        cursor: pointer;
    }

    .events-filter-button[aria-pressed='true'] {
        border-color: var(--tone-action);
        background: var(--tone-action);
        color: var(--tone-on-action);
    }

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

    .events-item {
        min-width: 0;
    }

    .block-events-event_list[data-variant='list'] .events-item {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        gap: var(--space-unit);
        padding-bottom: var(--space-unit);
        border-bottom: 1px solid var(--tone-border);
    }

    .block-events-event_list[data-variant='cards'] .events-list {
        grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr));
    }

    .block-events-event_list[data-variant='cards'] .events-item {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        gap: var(--space-unit);
    }

    .block-events-event_list[data-variant='cards'] .events-item:has(> .events-card) {
        grid-template-rows: 1fr auto;
    }

    .block-events-event_list[data-variant='compact'] .events-list {
        gap: calc(var(--space-unit) * 0.5);
    }

    .block-events-event_list[data-variant='compact'] .events-item {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: calc(var(--space-unit) * 0.25) var(--space-unit);
    }

    .block-events-event_list[data-variant='compact'] .events-item > p {
        margin: 0;
    }

    .block-events-event_list[data-variant='compact'] :is(.events-cancelled, .events-state) {
        align-self: baseline;
    }

    .events-item-body,
    .events-promo-body {
        display: flex;
        flex-direction: column;
        gap: calc(var(--space-unit) * 0.25);
        min-width: 0;
    }

    .events-item-body p,
    .events-promo-body p {
        margin: 0;
    }

    .events-title,
    .events-promo-title {
        margin: 0;
        overflow-wrap: anywhere;
    }

    .events-time,
    .events-date,
    .events-place {
        display: flex;
        align-items: center;
        gap: calc(var(--space-unit) * 0.375);
        color: var(--tone-muted);
        font-family: var(--font-ui);
        font-size: 0.875rem;
    }

    .events-perex {
        overflow-wrap: anywhere;
    }

    .events-tags {
        display: flex;
        flex-wrap: wrap;
        gap: calc(var(--space-unit) * 0.25) calc(var(--space-unit) * 0.5);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .events-tag {
        padding: 0 calc(var(--space-unit) * 0.5);
        border: 1px solid var(--tone-border);
        border-radius: var(--radius-control);
        font-family: var(--font-ui);
        font-size: 0.875rem;
    }

    .events-cancelled {
        align-self: flex-start;
        padding: 0 calc(var(--space-unit) * 0.5);
        border: 1px dashed var(--tone-fg);
        border-radius: var(--radius-control);
        font-family: var(--font-ui);
        font-size: 0.875rem;
        font-weight: 600;
        text-transform: uppercase;
    }

    .events-labels {
        display: flex;
        flex-wrap: wrap;
        gap: calc(var(--space-unit) * 0.375);
        margin: 0 0 calc(var(--space-unit) * 0.25);
        padding: 0;
        list-style: none;
    }

    .events-label {
        display: inline-flex;
        align-items: center;
        gap: calc(var(--space-unit) * 0.25);
        padding: calc(var(--space-unit) * 0.125) calc(var(--space-unit) * 0.625);
        border: 1px solid var(--tone-border);
        border-radius: var(--radius-control);
        color: var(--tone-fg);
        font-family: var(--font-ui);
        font-size: 0.8125rem;
        font-weight: 600;
    }

    .events-audience,
    .events-days {
        background: var(--tone-bg);
    }

    .events-state {
        align-self: flex-start;
        margin: 0;
        padding: calc(var(--space-unit) * 0.125) calc(var(--space-unit) * 0.625);
        border: 1px solid var(--tone-border);
        border-radius: var(--radius-control);
        font-family: var(--font-ui);
        font-size: 0.8125rem;
        font-weight: 700;
    }

    .events-state[data-state='open'] {
        border-color: var(--tone-highlight, var(--tone-action));
        background: var(--tone-highlight, var(--tone-action));
        color: var(--tone-on-highlight, var(--tone-on-action));
    }

    .events-state[data-state='full'] {
        border-color: var(--role-danger);
        background: color-mix(in srgb, var(--role-danger) 12%, var(--tone-bg));
        color: var(--tone-fg);
    }

    .events-state[data-state='closed'] {
        border-style: dashed;
        color: var(--tone-muted);
    }

    .events-card {
        container-type: inline-size;
        display: grid;
        grid-column: 1 / -1;
        align-self: end;
        gap: var(--space-unit);
        min-width: 0;
    }

    .events-seats {
        display: grid;
        gap: calc(var(--space-unit) * 0.375);
    }

    .events-seats-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: calc(var(--space-unit) * 0.25) var(--space-unit);
        margin: 0;
        font-family: var(--font-ui);
        font-size: 0.875rem;
    }

    .events-seats-label {
        color: var(--tone-fg);
        font-weight: 600;
    }

    .events-seats-taken {
        margin-left: auto;
        color: var(--tone-muted);
        font-variant-numeric: tabular-nums;
    }

    .events-meter {
        --events-meter-fill: linear-gradient(90deg, var(--tone-action), var(--tone-highlight, var(--tone-accent)));

        appearance: none;
        display: block;
        width: 100%;
        height: calc(var(--space-unit) * 0.5);
        border: 0;
        border-radius: var(--radius-control);
        background: var(--tone-border);
    }

    .events-card-full .events-meter {
        --events-meter-fill: var(--role-danger);
    }

    .events-meter::-webkit-meter-bar {
        border: 0;
        border-radius: var(--radius-control);
        background: var(--tone-border);
    }

    .events-meter::-webkit-meter-optimum-value {
        border-radius: var(--radius-control);
        background: var(--events-meter-fill);
    }

    .events-meter::-moz-meter-bar {
        border-radius: var(--radius-control);
        background: var(--events-meter-fill);
    }

    .events-card-foot {
        display: flex;
        flex-direction: column;
        gap: calc(var(--space-unit) * 0.75);
        padding-top: var(--space-unit);
        border-top: 1px dashed var(--tone-border);
    }

    .events-card-foot .block-actions {
        margin: 0;
    }

    .events-card-foot .button {
        width: 100%;
    }

    .events-price {
        margin: 0;
        color: var(--tone-fg);
        overflow-wrap: anywhere;
    }

    .events-price-amount {
        font-family: var(--font-heading);
        font-weight: var(--heading-weight);
        font-size: 1.5rem;
        line-height: 1.1;
    }

    .events-price-note {
        color: var(--tone-muted);
        font-family: var(--font-ui);
        font-size: 0.8125rem;
    }

    .events-item-cancelled .events-title {
        text-decoration: line-through;
    }

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

    .events-promo {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        gap: var(--space-unit);
        max-width: 40rem;
    }

    .events-promo-body .block-actions {
        margin-top: calc(var(--space-unit) * 0.5);
    }

    .block-events-event_promo[data-variant='hero'] {
        position: relative;
        overflow: hidden;
    }

    .events-hero {
        display: grid;
        align-items: center;
        gap: calc(var(--space-unit) * 2);
        min-height: calc(var(--space-unit) * 24);
    }

    .events-hero-media {
        position: absolute;
        inset: 0;
        overflow: clip;
    }

    .events-hero-media > .image {
        height: 100%;
    }

    .events-hero-media > .image::after {
        content: '';
        position: absolute;
        inset: 0;
        background: color-mix(in srgb, var(--tone-bg) 72%, transparent);
    }

    .events-hero-media img {
        height: 100%;
        aspect-ratio: auto;
        border-radius: 0;
        object-fit: cover;
    }

    .events-hero-media figcaption {
        position: absolute;
        right: calc(var(--space-unit) * 0.5);
        bottom: calc(var(--space-unit) * 0.25);
        z-index: 1;
    }

    .events-hero-content {
        position: relative;
        z-index: 1;
        min-width: 0;
        max-width: 40rem;
    }

    .events-hero-content .block-title {
        overflow-wrap: anywhere;
    }

    .events-hero-text {
        margin: 0;
        font-size: 1.125rem;
        overflow-wrap: anywhere;
    }

    .events-hero > .events-promo {
        position: relative;
        z-index: 1;
        max-width: 28rem;
    }

    @container (min-width: 24rem) {
        .events-card-foot {
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
        }

        .events-card-foot .button {
            width: auto;
        }
    }

    @container (min-width: 40rem) {
        .events-detail-summary {
            grid-template-columns: auto minmax(0, 1fr);
        }
    }

    @container (min-width: 48rem) {
        .events-hero:has(> .events-promo) {
            grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem);
        }
    }

    @container (min-width: 56rem) {
        .events-detail-columns:has(> .events-detail-aside) {
            grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
            align-items: start;
        }

        .events-detail-aside {
            --events-detail-aside-top: calc(var(--site-sticky-top, 0rem) + var(--space-unit));

            position: sticky;
            top: var(--events-detail-aside-top);
            max-height: calc(100dvh - var(--events-detail-aside-top) - var(--space-unit));
            margin: calc(var(--space-unit) * -0.75);
            padding: calc(var(--space-unit) * 0.75);
            overflow-y: auto;
            overscroll-behavior: contain;
        }
    }
}