/* Fixtures page — club-centric season schedule.
   The prominent next-match card reuses .next-match-card / .panel-next-match
   from home.css; the stacked upcoming/results lists are defined here. */

.fixtures-page {
  display: grid;
  gap: 16px;
}

.fixtures-hero-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: var(--s3);
}

.fixtures-hero-head h3 { margin: 0; }

.fixtures-sub {
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
}

/* Competition banner at the top of the next-match card — names the next round
   (League round N or the cup stage). Cup reads gold + a warmer card border. */
.next-match-card.is-cup { border-color: color-mix(in srgb, var(--gold) 35%, var(--line)); }
.next-match-comp {
  text-align: center;
  font-size: var(--fs-cap);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.next-match-comp.cup { color: var(--gold); }
.next-match-comp.league { color: var(--text-2); }

/* -------------------------------------------------- stacked game lists ---- */

.fxc-panel > h3 { margin: 0 0 var(--s3); }

.fxc-list { display: grid; gap: 6px; }

/* Cap the list at four rows; "Show more" toggles .expanded to reveal the rest. */
.fxc-list .fxc:nth-child(n+5) { display: none; }
.fxc-list.expanded .fxc:nth-child(n+5) { display: grid; }

.fxc-more { width: 100%; margin-top: 10px; }

.fxc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s3);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}

/* Cup ties read gold and carry a left accent to stand apart from league rows. */
.fxc.is-cup {
  border-left: 2px solid color-mix(in srgb, var(--gold) 55%, transparent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--gold) 7%, transparent), transparent 55%),
    var(--surface);
}

/* Crest + opponent name/subtitle — links to the club page. */
.fxc-team {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.fxc-crest { display: inline-flex; flex-shrink: 0; }
.fxc-crest canvas { display: block; }
.fxc-meta { display: grid; gap: 1px; min-width: 0; }
.fxc-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fxc-team:hover .fxc-name { color: var(--gold); }
.fxc-sub {
  color: var(--text-3);
  font-size: var(--fs-cap);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Opponent recent form (pips reuse .form-pip from base.css). */
.fxc-form { display: inline-flex; gap: 3px; }
.fxc-noform { color: var(--text-3); }

/* Result / plan, links to the match replay or the prep editor. */
.fxc-end {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s2);
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}
.fxc-score {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fxc-end:hover .fx-link { color: var(--gold); }

.fx-pens { margin-left: 4px; color: var(--gold); font-size: 9px; font-weight: 700; vertical-align: top; }

.fx-link {
  color: var(--text-3);
  font-size: var(--fs-cap);
  font-weight: 600;
  white-space: nowrap;
}

/* W / D / L outcome chip. */
.fx-badge {
  min-width: 20px;
  text-align: center;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: var(--fs-cap);
  font-weight: 700;
}
.fx-badge.w { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.fx-badge.l { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.fx-badge.d { color: var(--text-3); }

/* ------------------------------------------------ gauntlet expeditions ---- */

.fixtures-gauntlet { display: grid; gap: var(--s4); }
.fixtures-gauntlet > h3 { margin: 0; }
.gaunt-run {
  display: grid;
  gap: 10px;
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.gaunt-run:last-child { padding-bottom: 0; border-bottom: 0; }
.gaunt-head { display: flex; align-items: center; gap: var(--s3); }
.gaunt-head .min { min-width: 28px; color: var(--text-3); font-size: var(--fs-cap); font-weight: 700; }
.gaunt-summary { flex: 1; min-width: 0; font-weight: 600; }
.gaunt-status.won { color: var(--good); }
.gaunt-status.lost { color: var(--bad); }
.gaunt-noloot { font-size: var(--fs-sm); }

/* On narrow screens the row folds: opponent on top, form + result beneath. */
@media (max-width: 560px) {
  .fxc {
    grid-template-columns: 1fr auto;
    grid-template-areas: "team team" "form end";
    row-gap: 8px;
  }
  .fxc-team { grid-area: team; }
  .fxc-form { grid-area: form; align-self: center; }
  .fxc-end { grid-area: end; }
}