/*
 * COLORADO EVENTS GUIDE — Baseline v2.2 [dev_stg_02]
 * Synchronized Midnight Onyx & Minimal Gold Matrix
 * Optimized for High-Density A to Z Data Presentation
 * Baseline: Turn 1, 16, 22 Specs [cite: 1, 2, 3]
 */

/* 1. RESET & CORE DENSITY SETTINGS */
:root {
    --bg-primary: #0F172A; /* Midnight Onyx Base */
    --bg-secondary: #1E293B; /* Slightly Lighter Slate Accent */
    --accent-gold: #D97706; /* Elegant B2B Gold [cite: 1] */
    --text-primary: #F1F5F9; /* High-contrast Text */
    --text-secondary: #94A3B8; /* Muted Data Text */
    --border-muted: #334155; /* Structured Data Grid Lines */
    --shadow-complex: 0 10px 25px -5px rgba(0,0,0,0.4), 0 8px 10px -6px rgba(0,0,0,0.3);
    
    /* Using geometric sans-serif for optimal legibility at high density [cite: 1] */
    --inter-font: 'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; outline-color: var(--accent-gold); }
body { background-color: var(--bg-primary); color: var(--text-primary); font-family: var(--inter-font); line-height: 1.6; font-size: 16px; overflow-x: hidden; }
a { text-decoration: none; color: inherit; transition: color 0.15s ease-in-out; }
a:hover { color: var(--accent-gold); }
button { font-family: var(--inter-font); cursor: pointer; border: none; background: transparent; transition: background-color 0.15s; }

/* 2. DENSE HEADER (Refining layout based on previous monitors) */
header { border-bottom: 1px solid var(--border-muted); padding: 1rem 5%; display: grid; grid-template-columns: auto auto 1fr auto; gap: 2rem; align-items: center; background-color: var(--bg-primary); position: sticky; top: 0; z-index: 1000; }
.logo { font-weight: 900; font-size: 1.3rem; text-transform: uppercase; letter-spacing: -0.06em; color: #FFF; white-space: nowrap; }
.logo span { color: var(--accent-gold); }
.header-meta { font-size: 0.75rem; color: var(--text-secondary); border-left: 1px solid var(--border-muted); padding-left: 1rem; text-transform: uppercase; font-weight: 700; letter-spacing: 0.05em; }
nav { display: flex; gap: 1.5rem; justify-content: flex-end; }
nav a { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
.add-listing-btn { background-color: var(--accent-gold); color: #FFF; padding: 0.7rem 1.4rem; border-radius: 4px; font-weight: 800; font-size: 0.8rem; text-transform: uppercase; white-space: nowrap; }

/* 3. HERO & LISTINGPRO MATRIX SEARCH (Turn 1 Spec) */
.hero { text-align: center; padding: 8rem 5% 6rem 5%; background: radial-gradient(circle at 50% -20%, #1A2740 0%, var(--bg-primary) 70%); }
.hero h1 { font-size: 3.8rem; font-weight: 900; letter-spacing: -0.06em; margin-bottom: 1.25rem; color: #FFF; line-height: 1.05; }
.hero p { color: var(--text-secondary); font-size: 1.2rem; max-width: 650px; margin: 0 auto 4rem auto; font-weight: 500; }

.search-matrix { background-color: var(--bg-secondary); border: 1px solid var(--border-muted); border-radius: 8px; max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 0.75rem; padding: 1.5rem; box-shadow: var(--shadow-complex); }
.input-group { text-align: left; }
.matrix-label { color: #64748B; font-size: 0.8rem; text-transform: uppercase; text-align: left; padding-left: 0.8rem; margin-bottom: 0.3rem; font-weight: 800; display: block; letter-spacing: 0.05em; }
.matrix-input { width: 100%; background: rgba(0,0,0,0.15); border: 1px solid var(--border-muted); border-radius: 4px; padding: 0.85rem; color: #FFF; font-size: 1rem; transition: border-color 0.15s; }
.matrix-input:focus { outline: none; border-color: var(--accent-gold); }
.matrix-input::placeholder { color: #475569; }
select.matrix-input { color-scheme: dark; }

.matrix-btn { background-color: var(--accent-gold); color: #FFF; padding: 0.85rem 2.25rem; border-radius: 4px; font-weight: 900; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.02em; align-self: end; height: calc(1rem * 1.6 + 1.7rem + 2px); } /* Aligns with matrix labels */

/* 4. DYNAMIC DATA GRID (The High-Density Array View - Turn 16) */
.data-grid-section { padding: 4rem 5%; max-width: 1300px; margin: 0 auto; }
.data-load-status { font-size: 0.8rem; text-transform: uppercase; color: var(--text-secondary); font-weight: 700; border: 1px solid var(--border-muted); padding: 0.6rem; border-radius: 4px; margin-bottom: 2rem; display: inline-block; background-color: var(--bg-secondary); }
.dynamic-data-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }

/* 5. COMPLEX CONTENT SECTIONS & DENSE GRIDS (Turn 22) */
.content-section { padding: 6rem 5%; max-width: 1300px; margin: 0 auto; border-top: 1px solid var(--border-muted); }
.section-header { margin-bottom: 3.5rem; max-width: 800px; }
.section-header h2 { font-size: 2.6rem; font-weight: 900; letter-spacing: -0.05em; color: #FFF; margin-bottom: 0.5rem; }
.section-header p { color: var(--text-secondary); font-size: 1.1rem; }

.dense-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
@media (min-width: 1100px) { .dense-grid { grid-template-columns: repeat(4, 1fr); } }

/* Luxury Card Density [cite: 1, 2] */
.card { background-color: var(--bg-secondary); border: 1px solid var(--border-muted); border-radius: 8px; padding: 2rem; position: relative; overflow: hidden; transition: border-color 0.2s, transform 0.2s; display: flex; flex-direction: column; justify-content: flex-start; }
.card:hover { border-color: var(--accent-gold); transform: translateY(-3px); box-shadow: var(--shadow-complex); }

/* B2B Card specifics (Derived from image_134.png density) */
.b2b-card { border-left: 2px solid var(--border-muted); }
.b2b-card:hover { border-left-color: var(--accent-gold); }
.b2b-card #card-aeag { border-left-color: #EF4444; } /* Red alert state for AEG */

.card-meta { font-size: 0.8rem; text-transform: uppercase; color: var(--accent-gold); font-weight: 800; margin-bottom: 0.4rem; letter-spacing: 0.05em; }
.card-title { font-size: 1.4rem; font-weight: 900; color: #FFF; margin-bottom: 0.75rem; letter-spacing: -0.04em; }
.card-desc { color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 2rem; line-height: 1.5; }
.card-action { display: block; width: 100%; background: transparent; border: 1px solid var(--border-muted); color: var(--text-secondary); padding: 0.85rem; text-align: center; border-radius: 4px; font-weight: 700; font-size: 0.9rem; text-transform: uppercase; margin-top: auto; letter-spacing: 0.03em; }
.card-action:hover { background-color: rgba(217, 119, 6, 0.1); border-color: var(--accent-gold); color: #FFF; }

/* Institutional Partner Grid Density (Dramatically improving video_100.png visualization [cite: 1, 3]) */
.inst-grid { grid-template-columns: repeat(1, 1fr); gap: 1.5rem; }
@media (min-width: 800px) { .inst-grid { grid-template-columns: repeat(3, 1fr); } }

.inst-card { padding: 2rem; border-top: 2px solid var(--border-muted); }
.inst-card:hover { border-top-color: var(--accent-gold); }
.inst-meta { height: 40px; margin-bottom: 1.5rem; background-size: contain; background-repeat: no-repeat; opacity: 0.4; transition: opacity 0.2s; }
.inst-card:hover .inst-meta { opacity: 0.9; }

/* Standardizing generic logos as placeholders until finalized */
.inst-meta::before { content: 'INSTITUTIONAL PARTNER'; font-size: 0.7rem; font-weight: 900; color: var(--text-secondary); display: block; letter-spacing: 0.1em; }

/* Specific placeholders based on data specification */
.logo-ball::before { content: 'BALL ARENA [ite]'; }
.logo-coors::before { content: 'COORS FIELD [ite]'; }
.logo-redrocks::before { content: 'RED ROCKS [ite]'; }

.inst-action { border-color: var(--text-secondary); color: var(--text-secondary); }
.inst-action:hover { background-color: rgba(148, 163, 184, 0.1); }

/* 6. DENSE FOOTER */
footer { border-top: 1px solid var(--border-muted); padding: 3rem 5%; text-align: center; color: var(--text-secondary); font-size: 0.9rem; background-color: var(--bg-primary); }
footer p { margin-bottom: 0.5rem; font-weight: 600; color: #FFF; font-size: 1rem; }
.aeg-status { font-size: 0.8rem; text-transform: uppercase; color: #EF4444; font-weight: 800; border: 1px solid #7F1D1D; padding: 0.5rem; border-radius: 4px; display: inline-block; background-color: #1A1A1A; letter-spacing: 0.05em; }