/* ==========================================
   LEAGUE / CHAMPIONSHIP PAGE
   ========================================== */

/* League Header */
.league-page-header {
    position: relative;
    /* NB: no overflow:hidden here — it clipped the absolutely-positioned
       .league-season-menu that opens downward past the header, cutting the
       list short. The rounded corners are preserved by giving the two
       full-bleed background layers (.league-header-bg + ::after) their own
       border-radius below. */
    background-color: var(--bg-card);
    border-radius: 16px;
    max-width: var(--container-max-width);
    margin: 16px auto 0;
    width: calc(100% - 24px);
}

/* Decorative stadium backdrop (assets/images/league-header-bg.jpg).
   Rendered as an absolute layer so the layout degrades gracefully
   when the image file is not present yet. */
.league-header-bg {
    position: absolute;
    inset: 0;
    border-radius: inherit;              /* round corners now the parent no longer clips */
    background-image: var(--league-header-bg, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    pointer-events: none;
}

/* Purple gradient overlay sitting above the backdrop image */
.league-page-header::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;              /* match the header's rounded corners */
    background: linear-gradient(30deg, rgba(13, 0, 30, 1) 0%, rgba(13, 0, 30, 0.27) 100%);
    pointer-events: none;
}

.league-header-container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 28px;
}

/* The sticky .league-tabs bar sits just below the header at z-index:99, while
   .league-header-container forms a stacking context at z-index:1 — so the
   season menu (z-index:40, trapped inside that context) renders UNDER the tabs
   once it overflows the header. While the dropdown is open, lift the header
   content layer above the tabs so the full list stays visible. Scoped to the
   [open] state so the normal sticky-tabs-on-scroll layering is untouched. */
.league-page-header:has(.league-season-dropdown[open]) .league-header-container {
    z-index: 100;
}

/* Left: logo + titles */
.league-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.league-header-logo {
    width: 70px;
    height: 70px;
    object-fit: contain;
    flex-shrink: 0;
}

.league-header-titles {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.league-page-name {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2em;
    color: var(--text-white);
    margin-bottom: 0;
}

.league-page-country {
    font-family: var(--font-heading);
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1.22em;
    color: var(--text-secondary);
    margin-bottom: 0;
}

/* Right: action buttons */
.league-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-shrink: 0;
}

.league-header-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 5px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 40px;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-tertiary);
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition-fast);
}

.league-header-btn i {
    font-size: 20px;
    line-height: 1;
    color: var(--text-muted);
}

.league-header-btn:hover {
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.league-season-btn i {
    font-size: 11px;
}

.league-follow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 8px 18px;
    background: var(--accent-purple);
    border: none;
    border-radius: 40px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--text-white);
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition-fast);
}

.league-follow-btn:hover {
    filter: brightness(1.15);
}

.league-follow-btn.following {
    /* background: var(--bg-card-header); */
}

/* League Tabs */
.league-tabs {
    position: sticky;
    top: var(--header-height);
    z-index: 99;
    display: flex;
    align-items: stretch;
    height: 50px;
    padding: 0 16px;
    background: var(--bg-card);
    border-radius: 16px;
    max-width: var(--container-max-width);
    margin: 16px auto 0;
    width: calc(100% - 24px);
}

.league-tabs-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 24px;
    overflow-x: auto;
    scrollbar-width: none;
}

.league-tabs-container::-webkit-scrollbar {
    display: none;
}

.league-tab {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    padding: 12px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: 700;
    line-height: 1.22em;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition-fast);
}

.league-tab:hover {
    color: var(--text-primary);
}

.league-tab.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

/* Matches is a mobile-only tab: above the stacking breakpoint the fixtures
   aside is a persistent column, so this tab has nothing to switch to. */
.league-tab[data-tab="matches"] {
    display: none;
}

/* No fixtures at all -> no desktop column, exactly as when the aside used to
   be skipped server-side. Mobile still shows it (see the 991.98px block).
   Compound selector: must outrank `.league-fixtures-side { display: flex }`,
   which is declared further down at the same specificity. */
.league-fixtures-side.league-fixtures-side--empty {
    display: none;
}

/* League Content */
.league-content {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 24px 0px;
    width: calc(100% - 24px);
}

.league-tab-pane {
    display: none;
}

.league-tab-pane.active {
    display: block;
}

/* ═══════════════════════════════════════════════════════════════
   Page Layout — persistent fixtures side + tabbed main side
   (Figma 40000232:8805 "Frame 1010109627": row, gap 16px)
   The matches panel lives OUTSIDE the tab panes, so switching
   tabs only swaps the main side while fixtures stay visible.
   ═══════════════════════════════════════════════════════════════ */
.league-layout {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

/* Matches column — fixed width (Figma layout_LKSSXS: 481px) */
.league-fixtures-side {
    width: 481px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Main column — fills remaining width, hosts the tab panes */
.league-main-side {
    flex: 1;
    min-width: 0;
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   Fixtures Card (Figma 40000250:5602 — bg #1C1C1C, radius 14px)
   ═══════════════════════════════════════════════════════════════ */
.fixtures-section {
    background: var(--bg-card);
    border-radius: var(--border-radius-card);
    overflow: hidden;
}

/* Card header bar (Figma Overlay+HorizontalBorder — #232323,
   padding 12px 16px, Graphik Arabic 700/14 → Montserrat) */
.fixtures-section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 12px 16px;
    background: var(--bg-card-header);
    font-family: var(--font-heading);
    font-size: var(--font-size-base);
    font-weight: 700;
    line-height: 1.43em;
    color: var(--text-primary);
}

/* Round sub-label (secondary band under the card header) */
.fixtures-round-label {
    padding: 8px 16px 6px;
    font-family: var(--font-heading);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

/* Date band (Figma Component 14 "td" — #2E2E2E bg, padding 6px 16px,
   Montserrat 700/10 with 4% letter-spacing). Acts as a combined
   header row: round name (start) + date (end) on the ended list. */
.fixtures-date-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 16px;
    background: var(--border-color);
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-primary);
}

/* Round name inside the combined header — muted to preserve the
   original round-label hierarchy; the date value stays primary. */
.fixtures-round-name {
    color: var(--text-tertiary);
}

/* Match row (Figma Component 16 — horizontal row:
   home team | center score/time | away team, padding 8px 16px,
   1px #2E2E2E bottom border). Fixed full width keeps every row
   consistent across the fixtures panel. */
.fixture-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    min-height: 70px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-color);
    text-decoration: none;
    color: inherit;
    transition: var(--transition-fast);
}

.fixture-item:last-child {
    border-bottom: none;
}

.fixture-item:hover {
    background: var(--bg-card-hover);
}

/* Team rows — 36px tall, 10px gap (Figma layouts 9WY1YG / 7JBQJ1).
   Home row is right-aligned (name → logo); away row is left-aligned
   (logo → name). */
.fixture-team {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    min-width: 0;
    flex: 1 1 0;
}

.fixture-team-home {
    justify-content: flex-end;
}

.fixture-team-away {
    justify-content: flex-start;
}

.fixture-team img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Team name — Body/Sm Medium 12 */
.fixture-team-name {
    min-width: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1.5em;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fixture-team-away .fixture-team-name {
    flex: 1;
}

/* Center stack — score / time centered, 4px gap (layout_4GMD36) */
.fixture-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    min-width: 120px;
    padding: 2px 0;
}

/* Score — Montserrat 900/20 with -2.5% tracking (style_R93BYI) */
.fixture-score {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.22em;
    color: var(--text-primary);
}

.fixture-time {
    font-family: var(--font-heading);
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-secondary);
}

/* Live minute badge (Figma Overlay — rgba(255,61,61,0.2) chip, 4px radius,
   6px red dot + Montserrat 700/10 uppercase red text) */
.fixture-minute-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--accent-red-bg);
    border-radius: 4px;
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent-red);
}

.fixture-minute-dot {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--accent-red);
    animation: pulse 1.5s infinite;
}

/* Live match rows keep a subtle red tint */
.fixture-live {
    background: var(--match-live-bg);
}

.fixture-live:hover {
    background: var(--accent-red-bg);
}

.fixture-score-live {
    color: var(--color-live);
    animation: pulse 1.5s infinite;
}

.live-pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--color-live);
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Load-more button sitting inside a fixtures card */
.fixtures-section > .load-more-btn {
    display: block;
    width: auto;
    margin: 12px 16px 16px;
}

/* ═══════════════════════════════════════════════════════════════
   League News (Figma 40000237:9392 — column, gap 16px;
   row 1 = one full-width featured card, next rows = two cards)
   Cards reuse the shared .news-featured component (style.css),
   which already matches the Figma "Featured Article" component.
   ═══════════════════════════════════════════════════════════════ */
.league-news-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Neutralize responsive.css flex-basis hints inside the grid */
.league-news-grid .news-featured {
    min-width: 0;
}

.league-news-grid .news-featured:first-child {
    grid-column: 1 / -1;
}

/* Deep-purple brand fallback under the article image
   (Figma fill_21SQ3X gradient base #2D0054) */
.league-news-grid .news-featured-bg {
    background-color: var(--bg-footer);
}

/* Meta row — clock icon + date (Figma Component 8: gap 6px,
   Body/Sm Medium 12, #81797C) */
.league-news-grid .news-featured-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
}

.league-news-grid .news-featured-meta i {
    font-size: var(--font-size-md);
    line-height: 1;
}

/* Standings styles (filter tabs, table, zones, legend) now live in the shared
   assets/css/standings.css — single source used by the match-detail, league
   and team standings renderer. */

/* Transfer tab — card styles live in the shared assets/css/transfer.css
   (Figma 40000248:4603). league.php loads that stylesheet as well, so no
   page-scoped .transfer-* rules are needed here. */

/* Rounds Tab - Round Selector */
.round-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 24px;
    padding: 12px;
    background: var(--bg-card);
    border-radius: 8px;
}

.round-selector-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
}

.round-selector-btn:hover {
    border-color: var(--accent-teal);
    color: var(--accent-teal);
}

.round-selector-label {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-primary);
    min-width: 200px;
    text-align: center;
}

.round-selector-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.spin-icon {
    display: inline-block;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Video Tab */
.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.video-card {
    background: var(--bg-card);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    transition: var(--transition-fast);
}

.video-card:hover {
    transform: translateY(-2px);
    background: var(--bg-card-hover);
}

.video-card-thumb {
    position: relative;
    width: 100%;
    height: 160px;
    overflow: hidden;
}

.video-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-card-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

.video-card-body {
    padding: 12px;
}

.video-card-title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 6px;
}

.video-card-date {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

/* ═══ Responsive - League Page ═══ */
@media (max-width: 1199.98px) {
    .league-fixtures-side {
        width: 400px;
    }
}

@media (max-width: 991.98px) {
    /* Stack the layout: fixtures side becomes full width and turns into the
       pane of the Matches tab instead of showing above every other tab. */
    .league-layout {
        flex-direction: column;
    }
    .league-fixtures-side {
        width: 100%;
    }
    .league-tab[data-tab="matches"] {
        display: flex;
    }
    .league-fixtures-side.league-fixtures-side--empty {
        display: flex;
    }
    /* Aside and panes are mutually exclusive here. league.js mirrors the
       active tab onto [data-active-tab]; without that attribute (script
       disabled / not yet run) both stay visible, i.e. the previous stacked
       behaviour, so content is never lost. */
    .league-layout[data-active-tab="matches"] .league-main-side {
        display: none;
    }
    .league-layout[data-active-tab]:not([data-active-tab="matches"]) .league-fixtures-side {
        display: none;
    }
    .video-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .league-header-container {
        padding: 24px 20px;
    }
    .league-header-logo {
        width: 56px;
        height: 56px;
    }
    .league-news-grid {
        grid-template-columns: 1fr;
    }
    .fixture-item {
        padding: 8px 12px;
    }
    .fixture-team img {
        width: 28px;
        height: 28px;
    }
    .fixture-score {
        font-size: 18px;
    }
}

@media (max-width: 575.98px) {
    .league-header-container {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 20px 16px;
    }
    .league-header-logo {
        width: 48px;
        height: 48px;
    }
    .league-page-name {
        font-size: var(--font-size-md);
    }
    .league-header-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    .league-header-btn {
        font-size: var(--font-size-sm);
    }
    .league-follow-btn {
        font-size: var(--font-size-sm);
    }
    .league-tabs {
        padding: 0 8px;
    }
    .league-tabs-container {
        justify-content: flex-start;
        padding: 0 8px;
    }
    .league-tab {
        padding: 10px 12px;
        font-size: var(--font-size-xs);
    }
    .fixture-team-name {
        font-size: var(--font-size-xs);
    }
    .video-grid {
        grid-template-columns: 1fr;
    }
}

/* Load More Button */
.load-more-btn {
    display: block;
    width: 100%;
    padding: 12px 24px;
    margin-top: 12px;
    margin-inline-end: auto !important;
    margin-inline-start: auto !important;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}
.load-more-btn:hover {
    background: var(--accent-teal);
    border-color: var(--accent-teal);
    color: var(--text-on-accent);
}
.load-more-btn .load-more-count {
    opacity: 0.7;
    font-size: 0.85em;
    margin-inline-start: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   STATISTICS TAB — layout shell only.
   The Top Scorers / Top Assists component (pills, podium, table)
   is rendered by assets/js/scorers-renderer.js and styled by the
   shared assets/css/scorers.css.
   ═══════════════════════════════════════════════════════════════ */
.league-statistics-section {
    display: flex;
    flex-direction: column;
    gap: 18px;
}