/**
 * events-upcoming.css — the Upcoming sessions band on /events/.
 *
 * Its own file, and excluded from WP Rocket's Remove Unused CSS in
 * inc/enqueue.php, for the same reason promo-bar.css is. These rules lived in
 * event.css and RUCSS dropped every one of them from the used-css blob it
 * serves in place of that stylesheet, so the band rendered completely
 * unstyled for logged-out visitors while looking correct to anyone logged in
 * and bypassing the cache. Forcing a regeneration did not bring them back.
 *
 * Keeping the section's CSS in one small excluded file also keeps it next to
 * patterns/events-upcoming.php, which is where anyone changing it will look.
 */

/* =====================================================================
   Upcoming sessions — patterns/events-upcoming.php

   Sits above the events grid on /events/ and answers "is anything
   actually on?" without a click. One row per scheduled session, so a
   series with three dates reads as three rows.

   The whole section is absent from the DOM when nothing is scheduled
   (the pattern returns early), so there is no empty state to style.
   ===================================================================== */

/* Kill the layout's block gap on this section.

   <main class="mm-events-page"> is is-layout-flow, so core emits
   :root :where(.is-layout-flow) > * { margin-block-start: 1rem }
   against every sibling. That is invisible between the other sections
   because none of them paints a background, but this band does — so the
   16px showed as a strip of page colour above and below it and the band
   floated instead of sitting flush against the hero.

   Scoped through .mm-events-page rather than a bare .mm-upcoming: core's
   selector computes to the same specificity as a single class, so a plain
   override would be a source-order coin flip. */
.mm-events-page > .mm-upcoming,
.mm-event > .mm-upcoming {
    margin-block: 0;
}

/* Single event page: white, not the tinted band.

   On /events/ the tint earns its keep by separating a mint hero from the
   card grid. On a single event there is nothing to separate — the whole
   page above it is white — so the same tint reads as a stray grey slab
   dropped under the at-a-glance cards. The hairlines go with it, since a
   full-width rule across a white page is just as arbitrary.

   The rows keep their border and stay white-on-white, which is already how
   the at-a-glance cards directly above behave on this page. */
.mm-event > .mm-upcoming {
    background-color: var(--mm-white);
    border-top: 0;
    border-bottom: 0;
}

.mm-upcoming {
    /* --mm-paper-2, not a teal tint. The hero above ends in pale mint and
       the grid below sits on --mm-paper (#FAFAF7), so the original
       --mm-teal-50 (#F4FAF8) landed between two neighbours it was within a
       couple of percent of and read as an accidental sliver rather than a
       band. The warm step down separates it from both, and the white rows
       lift off it properly. */
    background-color: var(--mm-paper-2);
    border-top: 1px solid var(--mm-line);
    border-bottom: 1px solid var(--mm-line);
    /* Tighter than the grid's clamp(40px, 4vw, 72px): this band is often a
       single row, and the grid's padding left it floating in empty space. */
    padding-block: clamp(28px, 3vw, 44px);
}

.mm-upcoming__inner {
    /* Matches .mm-events-grid__inner exactly. At 960px the band was inset
       from every other section on the page, which is what made it look
       bolted on. */
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--mm-s-8);
}

.mm-upcoming__header {
    margin-bottom: var(--mm-s-4);
}

.mm-upcoming__eyebrow {
    margin: 0 0 4px;
    font-family: var(--mm-font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mm-teal-700);
}

.mm-upcoming__title {
    margin: 0;
    font-family: var(--mm-font-display);
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--mm-ink);
}

.mm-upcoming__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mm-upcoming__row {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 14px 18px;
    background-color: var(--mm-white);
    border: 1px solid var(--mm-line);
    border-radius: 14px;
}

/* Date stamp. Three stacked lines rather than one string so the day
   number can carry the weight and stay scannable down the column. */
.mm-upcoming__stamp {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--mm-font-display);
    line-height: 1;
    color: var(--mm-teal-800);
}

.mm-upcoming__weekday,
.mm-upcoming__month {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mm-ink-3);
}

.mm-upcoming__daynum {
    font-size: 28px;
    font-weight: 800;
    margin-block: 2px;
}

.mm-upcoming__body { min-width: 0; }

.mm-upcoming__name {
    margin: 0 0 2px;
    font-family: var(--mm-font-display);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}

.mm-upcoming__name a {
    color: var(--mm-ink);
    text-decoration: none;
}

.mm-upcoming__name a:hover,
.mm-upcoming__name a:focus-visible {
    color: var(--mm-teal-800);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Single-event view leads each row with the time, not the event name —
   the name is the h1 further up the page. Same size and weight as the
   linked title on the archive so the two views read identically. */
.mm-upcoming__name--plain {
    color: var(--mm-ink);
}

.mm-upcoming__meta {
    margin: 0;
    font-family: var(--mm-font-body);
    font-size: 14.5px;
    color: var(--mm-ink-2);
}

.mm-upcoming__cta {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-family: var(--mm-font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--mm-white);
    background-color: var(--mm-teal);
    padding: 9px 18px;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 180ms var(--mm-ease), transform 180ms var(--mm-ease);
}

.mm-upcoming__cta:hover,
.mm-upcoming__cta:focus-visible {
    background-color: var(--mm-teal-800);
    transform: translateY(-1px);
    color: var(--mm-white);
}

/* Stack on narrow screens: the stamp and title read as a unit, the
   button goes full width so it stays an easy tap target. */
/* Same gutter step the grid takes, so the two stay aligned all the way down. */
@media (max-width: 640px) {
    .mm-upcoming__inner {
        padding-inline: var(--mm-s-5);
    }
}

@media (max-width: 600px) {
    .mm-upcoming__row {
        grid-template-columns: 56px 1fr;
        row-gap: 12px;
    }
    .mm-upcoming__cta {
        grid-column: 1 / -1;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mm-upcoming__cta { transition: none; }
    .mm-upcoming__cta:hover,
    .mm-upcoming__cta:focus-visible { transform: none; }
}