/*******************************************************************************************************/
/*
/* This script will use the correct @Media Device Breakpoints for the CLUBS screen.
/*
/*  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: 1601px){
    /* DEFAULT Setting */

    .whole_page_clubs {
        min-height: 100vh;
        display: grid;
        grid-template-columns: 3fr 1fr 7fr 1fr 3fr;
        grid-template-rows: repeat(4, auto) 1fr auto;
        grid-template-areas:
                "top_row top_row top_row top_row top_row"
                "navbar navbar navbar navbar navbar"
                ". block_1 block_1 block_1 ."
                ". block_2 block_2 block_2 ."
                ". block_3 block_3 block_3 ."
                ". footer footer footer .";
    }

    .block_3{
        /*width: 100%;*/
    }

    .article_header {
        display: grid;
        grid-template-columns: 6fr 4.5fr 4.5fr;
        grid-template-areas:
                "main_details_block minor_details_block_club minor_details_block_match";
    }

    /* Club Header */
    .main_details_block {
        display: grid;
        grid-template-columns: 0.5fr 4.5fr;
        grid-template-areas: "down_arrow main_details";
    }

    .minor_details_block_club {
        display: grid;
        grid-template-columns: 0.5fr 6fr 2fr 0.1fr;
        grid-template-areas:
                ". minor_detail_10a minor_detail_10b ."
                ". minor_detail_11a minor_detail_11b ."
                ". minor_detail_12a minor_detail_12b .";
    }

    .minor_details_block_match {
        display: grid;
        grid-template-columns: 0.5fr 6fr 2fr 0.1fr;
        grid-template-areas:
                ". minor_detail_1a minor_detail_1b ."
                ". minor_detail_2a minor_detail_2b ."
                ". minor_detail_3a minor_detail_3b ."
                ". minor_detail_4a minor_detail_4b ."
                ". minor_detail_5a minor_detail_5b ."
                ". minor_detail_6a minor_detail_6b ."
                ". minor_detail_7a minor_detail_7b .";
    }

    .club_extra_details {
        display: grid;
        grid-template-columns: 2fr 2fr;
        grid-template-areas:
                "row_no_1a row_no_1b"
                "row_no_2a row_no_2b"
                "row_no_3a row_no_3b"
                "row_no_4a row_no_4b"
                "row_no_5a row_no_5b"
                "break_line_1 break_line_1"
                "row_no_6a row_no_6b"
                "row_no_7a row_no_7b"
                "row_no_8a row_no_8b"
                "row_no_9a row_no_9b"
                "row_no_10a row_no_10b"
                "break_line_2 break_line_2"
                "row_no_11a row_no_11b"
                "row_no_12a row_no_12b"
                "row_no_13a row_no_13b"
                "row_no_14a row_no_14b"
                "row_no_15a row_no_15b"
                "break_line_3 break_line_3"
                "row_no_16a row_no_16b"
                "row_no_17a row_no_17b"
                "row_no_18a row_no_18b"
                "row_no_25a row_no_25b"
                "break_line_4 break_line_4"
                "row_no_19a row_no_19b"
                "row_no_20a row_no_20b"
                "row_no_21a row_no_21b"
                "row_no_26a row_no_26b"
                "break_line_5 break_line_5"
                "row_no_22a row_no_22b"
                "row_no_23a row_no_23b"
                "row_no_24a row_no_24b"
                "row_no_27a row_no_27b"
                "break_line_6 break_line_6"
                "row_no_28a row_no_28b"
                "row_no_29a row_no_29b"
                "row_no_30a row_no_30b"
                "row_no_37a row_no_37b"
                "row_no_40a row_no_40b"
                "break_line_7 break_line_7"
                "row_no_31a row_no_31b"
                "row_no_32a row_no_32b"
                "row_no_33a row_no_33b"
                "row_no_38a row_no_38b"
                "row_no_41a row_no_41b"
                "break_line_8 break_line_8"
                "row_no_34a row_no_34b"
                "row_no_35a row_no_35b"
                "row_no_36a row_no_36b"
                "row_no_39a row_no_39b"
                "row_no_42a row_no_42b"
                "break_line_9 break_line_9"
                "row_no_43a row_no_43b"
                "row_no_44a row_no_44b"
                "row_no_45a row_no_45b"
                "row_no_46a row_no_46b"
                "row_no_47a row_no_47b"
                "row_no_48a row_no_48b"
                "row_no_49a row_no_49b"
                "row_no_50a row_no_50b"
                "row_no_51a row_no_51b"
                "row_no_52a row_no_52b"
                "break_line_10 break_line_10"
                "row_no_53a row_no_53b"
                "row_no_54a row_no_54b";
    }

}

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

    /* Button Area */
    .block_2{
        display: grid;
        grid-template-columns: repeat(5, 1fr) auto;
        grid-template-areas:
                "one_club multiple_clubs . . . ."
                "open_all close_all . . . .";
    }
    .open_all{width: 12rem !important; margin-top: 1rem}
    .close_all{width: 12rem !important; margin-top: 1rem}

    /* Club Header */
    .article_header {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
                "main_details_block"
                "minor_details_block_club"
                "minor_details_block_match";
    }

    .main_details_block {
        display: grid;
        grid-template-columns: 0.5fr 4.5fr;
        grid-template-areas:
                "down_arrow main_details";
    }

    .minor_details_block_club {
        display: grid;
        grid-template-columns: 0.1fr 1.5fr 1.5fr 0.1fr 1.5fr 1.5fr 0.1fr;
        grid-template-areas:
                ". minor_detail_10a minor_detail_10b . minor_detail_11a minor_detail_11b ."
                ". minor_detail_12a minor_detail_12b . . . .";
    }

    .minor_details_block_match {
        display: grid;
        grid-template-columns: 0.1fr 1.5fr 1.5fr 0.1fr 1.5fr 1.5fr 0.1fr;
        grid-template-areas:
                ". minor_detail_1a minor_detail_1b . minor_detail_2a minor_detail_2b ."
                ". minor_detail_3a minor_detail_3b . minor_detail_4a minor_detail_4b ."
                ". minor_detail_5a minor_detail_5b . minor_detail_6a minor_detail_6b ."
                ". minor_detail_7a minor_detail_7b . . . .";
    }

    .minor_detail_a{
        margin-left: 0 !important;
        text-align: right;
    }

    .minor_detail_b {
        text-align: left;
        margin-left: 0.5rem;
    }

    .minor_detail_3{
        margin-left: 0 !important;
        text-align: left !important;
        padding-right: 0 !important;
    }

    .minor_detail_4 {
        padding-bottom: 0.5rem;
    }

    .club_extra_details {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
                "row_no_1a row_no_1b"
                "row_no_2a row_no_2b"
                "row_no_3a row_no_3b"
                "row_no_4a row_no_4b"
                "row_no_5a row_no_5b"
                "break_line_1 break_line_1"
                "row_no_6a row_no_6b"
                "row_no_7a row_no_7b"
                "row_no_8a row_no_8b"
                "row_no_9a row_no_9b"
                "row_no_10a row_no_10b"
                "break_line_2 break_line_2"
                "row_no_11a row_no_11b"
                "row_no_12a row_no_12b"
                "row_no_13a row_no_13b"
                "row_no_14a row_no_14b"
                "row_no_15a row_no_15b"
                "break_line_3 break_line_3"
                "row_no_16a row_no_16b"
                "row_no_17a row_no_17b"
                "row_no_18a row_no_18b"
                "row_no_25a row_no_25b"
                "break_line_4 break_line_4"
                "row_no_19a row_no_19b"
                "row_no_20a row_no_20b"
                "row_no_21a row_no_21b"
                "row_no_26a row_no_26b"
                "break_line_5 break_line_5"
                "row_no_22a row_no_22b"
                "row_no_23a row_no_23b"
                "row_no_24a row_no_24b"
                "row_no_27a row_no_27b"
                "break_line_6 break_line_6"
                "row_no_28a row_no_28b"
                "row_no_29a row_no_29b"
                "row_no_30a row_no_30b"
                "row_no_37a row_no_37b"
                "row_no_40a row_no_40b"
                "break_line_7 break_line_7"
                "row_no_31a row_no_31b"
                "row_no_32a row_no_32b"
                "row_no_33a row_no_33b"
                "row_no_38a row_no_38b"
                "row_no_41a row_no_41b"
                "break_line_8 break_line_8"
                "row_no_34a row_no_34b"
                "row_no_35a row_no_35b"
                "row_no_36a row_no_36b"
                "row_no_39a row_no_39b"
                "row_no_42a row_no_42b"
                "break_line_9 break_line_9"
                "row_no_43a row_no_43b"
                "row_no_44a row_no_44b"
                "row_no_45a row_no_45b"
                "row_no_46a row_no_46b"
                "row_no_47a row_no_47b"
                "row_no_48a row_no_48b"
                "row_no_49a row_no_49b"
                "row_no_50a row_no_50b"
                "row_no_51a row_no_51b"
                "row_no_52a row_no_52b"
                "break_line_10 break_line_10"
                "row_no_53a row_no_53b"
                "row_no_54a row_no_54b";
    }
}

@media only screen and (max-width: 1024px)
{
    .down_arrow {font-size: 1.5rem !important;}

    .main_details_block{margin-bottom: 0.5rem;}

    .main_details{
        display: flex;
        justify-content: left;
        font-size: 1.5rem !important;
    }

    .minor_details_block_club {
        display: grid;
        grid-template-columns: 0.1fr 1.5fr 1.5fr 0.1fr;
        grid-template-areas:
                ". minor_detail_10a minor_detail_10b ."
                ". minor_detail_11a minor_detail_11b ."
                ". minor_detail_12a minor_detail_12b .";
    }

    .minor_details_block_match {
        display: grid;
        grid-template-columns: 0.1fr 1.5fr 1.5fr 0.1fr;
        grid-template-areas:
                ". minor_detail_1a minor_detail_1b ."
                ". minor_detail_2a minor_detail_2b ."
                ". minor_detail_3a minor_detail_3b ."
                ". minor_detail_4a minor_detail_4b ."
                ". minor_detail_5a minor_detail_5b ."
                ". minor_detail_6a minor_detail_6b ."
                ". minor_detail_7a minor_detail_7b .";
    }
}

@media only screen and (max-width: 700px)
{
    /* Button Area */
    .block_2{
        display: grid;
        grid-template-columns: 2fr ;
        grid-template-areas:
                "one_club"
                "multiple_clubs"
                "open_all"
                "close_all";
    }

    .minor_details_block_club, .minor_details_block_match{
        display: grid;
        grid-template-columns: 0.1fr 2fr 0.1fr;
        grid-template-areas:
                ". minor_detail_10a ."
                ". minor_detail_10b ."
                ". minor_detail_11a ."
                ". minor_detail_11b ."
                ". minor_detail_12a ."
                ". minor_detail_12b ."
                ". minor_detail_1a ."
                ". minor_detail_1b ."
                ". minor_detail_2a ."
                ". minor_detail_2b ."
                ". minor_detail_3a ."
                ". minor_detail_3b ."
                ". minor_detail_4a ."
                ". minor_detail_4b ."
                ". minor_detail_5a ."
                ". minor_detail_5b ."
                ". minor_detail_6a ."
                ". minor_detail_6b ."
                ". minor_detail_7a ."
                ". minor_detail_7b .";
    }

    .club_extra_details
    {
        display: grid;
        grid-template-columns: 0.1rem 1fr 0.1rem;
        grid-template-areas:
                ". row_no_1a ."
                ". row_no_1b ."
                ". row_no_2a ."
                ". row_no_2b ."
                ". row_no_3a ."
                ". row_no_3b ."
                ". row_no_4a ."
                ". row_no_4b ."
                ". row_no_5a ."
                ". row_no_5b ."
                ". break_line_1 ."
                ". row_no_6a ."
                ". row_no_6b ."
                ". row_no_7a ."
                ". row_no_7b ."
                ". row_no_8a ."
                ". row_no_8b ."
                ". row_no_9a ."
                ". row_no_9b ."
                ". row_no_10a ."
                ". row_no_10b ."
                ". break_line_2 ."
                ". row_no_11a ."
                ". row_no_11b ."
                ". row_no_12a ."
                ". row_no_12b ."
                ". row_no_13a ."
                ". row_no_13b ."
                ". row_no_14a ."
                ". row_no_14b ."
                ". row_no_15a ."
                ". row_no_15b ."
                ". break_line_3 ."
                ". row_no_16a ."
                ". row_no_16b ."
                ". row_no_17a ."
                ". row_no_17b ."
                ". row_no_18a ."
                ". row_no_18b ."
                ". row_no_25a ."
                ". row_no_25b ."
                ". break_line_4 ."
                ". row_no_19a . "
                ". row_no_19b ."
                ". row_no_20a ."
                ". row_no_20b ."
                ". row_no_21a ."
                ". row_no_21b ."
                ". row_no_26a ."
                ". row_no_26b ."
                ". break_line_5 ."
                ". row_no_22a ."
                ". row_no_22b ."
                ". row_no_23a ."
                ". row_no_23b ."
                ". row_no_24a ."
                ". row_no_24b ."
                ". row_no_27a ."
                ". row_no_27b ."
                ". break_line_6 ."
                ". row_no_28a ."
                ". row_no_28b ."
                ". row_no_29a ."
                ". row_no_29b ."
                ". row_no_30a ."
                ". row_no_30b ."
                ". row_no_37a ."
                ". row_no_37b ."
                ". row_no_40a ."
                ". row_no_40b ."
                ". break_line_7 ."
                ". row_no_31a ."
                ". row_no_31b ."
                ". row_no_32a ."
                ". row_no_32b ."
                ". row_no_33a ."
                ". row_no_33b ."
                ". row_no_38a ."
                ". row_no_38b ."
                ". row_no_41a ."
                ". row_no_41b ."
                ". break_line_8 ."
                ". row_no_34a ."
                ". row_no_34b ."
                ". row_no_35a ."
                ". row_no_35b ."
                ". row_no_36a ."
                ". row_no_36b ."
                ". row_no_39a ."
                ". row_no_39b ."
                ". row_no_42a ."
                ". row_no_42b ."
                ". break_line_9 ."
                ". row_no_43a ."
                ". row_no_43b ."
                ". row_no_44a ."
                ". row_no_44b ."
                ". row_no_45a ."
                ". row_no_45b ."
                ". row_no_46a ."
                ". row_no_46b ."
                ". row_no_47a ."
                ". row_no_47b ."
                ". row_no_48a ."
                ". row_no_48b ."
                ". row_no_49a ."
                ". row_no_49b ."
                ". row_no_50a ."
                ". row_no_50b ."
                ". row_no_51a ."
                ". row_no_51b ."
                ". row_no_52a ."
                ". row_no_52b ."
                ". break_line_10 ."
                ". row_no_53a ."
                ". row_no_53b ."
                ". row_no_54a ."
                ". row_no_54b .";
        word-break: break-word;
    }

    .minor_detail_a{text-align: center !important;}
    .minor_detail_b{text-align: center !important;}
}