/* Play Pitch — main stylesheet */
:root {
    --field: #3E6B3A;
    --chalk: #F4F4F0;
    --jersey: #2A4A7A;
    --clay: #C9896A;
    --ink: #1C2333;
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--chalk); color: var(--ink); }
h1, h2, h3, h4, .font-display { font-family: 'Archivo', 'Inter', sans-serif; }

/* palette utilities (fallbacks in case the Tailwind config is not applied) */
.bg-field { background-color: var(--field); }
.bg-jersey { background-color: var(--jersey); }
.bg-clay { background-color: var(--clay); }
.bg-chalk { background-color: var(--chalk); }
.bg-ink { background-color: var(--ink); }
.text-field { color: var(--field); }
.text-jersey { color: var(--jersey); }
.text-clay { color: var(--clay); }
.text-chalk { color: var(--chalk); }
.text-ink { color: var(--ink); }
.border-field { border-color: var(--field); }

.section-label { font-family: 'Archivo', sans-serif; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: .72rem; }

.hairline { border: 1px solid rgba(28, 35, 51, .12); }

.hero-overlay { background: linear-gradient(180deg, rgba(16, 22, 34, .08) 0%, rgba(16, 22, 34, .42) 52%, rgba(16, 22, 34, .86) 100%); }

/* asymmetric photo mosaic */
.mosaic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 168px; gap: 14px; }
@media (min-width: 768px) {
    .mosaic-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 200px; }
}
.mosaic-tile { position: relative; overflow: hidden; border-radius: 16px; min-height: 168px; background: var(--jersey); }
.mosaic-tile.featured { grid-column: span 2; grid-row: span 2; min-height: 280px; }
.mosaic-tile a { position: relative; display: block; height: 100%; width: 100%; }
.mosaic-tile img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.22, .7, .2, 1); }
.mosaic-tile:hover img { transform: scale(1.05); }
.mosaic-tile .tile-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 22, 34, 0) 32%, rgba(16, 22, 34, .84) 100%); }
.mosaic-tile .tile-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; z-index: 1; }
.mosaic-tile.featured .tile-body { padding: 20px; }

/* weekend games strip */
.strip-scroll { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.strip-scroll::-webkit-scrollbar { height: 6px; }
.strip-scroll::-webkit-scrollbar-thumb { background: rgba(28, 35, 51, .2); border-radius: 99px; }
.strip-card { min-width: 280px; max-width: 320px; scroll-snap-align: start; }

/* directory cards */
.venue-card, .card-hover { transition: border-color .2s ease, transform .2s ease; }
.venue-card:hover, .card-hover:hover { border-color: var(--field); }
.venue-card img, .card-hover img { transition: transform .5s cubic-bezier(.22, .7, .2, 1); }
.venue-card:hover img, .card-hover:hover img { transform: scale(1.045); }

.chip { font-weight: 600; }

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .mosaic-tile img, .venue-card img, .card-hover img { transition: none; transform: none; }
}