/* ============================================================
   GUIDE ARTICLE
   Usage: Views/Guides/Get.cshtml; the reading column, the "On this page" rail beside it and the guide masthead.
   ============================================================ */

/* xl and up */
@media (min-width: 1200px) {
    /* site.css caps .uploadedScreenshot at 650px, wider than the column, and other authored images not at all. */
    .guide-article img {
        max-width: 100%;
        height: auto;
    }

    /* The width and side padding of site.css's .blog-header-wrap header and .blog-header-container, so the column starts under the masthead title. */
    .guide-frame {
        max-width: 1000px;
        padding-left: 35px;
        padding-right: 35px;
        margin-left: auto;
        margin-right: auto;
    }

    .guide-layout {
        display: flex;
        justify-content: space-between;
        gap: 60px;
    }

    .guide-layout__main {
        flex: 0 1 640px;
        min-width: 0;
    }

    .guide-layout__rail {
        flex: 0 0 230px;
    }
}

/* md and below: site.css gives every masthead 550px and a 40px title; a guide's is as tall as its content. */
@media (max-width: 767.98px) {
    .blog-header-wrap--guide {
        min-height: 0;
    }

    /* site.css pulls the masthead 50px up under the fixed site header below 1200px. */
    .blog-header-wrap--guide header {
        padding-top: calc(50px + 24px);
        padding-bottom: 32px;
    }

    .blog-header-wrap--guide .blog-title {
        font-size: 32px;
        margin-bottom: 20px;
    }

    /* One meta item per line, so no line starts with site.css's separator. */
    .blog-header-wrap--guide .blog-subnav {
        flex-direction: column;
    }

    .blog-header-wrap--guide .blog-subnav li:nth-child(n+2)::before {
        content: none;
    }
}