/*
 * Homepage — Upcoming Events: equal-height cards
 *
 * Replaces the horizontal-scroll layout with a flex-wrap grid so all cards
 * in the same row share the height of the tallest card. No JavaScript used.
 */

/* ── Row container: wrap + stretch ─────────────────────────────────────── */
.down-upcoming {
    display: block; /* Slick replaces this with its own structure */
    overflow: visible;
}

/* Ensure Slick track uses flexbox for equal height slides */
.down-upcoming .slick-track {
    display: flex !important;
    align-items: stretch;
}

/* Make slick slides fill the track height */
.down-upcoming .slick-slide {
    height: auto;
    display: flex;
}

/* ── Individual card: column flex, fill full row height ─────────────────── */
.down-upcoming a.onevent {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
    min-width: 0;
    width: auto;
    margin: 0 8px; /* Give some space between slides */
    /* Use !important to override a.onevent.concert justify-content: flex-end in main.css for a uniform card layout */
    justify-content: flex-start !important;
    box-sizing: border-box;
    min-height: 340px;
}

/* ── Card footer: pin organiser badge to card bottom ────────────────────── */
.down-upcoming a.onevent .organaizer {
    margin-top: auto;
}

/* ── Logos: reserve consistent space to prevent height variation ─────────── */
.down-upcoming a.onevent span.bl-logo-event {
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: center;
}

.down-upcoming a.onevent span.bl-logo-event img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ── Tablet (768 – 1023 px): let slick handle width ────────────────────── */
@media screen and (max-width: 1023px) {
    .down-upcoming a.onevent {
        margin: 0 4px;
    }
}

/* ── Mobile (< 768 px): single-column stack ─────────────────────────────── */
@media screen and (max-width: 767px) {
    .down-upcoming a.onevent {
        flex: 1 1 100%;
        width: 100%;
        margin: 0;
    }
}
