/* ============================================================
   Party tile v2 = "T1 ticket stub" (Josh 2026-11-12). Loaded only when TILES_V2 is on (or ?tiles=v2),
   see includes/tiles-v2.php. Every party tile: homepage rows (#footer-top .tile-list) and every
   li.list-item (homepage grid, party-type pages, "We recommend"); not the article cards (ul.articles).
   - one white card, 12px corners, lifts on hover (no grey hover, no blue halo)
   - date chip on the picture: "Dec 31 · 8 PM – 1 AM"; with a mouse it rests closed (clock badge) and opens
     in orange on rollover; touch screens keep it open
   - rollover (Josh 2026-11-13, mouse only): the border lights up orange + the card lifts (see the end)
   - name in the condensed headline face, map pin before the address, tagline 2 lines
   - the bottom is a ticket stub: perforated tear line, a notch cut from each side (mask on the link;
     the shadow is a drop-shadow on the li so it follows the notches), ticket icon + "From $X",
     round orange arrow that slides on hover
   Icons are CSS masks (Phosphor bold, the footer's set): the tile markup and its microdata are unchanged.
   Generated by BallDrop-Live/research/mobile-tiles-2026-11-12/tile/gen_tiles_v2_css.py
   ============================================================ */
:root {
    --bd-ic-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,20A108,108,0,1,0,236,128,108.12,108.12,0,0,0,128,20Zm0,192a84,84,0,1,1,84-84A84.09,84.09,0,0,1,128,212Zm68-84a12,12,0,0,1-12,12H128a12,12,0,0,1-12-12V72a12,12,0,0,1,24,0v44h44A12,12,0,0,1,196,128Z'/%3E%3C/svg%3E");
    --bd-ic-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,60a44,44,0,1,0,44,44A44.05,44.05,0,0,0,128,60Zm0,64a20,20,0,1,1,20-20A20,20,0,0,1,128,124Zm0-112a92.1,92.1,0,0,0-92,92c0,77.36,81.64,135.4,85.12,137.83a12,12,0,0,0,13.76,0,259,259,0,0,0,42.18-39C205.15,170.57,220,136.37,220,104A92.1,92.1,0,0,0,128,12Zm31.3,174.71A249.35,249.35,0,0,1,128,216.89a249.35,249.35,0,0,1-31.3-30.18C80,167.37,60,137.31,60,104a68,68,0,0,1,136,0C196,137.31,176,167.37,159.3,186.71Z'/%3E%3C/svg%3E");
    --bd-ic-ticket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232,108a12,12,0,0,0,12-12V64a20,20,0,0,0-20-20H32A20,20,0,0,0,12,64V96a12,12,0,0,0,12,12,20,20,0,0,1,0,40,12,12,0,0,0-12,12v32a20,20,0,0,0,20,20H224a20,20,0,0,0,20-20V160a12,12,0,0,0-12-12,20,20,0,0,1,0-40ZM36,170.34a44,44,0,0,0,0-84.68V68H88V188H36Zm184,0V188H112V68H220V85.66a44,44,0,0,0,0,84.68Z'/%3E%3C/svg%3E");
    --bd-ic-arrow-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='white' d='M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z'/%3E%3C/svg%3E");
    --bd-ic-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z'/%3E%3C/svg%3E");
}
#wrapper #footer-top li.tile-list,
#wrapper ul:not(.articles) li.list-item {
    --stub: 58px;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 12px !important;
    filter: drop-shadow(0 12px 18px rgb(14 12 20 / .18)) drop-shadow(0 2px 4px rgb(14 12 20 / .10));
}
@media all and (min-width: 981px) {
    /* desktop rows: a deeper shadow; below 981px the rows swipe on the light page and the scroller would clip it */
    #wrapper #footer-top li.tile-list { filter: drop-shadow(0 18px 24px rgb(14 12 20 / .26)) drop-shadow(0 2px 4px rgb(14 12 20 / .12)); }
}
#wrapper #footer-top li.tile-list > a,
#wrapper ul:not(.articles) li.list-item > a {
    position: relative;
    overflow: hidden;
    border: 0 !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #17141f;
    transition: transform .24s cubic-bezier(.2, .7, .2, 1) !important;
    -webkit-mask: radial-gradient(circle 9px at 0 calc(100% - var(--stub)), #0000 98%, #000) left / 51% 100% no-repeat,
                  radial-gradient(circle 9px at 100% calc(100% - var(--stub)), #0000 98%, #000) right / 51% 100% no-repeat;
            mask: radial-gradient(circle 9px at 0 calc(100% - var(--stub)), #0000 98%, #000) left / 51% 100% no-repeat,
                  radial-gradient(circle 9px at 100% calc(100% - var(--stub)), #0000 98%, #000) right / 51% 100% no-repeat;
}
#wrapper #footer-top li.tile-list > a:hover,
#wrapper ul:not(.articles) li.list-item > a:hover { background: #fff !important; box-shadow: none !important; transform: translateY(-4px); }
#wrapper #footer-top li.tile-list > a:active,
#wrapper ul:not(.articles) li.list-item > a:active { transform: translateY(-1px) scale(.99); }
#wrapper #footer-top li.tile-list > a:focus-visible,
#wrapper ul:not(.articles) li.list-item > a:focus-visible { outline: 3px solid #fb4700 !important; outline-offset: -3px; }
#wrapper #footer-top li.tile-list img,
#wrapper ul:not(.articles) li.list-item img { border-radius: 0 !important; }

/* date chip */
#wrapper #footer-top li.tile-list .highlight,
#wrapper ul:not(.articles) li.list-item .highlight {
    position: absolute !important;
    z-index: 2;
    top: 10px !important; left: 10px !important; right: auto !important; bottom: auto !important;
    margin: 0 !important;
    width: auto !important; height: auto !important; max-width: calc(100% - 20px);
    display: flex !important; align-items: center; gap: 5px;
    padding: 5px 10px 5px 8px !important;
    border-radius: 999px !important;
    background: rgb(14 12 20 / .74) none !important;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: #fff !important;
    font: 600 12px/16px 'Open Sans', arial !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    box-sizing: border-box;
}
#wrapper #footer-top li.tile-list .highlight::before,
#wrapper ul:not(.articles) li.list-item .highlight::before {
    content: ""; flex: none; width: 14px; height: 14px; background: #ff8a4d;
    -webkit-mask: var(--bd-ic-clock) center / contain no-repeat; mask: var(--bd-ic-clock) center / contain no-repeat;
}
#wrapper #footer-top li.tile-list .highlight b,
#wrapper ul:not(.articles) li.list-item .highlight b,
#wrapper #footer-top li.tile-list > a:hover .highlight b,
#wrapper ul:not(.articles) li.list-item > a:hover .highlight b {
    display: inline !important; padding: 0 !important; margin: 0 !important;
    font: inherit !important; color: inherit !important;
    font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis;
}

/* text */
#wrapper #footer-top li.tile-list .event-info,
#wrapper ul:not(.articles) li.list-item .event-info { padding: 14px 16px 0 !important; }
#wrapper #footer-top li.tile-list .event-info h3,
#wrapper ul:not(.articles) li.list-item .event-info h3 {
    font: 700 18px/1.12 'Roboto Condensed', 'Arial Narrow', sans-serif !important;
    letter-spacing: .005em !important; text-transform: uppercase; color: #17141f !important;
}
#wrapper #footer-top li.tile-list .event-info h5,
#wrapper ul:not(.articles) li.list-item .event-info h5 {
    position: relative; padding-left: 18px !important;
    margin: 6px 0 0 !important; font-size: 12.5px !important; line-height: 1.35 !important; color: #6b6672 !important;
}
/* the address is several inline spans: the pin sits in the padding so the text wraps as one line */
#wrapper #footer-top li.tile-list .event-info h5::before,
#wrapper ul:not(.articles) li.list-item .event-info h5::before {
    content: ""; position: absolute; left: 0; top: 1px; width: 14px; height: 14px; background: #9a95a3;
    -webkit-mask: var(--bd-ic-pin) center / contain no-repeat; mask: var(--bd-ic-pin) center / contain no-repeat;
}
#wrapper #footer-top li.tile-list .event-info p.tagline,
#wrapper ul:not(.articles) li.list-item .event-info p.tagline {
    margin-top: 10px !important; font-size: 14px !important; color: #3d3946 !important;
    -webkit-line-clamp: 2 !important; line-clamp: 2;
}

/* the stub */
#wrapper #footer-top li.tile-list .price,
#wrapper ul:not(.articles) li.list-item .price {
    display: flex !important; align-items: center; gap: 6px;
    box-sizing: border-box; height: var(--stub) !important;
    margin: 14px 0 0 !important; padding: 0 14px 0 16px !important;
    border: 0 !important;
    background: linear-gradient(90deg, #d9d5df 50%, #0000 0) 13px 0 / 9px 1.5px repeat-x;
    text-align: left !important; color: #6b6672 !important;
    font-size: 12.5px !important; line-height: 1 !important; white-space: nowrap;
}
#wrapper #footer-top li.tile-list .price::before,
#wrapper ul:not(.articles) li.list-item .price::before {
    content: ""; flex: none; width: 17px; height: 17px; margin-right: 1px; background: #fb4700;
    -webkit-mask: var(--bd-ic-ticket) center / contain no-repeat; mask: var(--bd-ic-ticket) center / contain no-repeat;
}
#wrapper #footer-top li.tile-list .price::after,
#wrapper ul:not(.articles) li.list-item .price::after {
    content: ""; flex: none; width: 32px; height: 32px; margin-left: auto; border-radius: 50%;
    background: #fb4700 var(--bd-ic-arrow-img) center / 16px no-repeat;
    transition: transform .24s cubic-bezier(.2, .7, .2, 1), background-color .2s;
}
#wrapper #footer-top li.tile-list .price b,
#wrapper ul:not(.articles) li.list-item .price b {
    margin: 0 0 0 2px !important;
    font: 700 19px/1 'Open Sans', arial !important; letter-spacing: -.015em; color: #17141f !important;
    font-variant-numeric: tabular-nums;
}
#wrapper #footer-top li.tile-list > a:hover .price::after,
#wrapper ul:not(.articles) li.list-item > a:hover .price::after { transform: translateX(3px); background-color: #e03f00; }

/* phones: the 2-up grid tiles are ~165px wide */
@media all and (max-width: 480px) {
    #wrapper #footer-top li.tile-list,
    #wrapper ul:not(.articles) li.list-item { --stub: 50px; }
    #wrapper #footer-top li.tile-list .highlight,
    #wrapper ul:not(.articles) li.list-item .highlight { top: 7px !important; left: 7px !important; padding: 4px 8px 4px 6px !important; font-size: 10.5px !important; }
    #wrapper #footer-top li.tile-list .highlight::before,
    #wrapper ul:not(.articles) li.list-item .highlight::before { width: 12px; height: 12px; }
    /* the 2-up grid tiles (~165px) show "Dec 31 · 8 PM"; the wide swipe cards keep the end time */
    #wrapper .listing-wrapper ul:not(.articles):not(.columns) li.list-item .highlight .bd-end { display: none; }
    #wrapper #footer-top li.tile-list .event-info,
    #wrapper ul:not(.articles) li.list-item .event-info { padding: 11px 11px 0 !important; }
    #wrapper #footer-top li.tile-list .event-info h3,
    #wrapper ul:not(.articles) li.list-item .event-info h3 { font-size: 15px !important; }
    #wrapper #footer-top li.tile-list .event-info h5,
    #wrapper ul:not(.articles) li.list-item .event-info h5 { font-size: 11.5px !important; }
    #wrapper #footer-top li.tile-list .event-info p.tagline,
    #wrapper ul:not(.articles) li.list-item .event-info p.tagline { font-size: 12.5px !important; margin-top: 7px !important; }
    #wrapper #footer-top li.tile-list .price,
    #wrapper ul:not(.articles) li.list-item .price { margin-top: 10px !important; padding: 0 9px 0 11px !important; font-size: 11px !important; }
    #wrapper #footer-top li.tile-list .price::before,
    #wrapper ul:not(.articles) li.list-item .price::before { display: none; }
    #wrapper #footer-top li.tile-list .price::after,
    #wrapper ul:not(.articles) li.list-item .price::after { width: 28px; height: 28px; background-size: 14px; }
    #wrapper #footer-top li.tile-list .price b,
    #wrapper ul:not(.articles) li.list-item .price b { font-size: 16px !important; }
}
/* rollover (Josh 2026-11-13): mouse only (touch screens have no hover, so there the date chip stays open).
   OFF = the card at rest; the date chip is closed to a round clock badge.
   ON (hover, or keyboard focus) = the border lights up orange (a 2px #fb4700 rim on the card plus an orange
   glow that follows the ticket shape, notches included), the date chip opens into "Dec 31 · 8 PM – 1 AM" in
   the same orange, the card lifts 6px with a deeper shadow, and the arrow slides. */
@media (hover: hover) and (pointer: fine) {
    #wrapper #footer-top li.tile-list,
    #wrapper ul:not(.articles) li.list-item { transition: filter .24s ease-out; }
    #wrapper #footer-top li.tile-list > a::after,
    #wrapper ul:not(.articles) li.list-item > a::after {
        content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3;
        border: 2px solid #fb4700; border-radius: 12px; pointer-events: none;
        opacity: 0; transition: opacity .2s ease-out;
    }
    #wrapper #footer-top li.tile-list .highlight,
    #wrapper ul:not(.articles) li.list-item .highlight {
        gap: 0; padding: 7px !important;
        transition: background-color .2s, padding .3s cubic-bezier(.2, .7, .2, 1), gap .3s cubic-bezier(.2, .7, .2, 1);
    }
    #wrapper #footer-top li.tile-list .highlight::before,
    #wrapper ul:not(.articles) li.list-item .highlight::before { transition: background-color .2s; }
    #wrapper #footer-top li.tile-list .highlight b,
    #wrapper ul:not(.articles) li.list-item .highlight b {
        display: inline-block !important; max-width: 0; opacity: 0;
        white-space: nowrap; vertical-align: top;
        transition: max-width .34s cubic-bezier(.2, .7, .2, 1), opacity .2s ease-out;
    }
    #wrapper #footer-top li.tile-list > a:hover .highlight,
    #wrapper ul:not(.articles) li.list-item > a:hover .highlight,
    #wrapper #footer-top li.tile-list > a:focus-visible .highlight,
    #wrapper ul:not(.articles) li.list-item > a:focus-visible .highlight { gap: 6px; padding: 6px 12px 6px 9px !important; background: #fb4700 none !important; }
    #wrapper #footer-top li.tile-list > a:hover .highlight::before,
    #wrapper ul:not(.articles) li.list-item > a:hover .highlight::before,
    #wrapper #footer-top li.tile-list > a:focus-visible .highlight::before,
    #wrapper ul:not(.articles) li.list-item > a:focus-visible .highlight::before { background: #fff; }
    #wrapper #footer-top li.tile-list > a:hover .highlight b,
    #wrapper ul:not(.articles) li.list-item > a:hover .highlight b,
    #wrapper #footer-top li.tile-list > a:focus-visible .highlight b,
    #wrapper ul:not(.articles) li.list-item > a:focus-visible .highlight b { display: inline-block !important; max-width: 240px; opacity: 1; }
    #wrapper #footer-top li.tile-list > a:hover::after,
    #wrapper ul:not(.articles) li.list-item > a:hover::after,
    #wrapper #footer-top li.tile-list > a:focus-visible::after,
    #wrapper ul:not(.articles) li.list-item > a:focus-visible::after { opacity: 1; }
    #wrapper #footer-top li.tile-list:hover,
    #wrapper ul:not(.articles) li.list-item:hover { filter: drop-shadow(0 0 1px rgb(251 71 0 / .9)) drop-shadow(0 0 12px rgb(251 71 0 / .45)) drop-shadow(0 22px 26px rgb(14 12 20 / .26)); }
    #wrapper #footer-top li.tile-list > a:hover,
    #wrapper ul:not(.articles) li.list-item > a:hover { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
    #wrapper #footer-top li.tile-list,
    #wrapper ul:not(.articles) li.list-item,
    #wrapper #footer-top li.tile-list > a,
    #wrapper ul:not(.articles) li.list-item > a,
    #wrapper #footer-top li.tile-list > a::after,
    #wrapper ul:not(.articles) li.list-item > a::after,
    #wrapper #footer-top li.tile-list .highlight,
    #wrapper ul:not(.articles) li.list-item .highlight,
    #wrapper #footer-top li.tile-list .highlight b,
    #wrapper ul:not(.articles) li.list-item .highlight b,
    #wrapper #footer-top li.tile-list .price::after,
    #wrapper ul:not(.articles) li.list-item .price::after { transition: none !important; }
    #wrapper #footer-top li.tile-list > a:hover,
    #wrapper ul:not(.articles) li.list-item > a:hover { transform: none; }
}