/* the blog (/blog, /blog/tag/…, a post), the FAQ (/faq) and the testimonials (_Testimonials) */

/* tags: as links in a row, the one shown marked */
.blog-tags,
.faq-contents ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--wa-space-2xs);
    padding: var(--wa-space-2xs) var(--wa-space-s);
    border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-pill);
    color: var(--wa-color-text-normal);
    text-decoration: none;
    font-size: var(--wa-font-size-s);
}

    .blog-tag:hover {
        border-color: var(--wa-color-brand-border-loud);
    }

    .blog-tag[aria-current="page"] {
        background: var(--wa-color-brand-fill-loud);
        border-color: var(--wa-color-brand-fill-loud);
        color: var(--wa-color-brand-on-loud);
    }

.blog-tag-small {
    padding: 0 var(--wa-space-xs);
    font-size: var(--wa-font-size-xs);
}

.blog-tag-count {
    color: inherit;
    opacity: 0.7;
}

/* the index: a card a post, its picture beside its text (above it on a phone) */
.blog-list {
    display: grid;
    gap: var(--wa-space-xl);
}

.blog-card {
    display: grid;
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: var(--wa-space-l);
    align-items: start;
}

    .blog-card h2 {
        margin: 0;
    }

        .blog-card h2 a {
            color: var(--wa-color-text-normal);
            text-decoration: none;
        }

            .blog-card h2 a:hover {
                text-decoration: underline;
            }

    .blog-card p {
        margin: 0;
    }

.blog-card-picture img,
.blog-related-card img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
}

@media (max-width: 600px) {
    .blog-card {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* a post: a column a comfortable line long */
.blog-post {
    max-inline-size: 48rem;
}

    .blog-post h1 {
        margin: 0;
    }

    .blog-post .markdown-body img {
        max-inline-size: 100%;
        block-size: auto;
    }

.blog-neighbours a {
    text-decoration: none;
    max-inline-size: 48%;
}

.blog-older {
    text-align: end;
}

.blog-related {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--wa-space-m);
}

.blog-related-card {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-xs);
    color: var(--wa-color-text-normal);
    text-decoration: none;
}

/* the FAQ: a column a comfortable line long; each group's heading clear of the one before */
.faq .faq-body,
.faq .faq-contents {
    max-inline-size: 52rem;
}

.faq-body h2 {
    margin-block-start: var(--wa-space-2xl);
    padding-block-start: var(--wa-space-m);
    border-block-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.faq-body h3 {
    scroll-margin-block-start: var(--wa-space-3xl);
}

/* testimonials: quotes in cards */
.testimonials {
    --min-column-size: 18rem;
}

    .testimonials blockquote {
        margin: 0;
        font-size: var(--wa-font-size-l);
    }

    .testimonials figcaption img {
        max-block-size: 2rem;
        inline-size: auto;
    }