.tt-events {
    --tt-events-accent: #8c571d;
    --tt-events-accent-alt: #a57036;
    --tt-events-text: #333333;
    --tt-events-muted: #707070;
    --tt-events-rule: #dedede;
    --tt-events-soft: #faf7f3;
    --tt-events-event-bg: #fff8f0;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    container-type: inline-size;
}

.tt-events *,
.tt-events *::before,
.tt-events *::after {
    box-sizing: border-box;
}

.tt-events__empty,
.tt-events--error {
    margin: 0;
    padding: .75rem 0;
    color: var(--tt-events-muted);
}

/* =========================================================
   UPCOMING / MONTH LIST
   ========================================================= */

.tt-events__list {
    display: grid;
    gap: 0;
}

.tt-event {
    display: grid;
    grid-template-columns: 4.25rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--tt-events-rule);
}

.tt-event:first-child {
    border-top: 2px solid var(--tt-events-accent-alt);
}

.tt-event__date {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    line-height: 1;
}

.tt-event__day {
    color: var(--tt-events-text);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.tt-event__month {
    margin-top: .25rem;
    color: var(--tt-events-accent);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.tt-event__title {
    margin: 0 0 .35rem;
    font: inherit;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.35;
}

.tt-event__title a {
    color: var(--tt-events-text);
    text-decoration: none;
}

.tt-event__title a:hover,
.tt-event__title a:focus-visible {
    color: var(--tt-events-accent);
}

.tt-event__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    color: var(--tt-events-muted);
    font-size: .82rem;
    line-height: 1.45;
}

.tt-event__time-range {
    font-variant-numeric: tabular-nums;
}

.tt-event__timezone {
    margin-left: .08rem;
    color: var(--tt-events-accent);
    font-size: .74rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .035em;
    white-space: nowrap;
}

.tt-event__separator {
    color: #b5b5b5;
}

.tt-event__status {
    margin-top: .45rem;
    color: var(--tt-events-accent);
    font-size: .78rem;
    font-weight: 650;
}

.tt-event__registration {
    display: inline-block;
    margin-top: .6rem;
    color: var(--tt-events-accent);
    font-size: .82rem;
    font-weight: 650;
    text-decoration: none;
}

.tt-event__registration:hover,
.tt-event__registration:focus-visible {
    color: var(--tt-events-accent-alt);
    text-decoration: underline;
}

/* =========================================================
   MONTH CALENDAR
   True seven-column calendar; no horizontal schedule scroll.
   ========================================================= */

.tt-calendar__nav {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
    align-items: center;
    width: 100%;
    border-bottom: 2px solid var(--tt-events-accent);
}

.tt-calendar__month {
    margin: 0;
    padding: .78rem .35rem;
    color: var(--tt-events-text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.tt-calendar__nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    color: var(--tt-events-accent);
    font-size: 1.1rem;
    text-decoration: none;
}

.tt-calendar__nav-link:hover,
.tt-calendar__nav-link:focus-visible {
    background: var(--tt-events-soft);
    color: var(--tt-events-accent-alt);
}

.tt-calendar__nav-link--disabled {
    color: var(--tt-events-muted);
    cursor: default;
    opacity: .32;
    pointer-events: none;
    user-select: none;
}

.tt-calendar__nav-link--disabled:hover,
.tt-calendar__nav-link--disabled:focus-visible {
    background: transparent;
    color: var(--tt-events-muted);
}

.tt-calendar__frame {
    width: 100%;
    min-width: 0;
    overflow: visible;
}

.tt-calendar {
    width: 100%;
    min-width: 0;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

.tt-calendar th {
    width: 14.285714%;
    padding: .5rem .18rem;
    border-bottom: 1px solid var(--tt-events-rule);
    color: var(--tt-events-muted);
    font-size: .68rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: .02em;
    text-align: center;
    white-space: nowrap;
}

.tt-calendar__cell {
    width: 14.285714%;
    height: 5rem;
    padding: .34rem;
    vertical-align: top;
    border-right: 1px solid #eeeeee;
    border-bottom: 1px solid var(--tt-events-rule);
    background: #ffffff;
    overflow: hidden;
}

.tt-calendar tr .tt-calendar__cell:last-child {
    border-right: 0;
}

.tt-calendar__cell--empty {
    background: #fafafa;
}

.tt-calendar__cell--events {
    background: var(--tt-events-event-bg);
}

.tt-calendar__cell--today {
    box-shadow: inset 0 0 0 1px var(--tt-events-accent-alt);
}

.tt-calendar__day {
    display: block;
    margin: 0 0 .22rem;
    color: var(--tt-events-text);
    font-size: .76rem;
    font-weight: 650;
    line-height: 1;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tt-calendar__cell--today .tt-calendar__day {
    color: var(--tt-events-accent);
    font-weight: 750;
}

.tt-calendar__events {
    display: grid;
    gap: .18rem;
    min-width: 0;
}

.tt-calendar__event {
    display: block;
    min-width: 0;
    padding: .18rem .2rem;
    overflow: hidden;
    border-left: 2px solid var(--tt-events-accent-alt);
    background: rgba(255, 255, 255, .7);
    color: var(--tt-events-accent);
    font-size: .67rem;
    font-weight: 600;
    line-height: 1.18;
    text-decoration: none;
}

.tt-calendar__event:hover,
.tt-calendar__event:focus-visible {
    background: #ffffff;
    color: var(--tt-events-accent-alt);
    text-decoration: none;
}

.tt-calendar__event-time {
    display: block;
    margin-bottom: .08rem;
    color: var(--tt-events-muted);
    font-size: .61rem;
    font-weight: 550;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tt-calendar__event-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow-wrap: anywhere;
}

.tt-calendar__more {
    display: inline-block;
    color: var(--tt-events-muted);
    font-size: .62rem;
    line-height: 1;
}

.tt-calendar__event-dot {
    display: block;
    width: .35rem;
    height: .35rem;
    margin: .2rem auto 0;
    border-radius: 50%;
    background: var(--tt-events-accent-alt);
}

.tt-events__month-list {
    margin-top: 1.5rem;
}

.tt-events__month-list-title {
    margin: 0 0 .5rem;
    color: var(--tt-events-text);
    font-size: 1rem;
    font-weight: 700;
}

/* =========================================================
   COMPACT MODULE / SIDEBAR CALENDAR
   The calendar remains seven columns and never becomes a
   horizontal timetable, even in a narrow module position.
   ========================================================= */

@container (max-width: 420px) {
    .tt-calendar__nav {
        grid-template-columns: 2rem minmax(0, 1fr) 2rem;
    }

    .tt-calendar__month {
        padding: .68rem .15rem;
        font-size: .88rem;
    }

    .tt-calendar__nav-link {
        min-height: 2.15rem;
        font-size: .95rem;
    }

    .tt-calendar th {
        padding: .38rem .02rem;
        font-size: .58rem;
        letter-spacing: 0;
    }

    .tt-calendar__cell {
        height: 3.65rem;
        padding: .2rem .12rem;
    }

    .tt-calendar__day {
        margin-bottom: .14rem;
        font-size: .68rem;
        text-align: center;
    }

    .tt-calendar__event {
        padding: .12rem .08rem;
        border-left-width: 1px;
        font-size: .52rem;
        line-height: 1.05;
        text-align: center;
    }

    .tt-calendar__event-time {
        display: none;
    }

    .tt-calendar__event-title {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .tt-calendar__more {
        display: block;
        margin-top: .08rem;
        font-size: .52rem;
        text-align: center;
    }
}

@container (max-width: 290px) {
    .tt-calendar th {
        font-size: .54rem;
    }

    .tt-calendar__cell {
        height: 3.35rem;
        padding: .16rem .08rem;
    }

    .tt-calendar__day {
        font-size: .64rem;
    }

    .tt-calendar__event {
        font-size: .48rem;
    }
}

@media (max-width: 575px) {
    .tt-event {
        grid-template-columns: 3.5rem minmax(0, 1fr);
        gap: .75rem;
    }

    .tt-event__day {
        font-size: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tt-events * {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}

/* =========================================================
   TEMPORAL / EDITORIAL EVENT STATES
   Past is calculated automatically from event start/end.
   The calendar still shows past events, but de-emphasises them.
   ========================================================= */

.tt-calendar__event--past {
    opacity: .62;
    border-left-color: #a9a9a9;
    color: var(--tt-events-muted);
}

.tt-calendar__event--past:hover,
.tt-calendar__event--past:focus-visible {
    opacity: .86;
}

.tt-calendar__event--cancelled .tt-calendar__event-title {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.tt-calendar__event--postponed {
    border-left-style: dashed;
}
