/* Event page only — loaded after main.css */

/* Hero */
.event-hero{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px; margin:20px 0;
}

.event-meta{
  display:flex; align-items:center; gap:8px; color:#2b3a55; margin-bottom:8px;
}
.event-comp-logo{
  border-radius:8px; border:1px solid var(--border); background:#fff;
}
.event-comp-name{ font-weight:700; }

.event-title{
  margin:6px 0 14px; font-size:28px; line-height:1.2; letter-spacing:.2px;
}

/* Sizes used to keep badges and VS perfectly aligned */
.event-hero{ --badge:112px; --vs:48px; }

.teams-grid{
  display:grid; grid-template-columns:1fr 80px 1fr; align-items:start;
  gap:24px; margin:10px 0 16px;
}
.team{text-align:center}
.team img{
  display:block; margin:0 auto 8px;
  width:var(--badge); height:var(--badge); object-fit:contain;
  border-radius:16px; border:1px solid var(--border); background:#fff;
}
.team-name{ font-weight:800; }

/* Keep VS centered on the badges regardless of name height */
.vs{
  display:flex; align-items:center; justify-content:center;
  align-self:start;                           /* anchor to row top */
  margin-top: calc((var(--badge) - var(--vs)) / 2); /* center vs against badge */
}
.vs-icon{
  width:var(--vs); height:var(--vs); display:block;
}

.event-datetime{
  display:grid; gap:4px; color:#2b3a55; font-size:15px;
}
.event-line strong{ margin-right:6px; }
.tz-note{ color:var(--muted); margin-left:8px; }

/* Channels list */
.watch-list{ margin:26px 0; }
.watch-list h2{ margin:0 0 12px; }

.country-group{
  border:1px solid var(--border); border-radius:12px; padding:12px 12px 8px; margin:10px 0; background:#fff;
}
.country-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.country-head h3{ margin:0; font-size:16px; }

.channel-list{
  display:flex; flex-wrap:wrap; gap:8px;
}
.channel-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border:1px solid var(--border); border-radius:999px;
  background:#fff; text-decoration:none; color:#0b3a82;
}
.channel-chip img{
  width:24px; height:24px; border-radius:6px; border:1px solid var(--border); background:#fff;
}

/* Mobile tweaks */
@media (max-width: 720px){
  .event-title{ font-size:24px; }
  .teams-grid{ grid-template-columns:1fr 60px 1fr; gap:18px; }
  /* Shrink badge size via variable so VS stays aligned */
  .event-hero{ --badge:96px; }
  .team img{ border-radius:14px; }
}

.event-meta .crumbs-inline { margin: 0; }