/*
 * TSP Events - front-end styles
 * Enqueued from events.php as the "tsp-events" handle. Replaces the inline
 * <style> blocks that used to live in postspage.php, card.php (once per card),
 * pagination.php, single.php and sidebar.php.
 *
 * Every selector is prefixed with one of these scopes so nothing leaks into
 * (or collides with) the theme / Bootstrap:
 *   .tsp-events          listing page   ([event_postspage] shortcode)
 *   .tsp-event-page      single event   (outer .container)
 *   .tsp-event-single    single event   (the card itself)
 *   .tsp-event-sidebar   sidebar        ([event_sidebar] shortcode / single.php)
 *
 * Mobile first. Breakpoints follow Bootstrap: 576 / 768 / 992.
 * Hover effects are wrapped in @media (hover: hover) so they never "stick"
 * after a tap on touch screens.
 */

/* ============================================================
   Shared: box model, buttons
   ============================================================ */
.tsp-events,
.tsp-events *,
.tsp-events *::before,
.tsp-events *::after,
.tsp-event-single,
.tsp-event-single *,
.tsp-event-single *::before,
.tsp-event-single *::after,
.tsp-event-sidebar,
.tsp-event-sidebar *,
.tsp-event-sidebar *::before,
.tsp-event-sidebar *::after {
    box-sizing: border-box;
}

.tsp-events,
.tsp-event-single,
.tsp-event-sidebar,
.event-back-link {
    font-family: 'Manrope', sans-serif;
}

.tsp-events .btn-solid,
.tsp-event-single .btn-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;                 /* comfortable tap target */
    padding: 10px 24px;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background-color: #3f78e0;
    border: 2px solid #3f78e0;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .2s ease-in-out, border-color .2s ease-in-out,
                box-shadow .2s ease-in-out, transform .2s ease-in-out;
}

.tsp-events .btn-solid:focus-visible,
.tsp-event-single .btn-solid:focus-visible,
.tsp-events .event-card-link:focus-visible,
.tsp-events .page-btn:focus-visible,
.tsp-events .category-x:focus-visible,
.tsp-event-sidebar a:focus-visible,
.event-back-link:focus-visible {
    outline: 3px solid rgba(63, 120, 224, .45);
    outline-offset: 2px;
}

@media (hover: hover) {
    .tsp-events .btn-solid:hover,
    .tsp-event-single .btn-solid:hover {
        color: #ffffff;
        background-color: #366ac9;
        border-color: #366ac9;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(63, 120, 224, .2);
    }
}

/* ============================================================
   Listing page  (.tsp-events)
   ============================================================ */
.tsp-events {
    width: 100%;
    color: #343f52;
}

/* --- Filters --- */
.tsp-events .filters {
    width: 100%;
    padding: 1rem 0;
    margin-bottom: 1.25rem;
    background: #ffffff;
    border-radius: 8px;
}

.tsp-events .filters-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
}

.tsp-events .filters form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
}

.tsp-events .filter-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tsp-events .datepicker {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
}

.tsp-events .datepicker label {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #60697b;
}

.tsp-events .datepicker input {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 50px;
    margin: 0;
    padding: 0 .75rem;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;                  /* >= 16px stops iOS zooming the page on focus */
    line-height: 1.2;
    color: #343f52;
    background: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 8px;
}

/* iOS centres the date text by default; keep it left-aligned like a text input. */
.tsp-events .datepicker input::-webkit-date-and-time-value {
    text-align: left;
}

.tsp-events .filters .search-fix {
    width: 100%;
}

.tsp-events .category-tag {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    max-width: 100%;
    min-height: 44px;
    padding: 0 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: #3f78e0;
    background: #e0e9fa;
    border-radius: 8px;
}

.tsp-events .category-tag > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.tsp-events .category-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 44px;                  /* full-size tap target for the remove "x" */
    min-height: 44px;
    font-size: 22px;
    line-height: 1;
    color: #3f78e0;
    text-decoration: none;
    opacity: .75;
    border-radius: 8px;
}

.tsp-events .filters .showing {
    margin: 0;
    font-size: 14px;
    color: #60697b;
    text-align: center;
}

.tsp-events .no-events-found {
    padding: 2rem 1rem;
    font-size: 1.1rem;
    color: #60697b;
    text-align: center;
}

.tsp-events .events-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    padding-bottom: 2rem;
}

/* --- Card --- */
.tsp-events .event-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: 10px;
}

.tsp-events .event_fullw_card {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    background: #ffffff;
    border: 1px solid #e0e9fa;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow .2s ease-in-out, transform .2s ease-in-out;
}

/* 16:9 media box. The padding-top trick works everywhere (aspect-ratio
   needs iOS 15+), and the image is absolutely positioned to fill it. */
.tsp-events .card-image-container {
    position: relative;
    width: 100%;
    flex: 0 0 auto;
    background: #f1f5fd;
}

.tsp-events .card-image-container::before {
    content: '';
    display: block;
    padding-top: 56.25%;
}

.tsp-events .card-image-container .feat-img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    border-radius: 0;
}

.tsp-events .feat-img--placeholder {
    background: linear-gradient(135deg, #e0e9fa 0%, #f1f5fd 100%);
}

.tsp-events .event_fullw_card .right {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;                     /* lets long words shrink instead of overflowing */
    padding: 1.25rem;
}

.tsp-events .event_fullw_card .top {
    flex-grow: 1;
}

.tsp-events .event_fullw_card .title h3 {
    margin: 0 0 .5rem;
    font-family: 'Manrope', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: #343f52;
    overflow-wrap: anywhere;
}

.tsp-events .event_fullw_card .datetimestring {
    margin-bottom: .75rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: #3f78e0;
}

.tsp-events .event_fullw_card .datetimestring .event-date,
.tsp-events .event_fullw_card .datetimestring .event-time {
    display: inline-block;
}

.tsp-events .event_fullw_card .datetimestring .sep {
    display: inline-block;
    padding: 0 .4rem;
    color: #9fb6e4;
}

.tsp-events .event_fullw_card .description {
    font-size: 1rem;
    line-height: 1.5;
    color: #60697b;
    overflow-wrap: anywhere;
}

.tsp-events .event_fullw_card .description p {
    margin: 0;
}

.tsp-events .event_fullw_card .bottom {
    display: flex;
    flex-wrap: wrap;                  /* tag and button stack instead of clipping */
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1rem;
}

.tsp-events .category-tag-card {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 8px 12px;
    font-size: .875rem;
    font-weight: 600;
    color: #3f78e0;
    background: #f1f5fd;
    border-radius: 8px;
    overflow-wrap: anywhere;
}

.tsp-events .event_fullw_card .bottom .btn-solid {
    margin-left: auto;                /* stays right-aligned even with no category tag */
}

@media (hover: hover) {
    .tsp-events .event-card-link:hover .event_fullw_card {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(30, 34, 40, .1);
    }

    .tsp-events .event-card-link:hover .btn-solid {
        background-color: #366ac9;
        border-color: #366ac9;
    }

    .tsp-events .category-x:hover {
        opacity: 1;
        background: rgba(63, 120, 224, .12);
    }
}

/* --- Pagination --- */
.tsp-events .events-pagination {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 1rem 0;
}

.tsp-events .events-pagination ul {
    display: flex;
    flex-wrap: wrap;                  /* page numbers wrap onto a second row instead of overflowing */
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tsp-events .events-pagination li {
    margin: 0;
    padding: 0;
}

.tsp-events .page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 14px;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    color: #454545;
    background: #efefef;
    border: 1px solid #cacaca;
    border-radius: 8px;
    text-decoration: none;
}

.tsp-events .page-btn.is-current {
    color: #ffffff;
    background: #3f78e0;
    border-color: #3f78e0;
}

.tsp-events .page-gap {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 2px;
    color: #60697b;
}

@media (hover: hover) {
    .tsp-events a.page-btn:hover {
        color: #333333;
        background: #e4e4e4;
    }
}

/* --- Listing: phones narrower than 480px --- */
@media (max-width: 480px) {
    .tsp-events .event_fullw_card .datetimestring .sep {
        display: none;
    }

    .tsp-events .event_fullw_card .datetimestring .event-time {
        display: block;               /* time goes on its own line */
    }

    .tsp-events .event_fullw_card .bottom .btn-solid {
        width: 100%;
        margin-left: 0;
    }

    .tsp-events .page-btn {
        min-width: 40px;
        padding: 0 10px;
    }
}

/* --- Listing: tablet and up --- */
@media (min-width: 768px) {
    .tsp-events .filters {
        padding: 1.25rem 1rem 1rem;
        margin-bottom: 2rem;
    }

    .tsp-events .filters-header {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    .tsp-events .filters form {
        flex: 1 1 auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
    }

    .tsp-events .filter-group {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .tsp-events .datepicker input {
        width: 200px;
    }

    .tsp-events .filters .search-fix {
        width: auto;
    }

    .tsp-events .category-tag {
        align-self: flex-end;
    }

    .tsp-events .filters .showing {
        text-align: right;
    }

    .tsp-events .events-list {
        gap: 1.5rem;
    }

    /* Card becomes image | text side by side */
    .tsp-events .event_fullw_card {
        flex-direction: row;
    }

    .tsp-events .card-image-container {
        flex: 0 0 34%;
        max-width: 34%;
        min-height: 240px;
    }

    .tsp-events .card-image-container::before {
        display: none;
    }

    .tsp-events .event_fullw_card .right {
        padding: 1.5rem;
    }

    .tsp-events .event_fullw_card .title h3 {
        font-size: 1.4rem;
    }
}

/* ============================================================
   Single event  (.tsp-event-page / .tsp-event-single)
   ============================================================ */
/* Title band under the theme's overlaid navigation, matching the light-blue
   page-title bands used elsewhere on the site. --tsp-nav-h is the room the
   absolutely positioned menu needs; the theme shifts the menu down 32px when
   the WordPress admin bar is showing, so the band grows by the same amount. */
.tsp-event-topbar {
    --tsp-nav-h: 90px;
    display: block;
    width: 100%;
    padding: calc(var(--tsp-nav-h) + 1rem) 1rem 1.75rem;
    background: #f1f5fd;
    text-align: center;
    font-family: 'Manrope', sans-serif;
}

.admin-bar .tsp-event-topbar {
    --tsp-nav-h: 122px;
}

.tsp-event-topbar .event-category {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #3f78e0;
}

.tsp-event-topbar .event-title {
    max-width: 900px;
    margin: .35rem auto 0;
    padding: 0;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(26px, 6.5vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    color: #343f52;
    overflow-wrap: anywhere;
}

.tsp-event-page {
    padding-top: 1.25rem;
    padding-bottom: 2rem;
}

/* Compact "back" link shown above the event on phones, where the sidebar
   (which has the full-width button) stacks below everything else. */
.event-back-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0 0 .5rem;
    font-size: 15px;
    font-weight: 700;
    color: #3f78e0;
    text-decoration: none;
}

.tsp-event-single .event_fullw_card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 0 0 .05rem rgba(8, 60, 130, .06), 0 0 1.25rem rgba(30, 34, 40, .04);
}

/* --- Hero --- */
.tsp-event-single .event-hero {
    position: relative;
    flex-shrink: 0;
}

.tsp-event-single .event-hero img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 200px;
    max-height: 60vh;                 /* never taller than ~half a portrait phone */
    margin: 0;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
}

/* --- Details (date / time / location) --- */
.tsp-event-single .event_fullw_card .right {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.25rem;
}

.tsp-event-single .details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-bottom: 1.25rem;
    color: #3f78e0;
}

.tsp-event-single .details > div {
    display: flex;
    align-items: flex-start;          /* icon stays at the top when text wraps */
    min-width: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #3f78e0;
}

.tsp-event-single .details .icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 2px 8px 0 0;
}

.tsp-event-single .details span {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* The location link keeps a 44px hit area without pushing the row taller. */
.tsp-event-single .details .location a {
    display: inline-flex;
    align-items: flex-start;
    min-height: 44px;
    margin: -8px 0;
    padding: 8px 0;
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(63, 120, 224, .35);
    text-underline-offset: 3px;
}

/* --- Description (staff-entered content) --- */
.tsp-event-single .description {
    margin-bottom: 1.25rem;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.tsp-event-single .description img {
    max-width: 100%;
    height: auto;
}

.tsp-event-single .description iframe,
.tsp-event-single .description video,
.tsp-event-single .description embed,
.tsp-event-single .description object,
.tsp-event-single .description figure,
.tsp-event-single .description .wp-caption {
    max-width: 100%;
}

/* Video / map embeds scale to the column width; other iframes keep their height. */
.tsp-event-single .description iframe[src*="youtube"],
.tsp-event-single .description iframe[src*="youtu.be"],
.tsp-event-single .description iframe[src*="vimeo"],
.tsp-event-single .description iframe[src*="google.com/maps"],
.tsp-event-single .description video {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

.tsp-event-single .description table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tsp-event-single .description pre {
    max-width: 100%;
    overflow-x: auto;
}

/* --- Buttons --- */
.tsp-event-single .button-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
    padding-top: .5rem;
}

.tsp-event-single .button-container .btn-solid {
    width: 100%;
    box-shadow: 0 4px 15px rgba(63, 120, 224, .2);
}

@media (hover: hover) {
    .tsp-event-single .details .location a:hover {
        text-decoration-color: currentColor;
    }

    .event-back-link:hover {
        text-decoration: underline;
    }
}

/* --- Single: 576px and up --- */
@media (min-width: 576px) {
    .tsp-event-single .button-container {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
    }

    .tsp-event-single .button-container .btn-solid {
        width: auto;
    }
}

/* --- Single: tablet and up --- */
@media (min-width: 768px) {
    .tsp-event-page {
        padding-top: 2rem;
    }

    .event-back-link {
        display: none;                /* the sidebar's "All Events" button is visible beside the card */
    }

    .tsp-event-topbar {
        --tsp-nav-h: 100px;
        padding-bottom: 2.5rem;
    }

    .admin-bar .tsp-event-topbar {
        --tsp-nav-h: 132px;
    }

    .tsp-event-topbar .event-title {
        margin-top: .5rem;
    }

    .tsp-event-single .event-hero img {
        aspect-ratio: 2 / 1;
        max-height: 440px;
    }

    .tsp-event-single .event_fullw_card .right {
        padding: 1.5rem;
    }

    .tsp-event-single .details {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px 24px;
        margin-bottom: 1.5rem;
    }

    .tsp-event-single .details > div {
        font-size: 18px;
    }

    .tsp-event-single .description {
        margin-bottom: 1.5rem;
        font-size: 18px;
    }
}

/* ============================================================
   Sidebar  (.tsp-event-sidebar)
   ============================================================ */
.tsp-event-sidebar {
    padding: 1.25rem 0 1rem;          /* the Bootstrap column already provides side gutters on phones */
    color: #343f52;
}

/* When the sidebar stacks under the event card, give it some breathing room. */
.tsp-event-page .tsp-event-sidebar {
    margin-top: 1.5rem;
}

/* --- CTA (Where to Stay) --- */
.tsp-event-sidebar .sidebar-cta {
    position: relative;
    display: block;
    margin: 0 0 1.5rem;
    padding: 1.4rem 1.25rem;
    color: #ffffff;
    text-align: left;
    text-decoration: none;
    background: linear-gradient(135deg, rgba(63, 120, 224, .92) 0%, rgba(46, 95, 184, .97) 100%);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(63, 120, 224, .28), inset 0 1px 0 rgba(255, 255, 255, .35);
    overflow: hidden;
    isolation: isolate;
    transition: transform .3s ease, box-shadow .3s ease;
}

/* Soft blurred colour blobs behind the "glass" surface */
.tsp-event-sidebar .sidebar-cta::before,
.tsp-event-sidebar .sidebar-cta::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(36px);
    pointer-events: none;
}

.tsp-event-sidebar .sidebar-cta::before {
    top: -50px;
    right: -40px;
    width: 170px;
    height: 170px;
    background: rgba(255, 255, 255, .35);
}

.tsp-event-sidebar .sidebar-cta::after {
    bottom: -60px;
    left: -40px;
    width: 160px;
    height: 160px;
    background: rgba(160, 200, 255, .5);
}

.tsp-event-sidebar .sidebar-cta-eyebrow {
    display: inline-block;
    margin-bottom: .6rem;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.tsp-event-sidebar .sidebar-cta-title {
    margin: 0 0 .6rem;
    padding: 0;
    font-family: 'Manrope', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: #ffffff;
    border: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

.tsp-event-sidebar .sidebar-cta-text {
    margin: 0 0 1.15rem;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .94);
}

.tsp-event-sidebar .sidebar-cta-btn {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 700;
    color: #2e5fb8;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

/* --- Back to all events --- */
.tsp-event-sidebar .sidebar-top-link {
    margin-bottom: 1.5rem;
}

.tsp-event-sidebar .btn-return {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 10px 24px;
    font-size: 16px;
    font-weight: 700;
    color: #3f78e0;
    text-align: center;
    text-decoration: none;
    background-color: #e0e9fa;
    border: 2px solid #e0e9fa;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .2s ease-in-out, border-color .2s ease-in-out, color .2s ease-in-out;
}

/* --- Blocks: categories, upcoming --- */
.tsp-event-sidebar .sidebar-block {
    padding: 0 0 1.5rem;
}

.tsp-event-sidebar .subtitle {
    margin: 0 0 .5rem;
    padding-bottom: .75rem;
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #343f52;
    border-bottom: 1px solid #e0e0e0;
}

.tsp-event-sidebar .sidebar-block ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tsp-event-sidebar .sidebar-block li {
    margin: 0;
    padding: 0;
}

.tsp-event-sidebar .sidebar-block li a {
    display: block;                   /* whole row is tappable (~44px) */
    padding: 11px 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #60697b;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color .2s;
}

.tsp-event-sidebar .sidebar-event {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    color: inherit;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color .2s;
}

.tsp-event-sidebar .sidebar-event .left {
    flex: 0 0 70px;
}

.tsp-event-sidebar .sidebar-event .thumb {
    display: block;
    width: 70px;
    height: 70px;
    margin: 0;
    object-fit: cover;
    background: #f1f5fd;
    border-radius: 8px;
}

.tsp-event-sidebar .sidebar-event .right {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.tsp-event-sidebar .sidebar-event .title {
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: #343f52;
    overflow-wrap: anywhere;
}

.tsp-event-sidebar .sidebar-event .date {
    font-size: 14px;
    color: #60697b;
}

@media (hover: hover) {
    .tsp-event-sidebar .sidebar-cta:hover {
        color: #ffffff;
        transform: translateY(-3px);
        box-shadow: 0 14px 36px rgba(63, 120, 224, .38), inset 0 1px 0 rgba(255, 255, 255, .45);
    }

    .tsp-event-sidebar .sidebar-cta:hover .sidebar-cta-btn {
        color: #2e5fb8;
        background: #ffffff;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    }

    .tsp-event-sidebar .btn-return:hover {
        color: #ffffff;
        background-color: #3f78e0;
        border-color: #3f78e0;
    }

    .tsp-event-sidebar .sidebar-block li a:hover {
        color: #3f78e0;
    }

    .tsp-event-sidebar .sidebar-event:hover {
        background: #f1f5fd;
    }
}

/* --- Sidebar: tablet and up --- */
@media (min-width: 768px) {
    .tsp-event-sidebar {
        padding: 1.5rem 1.4rem 1.4rem;
    }

    .tsp-event-page .tsp-event-sidebar {
        margin-top: 0;
    }

    /* Glass blur only where there is GPU headroom; it is nearly invisible
       over the opaque gradient anyway. */
    .tsp-event-sidebar .sidebar-cta {
        backdrop-filter: blur(18px) saturate(160%);
        -webkit-backdrop-filter: blur(18px) saturate(160%);
    }

    .tsp-event-sidebar .sidebar-cta-btn {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

/* Between 768 and 991px some themes still stack the md columns; keep the gap. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .tsp-event-page .tsp-event-sidebar {
        margin-top: 1.5rem;
    }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .tsp-events *,
    .tsp-event-single *,
    .tsp-event-sidebar * {
        transition: none !important;
    }
}