/*
 * Stable responsive treatment for the WVARC monthly calendar.
 *
 * This file is intentionally CSS-only. Desktop retains the full month grid.
 * Medium widths use a denser seven-column grid. Phones present the same month
 * as a date-grouped agenda containing only days with events. This preserves
 * legibility without ResizeObserver or MutationObserver feedback loops.
 */

/* The retired JavaScript-responsive controls must never appear. */
.wvarc-calendar__mobile-day-trigger,
.wvarc-calendar__mobile-agenda {
    display: none !important;
}

/* Medium-width browsers: keep all seven columns visible and reduce density. */
@media (max-width: 70rem) {
    .entry-content > .wvarc-calendar--month,
    .entry-content > .wvarc-calendar--weekly-schedule,
    .entry-content > .wvarc-calendar--alerts,
    .entry-content > .wp-block-group.wvarc-calendar-wide {
        width: calc(100vw - 1rem) !important;
    }

    .wvarc-calendar--month {
        overflow-x: hidden;
        padding: 0.65rem;
    }

    .wvarc-calendar__weekday-row,
    .wvarc-calendar--month .wvarc-calendar__month-grid {
        min-width: 0;
        width: 100%;
    }

    .wvarc-calendar__weekday-row,
    .wvarc-calendar--month .wvarc-calendar__month-row {
        gap: 0.28rem;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    }

    .wvarc-calendar--month .wvarc-calendar__month-cell {
        gap: 0.36rem;
        min-height: 9rem;
        padding: 0.34rem !important;
    }

    .wvarc-calendar--month .wvarc-calendar__month-day {
        min-width: 2.75rem;
        padding: 0.22rem 0.28rem 0.25rem;
    }

    .wvarc-calendar__date-number {
        font-size: 1.2rem;
    }

    .wvarc-calendar--month .wvarc-calendar__event {
        gap: 0.26rem;
        padding: 0.42rem !important;
    }

    .wvarc-calendar__event-club,
    .wvarc-calendar__event-calendar {
        font-size: 0.52rem;
    }

    .wvarc-calendar--month .wvarc-calendar__event-link {
        font-size: 0.72rem;
        line-height: 1.2;
    }

    .wvarc-calendar__event-time {
        border-radius: 0.35rem;
        font-size: 0.54rem;
        line-height: 1.2;
        padding: 0.25rem 0.34rem;
    }
}

/*
 * Phone layout: a monthly agenda grouped by calendar date.
 *
 * Empty dates are removed, while every event date retains its large date badge
 * and full event cards. The month navigation and title remain above the list.
 */
@media (max-width: 46rem) {
    .wvarc-calendar--month {
        border-radius: 0.55rem;
        overflow: visible;
        padding: 0.55rem;
    }

    .wvarc-calendar--month .wvarc-calendar__nav {
        display: grid;
        gap: 0.45rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-bottom: 0.75rem;
    }

    .wvarc-calendar--month .wvarc-calendar__month-title {
        font-size: clamp(1.35rem, 7vw, 1.8rem);
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .wvarc-calendar--month .wvarc-calendar__nav-btn {
        font-size: 0.66rem;
        min-height: 2.75rem;
        padding: 0.6rem 0.25rem;
        text-align: center;
    }

    .wvarc-calendar__weekday-row {
        display: none !important;
    }

    .wvarc-calendar--month .wvarc-calendar__month-grid {
        display: grid !important;
        gap: 0.65rem;
        min-width: 0;
        width: 100%;
    }

    .wvarc-calendar--month .wvarc-calendar__month-row {
        display: contents !important;
    }

    /* Hide empty dates and adjacent-month dates in the phone agenda. */
    .wvarc-calendar--month .wvarc-calendar__month-cell {
        display: none !important;
    }

    .wvarc-calendar--month .wvarc-calendar__month-cell:not(.is-outside-month):has(.wvarc-calendar__event) {
        align-items: start;
        background: var(--wvarc-cal-navy-dark) !important;
        border: 1px solid rgba(243, 189, 22, 0.72) !important;
        border-radius: 0.58rem;
        display: grid !important;
        gap: 0.65rem;
        grid-template-columns: 4.15rem minmax(0, 1fr);
        min-height: 0;
        padding: 0.62rem !important;
    }

    .wvarc-calendar--month .wvarc-calendar__month-day {
        align-self: start;
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        padding: 0.38rem 0.3rem 0.42rem;
        width: 100%;
    }

    .wvarc-calendar__date-month,
    .wvarc-calendar__date-weekday {
        font-size: 0.62rem;
        letter-spacing: 0.06em;
    }

    .wvarc-calendar__date-number {
        font-size: 1.75rem;
    }

    .wvarc-calendar--month .wvarc-calendar__events {
        clip: auto;
        clip-path: none;
        display: grid;
        gap: 0.58rem;
        grid-column: 2;
        grid-row: 1;
        height: auto;
        margin: 0;
        overflow: visible;
        padding: 0;
        position: static;
        white-space: normal;
        width: auto;
    }

    .wvarc-calendar--month .wvarc-calendar__event {
        border-radius: 0.52rem;
        gap: 0.42rem;
        min-width: 0;
        padding: 0.7rem !important;
    }

    .wvarc-calendar__event-topline {
        gap: 0.42rem;
    }

    .wvarc-calendar__event-club {
        font-size: 0.68rem;
        padding: 0.36rem 0.55rem;
    }

    .wvarc-calendar__event-calendar {
        font-size: 0.7rem;
        line-height: 1.2;
    }

    .wvarc-calendar--month .wvarc-calendar__event-link {
        font-size: clamp(1rem, 4.7vw, 1.18rem);
        line-height: 1.25;
    }

    .wvarc-calendar__event-time {
        border-radius: 999px;
        font-size: 0.76rem;
        line-height: 1.2;
        padding: 0.36rem 0.55rem;
    }
}

/* Very narrow phones: stack the date above the event cards. */
@media (max-width: 25rem) {
    .wvarc-calendar--month .wvarc-calendar__month-cell:not(.is-outside-month):has(.wvarc-calendar__event) {
        grid-template-columns: 1fr;
    }

    .wvarc-calendar--month .wvarc-calendar__month-day {
        grid-column: 1;
        width: 4.25rem;
    }

    .wvarc-calendar--month .wvarc-calendar__events {
        grid-column: 1;
        grid-row: 2;
    }
}