/* ============================================================
   Tile Grid Fix — Exclusive breakpoint ranges
   Uses min-width + max-width so only ONE rule fires per screen size.
   No overlapping media queries = no cascade conflicts.
   ============================================================ */

/* ── Make Schema.org <div itemscope> wrappers invisible to flexbox ──
   The element stays in the DOM (SEO unaffected), but its children
   (<li class="tile-list">) become the actual flex items. */
.listing-wrapper ul > div {
    display: contents;
}

/* ── Flex container ── */
.listing-wrapper ul {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    align-items: stretch;
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
}

/* Articles list unaffected */
.listing-wrapper ul.articles {
    display: block !important;
    flex-wrap: unset !important;
}

/* ── Shared tile styles (all breakpoints) ── */
.tile-list {
    display: flex !important;
    flex-direction: column !important;
    float: none !important;
    overflow: hidden;
    box-sizing: border-box !important;
    position: relative;
    background: #fff;
}

.tile-list a {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    height: 100%;
}

.tile-list .event-info {
    flex: 1;
    height: auto !important;
    overflow: hidden;
}

.tile-list .event-info h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tile-list .event-info p.tagline {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   Navigation & sidebar: hide on smaller screens
   ============================================================ */

/* Hide countdown widget, ad box, and filter dropdowns below 981px —
   not enough room in the nav bar; filters overlap nav due to absolute positioning */
@media all and (max-width: 980px) {
    .counter {
        display: none !important;
    }
    .bd-ads {
        display: none !important;
    }
    .filterhead {
        display: none !important;
    }

    /* ── Slogan: full width, centered, scaled with viewport ── */
    .middle .slogan {
        width: 100% !important;
        float: none !important;
        text-align: center !important;
        margin: 10px 0 !important;
    }

    /* H1: largest, one line, scales with viewport width */
    .middle .slogan h1 {
        font-size: 5.5vw !important;
        white-space: nowrap !important;
        text-align: center !important;
        margin: 0 !important;
    }

    /* Subtitle em: proportionately smaller than H1, one line */
    .middle .slogan h1 em {
        font-size: 3vw !important;
        display: block !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    /* Listing head: centered, same visual weight as subtitle */
    .listing-head {
        font-size: 3vw !important;
        text-align: center !important;
    }
}

/* ============================================================
   BREAKPOINT 1: Large desktop > 980px — 4 columns
   listing-wrapper = 1000px fixed
   calc(25% - 18px) + 9px each side = exactly 25% per tile
   ============================================================ */
@media all and (min-width: 981px) {
    .tile-list {
        width: calc(25% - 18px) !important;
        flex: 0 0 calc(25% - 18px) !important;
        margin: 0 9px 17.5px !important;
        height: 420px;
    }
}

/* ============================================================
   BREAKPOINT 2: Medium desktop 769px – 980px — 3 columns
   listing-wrapper = auto (full viewport)
   31.33% + 1% each side = 33.33% per tile
   ============================================================ */
@media all and (min-width: 769px) and (max-width: 980px) {
    .tile-list {
        width: 31.33% !important;
        flex: 0 0 31.33% !important;
        margin: 0 1% 17.5px !important;
        height: 420px;
    }
}

/* ============================================================
   BREAKPOINT 3: Tablet 481px – 768px — 2 columns
   listing-wrapper = auto (full viewport) + margin:10px
   48% + 1% each side = 50% per tile
   ============================================================ */
@media all and (min-width: 481px) and (max-width: 768px) {
    .tile-list {
        width: 48% !important;
        flex: 0 0 48% !important;
        margin: 0 1% 17.5px !important;
        height: 380px;
        float: none !important;
    }
}

/* ============================================================
   BREAKPOINT 4: Mobile ≤ 480px — 1 column
   ============================================================ */
@media all and (max-width: 480px) {
    .listing-wrapper ul {
        flex-direction: column !important;
    }

    .tile-list {
        width: 100% !important;
        flex: 0 0 100% !important;
        margin: 0 0 15px !important;
        height: auto !important;
        float: none !important;
    }

    .tile-list img {
        width: 100%;
        height: auto;
        aspect-ratio: 315 / 215;
        object-fit: cover;
    }

    /* ── Re-enable filter dropdowns on mobile ── */
    /* Flex column so dropdowns stack vertically and order can be controlled */
    .filterhead {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        float: none !important;
        box-sizing: border-box !important;
        padding: 10px 0 !important;
        height: auto !important;
        margin-bottom: 0 !important;
    }

    /* "Find By Event Name" first */
    a.filter-dropdown1 {
        order: 1 !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 8px !important;
        height: 48px !important;
        padding: 16px 0 0 15px !important;
    }

    /* "Find By Event Type" second */
    a.filter-dropdown2 {
        order: 2 !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 8px !important;
        height: 48px !important;
        padding: 16px 0 0 15px !important;
    }

    /* Flexbox on the anchor — text left, divider+arrow right, all inside the border */
    a.filter-dropdown1,
    a.filter-dropdown2 {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 0 0 15px !important;
    }

    /* Arrow span — flex child, full height, divider contained inside border */
    a.filter-dropdown1 span,
    a.filter-dropdown2 span {
        float: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
        width: 44px !important;
        flex-shrink: 0 !important;
        background-position: 50% 50% !important;
    }

    /* Close the white gap between filter section and slideshow */
    .middle {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}