/*
 * First Promise Mobile Events v1.0.2
 *
 * Native TEC mobile month UI is preserved:
 * - month/date control
 * - search/view controls
 * - mini calendar
 * - bottom previous / This Month / next navigation
 * - Subscribe to calendar
 *
 * Only TEC's native selected-day event block is hidden and replaced with the
 * richer all-month agenda inserted immediately before TEC's native nav.
 */

.fp-mobile-events-agenda {
    display: none;
}

@media (max-width: 767px) {

    /*
     * TEC datepicker: when another month is open, TEC can mark the real/current
     * month with the accent background. Force the month label to remain visible
     * on that accent background.
     */
    .tribe-events .datepicker .month.active,
    .tribe-events .datepicker .month.active:hover,
    .tribe-events .datepicker .month.active.focused,
    .tribe-events .datepicker .month.active:focus {
        color: #FFFFFF !important;
        text-shadow: none !important;
    }

    /* Hide TEC's original selected-day result only; keep its wrapper/nav. */
    .tribe-events-calendar-month-mobile-events__mobile-day {
        display: none !important;
    }

    .fp-mobile-events-agenda {
        display: block;
        width: 100%;
        margin: 26px 0 8px;
        padding: 0;
        color: #435761;
        box-sizing: border-box;
    }

    .fp-mobile-events-day {
        width: 100%;
        margin: 0 0 24px;
        padding: 0;
        box-sizing: border-box;
    }

    .fp-mobile-events-day:last-child {
        margin-bottom: 14px;
    }

    /* Date group: AUGUST 20 -------- */
    .fp-mobile-events-day__heading {
        display: grid;
        grid-template-columns: max-content minmax(24px, 1fr);
        gap: 12px;
        align-items: center;
        width: 100%;
        margin: 0 0 9px;
    }

    .fp-mobile-events-day__heading h2 {
        margin: 0 !important;
        padding: 0 !important;
        color: #123F52 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        letter-spacing: 0.035em !important;
        text-transform: uppercase;
    }

    .fp-mobile-events-day__heading span {
        display: block;
        width: 100%;
        height: 1px;
        background: #D6E2E7;
    }

    .fp-mobile-events-day__events {
        width: 100%;
    }

    /* Compact Zac-inspired information block; not a large floating card. */
    .fp-mobile-event-card {
        position: relative;
        width: 100%;
        margin: 0;
        /* Keep content clearly separated from the left accent line. */
        padding: 7px 4px 16px 20px !important;
        background: transparent;
        border: 0;
        border-bottom: 1px solid #E4ECEF;
        border-radius: 0;
        box-shadow: none;
        box-sizing: border-box;
    }

    .fp-mobile-event-card + .fp-mobile-event-card {
        padding-top: 15px;
    }

    .fp-mobile-event-card:last-child {
        border-bottom: 0;
        padding-bottom: 4px;
    }

    .fp-mobile-event-card::before {
        content: "";
        position: absolute;
        top: 7px;
        bottom: 16px;
        left: 4px;
        width: 2px;
        border-radius: 3px;
        background: #0A93C7;
    }

    .fp-mobile-event-card__time {
        margin: 0 0 4px !important;
        padding: 0 !important;
        color: #60737C !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
    }

    .fp-mobile-event-card__title {
        margin: 0 0 8px !important;
        padding: 0 !important;
        color: #123F52 !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
    }

    .fp-mobile-event-card__title a,
    .fp-mobile-event-card__title a:visited {
        color: #123F52 !important;
        text-decoration: none !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow-wrap: anywhere;
    }

    .fp-mobile-event-card__title a:hover,
    .fp-mobile-event-card__title a:focus {
        color: #0A93C7 !important;
        text-decoration: underline !important;
        text-underline-offset: 3px;
    }

    .fp-mobile-event-card__category-wrap {
        margin: 0 0 9px !important;
        padding: 0 !important;
    }

    .fp-mobile-event-card__category {
        display: inline-flex;
        align-items: center;
        min-height: 22px;
        padding: 4px 8px;
        border-radius: 999px;
        background: #EAF7FB;
        color: #087EAA;
        font-size: 10.5px;
        font-weight: 700;
        line-height: 1.15;
    }

    .fp-mobile-event-card__category--first-promise-events {
        background: #EAF7FB;
        color: #087EAA;
    }

    .fp-mobile-event-card__category--community-events {
        background: #ECF9F0;
        color: #238B43;
    }

    .fp-mobile-event-card__location {
        margin: 0 0 9px;
        padding: 0;
    }

    .fp-mobile-event-card__venue {
        margin: 0 0 2px !important;
        padding: 0 !important;
        color: #123F52 !important;
        font-size: 12px !important;
        font-weight: 650 !important;
        line-height: 1.4 !important;
    }

    .fp-mobile-event-card__address {
        margin: 0 !important;
        padding: 0 !important;
        color: #60737C !important;
        font-size: 11px !important;
        font-weight: 400 !important;
        line-height: 1.45 !important;
    }

    .fp-mobile-event-card__excerpt {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        margin: 0 !important;
        padding: 0 !important;
        color: #435761 !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
    }

    .fp-mobile-events-agenda__empty {
        margin: 0 0 18px;
        padding: 14px 15px;
        background: #F4FAFB;
        border: 1px solid #DCE7EA;
        border-radius: 10px;
    }

    .fp-mobile-events-agenda__empty p {
        margin: 0 !important;
        color: #60737C !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
}