/* ============================================================
   sports.css — the Sports view of the Xavier Cup tab.
   Markup: components/sports.js.

   The grid of sports, then a sport's page: breadcrumb, a photo
   header, the division switch, news, standings, the knockout
   bracket and the matches; and a team's page inside a sport.
   Only the site's tokens, so it follows every design and theme.
   ============================================================ */

/* A red live dot, used in tiles, the header and the bracket. */
.sport-tile__live {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  vertical-align: 1px;
  border-radius: 50%;
  background: var(--tx-live);
  animation: livePulse 1.8s ease-in-out infinite;
}

/* ============================================================
   THE GRID OF SPORTS
   ============================================================ */
.sport-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
  gap: var(--space-3);
}
.sport-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-5) var(--space-3) var(--space-4);
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  text-align: center;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms, border-color 180ms;
}
.sport-tile:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.sport-tile__icon {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  background: var(--surface-2);
}
.sport-tile__icon img { width: 60px; height: 60px; object-fit: contain; }
.sport-tile__letter {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 800;
  color: var(--ink-2);
}
.sport-tile__name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 800;
}
.sport-tile__divs {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.sport-tile__stats { margin-top: 2px; font-size: 13px; color: var(--ink-2); }

/* ============================================================
   A SPORT'S PAGE
   ============================================================ */
.sports-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-bottom: var(--space-4);
  font-size: 14px;
  color: var(--muted);
}
.sports-crumbs button {
  padding: 4px 2px;
  font-weight: 600;
  color: var(--ink-2);
}
.sports-crumbs button:hover { color: var(--ink); text-decoration: underline; }
.sports-crumbs [aria-current="page"] { font-weight: 700; color: var(--ink); }
.sports-crumbs__sep { opacity: 0.6; }

/* Header: the sport's photo (or its placeholder), name on a fade. */
.sport-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: clamp(200px, 26vw, 300px);
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--radius-xl);
  background: var(--tx-tile);
  color: #FFFFFF;
}
.sport-head__media { position: absolute; inset: 0; z-index: -1; }
.sport-head__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(4, 12, 28, 0.88) 0%, rgba(4, 12, 28, 0.35) 55%, transparent 80%),
    linear-gradient(90deg, rgba(4, 12, 28, 0.5) 0%, transparent 60%);
}
.sport-head__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sport-head__mark {
  position: absolute;
  right: 6%;
  top: 50%;
  width: clamp(96px, 16vw, 168px);
  height: auto;
  transform: translateY(-50%);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
}
.sport-head__text {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--space-3);
}
.sport-head__icon {
  grid-row: span 2;
  width: 48px;
  height: 48px;
  padding: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  object-fit: contain;
}
.sport-head__name {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.05;
  color: #FFFFFF;
}
.sport-head__stats { font-size: 14px; color: rgba(255, 255, 255, 0.86); }

.sport-divs-row { margin-top: var(--space-4); }

/* Sections down the page */
.sport-sec { margin-top: var(--space-7); }
.sport-sec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.sport-sec__title {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 800;
  color: var(--ink);
}
.sport-empty { font-size: 14px; color: var(--muted); font-style: italic; }
.sport-note { margin-top: var(--space-2); font-size: 12.5px; color: var(--muted); }

.sport-news { margin-top: 0; }

.sport-photos {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 4px;
}
.sport-photos img {
  flex: 0 0 auto;
  height: 170px;
  border-radius: var(--radius);
  object-fit: cover;
}

/* ---------- Standings ---------- */
.standings-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
}
.standings {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.standings th,
.standings td {
  padding: 10px 8px;
  text-align: center;
  white-space: nowrap;
}
.standings thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.standings abbr[title] { text-decoration: none; cursor: help; }
.standings tbody tr + tr { border-top: 1px solid var(--border); }
.standings tbody tr.is-mine { background: color-mix(in srgb, var(--tx-accent) 14%, transparent); }
.standings tbody tr.is-mine .standings__rank { box-shadow: inset 4px 0 0 var(--tx-accent); }
.standings .standings__team { text-align: left; width: 100%; }
.standings__rank { width: 36px; padding-left: 14px; color: var(--muted); font-weight: 700; }
/* Wins and Losses: two even columns of bold numbers. */
.standings .standings__num { width: 76px; font-size: 15px; font-weight: 800; color: var(--ink); }
.standings thead .standings__num { font-size: 11px; font-weight: 700; color: var(--muted); }
.standings tr > :last-child { padding-right: 14px; }
.standings__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 2px 4px;
  margin: -2px -4px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  color: var(--ink);
  text-align: left;
}
.standings__btn:hover .standings__name,
.standings__btn:hover .standings__short { text-decoration: underline; }
.standings__crest { width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto; }
.standings__crest--blank { display: inline-block; border-radius: 50%; background: var(--surface-2); }
.standings__short { display: none; }

/* ---------- Knockouts ---------- */
.bracket {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: var(--space-5);
}
.bracket__col { display: flex; flex-direction: column; gap: var(--space-3); }
.bracket__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.bracket__col--final .bracket__label:not(:first-child) { margin-top: var(--space-3); }

.kobox {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  transition: border-color 160ms, box-shadow 160ms;
}
button.kobox:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.kobox.is-mine { border-color: transparent; box-shadow: 0 0 0 2.5px var(--tx-accent); }
.kobox__row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kobox__crest { width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; }
.kobox__crest--blank { display: inline-block; border-radius: 50%; background: var(--surface-2); }
.kobox__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
}
.kobox__score {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.kobox__row.is-winner .kobox__name { font-weight: 800; }
.kobox__row.is-loser { color: var(--muted); }
.kobox__meta {
  padding-top: 6px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}
.kobox--ongoing .kobox__meta { color: var(--tx-live); }
.kobox--tbd {
  align-items: center;
  justify-content: center;
  min-height: 92px;
  border-style: dashed;
  background: transparent;
}
.kobox__tbd { font-size: 13px; color: var(--muted); }

/* ============================================================
   A TEAM INSIDE A SPORT
   ============================================================ */
.team-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--surface);
}
.team-head__crest { width: 76px; height: 76px; object-fit: contain; flex: 0 0 auto; }
.team-head__crest--blank { display: inline-block; border-radius: 50%; background: var(--surface-2); }
.team-head__text { flex: 1 1 220px; min-width: 0; }
.team-head__kicker {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.team-head__name {
  margin-top: 2px;
  font-family: var(--font-serif);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
}
.team-head__college { margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.team-head__follow { flex: 0 0 auto; }

.team-record {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.team-record__item {
  min-width: 64px;
  padding: 8px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: center;
}
.team-record dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.team-record abbr[title] { text-decoration: none; }
.team-record dd {
  margin: 2px 0 0;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.sport-more { margin-top: var(--space-3); }

/* ============================================================
   Phones: everything a size down, so a sport's page reads in a
   few screens rather than many.
   ============================================================ */
@media (max-width: 560px) {
  /* The sports as a list: picture left, words right. */
  .sport-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .sport-tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-3);
    row-gap: 0;
    padding: 10px 14px;
    border-radius: 16px;
    text-align: left;
  }
  .sport-tile__icon { grid-column: 1; grid-row: 1 / 4; width: 52px; height: 52px; margin: 0; }
  .sport-tile__icon img { width: 38px; height: 38px; }
  .sport-tile__name { font-size: 16px; }
  .sport-tile__stats { margin-top: 0; font-size: 12.5px; }

  .sports-crumbs { margin-bottom: var(--space-2); font-size: 13px; }
  .sport-head { min-height: 140px; padding: 14px 16px; border-radius: var(--radius-lg); }
  .sport-head__mark { width: 84px; right: 4%; }
  .sport-head__icon { width: 38px; height: 38px; padding: 4px; }
  .sport-head__name { font-size: 26px; }
  .sport-head__stats { font-size: 12.5px; }
  .sport-divs-row { margin-top: var(--space-3); }

  .sport-sec { margin-top: var(--space-5); }
  .sport-sec__head { margin-bottom: var(--space-2); }
  .sport-sec__title { font-size: 18px; }
  .sport-news { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .sport-news .news-post { padding: 12px; }
  .sport-news .news-post__body {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
  }
  .sport-photos img { height: 120px; }

  .standings { font-size: 13.5px; }
  .standings th, .standings td { padding: 8px 5px; }
  .standings__rank { width: 28px; padding-left: 10px; }
  .standings .standings__num { width: 64px; }
  .standings tr > :last-child { padding-right: 10px; }
  .standings__name { display: none; }
  .standings__short { display: inline; }
  .standings__crest { width: 24px; height: 24px; }

  /* Semifinals and final stay side by side: shorter than stacked. */
  .bracket { gap: var(--space-3); }
  .bracket__col { gap: var(--space-2); }
  .kobox { gap: 4px; padding: 8px 10px; border-radius: 12px; }
  .kobox__crest { width: 20px; height: 20px; }
  .kobox__name { font-size: 13px; }
  .kobox__score { font-size: 14px; }
  .kobox__meta { padding-top: 4px; font-size: 11px; }
  .kobox--tbd { min-height: 76px; }

  .team-head { gap: var(--space-3); padding: 14px; border-radius: var(--radius-lg); }
  .team-head__crest { width: 52px; height: 52px; }
  .team-head__text { flex-basis: 160px; }
  .team-head__name { font-size: 22px; }
  .team-head__college { font-size: 12.5px; }
  .team-head__follow { width: 100%; }
  .team-record { gap: 6px; margin-top: var(--space-3); }
  .team-record__item { flex: 1 1 56px; min-width: 0; padding: 6px 4px; border-radius: 12px; }
  .team-record dt { font-size: 10px; }
  .team-record dd { font-size: 16px; }
}