/**
 * fixture-pairs.css — the match block that holds two team-news cards.
 *
 * ⭐ THE BLOCK IS THE GRID ITEM NOW, NOT THE CARD. Each board's grid keeps its own
 * class (`.teams-grid` on UCL/IPL, `.tn-grid` on PL) and only its column MINIMUM moves,
 * from one card to one match. Everything inside a card is untouched.
 *
 * ⚠ THE TWO BREAKPOINTS ARE NOT THE SAME NUMBER AND MUST NOT BE MERGED.
 *   · the OUTER grid asks for ≥ 700px per block, so a match never straddles two rows —
 *     which is the whole failure the flat grid had at three columns.
 *   · the INNER pair collapses to stacked at ≤ 760px, slightly WIDER than the outer
 *     minimum, so a block that has been squeezed to the grid's floor has already
 *     stacked rather than trying to seat two 340px cards in 700px.
 */

.vcfx {
  border: 1px solid var(--vc-border);
  border-radius: 14px;
  background: var(--vc-surface-2, var(--vc-surface));
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.vcfx-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 4px;
  min-width: 0;
}

.vcfx-teams {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--vc-text);
  min-width: 0;
  flex-wrap: wrap;
}

/* The club names may be long ("Paris Saint-Germain", "מכבי תל אביב"); the separator
   never is, so it is the one part that must not shrink or wrap away from them. */
.vcfx-side { min-width: 0; overflow-wrap: anywhere; }
.vcfx-v {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--vc-text-sub);
  text-transform: lowercase;
}

.vcfx-ko {
  flex: 0 0 auto;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--vc-text-sub);
  font-variant-numeric: tabular-nums;
}

.vcfx-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

/* A club with no partner on the board — a blank gameweek, or an opponent whose fixture
   has already left the round. One card, at one card's width, not stretched across the
   block as if it were a match. */
.vcfx-cards.is-solo { grid-template-columns: minmax(0, 1fr); max-width: 420px; }

@media (max-width: 760px) {
  .vcfx-cards { grid-template-columns: minmax(0, 1fr); }
  .vcfx-cards.is-solo { max-width: none; }
}

@media (max-width: 420px) {
  .vcfx { padding: 8px; border-radius: 12px; }
  .vcfx-teams { font-size: 0.95rem; }
}