﻿.content-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "sidebar pills"
        "sidebar maincontent";
    min-height: 0;
    min-height: calc(100vh - 67px);
}

    .content-shell > aside.nav {
        grid-area: sidebar;
    }

    .content-shell > .wr-pill-nav-link-container {
        grid-area: pills;
        min-width: 0;
        margin-left: 116px;
    }

    .content-shell > main[role="main"] {
        grid-area: maincontent;
        min-width: 0;
        min-height: 0;
    }

/* --------------------------------------------
   MOBILE: stack content + bottom nav
   -------------------------------------------- */
@media screen and (max-width: 736px) {

    .content-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "pills"
            "maincontent"
            "sidebar";
    }

        .content-shell > .wr-pill-nav-link-container {
            margin-left: auto;
        }

        .content-shell > main[role="main"] {
            padding-bottom: 64px;
        }
}