/* Class-card palettes are isolated from community event and featured-event cards. */
.events-grid > .class-card {
    background: linear-gradient(135deg, #7fd9f5 0%, #4fb4dc 100%) !important;
    border-left-color: #0a7399;
    color: #0e2a2f !important;
}

.events-grid > .class-card.class-card--purple {
    background: linear-gradient(135deg, #a86db0 0%, #7b4e99 100%) !important;
    border-left-color: #4b1f66;
    color: #fff !important;
}

.events-grid > .class-card.class-card--gold {
    background: linear-gradient(135deg, #f2d26b 0%, #e9b94d 100%) !important;
    border-left-color: #946400;
    color: #2f2800 !important;
}

.events-grid > .class-card.class-card--magenta {
    background: linear-gradient(135deg, #d94b9b 0%, #a51f70 100%) !important;
    border-left-color: #76134d;
    color: #fff !important;
}

.events-grid > .class-card.class-card--orange {
    background: linear-gradient(135deg, #ed9146 0%, #c55d21 100%) !important;
    border-left-color: #843812;
    color: #2d1608 !important;
}

.events-grid > .class-card.class-card--teal {
    background: linear-gradient(135deg, #45b5ad 0%, #217d7b 100%) !important;
    border-left-color: #125759;
    color: #fff !important;
}

.events-grid > .class-card.class-card--purple .btn {
    background-color: #4a124d;
    color: #fff;
}

.events-grid > .class-card.class-card--purple .btn:hover,
.events-grid > .class-card.class-card--purple .btn:focus-visible {
    background-color: #350d38;
}

.events-grid > .class-card.class-card--gold .btn {
    background-color: #8a7a19;
    color: #fff;
}

.events-grid > .class-card.class-card--gold .btn:hover,
.events-grid > .class-card.class-card--gold .btn:focus-visible {
    background-color: #6f6214;
}

.events-grid > .class-card.class-card--magenta .btn,
.events-grid > .class-card.class-card--teal .btn {
    background-color: #fff;
    color: #42102f;
}

.events-grid > .class-card.class-card--orange .btn {
    background-color: #74300f;
    color: #fff;
}

.events-grid > .class-card.class-card--magenta .btn:hover,
.events-grid > .class-card.class-card--magenta .btn:focus-visible,
.events-grid > .class-card.class-card--teal .btn:hover,
.events-grid > .class-card.class-card--teal .btn:focus-visible {
    background-color: #f2f2f2;
}

.events-grid > .class-card.class-card--orange .btn:hover,
.events-grid > .class-card.class-card--orange .btn:focus-visible {
    background-color: #542109;
}

/* Keep Craft Club listings visually tied to the dedicated Craft Club widget. */
.events-grid > .class-card.class-card--craft-club,
.events-grid > .class-card.class-card--craft-club:nth-of-type(3n+2),
.events-grid > .class-card.class-card--craft-club:nth-of-type(3n+3),
.events-grid > .class-card.class-card--craft-club.class-card--featured {
    background: linear-gradient(145deg, #a81924 0%, #720810 100%) !important;
    border-left-color: #57060c;
    color: #fff !important;
}

.events-grid > .class-card.class-card--craft-club .marker-craft-club {
    background: #f4c542;
    color: #57060c;
}

.events-grid > .class-card.class-card--craft-club .btn {
    background-color: #fff !important;
    color: #720810;
}

.events-grid > .class-card.class-card--craft-club .btn:hover,
.events-grid > .class-card.class-card--craft-club .btn:focus-visible {
    background-color: #f3d9dc !important;
    color: #57060c;
}

/* Private bookings use process black instead of participating in the mixed palette. */
.events-grid > .class-card.class-card--private {
    background: linear-gradient(135deg, #292929 0%, #080808 100%) !important;
    border-left-color: #000;
    color: #fff !important;
}

.events-grid > .class-card.class-card--private .btn {
    background-color: #fff !important;
    color: #111;
}

.events-grid > .class-card.class-card--private .btn:hover,
.events-grid > .class-card.class-card--private .btn:focus-visible {
    background-color: #d9d9d9 !important;
}

.events-grid > .class-card.class-card--past-light,
.events-grid > .class-card.class-card--past-light:nth-of-type(3n+2),
.events-grid > .class-card.class-card--past-light:nth-of-type(3n+3) {
    background: linear-gradient(135deg, #e5e5e5 0%, #bdbdbd 100%) !important;
    border-left-color: #707070;
    color: #202020 !important;
}

.events-grid > .class-card.class-card--past-dark,
.events-grid > .class-card.class-card--past-dark:nth-of-type(3n+2),
.events-grid > .class-card.class-card--past-dark:nth-of-type(3n+3) {
    background: linear-gradient(135deg, #595959 0%, #333 100%) !important;
    border-left-color: #1f1f1f;
    color: #fff !important;
}

.events-grid > .class-card.class-card--past .btn,
.events-grid > .class-card.class-card--past:nth-of-type(3n+2) .btn,
.events-grid > .class-card.class-card--past:nth-of-type(3n+3) .btn {
    background-color: #5e5e5e !important;
    color: #fff;
}

.events-grid > .class-card.class-card--past .btn:hover,
.events-grid > .class-card.class-card--past .btn:focus-visible,
.events-grid > .class-card.class-card--past:nth-of-type(3n+2) .btn:hover,
.events-grid > .class-card.class-card--past:nth-of-type(3n+2) .btn:focus-visible,
.events-grid > .class-card.class-card--past:nth-of-type(3n+3) .btn:hover,
.events-grid > .class-card.class-card--past:nth-of-type(3n+3) .btn:focus-visible {
    background-color: #444 !important;
}

.events-grid > .class-card.class-card--clag,
.events-grid > .class-card.class-card--clag:nth-of-type(3n+2),
.events-grid > .class-card.class-card--clag:nth-of-type(3n+3),
.events-grid > .class-card.class-card--clag.class-card--featured,
.events-grid > .class-card.class-card--clag.class-card--past-light,
.events-grid > .class-card.class-card--clag.class-card--past-dark {
    background: linear-gradient(135deg, #668014 0%, #455a0d 100%) !important;
    border-left-color: #2f3d09;
    color: #fff !important;
}

.events-grid > .class-card.class-card--clag .marker-clag-event {
    background: rgba(255, 255, 255, 0.92);
    color: #455a0d;
}

.events-grid > .class-card.class-card--clag .event-instructor {
    background: rgba(255, 255, 255, 0.22);
}

.events-grid > .class-card.class-card--clag .btn,
.events-grid > .class-card.class-card--clag:nth-of-type(3n+2) .btn,
.events-grid > .class-card.class-card--clag:nth-of-type(3n+3) .btn,
.events-grid > .class-card.class-card--clag.class-card--featured .btn,
.events-grid > .class-card.class-card--clag.class-card--past .btn {
    background-color: #fff !important;
    color: #455a0d;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.28);
}

.events-grid > .class-card.class-card--clag .btn:hover,
.events-grid > .class-card.class-card--clag .btn:focus-visible,
.events-grid > .class-card.class-card--clag:nth-of-type(3n+2) .btn:hover,
.events-grid > .class-card.class-card--clag:nth-of-type(3n+2) .btn:focus-visible,
.events-grid > .class-card.class-card--clag:nth-of-type(3n+3) .btn:hover,
.events-grid > .class-card.class-card--clag:nth-of-type(3n+3) .btn:focus-visible,
.events-grid > .class-card.class-card--clag.class-card--featured .btn:hover,
.events-grid > .class-card.class-card--clag.class-card--featured .btn:focus-visible,
.events-grid > .class-card.class-card--clag.class-card--past .btn:hover,
.events-grid > .class-card.class-card--clag.class-card--past .btn:focus-visible {
    background-color: #e7f0c9 !important;
    color: #2f3d09;
}