/*
|--------------------------------------------------------------------------
| Upgrade 010 Article Layout Moves
|--------------------------------------------------------------------------
| Moves breadcrumb outside the article card, shifts the TOC to the left,
| moves related guides to the right, and places simple metadata below the
| article tools.
*/

.article-page-breadcrumb-wrap {
    margin-top: 18px;
    margin-bottom: 0;
}

.page-breadcrumb {
    margin: 0;
    padding: 0 6px;
    font-size: .94rem;
}

.article-layout-tight {
    grid-template-columns: 220px minmax(0, 700px) 220px;
    justify-content: center;
    align-items: start;
}

.article-layout-tight .docs-article {
    width: 100%;
}

.article-left-toc,
.article-right-related {
    top: 92px;
}

.article-left-toc {
    order: 1;
}

.article-layout-tight .docs-article {
    order: 2;
}

.article-right-related {
    order: 3;
}

.article-simple-meta-top {
    margin: -10px 0 28px;
    padding: 0 0 18px;
    border-top: 0;
    border-bottom: 1px solid var(--border);
    font-size: .88rem;
}

.article-simple-meta-top span,
.article-simple-meta-top a {
    display: inline;
}

.article-tools {
    margin-bottom: 20px;
}

@media (max-width: 1100px) {
    .article-layout-tight {
        grid-template-columns: 1fr;
    }

    .article-left-toc {
        order: 2;
    }

    .article-layout-tight .docs-article {
        order: 1;
    }

    .article-right-related {
        order: 3;
    }

    .article-left-toc,
    .article-right-related {
        position: static;
    }
}