/* Match Card — City Guide site styles */
:root {
    --pitch: #1C2420;
    --chalk: #F4F1EA;
    --kit: #C43C3C;
    --night: #141414;
    --line: #D4CEC4;
}

body {
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Primary navigation */
.site-nav { display: none; }
@media (min-width: 1024px) {
    .site-nav { display: flex; align-items: center; gap: 0.125rem; margin-left: 0.5rem; }
}
@media (max-width: 1023.98px) {
    .site-nav.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        left: 0;
        right: 0;
        top: 4rem;
        background: #1C2420;
        padding: 0.75rem 1rem 1.25rem;
        gap: 0.25rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }
}
.nav-link {
    padding: 0.5rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(244, 241, 234, 0.85);
}
.nav-link:hover { color: #F4F1EA; background: rgba(255, 255, 255, 0.08); }

/* Filter chips */
.chip {
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    border: 1px solid rgba(244, 241, 234, 0.25);
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(244, 241, 234, 0.85);
    white-space: nowrap;
}
.chip:hover { background: rgba(255, 255, 255, 0.08); color: #F4F1EA; }
.chip-active { background: #C43C3C; border-color: #C43C3C; color: #fff; }
.chip-line {
    border: 1px solid #D4CEC4;
    color: #1C2420;
    background: #fff;
}
.chip-line:hover { border-color: #C43C3C; color: #C43C3C; background: #fff; }

/* Asymmetric fixtures mosaic: one featured 2x2 tile + mixed tiles */
.mosaic-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(10rem, auto);
    gap: 0.75rem;
}
@media (max-width: 1023.98px) {
    .mosaic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mosaic-feature { grid-column: span 2 / span 2; grid-row: span 2 / span 2; }
.mosaic-tile { grid-column: span 1 / span 1; grid-row: span 1 / span 1; }

/* Text clamps */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Tabular date numerals */
.fixture-date { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }