/**
 * Mana Supply — The Events Calendar (TEC v6) editorial styling.
 *
 * Two-layer strategy:
 *   1. Override TEC's --tec-* design tokens at the wrapper level so colors
 *      and typography cascade through unmodified TEC components.
 *   2. Custom layout for the chip filter strip, editorial heading, and
 *      redesigned event cards (paired with template overrides under
 *      child theme: tribe/events/v2/list.php, list/event.php,
 *      latest-past/event.php).
 *
 * Loaded only on TEC pages via mana_child_enqueue_tec_styles().
 */

/* ==========================================================================
   1. Brand tokens + TEC variable overrides
   ========================================================================== */

.tribe-common,
.tribe-events {
    /* Brand palette */
    --mana-green: #0D4F43;
    --mana-green-deep: #093B32;
    --mana-green-soft: rgba(13, 79, 67, 0.08);
    --mana-green-line: rgba(13, 79, 67, 0.18);
    --mana-dark: #272626;
    --mana-text: #2A2A2A;
    --mana-muted: #6B6B6B;
    --mana-rule: #E8E6E1;
    --mana-bg: #FFFFFF;
    --mana-bg-tint: #F7F5EF;
    --mana-radius: 12px;
    --mana-radius-sm: 8px;
    --mana-shadow: 0 2px 10px rgba(13, 79, 67, 0.06);
    --mana-shadow-hover: 0 6px 22px rgba(13, 79, 67, 0.12);
    --mana-transition: 180ms ease;
    --mana-font-head: 'Gotham Rounded Medium', 'Gotham Book', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --mana-font-body: 'Gotham Book', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --mana-font-serif: 'Fraunces', 'Georgia', 'Times New Roman', serif;

    /* Override TEC accent (#334aff blue) → Mana green */
    --tec-color-accent-primary: var(--mana-green);
    --tec-color-accent-primary-hover: var(--mana-green-deep);
    --tec-color-accent-primary-active: var(--mana-green-deep);
    --tec-color-accent-primary-background: var(--mana-green-soft);
    --tec-color-accent-primary-background-datepicker: var(--mana-green-soft);
    --tec-color-button-primary: var(--mana-green);
    --tec-color-button-primary-hover: var(--mana-green-deep);
    --tec-color-button-primary-active: var(--mana-green-deep);
    --tec-color-button-primary-background: var(--mana-green-soft);
    --tec-color-link-primary: var(--mana-text);
    --tec-color-link-accent: var(--mana-green);
    --tec-color-link-accent-hover: var(--mana-green-deep);
    --tec-color-icon-active: var(--mana-green);
    --tec-color-icon-focus: var(--mana-green);
    --tec-color-event-icon: var(--mana-text);
    --tec-color-event-icon-hover: var(--mana-green);
    --tec-color-text-primary: var(--mana-text);
    --tec-color-text-events-title: var(--mana-text);
    --tec-color-text-event-title: var(--mana-text);
    --tec-color-text-event-date: var(--mana-green);
    --tec-color-text-secondary-event-date: var(--mana-muted);
    --tec-color-border-default: var(--mana-rule);
    --tec-color-border-secondary: var(--mana-rule);
    --tec-color-border-active: var(--mana-green);
    --tec-color-border-hover: var(--mana-green);
    --tec-color-background-secondary: var(--mana-bg-tint);
    --tec-color-background-messages: var(--mana-green-soft);

    /* Events bar (search) submit button — TEC uses dedicated tokens here */
    --tec-color-background-events-bar-submit-button: var(--mana-green);
    --tec-color-background-events-bar-submit-button-hover: var(--mana-green-deep);
    --tec-color-background-events-bar-submit-button-active: var(--mana-green-deep);
    --tec-color-text-events-bar-submit-button: var(--mana-bg);
    --tec-color-text-events-bar-submit-button-hover: var(--mana-bg);
    --tec-color-text-events-bar-submit-button-active: var(--mana-bg);
    --tec-color-background-events-bar: var(--mana-bg);
    --tec-color-border-events-bar: var(--mana-rule);
    --tec-color-icon-events-bar: var(--mana-muted);
    --tec-color-icon-events-bar-active: var(--mana-green);
    --tec-color-icon-events-bar-hover: var(--mana-green);
    --tec-color-text-events-bar-input: var(--mana-text);
    --tec-color-text-events-bar-input-placeholder: var(--mana-muted);

    /* View selector tabs */
    --tec-color-background-view-selector: transparent;
    --tec-color-background-view-selector-tabs: transparent;
    --tec-color-background-view-selector-list-item-hover: var(--mana-green-soft);
    --tec-color-text-view-selector-list-item: var(--mana-text);
    --tec-color-text-view-selector-list-item-hover: var(--mana-green-deep);

    --tec-font-family-sans-serif: var(--mana-font-body);
}

/* Headings + interactive elements use the rounded display face */
.tribe-common .tribe-common-h1,
.tribe-common .tribe-common-h2,
.tribe-common .tribe-common-h3,
.tribe-common .tribe-common-h4,
.tribe-common .tribe-common-h5,
.tribe-common .tribe-common-h6,
.tribe-common .tribe-common-c-btn,
.tribe-common .tribe-common-c-btn-border,
.tribe-events .tribe-events-c-top-bar__today-button,
.tribe-events .tribe-events-c-search__button,
.tribe-events .tribe-events-c-view-selector__list-item-link {
    font-family: var(--mana-font-head);
    letter-spacing: -0.005em;
}

/* ==========================================================================
   2. Page chrome — container
   ========================================================================== */

.tribe-events .mana-events-container,
.tribe-events .tribe-events-l-container {
    padding-top: 1.75rem;
    padding-bottom: 4rem;
}

/* ==========================================================================
   3. Search + view selector bar
   ========================================================================== */

.tribe-events .tribe-events-c-events-bar {
    border: 1px solid var(--mana-rule);
    border-radius: var(--mana-radius);
    box-shadow: none;
    background: var(--mana-bg);
    padding: 0.5rem 0.75rem;
}

.tribe-events .tribe-events-c-search__button {
    border-radius: var(--mana-radius-sm);
    padding: 0.6rem 1.25rem;
    transition: transform var(--mana-transition);
}

.tribe-events .tribe-events-c-search__button:hover,
.tribe-events .tribe-events-c-search__button:focus {
    transform: translateY(-1px);
}

.tribe-events .tribe-events-c-search__input,
.tribe-events .tribe-common-form-control-text__input {
    border-radius: var(--mana-radius-sm);
}

/* ==========================================================================
   4. View selector pills (List / Month / Day)
   ----
   TEC's default active state is a 2px underline via .tribe-events-c-view-selector__list-item--active::after.
   We neutralize that and replace with a filled pill background.
   ========================================================================== */

.tribe-events .tribe-events-c-view-selector__list {
    gap: 0.4rem;
    padding: 0.25rem;
    background: transparent;
}

.tribe-events .tribe-events-c-view-selector__list-item {
    border-radius: var(--mana-radius-sm);
    background: transparent;
    overflow: visible;
}

.tribe-events .tribe-events-c-view-selector__list-item-link {
    border-radius: var(--mana-radius-sm) !important;
    padding: 0.55rem 1rem !important;
    border: 1px solid transparent !important;
    transition: background var(--mana-transition), color var(--mana-transition), border-color var(--mana-transition);
    position: relative;
    color: var(--mana-text) !important;
}

.tribe-events .tribe-events-c-view-selector__list-item-link:hover,
.tribe-events .tribe-events-c-view-selector__list-item-link:focus {
    background: var(--mana-green-soft) !important;
    color: var(--mana-green-deep) !important;
    border-color: var(--mana-green-line) !important;
}

/* Kill the default 2px underline on the active item */
.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link::after,
.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link:after {
    background-color: transparent !important;
    height: 0 !important;
    display: none !important;
    content: none !important;
}

.tribe-events .tribe-events-c-view-selector__list .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link {
    background: var(--mana-green) !important;
    color: var(--mana-bg) !important;
    border-color: var(--mana-green) !important;
}

.tribe-events .tribe-events-c-view-selector__list .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link:hover,
.tribe-events .tribe-events-c-view-selector__list .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link:focus {
    background: var(--mana-green-deep) !important;
    color: var(--mana-bg) !important;
    border-color: var(--mana-green-deep) !important;
}

.tribe-events .tribe-events-c-view-selector__list .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-text {
    color: var(--mana-bg) !important;
    font-weight: 500 !important;
}

/* ==========================================================================
   5. Hide TEC's vertical Filter Bar — chip strip replaces it
   ========================================================================== */

.tribe-events .tribe-filter-bar,
.tribe-events.tribe-events--has-filter-bar .tribe-filter-bar,
.tribe-events--filter-bar-vertical .tribe-filter-bar {
    display: none !important;
}

/* Reclaim full width from the filter bar grid */
.tribe-events.tribe-events--has-filter-bar.tribe-events--filter-bar-vertical .tribe-events-l-container,
.tribe-events.tribe-events--has-filter-bar .tribe-events-l-container {
    grid-template-columns: 1fr !important;
    display: block !important;
}

/* ==========================================================================
   6. Chip filter strip
   ----
   Hardcoded colors (not vars) for criticals so chips render even if the
   --mana-* tokens fail to inherit through some unexpected ancestor. High
   specificity (`.mana-events-chips .mana-events-chips__link`) so parent
   theme defaults can't strip the border/padding.
   ========================================================================== */

.mana-events-chips {
    margin: 3rem 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.mana-events-chips .mana-events-chips__row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.6rem 0.75rem;
    row-gap: 0.6rem;
}

.mana-events-chips .mana-events-chips__label {
    font-family: 'Gotham Rounded Medium', 'Gotham Book', 'Helvetica Neue', sans-serif;
    color: #6B6B6B;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-right: 0.75rem;
    padding-top: 0.65rem; /* visually centers cap-text against chip vertical center */
    flex-shrink: 0;
    min-width: 72px;
    line-height: 1.2;
}

.mana-events-chips .mana-events-chips__list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.mana-events-chips .mana-events-chips__item {
    display: inline-flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent;
    border: 0;
}

.mana-events-chips .mana-events-chips__link,
.mana-events-chips a.mana-events-chips__link {
    display: inline-flex !important;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1rem !important;
    border: 1px solid #D9D6CE !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    color: #2A2A2A !important;
    text-decoration: none !important;
    font-family: 'Gotham Rounded Medium', 'Gotham Book', 'Helvetica Neue', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    box-shadow: none;
    transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
    cursor: pointer;
}

.mana-events-chips .mana-events-chips__link:hover,
.mana-events-chips .mana-events-chips__link:focus {
    border-color: #0D4F43 !important;
    color: #093B32 !important;
    background: rgba(13, 79, 67, 0.06) !important;
    text-decoration: none !important;
}

.mana-events-chips .mana-events-chips__item.is-active .mana-events-chips__link,
.mana-events-chips .mana-events-chips__item.is-active a.mana-events-chips__link {
    background: #0D4F43 !important;
    border-color: #0D4F43 !important;
    color: #FFFFFF !important;
}

.mana-events-chips .mana-events-chips__item.is-active .mana-events-chips__link:hover,
.mana-events-chips .mana-events-chips__item.is-active .mana-events-chips__link:focus {
    background: #093B32 !important;
    border-color: #093B32 !important;
    color: #FFFFFF !important;
}

.mana-events-chips .mana-events-chips__count {
    font-size: 0.7rem;
    font-weight: 400;
    color: #8A8A8A;
    letter-spacing: 0.04em;
    padding: 0.05rem 0.4rem;
    background: rgba(13, 79, 67, 0.06);
    border-radius: 999px;
    line-height: 1.4;
}

.mana-events-chips .mana-events-chips__item.is-active .mana-events-chips__count {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.18);
}

/* ==========================================================================
   7. Editorial heading
   ========================================================================== */

.mana-events-heading {
    margin: 4rem 0 2rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--mana-rule);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.mana-events-heading__title {
    margin-bottom: 0.5rem;
}

.mana-events-heading__title {
    font-family: var(--mana-font-serif);
    font-weight: 500;
    color: var(--mana-text);
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin: 0;
}

.mana-events-heading__title em {
    font-style: italic;
    font-weight: 500;
    color: var(--mana-green);
}

.mana-events-heading__meta {
    font-family: var(--mana-font-head);
    color: var(--mana-muted);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.mana-events-heading__sep {
    margin: 0 0.45rem;
    color: var(--mana-rule);
}

/* ==========================================================================
   8. Event cards — editorial layout
   ========================================================================== */

/* Reset the default row + card classes from TEC so our layout takes over */
.tribe-events .mana-event-card-row {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--mana-rule);
    display: block;
}

.tribe-events .mana-events-list,
.tribe-events ul.tribe-events-calendar-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tribe-events .mana-event-card {
    display: grid;
    grid-template-columns: 110px 1fr 240px;
    gap: 2.25rem;
    align-items: center;
    padding: 2rem 0;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transition: opacity var(--mana-transition);
}

.tribe-events .mana-event-card-row:last-child .mana-event-card {
    border-bottom: 1px solid var(--mana-rule);
}

.tribe-events .mana-event-card:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
}

/* Big editorial date block */
.mana-event-card__date {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-family: var(--mana-font-serif);
    color: var(--mana-text);
}

.mana-event-card__day {
    font-size: clamp(3.25rem, 6vw, 4.75rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
}

.mana-event-card__month-year {
    font-family: var(--mana-font-head);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.72rem;
    color: var(--mana-muted);
}

.mana-event-card__sep {
    margin: 0 0.35em;
    color: var(--mana-rule);
}

/* Content column */
.mana-event-card__content {
    min-width: 0; /* allow text truncation/wrap */
}

.mana-event-card .mana-event-card__title {
    font-family: var(--mana-font-serif);
    font-weight: 500;
    font-size: clamp(1.35rem, 2.5vw, 1.85rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 0.6rem;
    color: var(--mana-text);
}

.mana-event-card__title-link {
    color: inherit;
    text-decoration: none;
    transition: color var(--mana-transition);
}

.mana-event-card__title-link:hover,
.mana-event-card__title-link:focus {
    color: var(--mana-green);
    text-decoration: none;
}

.mana-event-card__meta {
    font-family: var(--mana-font-head);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mana-muted);
    margin-bottom: 0.85rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    line-height: 1.4;
}

.mana-event-card__meta > span {
    display: inline-flex;
    align-items: center;
}

.mana-event-card__meta-sep {
    margin: 0 0.6rem;
    color: var(--mana-rule);
    letter-spacing: 0;
}

.mana-event-card__description {
    font-family: var(--mana-font-body);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--mana-text);
    margin: 0;
    max-width: 56ch;
}

.mana-event-card__description p:last-child {
    margin-bottom: 0;
}

/* Featured image with category overlay */
.mana-event-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: var(--mana-radius-sm);
    overflow: hidden;
    background: var(--mana-bg-tint);
    text-decoration: none;
}

.mana-event-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms ease;
}

.mana-event-card__media:hover .mana-event-card__image {
    transform: scale(1.03);
}

.mana-event-card__category-chip {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: rgba(0, 0, 0, 0.55);
    color: var(--mana-bg);
    font-family: var(--mana-font-head);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.35rem 0.65rem;
    border-radius: 4px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Past event card — match site brand fonts (Gotham) + sage green accents
   per QA feedback. Editorial serif is reserved for upcoming events + the
   main "Upcoming this season" heading. */
.tribe-events .mana-event-card--past .mana-event-card__day {
    font-family: var(--mana-font-head);
    font-weight: 500;
    color: var(--mana-green);
    letter-spacing: -0.02em;
}

.tribe-events .mana-event-card--past .mana-event-card__month-year {
    color: var(--mana-green);
}

.tribe-events .mana-event-card--past .mana-event-card__sep {
    color: var(--mana-green-line);
}

.tribe-events .mana-event-card--past .mana-event-card__title {
    font-family: var(--mana-font-head);
    font-weight: 500;
    color: var(--mana-green);
}

.tribe-events .mana-event-card--past .mana-event-card__title-link {
    color: var(--mana-green);
}

.tribe-events .mana-event-card--past .mana-event-card__title-link:hover,
.tribe-events .mana-event-card--past .mana-event-card__title-link:focus {
    color: var(--mana-green-deep);
}

.tribe-events .mana-event-card--past .mana-event-card__description {
    color: var(--mana-text);
}

.tribe-events .mana-event-card--past .mana-event-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.05) 100%);
    pointer-events: none;
}

/* ==========================================================================
   9. "Latest Past Events" heading — site brand font + sage green per QA
   ========================================================================== */

.tribe-events .tribe-events-calendar-latest-past__heading {
    font-family: var(--mana-font-head);
    font-weight: 500;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    color: var(--mana-green);
    border-top: 1px solid var(--mana-rule);
    padding-top: 2rem;
    margin: 3rem 0 1rem;
    letter-spacing: -0.005em;
}

/* ==========================================================================
   10. Top bar — Today / prev-next / date label
   ========================================================================== */

.tribe-events .tribe-events-c-top-bar {
    margin-top: 1.25rem;
}

.tribe-events .tribe-events-c-top-bar__today-button {
    border: 1px solid var(--mana-green);
    background: var(--mana-bg);
    color: var(--mana-green);
    border-radius: var(--mana-radius-sm);
    padding: 0.5rem 1.1rem;
    transition: background var(--mana-transition), color var(--mana-transition);
}

.tribe-events .tribe-events-c-top-bar__today-button:hover,
.tribe-events .tribe-events-c-top-bar__today-button:focus {
    background: var(--mana-green);
    color: var(--mana-bg);
}

.tribe-events .tribe-events-c-top-bar__nav-link {
    border-radius: 999px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mana-green);
    transition: background var(--mana-transition);
}

.tribe-events .tribe-events-c-top-bar__nav-link:hover,
.tribe-events .tribe-events-c-top-bar__nav-link:focus {
    background: var(--mana-green-soft);
}

/* ==========================================================================
   11. Month grid
   ========================================================================== */

.tribe-events .tribe-events-calendar-month__header-column-title {
    color: var(--mana-green);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-family: var(--mana-font-head);
}

.tribe-events .tribe-events-calendar-month__day:hover {
    background: var(--mana-bg-tint);
}

.tribe-events .tribe-events-calendar-month__day-cell--selected {
    background: var(--mana-green-soft);
    border-radius: var(--mana-radius-sm);
}

.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-daynum {
    background: var(--mana-green);
    color: var(--mana-bg);
    border-radius: 999px;
    padding: 0.15em 0.55em;
    display: inline-block;
}

/* Desktop: when today has events the day number is wrapped in an <a>
   __day-date-link, and TEC's stock rule colors that link with
   --tec-color-day-marker-current-month (dark text) — winning over the
   white color set on the daynum parent. Force the link white in all
   interactive states so the digit stays readable on the green pill. */
.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-link,
.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-link:hover,
.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-link:focus,
.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-link:active {
    color: var(--mana-bg);
}

/* Active (mobile "today" / tapped) day: ensure the day number stays visible.
   TEC's stock CSS sets the wrapping __day-date to white on --selected but
   __day-date-daynum has its own explicit color rule that doesn't inherit, so
   the number rendered invisible against the green background. */
.tribe-events .tribe-events-calendar-month__day-cell--selected .tribe-events-calendar-month__day-date,
.tribe-events .tribe-events-calendar-month__day-cell--selected .tribe-events-calendar-month__day-date-daynum {
    color: var(--mana-bg);
}

/* ==========================================================================
   12. Empty-state notice
   ========================================================================== */

.tribe-events .tribe-events-c-messages__message {
    border: 1px solid var(--mana-rule);
    border-radius: var(--mana-radius);
    background: var(--mana-bg-tint);
    color: var(--mana-muted);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1rem;
    font-family: var(--mana-font-body);
    text-align: center;
    font-size: 0.95rem;
}

/* ==========================================================================
   13. Responsive
   ========================================================================== */

@media (max-width: 1024px) {
    .tribe-events .mana-event-card {
        grid-template-columns: 90px 1fr 200px;
        gap: 1.5rem;
        padding: 1.5rem 0;
    }

    .mana-events-heading {
        margin-top: 2rem;
    }

    .mana-events-chips__label {
        min-width: 60px;
    }
}

@media (max-width: 720px) {
    .tribe-events .mana-event-card {
        grid-template-columns: 80px 1fr;
        gap: 1.25rem;
        padding: 1.5rem 0;
    }

    .mana-event-card__media {
        grid-column: 1 / -1;
        aspect-ratio: 16 / 9;
        margin-top: 0.5rem;
    }

    .mana-events-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .mana-events-chips__row {
        align-items: flex-start;
    }

    .mana-events-chips__label {
        min-width: 0;
        width: 100%;
        margin-bottom: 0.15rem;
    }

    .mana-event-card .mana-event-card__title {
        font-size: 1.25rem;
    }

    .mana-event-card__day {
        font-size: 2.75rem;
    }
}

@media (max-width: 480px) {
    .tribe-events .mana-event-card {
        grid-template-columns: 64px 1fr;
        gap: 1rem;
    }

    .mana-event-card__day {
        font-size: 2.25rem;
    }

    .mana-event-card__meta {
        font-size: 0.65rem;
    }
}