/* Style definitions for the match carousel */

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f7f7f7;
}

/* Carousel wrapper */
.match-carousel {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  position: relative;
  padding: 1rem 0;
}

/* Track containing the cards */
.match-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  scroll-snap-type: x mandatory;
  padding: 0 1rem;
}

/* Base card style */
.match-card {
  flex: 0 0 14rem;
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  text-align: center;
  scroll-snap-align: center;
  overflow: hidden;
}

/* Variant styles for match status */
.match-card.past {
  opacity: 0.6;
}

.match-card.current {
  border: 2px solid #0077cc;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.match-card.next {
  /* no extra styles for next matches */
}

/* Content styles inside cards */
.match-card .match-score {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.match-logos {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.45rem, 1.6vw, 0.85rem);
  margin-bottom: 0.65rem;
}

.match-logos .match-score {
  min-width: 3.6rem;
  margin-bottom: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.match-logo {
  display: block;
  width: clamp(2.75rem, 8vw, 4.25rem);
  height: clamp(2.75rem, 8vw, 4.25rem);
  max-width: 100%;
  min-width: 0;
  object-fit: contain;
  object-position: center;
  justify-self: center;
}

.match-card .match-teams {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.match-card .match-date {
  font-size: 0.875rem;
  color: #555555;
}

.match-card .match-meta {
  font-size: 0.75rem;
  color: #888888;
  margin-top: 0.25rem;
}

/* Status message (error or no matches) */
.match-status {
  margin: 1rem;
  padding: 1rem;
  color: #cc0000;
  background: #ffeeee;
  border: 1px solid #ddaaaa;
  border-radius: 0.25rem;
}

/* Startseite: "Alle Spiele" gleich breit wie "Alle Beiträge" */
.match-carousel + .wp-block-buttons .wp-block-button__link,
.news-all .wp-block-button__link {
  min-width: 178px;
}

/* Match carousel: show blue arrows inside the white navigation buttons. */
.match-nav,
.match-nav--prev,
.match-nav--next {
  color: #000070 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 0 !important;
  line-height: 1;
}

.match-nav > *,
.match-nav--prev > *,
.match-nav--next > * {
  display: none !important;
}

.match-nav::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
}

.match-nav--prev::before {
  margin-left: 4px;
  transform: rotate(-135deg);
}

.match-nav--next::before {
  margin-right: 4px;
  transform: rotate(45deg);
}