/**
 * Author box: who wrote the article. Rendered by the shortcode
 * [applari_author position="start|end"] (includes/article/article.php),
 * which takes the author from the post's "Kirjoittaja tiimistä" field.
 * Without a chosen team member the box (and the name in the meta row) is
 * left out.
 *
 * Variants (set by the shortcode):
 *   author-box--start   compact row at the start of the article: photo,
 *                       name, role and the author's note as a quote
 *   author-box--end     the full card at the end: photo, name, role, bio,
 *                       LinkedIn
 *
 * Structure:
 *   .author-box.author-box--start|--end
 *     figure.author-box-image > img
 *     .author-box-body
 *       p.author-box-label + p.author-box-name (> a) + p.author-box-role
 *       blockquote.author-box-note (start) | p.author-box-bio + p.author-box-links (end)
 *
 * Tuning: --author-box-image (80px start; end 128px, 176px from 768px).
 * The shortcode's img sizes attribute assumes these sizes.
 */

.author-box {
    --author-box-image: 80px;
    display: grid;
    grid-template-columns: var(--author-box-image) minmax(0, 1fr);
    column-gap: 20px;
    align-items: start;
    font-size: 0.95rem;
}

/* The box sits inside .post-content, whose figure, p and blockquote rules
   would otherwise win: the box's own rules are scoped under .author-box. */
.author-box .author-box-image {
    width: var(--author-box-image);
    height: var(--author-box-image);
    margin: 0;
    border-radius: 50%;
    overflow: hidden;
    background-color: color-mix(in srgb, currentColor 10%, transparent);
}

.author-box-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author-box .author-box-body > * {
    margin: 0;
}

.author-box-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
}

.author-box-name {
    font-weight: 600;
    font-size: 1.05rem;
}

.author-box-name a {
    color: inherit;
    text-decoration: none;
}

.author-box-name a:hover {
    text-decoration: underline;
}

.author-box-role {
    opacity: 0.8;
}

.author-box .author-box-note {
    margin: 12px 0 0;
    padding: 0;
    border: 0;
    font-style: italic;
}

.author-box .author-box-note p {
    margin: 0;
}

.author-box .author-box-bio {
    margin-top: 10px;
}

.author-box .author-box-links {
    margin-top: 10px;
    font-size: 0.875rem;
}

/* Start: a row with a rule below, before the content */
.author-box--start {
    margin: 0 0 2.5em;
    padding-bottom: 1.5em;
    border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

/* End: the card after the content */
.author-box--end {
    --author-box-image: 128px;
    column-gap: 32px;
    margin: 3em 0 0;
    padding: 28px;
    border-radius: 12px;
    background-color: color-mix(in srgb, currentColor 5%, transparent);
}

@media only screen and (max-width: 479px) {
    .author-box--end {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 20px;
    }
}

@media only screen and (min-width: 768px) {
    .author-box--end {
        --author-box-image: 176px;
        align-items: center;
    }
}