/*
 * FE1005 - knockout alignment authority.
 * Targeted only at the league knockout board; no application logic.
 */

.football-league-knockout-board[data-fe1005-knockout-stage-count] {
    min-width: 0;
    width: 100%;
}

/* One saved stage (for example a preliminary/final batch with many ties):
   use the whole content width instead of leaving one 270px column. */
.football-league-knockout-board[data-fe1005-knockout-stage-count="1"] {
    display: block !important;
    overflow-x: visible !important;
}

.football-league-knockout-board[data-fe1005-knockout-stage-count="1"] > .football-league-knockout-stage {
    width: 100% !important;
    min-width: 0 !important;
}

.football-league-knockout-board[data-fe1005-knockout-stage-count="1"] .football-league-knockout-stage__ties {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)) !important;
    align-items: start;
    gap: .72rem !important;
}

/* Two stages can occupy the desktop width cleanly. */
@media (min-width: 901px) {
    .football-league-knockout-board[data-fe1005-knockout-stage-count="2"] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-columns: unset !important;
        grid-auto-flow: row !important;
        overflow-x: visible !important;
        align-items: start;
    }

    .football-league-knockout-board[data-fe1005-knockout-stage-count="2"] > .football-league-knockout-stage {
        min-width: 0 !important;
        width: auto !important;
    }

    /* Three or more stages remain a bracket rail, but with consistently
       aligned stage widths instead of a crushed first column. */
    .football-league-knockout-board[data-fe1005-knockout-stage-count]:not([data-fe1005-knockout-stage-count="1"]):not([data-fe1005-knockout-stage-count="2"]) {
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(290px, 1fr) !important;
        grid-template-columns: none !important;
        align-items: start;
        overflow-x: auto !important;
        scroll-snap-type: x proximity;
    }

    .football-league-knockout-board[data-fe1005-knockout-stage-count]:not([data-fe1005-knockout-stage-count="1"]):not([data-fe1005-knockout-stage-count="2"]) > .football-league-knockout-stage {
        min-width: 290px !important;
        scroll-snap-align: start;
    }
}

.football-league-knockout-stage__ties {
    align-content: start;
}

.football-league-knockout-tie,
.football-league-knockout-tie__link,
.football-league-knockout-team {
    min-width: 0;
}

@media (max-width: 900px) {
    .football-league-knockout-board[data-fe1005-knockout-stage-count="1"] .football-league-knockout-stage__ties {
        grid-template-columns: 1fr !important;
    }

    .football-league-knockout-board[data-fe1005-knockout-stage-count]:not([data-fe1005-knockout-stage-count="1"]) {
        display: flex !important;
        align-items: flex-start;
        gap: .65rem !important;
        overflow-x: auto !important;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x mandatory;
        padding-bottom: .45rem;
    }

    .football-league-knockout-board[data-fe1005-knockout-stage-count]:not([data-fe1005-knockout-stage-count="1"]) > .football-league-knockout-stage {
        flex: 0 0 min(86vw, 320px) !important;
        width: min(86vw, 320px) !important;
        min-width: min(86vw, 320px) !important;
        scroll-snap-align: start;
    }
}

/* Keep the live section stable while membership changes in-place. */
[data-football-index-live-section][hidden] {
    display: none !important;
}

[data-fe1005-live-clone="1"],
[data-fe1005-live-discovery="1"] {
    animation: none !important;
}