/* Reelcard City Guide — base & component styles
   Palette: void #0E0E10 · marquee #F2E6C9 · ticket #C43C3C · seat #2A2A2E · caption #B8B3A8 */

:root { color-scheme: dark; }

html { scroll-behavior: smooth; }
body { background-color: #0E0E10; color: #F2E6C9; }

::selection { background: #C43C3C; color: #F2E6C9; }
*:focus-visible { outline: 2px solid #C43C3C; outline-offset: 2px; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0E0E10; }
::-webkit-scrollbar-thumb { background: #2A2A2E; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #C43C3C; }

/* Kicker label */
.kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #B8B3A8;
}

.marquee-glow { text-shadow: 0 0 26px rgba(242, 230, 201, 0.22); }

/* Filter chips (wayfinding bar) */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid #2A2A2E;
    background: #141416;
    color: #B8B3A8;
    padding: 0.35rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1;
    border-radius: 9999px;
    white-space: nowrap;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.chip:hover { color: #F2E6C9; border-color: #C43C3C; background: #1c1c1f; }

/* Poster tiles */
.poster {
    position: relative;
    overflow: hidden;
    background: #2A2A2E;
    border-radius: 10px;
}
.poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.poster:hover .poster-img { transform: scale(1.045); }
.poster-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(14, 14, 16, 0.62) 0%, rgba(14, 14, 16, 0.22) 34%, rgba(14, 14, 16, 0) 58%);
    pointer-events: none;
}
.poster-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #F2E6C9;
    background: rgba(196, 60, 60, 0.9);
    border-radius: 9999px;
    padding: 0.25rem 0.6rem;
}
.badge-seat { background: rgba(42, 42, 46, 0.92); color: #B8B3A8; }

/* Home mosaic: one tall featured + mixed tiles */
.mosaic-grid > a.mosaic-tile:nth-child(2) { grid-row: span 2; }
.mosaic-grid > a.mosaic-tile:nth-child(4),
.mosaic-grid > a.mosaic-tile:nth-child(5) { grid-column: span 2; }

/* Listing cards */
.card { display: block; }
.card .poster-img { transition: transform 0.45s ease; }
.card:hover .poster-img { transform: scale(1.04); }

/* Search inputs */
.search-input {
    width: 100%;
    min-width: 12rem;
    border: 1px solid #2A2A2E;
    background: #0E0E10;
    color: #F2E6C9;
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-size: 0.875rem;
}
.search-input:focus { border-color: #C43C3C; outline: none; }
.search-input::placeholder { color: #B8B3A8; }
select.search-input option { background: #141416; color: #F2E6C9; }