/*
 * Doctor quote blocks in blog articles, filled from the Doctors table by
 * App\Support\BlogHtml: photo on the left, label + name + role beside it,
 * quote full-width underneath. Loaded by the blog page and the admin preview.
 */
.blog-html-page .expert-block[data-doctor],
.blog-html-page .doctor-card[data-doctor] {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 2px;
    align-items: center;
}
.blog-html-page .expert-block[data-doctor] > div:not(.expert-avatar),
.blog-html-page .doctor-card[data-doctor] .dc-top,
.blog-html-page .doctor-card[data-doctor] .dc-left {
    display: contents;
}
.blog-html-page [data-doctor] .expert-avatar,
.blog-html-page [data-doctor] .doctor-avatar {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 64px;
    height: 64px;
    overflow: hidden;
}
.blog-html-page .expert-block[data-doctor] .role,
.blog-html-page .doctor-card[data-doctor] .role {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    justify-self: start;
}
.blog-html-page .expert-block[data-doctor] h3,
.blog-html-page .doctor-card[data-doctor] h3 {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: 0;
}
.blog-html-page .expert-block[data-doctor] > div:not(.expert-avatar) > :not(.role):not(h3),
.blog-html-page .doctor-card[data-doctor] > :not(.dc-top) {
    grid-column: 1 / -1;
}
.blog-html-page [data-doctor] p {
    margin-top: 14px;
}
.blog-html-page [data-doctor] .expert-name {
    display: block;
    color: #fff;
    text-decoration: none;
}
.blog-html-page [data-doctor] .expert-name:hover {
    text-decoration: underline;
}
.blog-html-page [data-doctor] .expert-role {
    display: block;
    margin-top: 2px;
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(255, 255, 255, .75);
}

/*
 * Article lead image (the first image in a blog, set by
 * App\Support\BlogHtml::replaceLeadImage): always shown at the Banner Image
 * upload ratio (2:1, 1200x600) whatever size the source image is.
 */
.blog-html-page img.blog-lead-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
}

/* Some articles wrap the lead image in a box with its own ratio (.banner-img is 16:10 / 4:3);
   let the image's 2:1 ratio size the box instead. */
.blog-html-page :has(> img.blog-lead-image) {
    aspect-ratio: auto;
    height: auto;
}