.component-schedule {
    container-type: inline-size;
    container-name: schedule;

    :where(.heading) {
        margin-block: 0 var(--size-small);
        color: var(--color-primary-black);
        font-weight: var(--font-weight-bold);
    }

    :where(.schedule-subheading) {
        margin-block: 0 var(--size-x-small);
        color: var(--color-primary-black);
    }

    :where(.schedule-rows) {
        display: flex;
        flex-direction: column;
    }

    :where(.schedule-row) {
        display: grid;

        /* minmax with a 0 minimum rather than 1fr: a plain 1fr track takes its longest word as a minimum
           and pushes the whole grid wider than the container when space is tight. */
        grid-template-columns: 24rem minmax(0, 1fr);
        gap: var(--size-medium);
        align-items: start;
        padding-block: var(--size-medium);

        & + & {
            border-block-start: 1px solid rgb(from var(--color-primary-black) r g b / 12%);
        }
    }

    :where(.schedule-time) {
        margin: 0;
        color: var(--color-primary-black);
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-h5);
    }

    :where(.schedule-detail) {
        margin: 0;
        color: var(--color-primary-black);
        font-size: var(--font-size-h5);
    }

    :where(.ctas) {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--size-x-small);
        margin-block-start: var(--size-medium);
    }
}

/* 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 schedule (inline-size < calc(112rem + 4rem + 4rem)) {
    :where(.component-schedule > .component-wrapper > .region) {
        max-width: 100%;
        padding-inline: var(--minimum-inline-padding);
    }
}

/* Narrow containers: stack the time above its description. Threshold covers the fixed 24rem
   column, the 4rem gap, a readable description column and the region's 4rem padding either
   side — below that the two-column row cannot fit and used to overflow instead. */
@container schedule (inline-size < 52rem) {
    .component-schedule :where(.schedule-row) {
        grid-template-columns: 1fr;
        gap: var(--size-xx-small);
    }
}