/*******************************************************************************************************/
/*
/* This script will use the correct @Media Device Breakpoints for the LEAGUES screen, excluding anything
/* to do with the .top_row, which is taken care off by 'breakpoints_home_header'.
/*
/*  Every time a new block (i.e. block1 block 2 etc) is added to the parent page (i.e. home, leagues etc)
/*  you must add a new line to the 'grid-template-areas' line, AND add 1 to the repeat part of the
/*  'grid-template-rows' line (i.e. repeat(3, auto) will become repeat(4, auto).
/*
/*******************************************************************************************************/

@media only screen and (min-width: 1901px)
{
    .whole_page_leagues {
        min-height: 100vh;
        display: grid;
        grid-template-columns: 5fr 9fr 5fr;
        grid-template-rows: repeat(3, auto) 1fr auto;
        grid-template-areas:
            "top_row top_row top_row"
            "navbar navbar navbar"
            ". block_1 ."
            ". block_2 ."
            ". footer .";
    }

    .block_2 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
                "divisions_ddl_block"
                "league_table_area"
                "fixtures_and_results_area";
    }

    .league_table_area {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
                "switch_area"
                "league_table_header"
                "table_team_rows";
    }

    .switch_area {
        display: grid;
        grid-template-columns: 4fr 4fr 4fr 4fr;
        grid-template-areas:
                "switch_block_1 switch_block_2 switch_block_3 switch_block_4"
                "switch_block_5 switch_block_6 . .";
    }

    /* Syncing both the Table Header and the Table rows. */
    .league_table_header, .table_team_rows {
        display: grid;
        grid-template-columns: 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr;
        grid-template-areas:
                "division_name matches_played matches_won matches_drawn matches_lost games_for games_against games_diff rallies_for rallies_against rallies_diff rubbers_for rubbers_against rubbers_diff points_adjust match_points";
    }
}

/* Screen Drag 1900 -  */
@media only screen and (max-width: 1900px) {
    .whole_page_leagues {
        min-height: 100vh;
        display: grid;
        grid-template-columns: 1fr 7fr 1fr;
        grid-template-rows: repeat(3, auto) 1fr auto;
        grid-template-areas:
                "top_row top_row top_row"
                "navbar navbar navbar"
                ". block_1 ."
                ". block_2 ."
                ". footer .";
    }

    .switch_area {
        display: grid;
        grid-template-columns: 4fr 4fr 4fr;
        grid-template-areas:
                "switch_block_1 switch_block_2 switch_block_3"
                "switch_block_4 switch_block_5 switch_block_6";
    }
}


/* Screen Drag 1200 -  */
@media only screen and (max-width: 1200px)
{
    .whole_page_leagues {
        min-height: 100vh;
        display: grid;
        grid-template-columns: 1fr 5fr 1fr;
        grid-template-rows: repeat(3, auto) 1fr auto;
        grid-template-areas:
                "top_row top_row top_row"
                "navbar navbar navbar"
                ". block_1 ."
                ". block_2 ."
                ". footer .";
    }

    .block_1 {padding-left: 1rem;}

    .block_2 {padding-left: 1rem;}

    .switch_area {
        display: grid;
        grid-template-columns: 4fr 4fr 4fr;
        grid-template-areas:
                "switch_block_1 switch_block_2 ."
                "switch_block_3 switch_block_4 ."
                "switch_block_5 switch_block_6 .";
    }
}


/* Screen Drag 650 -  */
@media only screen and (max-width: 650px)
{
    .block_1 {padding-left: 1rem;}

    .block_2 {padding-left: 1rem;}

    .switch_area {
        display: grid;
        grid-template-columns: 0.1fr 4fr 0.1fr;
        grid-template-areas:
                ". switch_block_1 ."
                ". switch_block_2 ."
                ". switch_block_3 ."
                ". switch_block_4 ."
                ". switch_block_5 ."
                ". switch_block_6 .";
    }
}