@layer components {
  html[data-route="/events"] .events-filter-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
  html[data-route="/events"] .ev-filter-btn{padding:7px 14px;border-radius:7px;font-size:16px;font-weight:700;letter-spacing:.1em;background:var(--bg-surface-2);border:1px solid var(--gray-border);color:var(--gray-light);cursor:pointer;font-family:var(--f-body);transition:all .15s;text-transform:uppercase;}
  html[data-route="/events"] .ev-filter-btn.active{background:rgba(255,26,26,.15);border-color:var(--red-primary);color:var(--white-bright);}
  html[data-route="/events"] .ev-filter-btn:hover{color:var(--white-bright);}
  html[data-route="/events"] .events-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
  html[data-route="/events"] .ev-card{background:var(--black-card);border:1px solid var(--gray-border);border-radius:12px;overflow:hidden;cursor:pointer;text-decoration:none;display:block;}
  html[data-route="/events"] .ev-card:hover{border-color:var(--red-primary);}
  html[data-route="/events"] .ev-card-header{padding:8px 14px;background:var(--black-soft);border-bottom:1px solid var(--hairline);display:flex;align-items:center;justify-content:space-between;font-size:16px;color:var(--gray-light);}
  html[data-route="/events"] .ev-matchup{padding:14px;}
  html[data-route="/events"] .ev-teams{font-size:16px;font-weight:700;color:var(--white-bright);margin:0 0 6px;}
  html[data-route="/events"] .ev-meta{font-size:16px;color:var(--gray-light);display:flex;gap:12px;flex-wrap:wrap;}
  @media(max-width:480px){html[data-route="/events"] .events-grid{grid-template-columns:1fr;}}
  html[data-route="/events"] .nav-sub-label{display:block;padding:6px 32px 2px;font-size:16px;letter-spacing:1.5px;color:#888;font-weight:700;text-transform:uppercase;}

  /* Empty-state void fix (SITE-AUDIT-2026-07-02 AUD-35 P1) — the lone
     "no activity" card was floating in a large black gap below it. Give
     the card real vertical weight and a hint row instead of shrinking to
     fit its two lines of copy. */
  #events-grid-wrap .empty-state{min-height:min(52vh,380px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;}
  #events-grid-wrap .empty-icon{font-size:44px;}
  .empty-hint-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px;}
  .empty-hint-chip{display:inline-flex;align-items:center;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
}