/**
 * The "upcoming" list, shared by the single event page ("Upcoming dates")
 * and the single location page ("Upcoming events here").
 *
 * One stylesheet rather than a copy inside each template's own <style>
 * block, so the two lists can't drift apart -- they are meant to read as
 * the same component. Still theme-independent (it ships with the plugin
 * and is enqueued by Frontend\TemplateLoader), so a theme overriding
 * either template keeps this look for free.
 *
 * The two pages carry different content in the same shape:
 *   - event page    -> every row is another date of the same event, so
 *                      the weekday/time is the row's own headline.
 *   - location page -> every row is a different event, so the event
 *                      title is the headline and the date sits under it.
 * The date chip on the left is what makes both scannable down the column.
 *
 * Tokens are inherited from whichever template is hosting this (both
 * define the same --uce-* set), with fallbacks so the file still renders
 * correctly on its own.
 */

.uce-upcoming {
    margin: 2.5em 0 0;
}

.uce-upcoming__heading {
    font-family: var(--uce-heading-font, "Barlow", Arial, sans-serif);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 0.9em;
    color: var(--uce-ink, #464545);
}

.uce-upcoming__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6em;
}

/* The row is one big link target: the whole card is clickable, rather
   than asking for a precise hit on a short date string. */
.uce-upcoming__item {
    margin: 0;
    padding: 0;
    list-style: none;
}

.uce-upcoming__link {
    display: flex;
    align-items: center;
    gap: 0.9em;
    padding: 0.7em 0.85em;
    border: 1px solid var(--uce-card-border, #eceae5);
    border-radius: var(--lt-radius, .375rem);
    background: var(--uce-paper, #fff);
    text-decoration: none;
    color: inherit;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.uce-upcoming__link:hover,
.uce-upcoming__link:focus-visible {
    border-color: #ddd9d2;
    box-shadow: 0 6px 16px rgba(70, 69, 69, .09);
    transform: translateY(-1px);
    text-decoration: none;
}

/* Calendar-chip date: month over day, the same shorthand a printed
   listing uses, so a column of these scans as dates before it scans as
   text. */
.uce-upcoming__date {
    flex: 0 0 auto;
    width: 3.1em;
    text-align: center;
    padding: 0.35em 0;
    border-radius: var(--lt-radius-sm, .25rem);
    background: var(--uce-panel, #f7f6f4);
    border: 1px solid var(--uce-card-border, #eceae5);
    line-height: 1.1;
}

.uce-upcoming__month {
    display: block;
    font-family: var(--uce-heading-font, "Barlow", Arial, sans-serif);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--uce-accent, #51723a);
}

.uce-upcoming__day {
    display: block;
    font-family: var(--uce-heading-font, "Barlow", Arial, sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--uce-ink, #464545);
}

.uce-upcoming__body {
    min-width: 0;
    flex: 1 1 auto;
}

.uce-upcoming__title {
    display: block;
    font-family: var(--uce-heading-font, "Barlow", Arial, sans-serif);
    font-weight: 700;
    font-size: 0.98rem;
    line-height: 1.3;
    color: var(--uce-ink, #464545);
    overflow-wrap: anywhere;
}

.uce-upcoming__link:hover .uce-upcoming__title {
    text-decoration: underline;
}

.uce-upcoming__meta {
    display: block;
    margin-top: 0.15em;
    font-size: 0.85rem;
    color: var(--uce-muted, #767575);
}

/* Cancelled/postponed occurrences keep their row but say so plainly. */
.uce-upcoming__status {
    display: inline-block;
    margin-top: 0.25em;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #a5453c;
}

.uce-upcoming__chevron {
    flex: 0 0 auto;
    margin-left: 0.4em;
    font-size: 0.8rem;
    color: var(--uce-muted, #767575);
    transition: transform .18s ease;
}

.uce-upcoming__link:hover .uce-upcoming__chevron {
    transform: translateX(3px);
    color: var(--uce-accent, #51723a);
}

@media (max-width: 480px) {
    .uce-upcoming__link {
        gap: 0.7em;
        padding: 0.6em 0.7em;
    }

    .uce-upcoming__date {
        width: 2.8em;
    }
}