/* ------------------------------------------------------------------------
GRID INITIALIZATION
------------------------------------------------------------------------ */

.grid{
    display: grid;
}



/* ------------------------------------------------------------------------
WORDPRESS UTILITIES
------------------------------------------------------------------------ */

/* Grid container is used because of Wordpress the_content function, this
way all content can be positioned and displayed on the grid in appropiate columns. */
.grid-container{
    display: grid;
    /* grid-template-areas:
        "col1 col2 col3 col4";
    grid-template-columns: repeat(4, 1fr);*/
}

/* Set all direct children to span the entire grid */
.grid-container > *{
    grid-column-start: 1;
    grid-column-end: -1;
}

/* This targets simple Wordpress content from the_content() function: */
.grid-container > *:not(.grid, .flex){
    grid-column-start: var(--grid-container-wp-the-content-start);
    grid-column-end: var(--grid-container-wp-the-content-end);
    padding:
        calc(var(--grid-content-padding-top) / 2)
        var(--grid-items-padding-right)
        calc(var(--grid-content-padding-top) / 2)
        var(--grid-items-padding-left);
}

/* Target the first child element of the grid-container when it is not a grid or a flex */
.grid-container > :first-child:not(.grid, .flex){
    margin-top: var(--grid-items-padding-top) !important;
    
}
/* Set a top margin to .grid and .flex when the element before it, has no .grid or no .flex class */
.grid-container > :not(.grid, .flex) + .grid,
.grid-container > :not(.grid, .flex) + .flex{
    margin-top: var(--grid-margin-top) !important;
}
/* Set a top margin to any element if it directly comes after a .grid or a .flex */
.grid-container > .grid + :not(.grid, .flex),
.grid-container > .flex + :not(.grid, .flex){
    margin-top: var(--grid-margin-top) !important;
}
/* If last child of grid container is WP content, add bottom padding */
.grid-container > :last-child:not(.grid){
    padding-bottom: 6rem;
}
/*#carousel + :not(.grid, .flex){
    padding-top:3.5rem !important;
}*/



/* ------------------------------------------------------------------------
GRID LAYOUT TEMPLATES
------------------------------------------------------------------------ */

/* Basic grid for simple content */
.grid-1-column{
    grid-template-areas:
        ". col1 col1 .";
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    grid-auto-flow: dense;
}
    .grid-1-column > *:first-child{
        grid-area: col1;
    }
    .grid-1-column > *:not(:first-child){
        display: none;
    }

/* Grid column layouts */
.grid-2-columns{
    grid-template-areas:
        "col1 col2";
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    grid-auto-flow: dense;
}
.grid-3-columns{
    grid-template-areas:
        "col1 col2 col3";
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-auto-flow: dense;
}
.grid-4-columns{
    grid-template-areas:
        "col1 col2 col3 col4";
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    grid-auto-flow: dense;
}
.grid-5-columns{
    grid-template-areas:
        "col1 col2 col3 col4 col5";
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto;
    grid-auto-flow: dense;
}
.grid-6-columns{
    grid-template-areas:
        "col1 col2 col3 col4 col5 col6";
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
    grid-auto-flow: dense;
}
.grid-7-columns{
    grid-template-areas:
        "col1 col2 col3 col4 col5 col6 col7";
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: auto;
    grid-auto-flow: dense;
}
.grid-12-columns{
    grid-template-areas:
        "col1 col2 col3 col4 col5 col6 col7 col8 col9 col10 col11 col12";
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    grid-auto-flow: dense;
}
.grid-16-columns{
    grid-template-areas:
        "col1 col2 col3 col4 col5 col6 col7 col8 col9 col10 col11 col12 col13 col14 col15 col16";
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: auto;
    grid-auto-flow: dense;
}

/* Grid position layouts */
.grid-8-positions,
.grid-8-positions-horizontal{
    grid-template-areas:
        "pos1 pos2 pos5 pos6"
        "pos3 pos4 pos7 pos8";
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.grid-8-positions-vertical{
    grid-template-areas:
        "pos1 pos3 pos5 pos7"
        "pos2 pos4 pos6 pos8";
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

/* Grid minmax layouts */
.grid-minmax-250{
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.grid-minmax,
.grid-minmax-300{
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}



/* ------------------------------------------------------------------------
GRID SETTINGS
------------------------------------------------------------------------ */

/* Select direct grid items to color */
.grid-color > :nth-child(odd){
    background-color: #CCC;
}
.grid-color > :nth-child(even){
    background-color: #EEE;
}

.grid-word-break *{
    word-break: break-all;
}


/* ------------------------------------------------------------------------
GRID SPACING
------------------------------------------------------------------------ */

/* Grid gap settings */
.grid-gap{
    gap: var(--grid-gap-rows) var(--grid-gap-columns);
}
.grid-gap-columns{
    gap: 0 var(--grid-gap-columns);
}
.grid-gap-rows{
    gap: var(--grid-gap-rows) 0;
}

/* Grid padding settings */
.grid-padding{
    padding: var(--grid-padding);
}
.grid-padding-top{
    padding-top: var(--grid-padding-top);
}
.grid-padding-right{
    padding-right: var(--grid-padding-right);
}
.grid-padding-bottom{
    padding-bottom: var(--grid-padding-bottom);
}
.grid-padding-left{
    padding-left: var(--grid-padding-left);
}

/* Grid item padding */
.grid-items-padding > *{ /* Apply to a grid container aka parent */
    padding: var(--grid-items-padding);
}
    .grid-items-no-padding{ /* Apply to a grid child item to undo .grid-all-item-padding */
        padding: 0 !important;
    }
.grid-items-padding-top > *{
    padding-top: var(--grid-items-padding-top);
}
.grid-items-padding-right > *{
    padding-right: var(--grid-items-padding-right);
}
.grid-items-padding-bottom > *{
    padding-bottom: var(--grid-items-padding-bottom);
}
.grid-items-padding-left > *{
    padding-left: var(--grid-items-padding-left);
}

/* Grid margin settings */
.grid-margin{
    margin: var(--grid-margin);
}
.grid-margin-top{
    margin-top: var(--grid-margin-top);
}
.grid-margin-right{
    margin-right: var(--grid-margin-right);
}
.grid-margin-bottom{
    margin-bottom: var(--grid-margin-bottom);
}
.grid-margin-left{
    margin-left: var(--grid-margin-left);
}

/* Grid block items padding */
.grid-block-padding > *{
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left:3rem;
    padding-right:3rem;
    /*background-color: aqua !important;*/
}
.grid-block-padding > *:first-child{
    padding-top:6rem;
}
.grid-block-padding > *:last-child{
    padding-bottom:6rem;
}



/* ------------------------------------------------------------------------
GRID VERTICAL CELL ALIGNMENT WITH A NESTED GRID
------------------------------------------------------------------------ */

.subgrid-center-items{
    display:grid;
    align-items: center;
    justify-items: center;
}
.subgrid-center-items-vertical{
    display:grid;
    align-items: center;
}
.subgrid-center-items-horizontal{
    display:grid;
    justify-items: center;
}



/* ------------------------------------------------------------------------
GRID ALL ROWS AND OR COLUMN SELECTORS
------------------------------------------------------------------------ */

/* All grid columns and rows selector */
.grid-all{
    grid-column-start: 1; grid-column-end: -1;
    grid-row-start: -1; grid-row-end: -1;
}

/* All grid columns or rows selectors */
.grid-column-all{ grid-column-start: 1; grid-column-end: -1; }
.grid-row-all{ grid-row-start: 1; grid-row-end: -1; }



/* ------------------------------------------------------------------------
GRID COLUMN START AND OR END SELECTORS
------------------------------------------------------------------------ */

/* Grid column start positions */
.grid-column-start-1{ grid-column-start: col1; }
.grid-column-start-2{ grid-column-start: col2; }
.grid-column-start-3{ grid-column-start: col3; }
.grid-column-start-4{ grid-column-start: col4; }
.grid-column-start-5{ grid-column-start: col5; }
.grid-column-start-6{ grid-column-start: col6; }
.grid-column-start-7{ grid-column-start: col7; }
.grid-column-start-8{ grid-column-start: col8; }
.grid-column-start-9{ grid-column-start: col9; }
.grid-column-start-10{ grid-column-start: col10; }
.grid-column-start-11{ grid-column-start: col11; }
.grid-column-start-12{ grid-column-start: col12; }
.grid-column-start-13{ grid-column-start: col13; }
.grid-column-start-14{ grid-column-start: col14; }
.grid-column-start-15{ grid-column-start: col15; }
.grid-column-start-16{ grid-column-start: col16; }

/* Grid column end positions */
.grid-column-end-1{ grid-column-end: col1; }
.grid-column-end-2{ grid-column-end: col2; }
.grid-column-end-3{ grid-column-end: col3; }
.grid-column-end-4{ grid-column-end: col4; }
.grid-column-end-5{ grid-column-end: col5; }
.grid-column-end-6{ grid-column-end: col6; }
.grid-column-end-7{ grid-column-end: col7; }
.grid-column-end-8{ grid-column-end: col8; }
.grid-column-end-9{ grid-column-end: col9; }
.grid-column-end-10{ grid-column-end: col10; }
.grid-column-end-11{ grid-column-end: col11; }
.grid-column-end-12{ grid-column-end: col12; }
.grid-column-end-13{ grid-column-end: col13; }
.grid-column-end-14{ grid-column-end: col14; }
.grid-column-end-15{ grid-column-end: col15; }
.grid-column-end-16{ grid-column-end: col16; }

/* Grid column start and end positions */
.grid-column-1{ grid-column-start: col1; grid-column-end: col1; }
.grid-column-2{ grid-column-start: col2; grid-column-end: col2; }
.grid-column-3{ grid-column-start: col3; grid-column-end: col3; }
.grid-column-4{ grid-column-start: col4; grid-column-end: col4; }
.grid-column-5{ grid-column-start: col5; grid-column-end: col5; }
.grid-column-6{ grid-column-start: col6; grid-column-end: col6; }
.grid-column-7{ grid-column-start: col7; grid-column-end: col7; }
.grid-column-8{ grid-column-start: col8; grid-column-end: col8; }
.grid-column-9{ grid-column-start: col9; grid-column-end: col9; }
.grid-column-10{ grid-column-start: col10; grid-column-end: col10; }
.grid-column-11{ grid-column-start: col11; grid-column-end: col11; }
.grid-column-12{ grid-column-start: col12; grid-column-end: col12; }
.grid-column-13{ grid-column-start: col13; grid-column-end: col13; }
.grid-column-14{ grid-column-start: col14; grid-column-end: col14; }
.grid-column-15{ grid-column-start: col15; grid-column-end: col15; }
.grid-column-16{ grid-column-start: col16; grid-column-end: col16; }



/* ------------------------------------------------------------------------
GRID ROW START AND OR END SELECTORS
------------------------------------------------------------------------ */

/* Grid row start positions */
.grid-row-start-1{ grid-row-start: 1; }
.grid-row-start-2{ grid-row-start: 2; }
.grid-row-start-3{ grid-row-start: 3; }
.grid-row-start-4{ grid-row-start: 4; }

/* Grid row end positions */
.grid-row-end-1{ grid-row-end: 1; }
.grid-row-end-2{ grid-row-end: 2; }
.grid-row-end-3{ grid-row-end: 3; }
.grid-row-end-4{ grid-row-end: 4; }

/* Grid row start and end positions */
.grid-row-1{ grid-row-start: 1; grid-row-end: 1; }
.grid-row-2{ grid-row-start: 2; grid-row-end: 2; }
.grid-row-3{ grid-row-start: 3; grid-row-end: 3; }
.grid-row-4{ grid-row-start: 4; grid-row-end: 4; }



/* ------------------------------------------------------------------------
GRID POSITION SELECTORS
------------------------------------------------------------------------ */

/* Single position starting points */
.grid-pos-start-1{ grid-column-start: pos1; grid-row-start: pos1; }
.grid-pos-start-2{ grid-column-start: pos2; grid-row-start: pos2; }
.grid-pos-start-3{ grid-column-start: pos3; grid-row-start: pos3; }
.grid-pos-start-4{ grid-column-start: pos4; grid-row-start: pos4; }
.grid-pos-start-5{ grid-column-start: pos5; grid-row-start: pos5; }
.grid-pos-start-6{ grid-column-start: pos6; grid-row-start: pos6; }
.grid-pos-start-7{ grid-column-start: pos7; grid-row-start: pos7; }
.grid-pos-start-8{ grid-column-start: pos8; grid-row-start: pos8; }

/* Single position ending points */
.grid-pos-end-1{ grid-column-end: pos1; grid-row-end: pos1; }
.grid-pos-end-2{ grid-column-end: pos2; grid-row-end: pos2; }
.grid-pos-end-3{ grid-column-end: pos3; grid-row-end: pos3; }
.grid-pos-end-4{ grid-column-end: pos4; grid-row-end: pos4; }
.grid-pos-end-5{ grid-column-end: pos5; grid-row-end: pos5; }
.grid-pos-end-6{ grid-column-end: pos6; grid-row-end: pos6; }
.grid-pos-end-7{ grid-column-end: pos7; grid-row-end: pos7; }
.grid-pos-end-8{ grid-column-end: pos8; grid-row-end: pos8; }

/* Single position block selectors */
.grid-pos-1{ grid-column-start: pos1; grid-column-end: pos1; grid-row-start: pos1; grid-row-end: pos1; }
.grid-pos-2{ grid-column-start: pos2; grid-column-end: pos2; grid-row-start: pos2; grid-row-end: pos2; }
.grid-pos-3{ grid-column-start: pos3; grid-column-end: pos3; grid-row-start: pos3; grid-row-end: pos3; }
.grid-pos-4{ grid-column-start: pos4; grid-column-end: pos4; grid-row-start: pos4; grid-row-end: pos4; }
.grid-pos-5{ grid-column-start: pos5; grid-column-end: pos5; grid-row-start: pos5; grid-row-end: pos5; }
.grid-pos-6{ grid-column-start: pos6; grid-column-end: pos6; grid-row-start: pos6; grid-row-end: pos6; }
.grid-pos-7{ grid-column-start: pos7; grid-column-end: pos7; grid-row-start: pos7; grid-row-end: pos7; }
.grid-pos-8{ grid-column-start: pos8; grid-column-end: pos8; grid-row-start: pos8; grid-row-end: pos8; }



/* ------------------------------------------------------------------------
TABLET ADJUSTMENTS
------------------------------------------------------------------------ */

@media only screen and (min-width: 769px) and (max-width: 1200px) {
    .grid-container{
        grid-template-areas:
            "col1 col2";
        grid-template-columns: 1fr 1fr;
    }
    .grid-container > *:not(.grid){
        grid-column-start: 1 !important;
        grid-column-end: -1 !important;
    }
    .grid-2-columns,
    .grid-3-columns,
    .grid-4-columns,
    .grid-5-columns,
    .grid-6-columns,
    .grid-7-columns,
    .grid-8-columns,
    .grid-9-columns,
    .grid-10-columns,
    .grid-11-columns,
    .grid-12-columns{
        grid-template-areas:
            "col1 col2";
        grid-template-columns: 1fr 1fr;
    }
    .grid-column-start-1,
    .grid-column-start-2,
    .grid-column-start-3,
    .grid-column-start-4,
    .grid-column-start-5,
    .grid-column-start-6,
    .grid-column-2,
    .grid-column-3,
    .grid-column-4,
    .grid-column-5,
    .grid-column-6{
        grid-column-start:col1;
    }
    .grid-column-start-7,
    .grid-column-start-8,
    .grid-column-start-9,
    .grid-column-start-10,
    .grid-column-start-11,
    .grid-column-start-12,
    .grid-column-7,
    .grid-column-8,
    .grid-column-9,
    .grid-column-10,
    .grid-column-11,
    .grid-column-12{
        grid-column-start:col2;
    }
    .grid-column-end-1,
    .grid-column-end-2,
    .grid-column-end-3,
    .grid-column-end-4,
    .grid-column-end-5,
    .grid-column-end-6,
    .grid-column-2,
    .grid-column-3,
    .grid-column-4,
    .grid-column-5,
    .grid-column-6{
        grid-column-end:col1;
    }
    .grid-column-end-7,
    .grid-column-end-8,
    .grid-column-end-9,
    .grid-column-end-10,
    .grid-column-end-11,
    .grid-column-end-12,
    .grid-column-7,
    .grid-column-8,
    .grid-column-9,
    .grid-column-10,
    .grid-column-11,
    .grid-column-12{
        grid-column-end:col2;
    }
    .eb-advert .grid-column-end-7{
        grid-column-end:1;
    }



    .grid-8-positions,
    .grid-8-positions-horizontal{
        grid-template-areas:
            "pos1 pos2"
            "pos3 pos4"
            "pos5 pos6"
            "pos7 pos8";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
    }
    .grid-8-positions-vertical{
        grid-template-areas:
            "pos1 pos3"
            "pos2 pos4"
            "pos5 pos7"
            "pos6 pos8";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
    } 
}



/* ------------------------------------------------------------------------
MOBILE ADJUSTMENTS
------------------------------------------------------------------------ */

@media only screen and (max-width: 768px) {
    .grid-container{
        grid-template-areas:
            "col1";
        grid-template-columns: 1fr;
    }
    .grid-container > *{
        grid-column-start: 1 !important;
        grid-column-end: -1 !important;
    }
    .grid-container > .grid{
        grid-auto-flow:row !important;
        grid-template-columns: auto !important;
        grid-template-rows: auto !important;
    }
    .grid-container > .grid > *{
        grid-column-start: 1 !important;
        grid-column-end: -1 !important;
    }
    .grid-8-positions,
    .grid-8-positions-horizontal{
        grid-template-areas:
            "pos1"
            "pos2"
            "pos3"
            "pos4"
            "pos5"
            "pos6"
            "pos7"
            "pos8";
        /*grid-template-columns: 1fr;
        grid-template-rows: repeat(8, 1fr);*/
        grid-auto-flow:row !important;
        grid-template-columns: auto !important;
        grid-template-rows: auto !important;
    }
    .grid-8-positions-vertical{
        grid-template-areas:
            "pos1"
            "pos3"
            "pos2"
            "pos4"
            "pos5"
            "pos7"
            "pos6"
            "pos8";
        grid-template-columns: 1fr;
        grid-template-rows: repeat(8, 1fr);
    }
    .grid-8-positions,
    .grid-8-positions-horizontal,
    .grid-8-positions-vertical{
        grid-row-start: auto;
        grid-row-end: auto;
    }
    .grid-8-positions > *,
    .grid-8-positions-horizontal > *,
    .grid-8-positions-vertical > *{
        padding:3rem 3rem !important;
    }
    .grid-row-all{
        grid-row-start: auto;
        grid-row-end: auto;
    }
    .mobile-keep-row-all .grid-row-all,
    .eb-advert .grid-row-all{
        grid-row-start: 1;
        grid-row-end: -1;
    }

    /* Grid item padding */
    .grid-items-padding > *{
        padding:1.5rem 3rem;
    }
    .grid-items-padding:not(.grid-minmax) > :first-child {
        padding-top: 4rem;
    }
    .grid-items-padding:not(.grid-minmax) > :last-child {
        padding-bottom: 4rem;
    }
    .grid-minmax{
        padding-top:3rem;
        padding-bottom:3rem;
    }

}