/*
 * League Detail page styles (Task 1.20). Loaded only by
 * templates/football/league_detail.html - built entirely from existing
 * tokens/primitives (.card, .table-wrapper, .badge, .pill,
 * .filter-option, .fixture-row from sports-components.css), no new
 * colors. The Prediction Slip sidecar needs no layout here:
 * static/css/responsive.css already reserves `.site-main` space for it
 * at >=1024px, and this page places no second slip.
 */

/* Task 1.72A: the crest+name identity sits in its own row, with the
   favourite button below it (user-requested restructure) - a column
   layout, not the row layout Team Detail's own header still uses
   (Stage 5, not yet redesigned) - see .league-detail__header
   .favourite-button-form below for why that page's shared
   .favourite-button-form { margin-left: auto; } rule (favourites.css)
   is reset only inside this page's own header. */
.league-detail__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  margin-bottom: var(--space-24);
}

.league-detail__identity {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  max-width: 100%;
  min-width: 0;
}

/* A long competition name wraps inside the phone width instead of widening the page; a single word wider than
   the phone breaks as a last resort (launch polish). */
.league-detail__identity .text-h1 {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Launch polish: on a phone the badge sits above the name so the name has the full content width - the same
   treatment as Team Detail's header (see team-detail.css). Desktop and tablet are unchanged. */
@media (max-width: 479px) {
  .league-detail__identity {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-12);
  }

  .league-detail__identity .text-h1 {
    font-size: clamp(1.75rem, 9vw, 2rem);
  }
}

.league-detail__header .favourite-button-form {
  margin-left: 0;
}

/* ============ Section navigation (anchors, not JS tabs) ============ */
.league-detail__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-32);
}

.league-detail__section {
  padding-block: var(--space-32);
  border-bottom: 1px solid var(--color-border);
  scroll-margin-top: var(--space-24);
}

.league-detail__section:last-of-type {
  border-bottom: none;
}

.league-detail__section-footer {
  margin-top: var(--space-24);
}

.league-detail__fixtures {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-top: var(--space-16);
}

/* ============ Standings table ============ */
.league-detail__standings-table {
  width: 100%;
  border-collapse: collapse;
}

.league-detail__standings-table th,
.league-detail__standings-table td {
  padding: var(--space-12) var(--space-8);
  text-align: right;
  border-bottom: 1px solid var(--color-border);
}

.league-detail__standings-table th:nth-child(-n+2),
.league-detail__standings-table td:nth-child(-n+2) {
  text-align: left;
}

.league-detail__standings-team {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  white-space: nowrap;
}

.league-detail__disclaimer {
  color: var(--color-text-muted);
}