.component-event-details {
    container-type: inline-size;
    container-name: event-details;

    /* Match the body width the rest of the site uses. A content component sits in a 96rem
       content wrap centered inside the 112rem region; this component has no width setting of
       its own, so without this its region width applies directly and the date block starts
       8rem to the left of the copy beneath it. */
    :where(.component-wrapper > .region > .content-wrap) {
        max-width: var(--content-width-medium);
        margin-inline: auto;
    }

    :where(.event-details) {
        /* The badge's footprint, held on this element rather than on the component so the
           narrow-container query below can override it -- a container query never matches
           the element that declares the container, and the component is the container. */
        --local-badge-inline-size: 15.4rem;
        --local-badge-gap: var(--size-medium);

        display: flex;
        align-items: flex-start;
        gap: var(--local-badge-gap);
        margin-block-start: var(--size-small);
        margin-block-end: var(--size-medium);
        padding-inline-start: var(--size-large);

        /* The 8rem indent exists to sit the badge in from the content edge. A date range
           has no badge, so there is nothing to indent -- its heading lines up with the
           page's content instead. */
        &:not(:has(.event-date-badge)) {
            padding-inline-start: 0;
        }
    }

    :where(.event-date-badge) {
        flex: none;
        display: grid;
        place-items: center;
        align-content: center;
        gap: var(--size-xx-small);
        inline-size: var(--local-badge-inline-size);
        min-block-size: 14.3rem;
        padding: var(--size-small);
        background-color: var(--color-brand-light-grey);
        border-radius: var(--border-radius-large);
        text-align: center;
    }

    :where(.event-date-month) {
        color: var(--color-primary-black);
        font-weight: var(--font-weight-bold);
        font-size: 2.64rem;
        letter-spacing: 0.05em;
        line-height: 1;
    }

    :where(.event-date-day) {
        color: var(--color-primary-black);
        font-weight: var(--font-weight-light);
        font-size: 5.28rem;
        line-height: 1;
    }

    :where(.event-details-heading) {
        margin: 0 0 var(--size-small);
        padding-top: .5rem;
        color: var(--color-primary-black);
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-h3);
        line-height: 1;
        /* Trim the font's leading above the cap so the heading's first line starts
           flush with the top of the badge (falls back gracefully where unsupported). */
        text-box-trim: trim-start;
        text-box-edge: cap alphabetic;
    }

    :where(.event-detail-row) {
        margin: 0;
        color: var(--color-primary-black);
        font-size: var(--font-size-h6);

        & + & {
            margin-block-start: var(--size-xx-small);
        }
    }

    :where(.event-detail-label) {
        color: var(--color-brand-blue);
        font-weight: var(--font-weight-bold);
        margin-inline-end: var(--size-xxx-small);
    }
}

/* Once the container is narrower than the content width plus breathing room the
   region no longer insets anything, so pad it like the other components do. */
@container event-details (inline-size < calc(112rem + 4rem + 4rem)) {
    :where(.component-event-details > .component-wrapper > .region) {
        max-width: 100%;
        padding-inline: var(--minimum-inline-padding);
    }

    /* Once the region pads itself the extra indent would push the badge past the
       breadcrumbs, so drop it and let the region's padding set the left edge. */
    .component-event-details :where(.event-details) {
        padding-inline-start: 0;
    }
}

@container event-details (inline-size < 40rem) {
    .component-event-details :where(.event-details) {
        --local-badge-inline-size: 11rem;
        --local-badge-gap: var(--size-small);
    }

    .component-event-details :where(.event-date-badge) {
        min-block-size: 10rem;
    }
}