/* /football and the home #football section (3 Oct 2026, Joe: "the matchup for the weekend ... a live score"). The matchup
   card fills the top of the right column. No team logo (NFL trademark - it would read as the
   Broncos sponsoring the specials); the teams are named as facts. football.js fills it. */
@layer components {
  #football .find-grid { align-items: start; }
  #football .bar-media > .gd-match { grid-column: 1 / -1; }
  .gd-match {
    position: relative; overflow: hidden;
    padding: clamp(1.1rem, .8rem + 1.2vw, 1.6rem);
    background: var(--tint); border: 1px solid var(--line); border-top: 4px solid var(--ember);
    border-radius: var(--r-lg); box-shadow: var(--sh-1);
  }
  .gd-match-tag {
    margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ember);
  }
  .gd-match-teams {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .55rem; margin: .35rem 0 .2rem;
    font-family: var(--f-display); font-weight: 400; text-transform: uppercase; line-height: 1;
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); color: var(--ink); letter-spacing: .01em;
  }
  .gd-match-teams b { font-weight: 400; }
  .gd-match-teams .gd-at { font-family: var(--f-body); font-size: .4em; font-weight: 700; color: var(--muted); text-transform: none; }
  .gd-match-meta { margin: 0; font-size: var(--step--1); font-weight: 600; color: var(--navy); }
  .gd-match-count {
    display: inline-flex; align-items: center; gap: .5rem; margin: .8rem 0 0; padding: .45rem .85rem;
    border-radius: var(--r-pill); background: var(--ink); color: #fff;
    font-weight: 700; font-size: var(--step--1); font-variant-numeric: tabular-nums;
  }
  .gd-match-count[data-state="live"] { background: var(--ember-fill, var(--ember)); }
  .gd-match-count[data-state="live"]::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: gd-pulse 1.6s ease-in-out infinite;
  }
  .gd-match-where { margin: .7rem 0 0; font-size: var(--step--1); color: var(--muted); }
  @keyframes gd-pulse { 50% { opacity: .25; } }
  @media (prefers-reduced-motion: reduce) { .gd-match-count[data-state="live"]::before { animation: none; } }
}
@layer components {
  .gd-match-count[data-state="final"] { background: var(--navy); }
}