/**
 * TMU Events Feed Block — Frontend Styles
 *
 * Mirrors the visual design of the Events Archive page (acf/events-archive-filters).
 *
 * Color reference (from _variables.scss):
 *   #00263a  = $primary-blue
 *   #0C509D  = $blue-highlight
 *   #D6E0EA  = $cool-blue-highlight
 *   #516c8c  = $cool-blue-shadow
 *   #ffc61e  = $gold
 *
 * Font reference:
 *   'Roboto Condensed', 'Helvetica', 'Arial', sans-serif  = $font-roboto
 *   'Inter', 'Helvetica', 'Arial', sans-serif             = $font-inter
 */

/* ================================================================
   Grid Layout — Wide Block Area
   Mirrors @include grid-responsive() from the ESWP theme framework.
   Applies only when the block is a direct child of the wide content area.
   The block sets up its own named-column grid; __inner insets to columns-start/columns-end.
   ================================================================ */

.wide-block-area > .acf-innerblocks-container > .wp-block-tmu-events-feed {
    width: 100%;
    display: grid;
    grid-template-columns:
        [window-start] 1fr
        [columns-start column-1-start]  calc(min(var(--grid-viewport-width, 100vw), 93.5rem) / 12 - 2.1666666667rem)
        [column-1-end  column-2-start]  calc(min(var(--grid-viewport-width, 100vw), 93.5rem) / 12 - 2.1666666667rem)
        [column-2-end  column-3-start]  calc(min(var(--grid-viewport-width, 100vw), 93.5rem) / 12 - 2.1666666667rem)
        [column-3-end  column-4-start]  calc(min(var(--grid-viewport-width, 100vw), 93.5rem) / 12 - 2.1666666667rem)
        [column-4-end  column-5-start]  calc(min(var(--grid-viewport-width, 100vw), 93.5rem) / 12 - 2.1666666667rem)
        [column-5-end  column-6-start]  calc(min(var(--grid-viewport-width, 100vw), 93.5rem) / 12 - 2.1666666667rem)
        [column-6-end  column-7-start]  calc(min(var(--grid-viewport-width, 100vw), 93.5rem) / 12 - 2.1666666667rem)
        [column-7-end  column-8-start]  calc(min(var(--grid-viewport-width, 100vw), 93.5rem) / 12 - 2.1666666667rem)
        [column-8-end  column-9-start]  calc(min(var(--grid-viewport-width, 100vw), 93.5rem) / 12 - 2.1666666667rem)
        [column-9-end  column-10-start] calc(min(var(--grid-viewport-width, 100vw), 93.5rem) / 12 - 2.1666666667rem)
        [column-10-end column-11-start] calc(min(var(--grid-viewport-width, 100vw), 93.5rem) / 12 - 2.1666666667rem)
        [column-11-end column-12-start] calc(min(var(--grid-viewport-width, 100vw), 93.5rem) / 12 - 2.1666666667rem)
        [column-12-end columns-end] 1fr [window-end];
    column-gap: 2rem;
    padding: 4.0625rem 0 5rem; /* matches events-archive block vertical rhythm */
}

@media (max-width: 80rem) {
    .wide-block-area > .acf-innerblocks-container > .wp-block-tmu-events-feed {
        grid-template-columns:
            [window-start] 1fr
            [columns-start column-1-start] calc(min(var(--grid-viewport-width, 100vw), 80rem) / 6 - 2.3333333333rem)
            [column-1-end  column-2-start] calc(min(var(--grid-viewport-width, 100vw), 80rem) / 6 - 2.3333333333rem)
            [column-2-end  column-3-start] calc(min(var(--grid-viewport-width, 100vw), 80rem) / 6 - 2.3333333333rem)
            [column-3-end  column-4-start] calc(min(var(--grid-viewport-width, 100vw), 80rem) / 6 - 2.3333333333rem)
            [column-4-end  column-5-start] calc(min(var(--grid-viewport-width, 100vw), 80rem) / 6 - 2.3333333333rem)
            [column-5-end  column-6-start] calc(min(var(--grid-viewport-width, 100vw), 80rem) / 6 - 2.3333333333rem)
            [column-6-end columns-end] 1fr [window-end];
        column-gap: 2rem;
        padding: 2.5rem 0 3rem;
    }
}

@media (max-width: 48rem) {
    .wide-block-area > .acf-innerblocks-container > .wp-block-tmu-events-feed {
        grid-template-columns:
            [window-start] 1fr
            [columns-start column-1-start] calc(min(var(--grid-viewport-width, 100vw), 48rem) / 4 - 1.25rem)
            [column-1-end  column-2-start] calc(min(var(--grid-viewport-width, 100vw), 48rem) / 4 - 1.25rem)
            [column-2-end  column-3-start] calc(min(var(--grid-viewport-width, 100vw), 48rem) / 4 - 1.25rem)
            [column-3-end  column-4-start] calc(min(var(--grid-viewport-width, 100vw), 48rem) / 4 - 1.25rem)
            [column-4-end columns-end] 1fr [window-end];
        column-gap: 1rem;
    }
}

/* Inner wrapper — insets content to columns-start/columns-end, same as every other block */
.tmu-events-feed__inner {
    width: 100%;
    grid-column-start: columns-start;
    grid-column-end: columns-end;
}

/* ================================================================
   Block Wrapper
   ================================================================ */

.tmu-events-feed {
    /* Grid and vertical padding applied via wide-area context selector above */
}

/* ================================================================
   Header (heading + view-all link)
   ================================================================ */

.tmu-events-feed__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    border-top: 4px solid #ffc61e; /* $gold — matches archive month-divider */
    padding-top: 1rem;
    margin-bottom: 3.125rem; /* ~50px */
}

.tmu-events-feed__heading {
    margin: 0;
    font-family: 'Roboto Condensed', 'Helvetica', 'Arial', sans-serif;
    font-size: 2.25rem; /* 36px — proportional to context, not full archive 60px */
    font-weight: 700;
    line-height: 1.2;
    color: #516c8c; /* $cool-blue-shadow — matches archive month heading */
    text-transform: uppercase;
}

.tmu-events-feed__view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    font-family: 'Inter', 'Helvetica', 'Arial', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
    color: #0C509D; /* $blue-highlight */
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.25s ease;
}

.tmu-events-feed__view-all:hover,
.tmu-events-feed__view-all:focus {
    color: #516c8c; /* $cool-blue-shadow */
}

.tmu-events-feed__view-all svg {
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.tmu-events-feed__view-all:hover svg {
    transform: translateX(3px);
}

/* ================================================================
   Event List
   ================================================================ */

.tmu-events-feed__events {
    display: flex;
    flex-direction: column;
}

/* ================================================================
   Individual Event — flat row matching archive style
   ================================================================ */

.tmu-events-feed__event {
    padding: 1.5rem 0 2rem; /* matches archive rem(24px) 0 rem(32px) */
    border-bottom: 1px solid #D6E0EA; /* $cool-blue-highlight */
}

.tmu-events-feed__event:first-child {
    padding-top: 0; /* matches archive &:first-child { padding-top: 0 } */
}

.tmu-events-feed__event:last-child {
    border-bottom: none;
    padding-bottom: 2rem;
}

/* ================================================================
   Date / Time
   ================================================================ */

.tmu-events-feed__event-datetime {
    font-family: 'Inter', 'Helvetica', 'Arial', sans-serif;
    font-size: 1.5rem;    /* 24px — matches archive */
    font-weight: 700;
    line-height: 2rem;    /* 32px */
    color: #0C509D;       /* $blue-highlight */
    text-transform: uppercase;
    margin-bottom: 0.75rem; /* 12px */
}

.tmu-events-feed__event-datetime time {
    display: block;
}

/* ================================================================
   Event Title
   ================================================================ */

.tmu-events-feed__event-title {
    margin: 0 0 0.75rem; /* 12px */
    font-family: 'Roboto Condensed', 'Helvetica', 'Arial', sans-serif;
    font-size: 2.75rem;  /* 44px — matches archive at desktop */
    font-weight: 700;
    line-height: 3.5rem; /* 56px */
    color: #00263a;      /* $primary-blue */
}

/* ================================================================
   Event Link (when title is linked)
   ================================================================ */

.tmu-events-feed__event-link {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    transition: color 0.25s ease;
}

.tmu-events-feed__event-link:hover,
.tmu-events-feed__event-link:focus {
    color: #516c8c; /* $cool-blue-shadow — matches archive hover */
}

.tmu-events-feed__event-link svg {
    flex-shrink: 0;
    margin-left: 0.5rem; /* 8px */
    color: #516c8c;      /* $cool-blue-shadow */
    transition: color 0.25s ease;
}

.tmu-events-feed__event-link:hover svg,
.tmu-events-feed__event-link:focus svg {
    color: #0C509D; /* $blue-highlight */
}

/* ================================================================
   Source / Categories (below title)
   ================================================================ */

.tmu-events-feed__event-categories {
    font-family: 'Inter', 'Helvetica', 'Arial', sans-serif;
    font-size: 1rem;     /* 16px — matches archive */
    font-weight: 500;
    line-height: 1.5rem; /* 24px */
    color: #00263a;      /* $primary-blue */
}

/* ================================================================
   No Events — shown in editor only
   ================================================================ */

.tmu-events-feed__no-events {
    padding: 2rem;
    text-align: center;
    font-family: 'Inter', 'Helvetica', 'Arial', sans-serif;
    font-size: 1.125rem;
    color: #516c8c; /* $cool-blue-shadow */
}

/* ================================================================
   Responsive — mirrors archive breakpoints
   ================================================================ */

/* bp(large) = 80rem / 1280px */
@media (max-width: 80rem) {
    .tmu-events-feed__event-title {
        font-size: 2.25rem;  /* 36px */
        line-height: 2.75rem; /* 44px */
    }
}

/* bp(medium) = 48rem / 768px */
@media (max-width: 48rem) {
    .tmu-events-feed__header {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 2rem;
    }

    .tmu-events-feed__heading {
        font-size: 1.75rem; /* 28px */
    }

    .tmu-events-feed__event-datetime {
        font-size: 1.125rem; /* 18px — matches archive mobile */
        line-height: 1.5rem; /* 24px */
    }

    .tmu-events-feed__event-title {
        font-size: 1.75rem;  /* 28px — matches archive mobile */
        line-height: 2.25rem; /* 36px */
    }

    .tmu-events-feed__event-categories {
        font-size: 0.875rem; /* 14px — matches archive mobile */
        line-height: 1.25rem; /* 20px */
    }
}