/* Grid and other layout rules */
.content
{
    padding-bottom: unset;
}

.wyadapt-app-content
{
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr;
    grid-template-areas: "title" "info" "select" "map" "chart";
}

#dropDownContainer
{
    display: grid;
    row-gap: 0.5rem;
    column-gap: 1rem;
    grid-template-columns: 1fr;
    grid-template-areas: "var-menu-label" "var-menu" "elem-menu-label" "elem-menu" "gcm-menu-label" "gcm-menu";
}

div#snowpack-app #dropDownContainer
{
    display: grid;
    row-gap: 0.5rem;
    column-gap: 1rem;
    grid-template-columns: 1fr;
    grid-template-areas: "temp-menu-label" "temp-menu" "elem-menu-label" "elem-menu" "gcm-menu-label" "gcm-menu";
}

#thirtyYearNormContainer > .card-body
{
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr;
    grid-template-areas: "overview" "proj-hist" "proj-mid" "proj-end";
}

/* Bootstrap 'lg' breakpoint */
@media (min-width: 992px)
{
    .wyadapt-app-content
    {
        display: grid;
        grid-gap: 1rem;
        grid-template-columns: 5fr 7fr;
        grid-template-rows: auto auto 1fr 2fr;
        grid-template-areas: "title info"
                             "map   info"
                             "map   select"
                             "map   chart";
    }

    #dropDownContainer
    {
        display: grid;
        row-gap: 0.5rem;
        column-gap: 1rem;
        grid-template-columns: repeat(2, calc(50% - 0.5rem));
        grid-template-rows: repeat(4, auto) 1fr;
        grid-template-areas: "var-menu-label  gcm-menu-label"
                             "var-menu        gcm-menu"
                             "elem-menu-label gcm-menu"
                             "elem-menu       gcm-menu"
                             ".               .";
    }

    div#snowpack #dropDownContainer
    {
        grid-template-areas: "temp-menu-label gcm-menu-label"
                             "temp-menu       gcm-menu"
                             "elem-menu-label gcm-menu"
                             "elem-menu       gcm-menu"
                             ".               .";
    }

    #thirtyYearNormContainer > .card-body
    {
        display: grid;
        grid-gap: 1rem;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: "overview  overview overview"
                             "proj-hist proj-mid proj-end";
    }
}

/* Bootstrap 'xxl' breakpoint */
@media (min-width: 1400px)
{
    .wyadapt-app-content
    {
        display: grid;
        grid-gap: 1rem;
        grid-template-columns: 5fr 4fr 3fr;
        grid-template-rows: 1fr 3fr 5fr;
        grid-template-areas: "title select info"
                             "map   select info"
                             "map   chart  chart";
    }

    #dropDownContainer
    {
        display: grid;
        row-gap: 0.5rem;
        column-gap: 1rem;
        grid-template-columns: repeat(2, calc(50% - 0.5rem));
        grid-template-rows: repeat(4, auto) 1fr;
        grid-template-areas: "var-menu-label  gcm-menu-label"
                             "var-menu        gcm-menu"
                             "elem-menu-label gcm-menu"
                             "elem-menu       gcm-menu"
                             ".               .";
    }

    div#snowpack #dropDownContainer
    {
        grid-template-areas: "temp-menu-label gcm-menu-label"
                             "temp-menu       gcm-menu"
                             "elem-menu-label gcm-menu"
                             "elem-menu       gcm-menu"
                             ".               .";
    }

    #thirtyYearNormContainer > .card-body
    {
        display: grid;
        grid-gap: 1rem;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: "overview  overview overview"
                             "proj-hist proj-mid proj-end";
    }
}

/* Grid area names */
#title-card          { grid-area: title; }
#select-card         { grid-area: select; }
#timeSeriesContainer { grid-area: chart; }
#map-card            { grid-area: map; }

#thirtyYearNormContainer { grid-area: info; }
#overview-card           { grid-area: overview; }
#historicalCard          { grid-area: proj-hist; }
#midCenturyCard          { grid-area: proj-mid; }
#endCenturyCard          { grid-area: proj-end; }

#selectedVariableLabel                    { grid-area: var-menu-label; }
#selectedVariableLabel + div.choices      { grid-area: var-menu; }
#selectedTemporalLabel                    { grid-area: temp-menu-label; }
#selectedTemporalLabel + div.choices      { grid-area: temp-menu; }
#selectedSpatialSelectLabel               { grid-area: elem-menu-label; }
#selectedSpatialSelectLabel + div.choices { grid-area: elem-menu; }
#selectedGcmsLabel                        { grid-area: gcm-menu-label; }
#selectedGcmsLabel + div.choices          { grid-area: gcm-menu; }