/* ============================================================
   Match-row · gemeinsame Spielzeilen-Komponente
   Verwendet von: spielplan-web.html, tickets.html
   Eine Zeile: Datum-Badge | Teams | Ort | Aktionen
   ============================================================ */

.match-row {
  display: flex; align-items: stretch;
  background: white; border: 1px solid rgba(11,46,63,0.08);
  transition: border-color .15s, transform .15s;
  overflow: hidden;
}
.match-row + .match-row { margin-top: 10px; }
.match-row:hover { border-color: var(--red); transform: translateY(-1px); }
.match-row.home { border-left: 5px solid var(--red); }
.match-row.away { border-left: 5px solid rgba(11,46,63,0.25); }

/* Top-Spiel: eigenes Sternchen-Badge oben rechts am Datum, statt Text
   im ohnehin knappen Ortsfeld zu verlängern (verursachte Überlappung). */
.match-row.top .date-badge { position: relative; }
.match-row.top .date-badge::after {
  content: '★'; position: absolute; top: 5px; right: 6px;
  color: var(--red); font-size: 11px; line-height: 1;
}
.match-row.top .location .tag { color: var(--red); font-weight: 700; }

/* Eine gemeinsame „Eyebrow“-Stimme für alle Mono-Kleinlabels der Zeile */
.match-row .date-badge .wd,
.match-row .date-badge .mo,
.match-row .vs .name small,
.match-row .location .tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 500; font-style: normal;
}

/* Datum-Badge links: reine Info-Spalte, kein eigenes Farbfeld — eine
   dunkle/rote Fläche neben den CTA-Buttons konkurriert zu sehr um aufmerksam-
   keit (Rot = Aktion, sollte allein bei den Buttons bleiben). Heimspiele
   heben sich nur über die rote Zahl ab, nicht über eine Flächenfarbe. */
.match-row .date-badge {
  flex: 0 0 92px; background: transparent; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px 8px; text-align: center;
}
.match-row .date-badge .wd,
.match-row .date-badge .mo { color: #6B7B82; }
.match-row .date-badge .dd {
  font-family: var(--display); font-weight: 900; font-style: normal;
  font-size: 30px; color: var(--ink); line-height: 1; margin: 4px 0;
}
.match-row.home .date-badge .dd { color: var(--red); }

.match-row .divider { flex: 0 0 1px; align-self: stretch; margin: 16px 0; border-right: 1px dashed rgba(11,46,63,0.15); }

/* Teams: eine Zeile, Logo + Name + VS + Name + Logo */
.match-row .vs {
  flex: 1 1 0%; min-width: 200px;
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  gap: 14px; align-items: center;
  padding: 10px 20px;
}
.match-row .vs .side { display: flex; align-items: center; gap: 12px; min-width: 0; }
.match-row .vs .side.right { justify-content: flex-end; flex-direction: row-reverse; }
.match-row .vs img {
  width: 44px; height: 44px; object-fit: contain; flex-shrink: 0;
  background: var(--paper); border-radius: 50%; padding: 4px;
  border: 1px solid rgba(11,46,63,0.06);
}
.match-row .vs .name {
  flex: 1 1 0%; min-width: 0; overflow-wrap: break-word;
  font-family: var(--display); font-weight: 800; font-style: normal;
  font-size: 19px; text-transform: uppercase; line-height: 1.15;
}
.match-row .vs .name small {
  display: block; color: #6B7B82; margin-top: 3px;
}
.match-row .vs .side.right .name { text-align: right; }
.match-row .vs .vs-mark,
.match-row .vs-mark {
  font-family: var(--display); font-weight: 900; font-style: normal;
  font-size: 17px; color: var(--red); flex-shrink: 0;
}
.match-row .vs .result {
  font-family: var(--display); font-weight: 900; font-style: normal;
  font-size: 24px; color: var(--ink); padding: 4px 10px;
  background: var(--paper); border: 2px solid var(--ink); flex-shrink: 0;
}
.match-row .vs .result.win { color: white; background: var(--red); border-color: var(--red); }
.match-row .vs .result.loss { color: var(--ink); background: white; }

/* Ort: Pin-Icon + Spielstätte */
.match-row .location {
  flex: 0 0 168px; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px; color: #5b5853;
}
/* min-width:0 auf dem Text-Wrapper: ohne das verweigert der Browser das
   Schrumpfen unter die Inhaltsbreite und der Ortsname ragt in die
   Aktionen-Spalte hinein (Bug bei langen Namen wie "Max-Schmeling-Halle"). */
.match-row .location > div { min-width: 0; }
.match-row .location .venue {
  font-family: var(--body); font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--ink);
  overflow-wrap: break-word;
}
.match-row .location .tag { display: block; color: #6B7B82; margin-top: 2px; }

/* Aktionen: Tickets + DYN immer nebeneinander. Feste Breite, damit die
   Spalte in jeder Zeile exakt gleich breit ist. */
.match-row .actions {
  flex: 0 0 300px; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 10px 20px;
}
.match-row .actions-row { display: flex; gap: 8px; }
.match-row .actions-row .cta { flex: 1 1 0%; }
.match-row .cta {
  background: var(--red); color: white; text-decoration: none;
  box-shadow: 0 2px 6px rgba(14,14,18,0.18);
  font-family: var(--display); font-weight: 900; font-style: normal;
  font-size: 15px; padding: 15px 14px; text-transform: uppercase;
  text-align: center; letter-spacing: 0.01em; white-space: nowrap;
  transition: background .12s;
}
.match-row .cta:hover { background: var(--red-deep); }
.match-row .cta.secondary { background: var(--ink); }
.match-row .cta.secondary:hover { background: var(--steel); }

/* — Zwischenbreite (halbiertes Browserfenster u.ä.): Datum/Ort/Aktionen
   schmaler machen statt den Teamnamen den Platz wegzunehmen. Schwelle
   rechnerisch ermittelt: Summe der Mindestbreiten von Datum+Ort+Aktionen+
   Teams ergibt ~726px; darunter übernimmt der Stapel-Modus. — */
@media (max-width: 1150px) and (min-width: 736px) {
  .match-row .date-badge { flex-basis: 76px; padding: 10px 4px; }
  .match-row .date-badge .dd { font-size: 24px; }
  .match-row .vs { padding: 12px 10px; gap: 6px; min-width: 240px; }
  .match-row .vs img { width: 34px; height: 34px; }
  .match-row .vs .name { font-size: 13px; }
  .match-row .location { flex-basis: 158px; padding: 12px 8px; }
  .match-row .location .venue { font-size: 12px; }
  .match-row .actions { flex-basis: 200px; padding: 12px 14px; }
  .match-row .cta { font-size: 11px; padding: 10px 8px; }
}

/* — Handy: Zeile stapelt sich statt Segmente zu klippen — */
@media (max-width: 735px) {
  .match-row { flex-direction: column; }
  .match-row .date-badge {
    flex-direction: row; justify-content: flex-start; gap: 8px;
    padding: 8px 16px; flex-basis: auto;
  }
  .match-row .date-badge .dd { margin: 0; }
  .match-row .divider { border-right: none; border-bottom: 1px dashed rgba(11,46,63,0.15); margin: 0 16px; align-self: stretch; }
  /* Teams bleiben in einer Zeile (Logo–Name–VS–Name–Logo) statt
     untereinander gestapelt — dafür reicht die Breite locker, sobald
     Datum/Ort/Aktionen aus der Zeile raus sind. Weniger Innenabstand
     überall, damit die Karte nicht unnötig viel Leerraum zieht. */
  .match-row .vs { padding: 10px 14px; gap: 8px; }
  .match-row .vs img { width: 36px; height: 36px; }
  .match-row .vs .name { font-size: 14px; }
  .match-row .location { flex-basis: auto; padding: 8px 16px; }
  .match-row .actions { flex-basis: auto; padding: 8px 16px 14px; }

  /* Site-weiter Fallback: falls .match-row an anderer Stelle im 12-Spalten-
     artigen Grid-Kontext landet, hier zusätzlich hart auf 1 Spalte stapeln. */
  .web .match-row { grid-template-columns: 1fr !important; gap: 12px 14px; }
  .web .match-row .price { text-align: left !important; }
  .web .match-row .vs.away { justify-content: flex-start; }
}