/*
 * tandem guru Event Booking v64
 * Server-rendered category colours for Upcoming Events cards.
 */

/* Full or explicitly suppressed events must never occupy a visible card slot. */
.ebm-upcoming-events > .eb-event-full,
.ebm-upcoming-events > .tg-eb-full-event,
.eb-upcoming-events > .eb-event-full,
.eb-upcoming-events > .tg-eb-full-event,
.eb-events-module > .eb-event-full,
.eb-events-module > .tg-eb-full-event,
.mod-eb-events .eb-event-full,
.mod-eb-events .tg-eb-full-event,
.mod-eb-upcoming-events .eb-event-full,
.mod-eb-upcoming-events .tg-eb-full-event,
.module-eb-events .eb-event-full,
.module-eb-events .tg-eb-full-event,
.tg-eb-excluded-category,
.eb-invisible-to-visitors {
    display: none !important;
}

/*
 * The variables and the final background are written directly into each
 * rendered .up-event-item by the direct foreach-loop template override. These rules
 * also defeat fixed module backgrounds and pseudo-element colour layers.
 */
.ebm-upcoming-events > .up-event-item.tg-category-coloured,
.eb-upcoming-events > .up-event-item.tg-category-coloured,
.eb-events-module > .up-event-item.tg-category-coloured,
.mod-eb-events .up-event-item.tg-category-coloured,
.mod-eb-upcoming-events .up-event-item.tg-category-coloured,
.module-eb-events .up-event-item.tg-category-coloured {
    background-color: var(--tg-category-bg-end) !important;
    background-image: linear-gradient(
        180deg,
        var(--tg-category-bg-start) 0%,
        var(--tg-category-bg-mid) 54%,
        var(--tg-category-bg-end) 100%
    ) !important;
    border-color: var(--tg-category-border) !important;
}

.ebm-upcoming-events > .up-event-item.tg-category-coloured::before,
.ebm-upcoming-events > .up-event-item.tg-category-coloured::after,
.eb-upcoming-events > .up-event-item.tg-category-coloured::before,
.eb-upcoming-events > .up-event-item.tg-category-coloured::after,
.eb-events-module > .up-event-item.tg-category-coloured::before,
.eb-events-module > .up-event-item.tg-category-coloured::after {
    border-color: var(--tg-category-border) !important;
}

@media (max-width: 767px) {
    .ebm-upcoming-events,
    .eb-upcoming-events,
    .eb-events-module {
        width: 100%;
        max-width: 100%;
    }

    .ebm-upcoming-events > *,
    .eb-upcoming-events > *,
    .eb-events-module > * {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* v65: the card itself is the only full-size colour layer. */
.ebm-upcoming-events > .up-event-item.tg-category-coloured,
.eb-upcoming-events > .up-event-item.tg-category-coloured,
.eb-events-module > .up-event-item.tg-category-coloured,
.mod-eb-events .up-event-item.tg-category-coloured,
.mod-eb-upcoming-events .up-event-item.tg-category-coloured,
.module-eb-events .up-event-item.tg-category-coloured {
    isolation: isolate !important;
    background-color: var(--tg-category-bg-end) !important;
    background-image: linear-gradient(
        180deg,
        var(--tg-category-bg-start) 0%,
        var(--tg-category-bg-mid) 54%,
        var(--tg-category-bg-end) 100%
    ) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    background-position: 0 0 !important;
}

/* Remove any full-card overlay supplied by an older template or theme. */
.ebm-upcoming-events > .up-event-item.tg-category-coloured::after,
.eb-upcoming-events > .up-event-item.tg-category-coloured::after,
.eb-events-module > .up-event-item.tg-category-coloured::after,
.mod-eb-events .up-event-item.tg-category-coloured::after,
.mod-eb-upcoming-events .up-event-item.tg-category-coloured::after,
.module-eb-events .up-event-item.tg-category-coloured::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
}

/* Keep only the narrow top accent instead of a colour-covering pseudo layer. */
.ebm-upcoming-events > .up-event-item.tg-category-coloured::before,
.eb-upcoming-events > .up-event-item.tg-category-coloured::before,
.eb-events-module > .up-event-item.tg-category-coloured::before,
.mod-eb-events .up-event-item.tg-category-coloured::before,
.mod-eb-upcoming-events .up-event-item.tg-category-coloured::before,
.module-eb-events .up-event-item.tg-category-coloured::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    height: 3px !important;
    z-index: 4 !important;
    background: linear-gradient(
        90deg,
        #ffd85b 0%,
        var(--tg-category-color) 52%,
        var(--tg-category-bg-end) 100%
    ) !important;
    pointer-events: none !important;
}