/* ══════════════════════════════════════════════════════════
   MATCH CARD (.mc) — shared "Nächstes Spiel" / "Letztes Spiel" card
   Centered header (league · date · time / venue / category chip), a matchup
   with logos + names (SVL in red), and a center that is a countdown (upcoming)
   or the score (live/finished). Mobile-first; enhanced on ≥56rem.
══════════════════════════════════════════════════════════ */

.mc {
  position: relative;
  background: linear-gradient(to right, #222222 0%, #0f0f0f 100%);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 1.1rem 1rem 1rem;
  width: 100%;
  box-sizing: border-box;
}

/* ── Header ── */
.mc-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .4rem;
  margin-bottom: 1.1rem;
}

.mc-meta {
  font-family: 'Lippe Condensed', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.25;
}

.mc-venue {
  font-family: 'Lippe Condensed', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.15;
}

.mc-badge {
  font-family: 'Lippe Condensed', sans-serif;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid rgba(var(--rgb-red), .35);
  border-radius: 2px;
  padding: .3rem .7rem .24rem;
  margin-top: .2rem;
  line-height: 1;
}

/* ── Matchup ── */
.mc-matchup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.1rem;
}

.mc-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}

.mc-logo {
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mc-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.mc-logo-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Lippe Condensed', sans-serif;
  font-size: 1rem;
  font-weight: 900;
  color: var(--faint);
  background: rgba(var(--rgb-white), .05);
  border: 1px solid var(--border);
  border-radius: 2px;
}

.mc-name {
  font-family: 'Lippe Condensed', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--white);
  text-align: center;
  line-height: 1.12;
  max-width: 100%;
  word-break: break-word;
}

.mc-team--svl .mc-name {
  color: var(--red);
}

/* ── Center: countdown or score ── */
.mc-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mc-countdown {
  display: flex;
  gap: .35rem;
}

.mc-cd-unit {
  background: var(--black);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: .45rem .4rem;
  min-width: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
}

.mc-cd-num {
  font-family: 'Lippe Condensed', sans-serif;
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
  color: var(--white);
}

.mc-cd-lbl {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--faint);
  line-height: 1;
}

.mc-score {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-family: 'Lippe Condensed', sans-serif;
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1;
  color: var(--white);
}

.mc-score-sep { color: var(--faint); }
.mc-score--live { color: var(--red); }

/* ── Footer (uses BtnSecondary "Zum Spiel" + optional BtnTertiary article link) ── */
.mc-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .85rem;
}

/* ── Empty state ── */
.mc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 2.25rem 1.2rem;
  color: var(--muted);
  font-size: .95rem;
  text-align: center;
}

.mc-empty svg { stroke: var(--faint); }

/* ── Desktop enhancements ── */
@media (min-width: 56.01rem) {
  .mc { padding: 1.4rem 1.4rem 1.2rem; }
  .mc-meta { font-size: 1.3rem; }
  .mc-venue { font-size: 1.15rem; }
  .mc-logo { width: 4.25rem; height: 4.25rem; }
  .mc-name { font-size: 1rem; }
  .mc-matchup { gap: 1rem; }
  .mc-cd-unit { min-width: 2.9rem; padding: .55rem .5rem; }
  .mc-cd-num { font-size: 1.7rem; }
  .mc-cd-lbl { font-size: .72rem; }
  .mc-score { font-size: 2.5rem; }
}