/*
 * Global match cards.
 * One source of truth for match-card design and match grids across the site.
 */

.sp-match-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  min-width:0;
  max-width:100%;
}

/*
 * Long match lists.
 *
 * All match cards stay in the server-rendered HTML for search engines and
 * no JavaScript is required to reveal them. The browser may skip layout and
 * paint work for chunks that are still far outside the viewport.
 *
 * This is intentionally CSS-only so it also works after Barba.js navigation
 * without a separate re-initialization step.
 */
.sp-match-stream{
  display:grid;
  gap:14px;
  min-width:0;
  max-width:100%;
}

.sp-match-chunk{
  min-width:0;
  max-width:100%;
  content-visibility:auto;
  contain-intrinsic-block-size:auto 1900px;
}

.sp-match-card{
  overflow:hidden;
  display:grid;
  min-width:0;
  gap:14px;
  padding:16px;
  border:1px solid var(--sp-card-border);
  border-radius:var(--sp-radius-md);
  background:var(--sp-gradient-card);
  color:var(--sp-text);
  text-decoration:none;
  box-shadow:var(--sp-shadow-soft);
  transition:
    transform var(--sp-transition-fast),
    border-color var(--sp-transition-fast),
    background var(--sp-transition-fast);
}

.sp-match-card:hover{
  transform:translateY(-2px);
  border-color:var(--sp-card-border-hover);
  background:var(--sp-gradient-card-hover);
}


/*
 * Дальняя будущая карточка остаётся интерактивной для пользователя,
 * но её конкретный URL не публикуется как crawlable <a href>.
 */
.sp-match-card--deferred-link{
  cursor:pointer;
}

.sp-match-card--deferred-link:focus-visible{
  outline:2px solid var(--sp-accent);
  outline-offset:2px;
}

.sp-match-card__teams{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:12px;
  align-items:center;
}

.sp-match-card__team{
  display:grid;
  min-width:0;
  gap:8px;
  justify-items:center;
  text-align:center;
}

.sp-match-card__logo-wrap{
  overflow:hidden;
  display:flex;
  width:48px;
  height:48px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--sp-card-border);
  border-radius:50%;
  background:var(--sp-white-04);
  transition:
    border-color var(--sp-transition-fast),
    background var(--sp-transition-fast);
}

.sp-match-card:hover .sp-match-card__logo-wrap{
  border-color:var(--sp-card-border-hover);
  background:var(--sp-accent-alpha-08);
}

.sp-match-card__logo{
  display:block;
  width:36px;
  height:36px;
  object-fit:contain;
}

.sp-match-card__logo--placeholder,
.sp-match-card__logo.sp-team-logo--placeholder{
  display:flex;
  width:36px;
  height:36px;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--sp-accent);
  font-size:var(--sp-fs-xs);
  font-weight:var(--sp-fw-black);
}

.sp-match-card__team-name{
  overflow:hidden;
  width:100%;
  color:var(--sp-text);
  font-size:var(--sp-fs-sm);
  font-weight:var(--sp-fw-medium);
  line-height:1.12;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.sp-match-card__score{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:74px;
  color:var(--sp-text);
  font-family:var(--sp-font-display);
  font-size:var(--sp-fs-2xl);
  font-weight:var(--sp-fw-black);
  line-height:1;
  letter-spacing:-.05em;
}

.sp-match-card__score em{
  color:var(--sp-muted);
  font-style:normal;
  font-weight:var(--sp-fw-medium);
}

.sp-match-card__meta{
  display:grid;
  gap:7px;
  padding-top:12px;
  border-top:1px solid var(--sp-card-border);
  color: var(--sp-text-soft);
  font-size:var(--sp-fs-xs);
  font-weight:var(--sp-fw-norm);
  line-height:1.2;
}

.sp-match-card__meta-top{
  display:flex;
  min-width:0;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.sp-match-card__badges{
  display:inline-flex;
  flex:0 0 auto;
  min-width:0;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  margin-left:auto;
}

.sp-match-card__date{
  overflow:hidden;
  min-width:0;
  color:var(--sp-text-soft);
  font-weight:var(--sp-fw-norm);
  white-space:nowrap;
  text-overflow:ellipsis;
}

.sp-match-card__tournament{
  overflow:hidden;
  color:var(--sp-muted);
  white-space:nowrap;
  text-overflow:ellipsis;
}

.sp-match-card__status{
  display:inline-flex;
  flex:0 0 auto;
  width:max-content;
  max-width:none;
  align-items:center;
  justify-content:center;
  margin-left:0;
  overflow:hidden;
  padding:5px 9px;
  border:1px solid var(--sp-card-border);
  border-radius:999px;
  background:var(--sp-white-04);
  color:var(--sp-text);
  font-size:11px;
  font-weight:var(--sp-fw-norm);
  line-height:1;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.sp-match-card__status--scheduled{
  border-color:var(--sp-card-border-hover);
  color:var(--sp-accent);
}

.sp-match-card__status--finished{
  border-color:rgba(244,201,93,.42);
  background:rgba(244,201,93,.10);
  color:#f4c95d;
}

.sp-match-card__status--live{
  border-color:rgba(52,211,153,.34);
  background:rgba(52,211,153,.10);
  color:#6ee7b7;

  animation:
    sp-match-card-live-pulse
    1.8s
    ease-in-out
    infinite;
}

@keyframes sp-match-card-live-pulse{
  0%,
  100%{
    background:rgba(52,211,153,.10);
    box-shadow:0 0 0 0 rgba(52,211,153,0);
  }

  50%{
    background:rgba(52,211,153,.17);
    box-shadow:0 0 0 3px rgba(52,211,153,.08);
  }
}

.sp-match-card__status--postponed,
.sp-match-card__status--cancelled{
  color:var(--sp-muted);
}

@media (max-width:1100px){
  .sp-match-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .sp-match-chunk{
    contain-intrinsic-block-size:auto 2800px;
  }
}

@media (max-width:767px){
  .sp-match-grid{
    grid-template-columns:1fr;
  }

  .sp-match-chunk{
    contain-intrinsic-block-size:auto 5400px;
  }

  .sp-match-card{
    border-radius:var(--sp-radius-mobile);
  }

  .sp-match-card__teams{
    gap:10px;
  }

  .sp-match-card__logo-wrap{
    width:44px;
    height:44px;
  }

  .sp-match-card__logo,
  .sp-match-card__logo--placeholder,
  .sp-match-card__logo.sp-team-logo--placeholder{
    width:32px;
    height:32px;
  }

  .sp-match-card__score{
    min-width:62px;
    font-size:var(--sp-fs-xl);
  }
}

@media (hover:none), (pointer:coarse){
  .sp-match-card:hover{
    transform:none;
  }
}

/*
 * Optional league badge.
 *
 * Rendered only when match-card.php receives:
 * 'show_league' => true
 *
 * Existing match cards therefore keep their current appearance.
 */
.sp-match-card__league-badge{
  display:inline-flex;
  flex:0 0 auto;
  width:max-content;
  max-width:34%;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:5px 9px;
  border:1px solid var(--sp-card-border-hover);
  border-radius:999px;
  background:var(--sp-accent-alpha-08);
  color:var(--sp-accent);
  font-size:11px;
  font-weight:var(--sp-fw-norm);
  line-height:1;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/*
 * Prediction badge.
 * One physical element in the DOM; CSS only changes its position on <=500px.
 */
.sp-match-card__prediction-badge{
  display:inline-flex;
  flex:0 0 auto;
  width:max-content;
  max-width:48%;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:5px 9px;
  border:1px solid rgba(167,139,250,.40);
  border-radius:999px;
  background:rgba(167,139,250,.11);
  color:#c4b5fd;
  font-size:11px;
  font-weight:var(--sp-fw-norm);
  line-height:1;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/*
 * Small phones: the existing status and prediction badge move into
 * a dedicated first row. No desktop/mobile duplicate elements are rendered.
 */
@media (max-width:500px){
  .sp-match-card{
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .sp-match-card__meta,
  .sp-match-card__meta-top{
    display:contents;
  }

  .sp-match-card__badges{
    order:1;
    display:flex;
    width:100%;
    max-width:none;
    margin:0 0 2px;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
  }

  .sp-match-card__league-badge{
    max-width:30%;
  }

  .sp-match-card__prediction-badge{
    max-width:34%;
    margin-right:auto;
  }

  .sp-match-card__status{
    max-width:38%;
    margin-left:auto;
  }

  .sp-match-card__teams{
    order:2;
  }

  .sp-match-card__date{
    order:3;
    width:100%;
    margin-top:2px;
    padding-top:12px;
    border-top:1px solid var(--sp-card-border);
  }

  .sp-match-card__tournament{
    order:4;
    width:100%;
  }
}



/* =========================================================
   Match card: лёгкий hover-вид по умолчанию на мобильных
   ========================================================= */

@media (max-width:767px){

  .sp-match-card{
    border-color:var(--sp-card-border-hover);
    background:var(--sp-gradient-card-hover);
  }

}



@media (prefers-reduced-motion:reduce){
  .sp-match-card__status--live{
    animation:none;
  }
}