/* Long-form article typography. Loaded only on pages that set articleStyles. */

.article-body {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: #3d4a59;
}

.article-body > *:first-child {
    margin-top: 0;
}

.article-body p {
    margin-bottom: 1.5rem;
}

.article-body h2 {
    font-size: 1.75rem;
    margin-top: 3.5rem;
    margin-bottom: 1.25rem;
}

.article-body h3 {
    font-size: 1.35rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.article-body h2 strong,
.article-body h3 strong {
    font-weight: inherit;
}

.article-body a {
    color: #516274;
    text-underline-offset: 0.2em;
}

.article-body a:hover {
    color: #FF8B5C;
}

.article-body ul,
.article-body ol {
    margin-bottom: 1.5rem;
    padding-left: 1.35rem;
}

.article-body li {
    margin-bottom: 0.5rem;
}

.article-body hr {
    margin: 3.5rem 0;
    border-top: 1px solid rgba(81, 98, 116, 0.2);
    opacity: 1;
}

.article-body blockquote {
    margin: 2rem 0;
    padding: 0.25rem 0 0.25rem 1.5rem;
    border-left: 3px solid #FF8B5C;
    color: #516274;
    font-style: italic;
}

.article-body blockquote p:last-child {
    margin-bottom: 0;
}

.article-body code {
    background-color: rgba(81, 98, 116, 0.08);
    padding: 0.15em 0.4em;
    border-radius: 0.25rem;
    font-size: 0.9em;
    color: #3d4a59;
}

.article-body pre {
    background-color: #f6f7f9;
    padding: 1.25rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.article-body pre code {
    background: none;
    padding: 0;
}

/* Images and videos dropped into the flow of an article */
.article-media {
    margin: 2.5rem 0;
}

.article-media img,
.article-media video {
    /* theme.min.css sets a bare `video { position: absolute; object-fit: cover }` */
    position: relative;
    object-fit: contain;
    max-width: 100%;
    max-height: 32rem; /* keeps tall screen-recordings from swallowing the page */
    width: auto;
    height: auto;
    border-radius: 0.5rem;
    border: 1px solid rgba(81, 98, 116, 0.15);
    background-color: #f6f7f9;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Wide diagrams break out past the prose column where there's room for them.
   The body sits in col-lg-8 offset-lg-2, so the gutters absorb the overhang. */
@media (min-width: 992px) {
    .article-media-wide {
        width: calc(100% + 10rem);
        max-width: none;
        margin-left: -5rem;
        margin-right: -5rem;
    }
}

@media (min-width: 1200px) {
    .article-media-wide {
        width: calc(100% + 15rem);
        margin-left: -7.5rem;
        margin-right: -7.5rem;
    }
}

.article-media-wide img {
    max-height: none;
    cursor: zoom-in;
}

.article-media figcaption {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: #6c757d;
    text-align: center;
}

.article-body img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

/* Role / reporting line / advisors, above the opening of a case-study article */
.article-facts {
    margin: 0 0 2.5rem;
    padding: 1.25rem 1.5rem;
    background-color: rgba(81, 98, 116, 0.06);
    border-radius: 0.5rem;
    font-size: 0.9375rem;
}

.article-facts dt {
    font-weight: 600;
    color: #516274;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.article-facts dd {
    margin: 0.15rem 0 0.9rem;
    color: #3d4a59;
}

.article-facts dd:last-child {
    margin-bottom: 0;
}

@media (min-width: 576px) {
    .article-facts {
        display: grid;
        grid-template-columns: minmax(8rem, auto) 1fr;
        column-gap: 1.5rem;
        row-gap: 0.75rem;
    }

    .article-facts dt {
        padding-top: 0.15rem;
    }

    .article-facts dd {
        margin: 0;
    }
}

/* Pull-out note for asides like "note for more technical readers" */
.article-note {
    margin: 2.5rem 0;
    padding: 1.25rem 1.5rem;
    background-color: rgba(81, 98, 116, 0.06);
    border-radius: 0.5rem;
    font-size: 0.975rem;
    color: #516274;
}

.article-note p:last-child {
    margin-bottom: 0;
}

/* Listing page cards */
.article-card-title {
    color: #516274;
}

a:hover .article-card-title {
    color: #FF8B5C;
}

@media (max-width: 575.98px) {
    .article-body {
        font-size: 1rem;
    }

    .article-body h2 {
        font-size: 1.5rem;
        margin-top: 2.5rem;
    }
}