/* ============================================================
   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 and filter dropdowns below 981px —
   not enough room in the nav bar; filters overlap nav due to absolute positioning.
   (The ad box is no longer hidden here: since 2026-10-07 it moves under the hero, see "Ad box".) */
@media all and (max-width: 980px) {
    .counter {
        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, scales with viewport width. It may wrap: forcing one line (nowrap, until 2026-10-07)
       pushed long event titles ("MARRIOTT MARQUIS TIMES SQUARE NEW YEARS EVE") past the screen edge,
       so every event page scrolled sideways on phones (471px wide on a 393px iPhone) */
    .middle .slogan h1 {
        font-size: 5.5vw !important;
        white-space: normal !important;
        text-wrap: balance;
        text-align: center !important;
        margin: 0 !important;
    }

    /* Subtitle em: proportionately smaller than H1, may wrap (same reason) */
    .middle .slogan h1 em {
        font-size: 3vw !important;
        display: block !important;
        white-space: normal !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;
    }
}

/* ============================================================
   Homepage filter rows (#footer-top: "Live View of Ball Drop", "Cruises"), 2026-10-07
   The fixed 420px tile height above left a big white gap above the price. Here tiles size to their
   content and each row matches its tallest tile (flex stretch). 4 across down to 769px (was 3 + an
   orphan), 2x2 on tablets. The card itself (type, spacing, price, badge) is in "Event tiles" below.
   ============================================================ */
@media all and (min-width: 481px) {
    /* overflow visible: the site's hover state (.tile-list a:hover = blue #21b6e8 halo + grey) draws
       OUTSIDE the link, and tile-fix's overflow:hidden above clipped it; now it matches the main grid */
    #footer-top .tile-list {
        height: auto !important;
        overflow: visible !important;
    }
}
@media all and (min-width: 769px) and (max-width: 980px) {
    #footer-top .tile-list {
        width: calc(25% - 12px) !important;
        flex: 0 0 calc(25% - 12px) !important;
        margin: 0 6px 17.5px !important;
    }
    /* the site shows the full date below 981px, which does not fit 4 across: behave like desktop
       (clock icon, date on hover, one line) */
    #footer-top .tile-list .highlight b {
        display: none;
    }
    #footer-top .tile-list a:hover .highlight b {
        display: block;
    }
    #footer-top .tile-list .event-info { padding: 10px 11px 0; }
    #footer-top .tile-list .price { margin: 10px 11px 0 !important; }
    #footer-top .tile-list .event-info h3 { font-size: 14px !important; }
}

/* ============================================================
   Event tiles, 2026-10-07: BOTH tile types share one card anatomy.
     2:1 image -> date badge on its bottom edge -> NAME (bold caps, max 2 lines, NO reserved second
     line) -> address -> tagline (max 3 lines, ends in "...") -> hairline -> "Starting at $X" pinned
     to the bottom.
   Rows stay equal height (flex stretch), so prices line up on one hairline across a row and any
   spare height collects above the price, never as a gap under a one-line name. (Read this before
   re-adding a min-height to h3: that was the gap Josh flagged.)
     - 4-across rows: #footer-top .tile-list (homepage filter rows)
     - main grid:     li.list-item (homepage "We found N", filter pages, event-page "We recommend")
   CSS only: the markup and its schema.org microdata are untouched.
   ============================================================ */
#footer-top .tile-list a,
li.list-item a {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    height: auto;
    transition: box-shadow .2s ease-out, background-color .2s ease-out;
}
li.list-item {
    display: flex;
    flex-direction: column;
}
#footer-top .tile-list a:focus-visible,
li.list-item a:focus-visible {
    outline: 2px solid #21b6e8;
    outline-offset: 2px;
}
/* every listing image is 2:1 (2160x1080 / 1080x540); no fixed 158px heights, no 315:215 crop */
#footer-top .tile-list img,
li.list-item img {
    display: block;
    width: 100%;
    height: auto !important;
    aspect-ratio: 2 / 1;
    object-fit: cover;
}
#footer-top .tile-list .event-info,
li.list-item .event-info {
    flex: 1 0 auto;
    display: flex !important;
    flex-direction: column;
    box-sizing: border-box;
    height: auto !important;
    margin: 0 !important;
    padding: 12px 14px 0;
    overflow: visible;
}
#footer-top .tile-list .event-info h3,
li.list-item .event-info h3 {
    margin: 0 !important;
    min-height: 0 !important;
    font-size: 15px !important;
    font-weight: 700;
    line-height: 1.3 !important;
    letter-spacing: .01em;
    color: #1a1a1a;
    text-wrap: balance;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#footer-top .tile-list .event-info h5,
li.list-item .event-info h5 {
    margin: 3px 0 0 !important;
    height: auto !important;
    font-size: 12px;
    line-height: 1.4;
    color: #666;
}
#footer-top .tile-list .event-info p.tagline,
li.list-item .event-info p.tagline {
    margin: 8px 0 0 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: #4a4a4a;
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#footer-top .tile-list .price,
li.list-item .price {
    height: auto !important;
    margin: 12px 14px 0 !important;
    padding: 9px 0 11px !important;
    border-top: 1px solid #ececec;
    font-size: 13px;
    line-height: 20px;
    color: #666;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
#footer-top .tile-list .price b,
li.list-item .price b {
    margin-left: 2px;
    font-size: 17px;
    font-weight: 700;
    color: #fb4700;
}
/* date badge on the bottom-left edge of the 2:1 image at every width (margin-top % = % of the
   tile's width, so it tracks the image height; replaces top:8em / 140px / bottom:18em) */
#footer-top .tile-list .highlight,
li.list-item .highlight {
    top: 0 !important;
    bottom: auto !important;
    left: 8px !important;
    margin-top: calc(50% - 36px) !important;
}
/* hover date ("December 31, 2026 at 8:00PM") stays on one line inside a 4-across tile */
#footer-top .tile-list .highlight {
    max-width: calc(100% - 16px);
    box-sizing: border-box;
    height: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#footer-top .tile-list .highlight b {
    font-size: 12px;
}

/* Homepage "We found N ..." heading: it sat flush against the grey filter rows above it. Room above and
   below (homepage only: on filter pages the same heading already sits under the intro text). */
#footer-top + .listing-wrapper .listing-head {
    padding-top: 40px;
    margin-bottom: 32px;
}
@media all and (max-width: 768px) {
    #footer-top + .listing-wrapper .listing-head {
        padding-top: 28px;
        margin-bottom: 22px;
    }
}


/* ============================================================
   Ad box, 2026-10-07 (includes/home-ad.php: homepage + /new-york-new-years).
   Desktop: right of the hero, as before. Below 981px it used to be hidden (and still downloaded);
   now it sits centered under the hero so phones see the Marriott flyer too.
   ============================================================ */
.bd-ads .bd-ad {
    display: block;
    max-width: 300px;
}
.bd-ads video,
.bd-ads img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 300 / 350;
    background: #0b0b10;
}
@media all and (max-width: 980px) {
    .slideshow-section .oneThird.last {
        float: none !important;
        clear: both;               /* the hero beside it is floated */
        width: 100% !important;
        margin: 0 !important;
        padding-top: 18px;         /* padding, not margin: clearance swallows a top margin */
    }
    .slideshow-section div.bd-ads {
        display: block !important;
    }
    .bd-ads .bd-ad {
        max-width: 340px;
        margin: 0 auto;
    }
}

/* ============================================================
   Image skeletons, 2026-10-07. Every <img> is lazy-loaded (includes/lazy-images.php); while a tile
   or event photo loads, its box shows a soft shimmer instead of an empty hole. The inline script in
   site-header.php adds .is-loaded on load (or error), which stops the shimmer.
   ============================================================ */
@keyframes bd-skeleton {
    from { background-position: 150% 0; }
    to   { background-position: -50% 0; }
}
#footer-top .tile-list img:not(.is-loaded),
li.list-item img:not(.is-loaded),
.flier-section img:not(.is-loaded) {
    background: #ececf0 linear-gradient(100deg, #ececf0 30%, #f7f7f9 50%, #ececf0 70%);
    background-size: 200% 100%;
    animation: bd-skeleton 1.3s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    #footer-top .tile-list img:not(.is-loaded),
    li.list-item img:not(.is-loaded),
    .flier-section img:not(.is-loaded) {
        animation: none;
    }
}