/* ==========================================================================
   Single Article template (templates/single-article.html)
   Page Header V2 with breadcrumbs, title and excerpt; the article body beside
   a sticky table of contents; similar articles; CTA banner.
   ========================================================================== */

/* --- Header ---------------------------------------------------------------- */

/* Breadcrumbs: the Forge page header styles them with a "white" preset this
   theme does not have, so the colours are set here. */
.cf-article-header .wp-block-breadcrumbs,
.cf-article-header .wp-block-breadcrumbs a,
.cf-article-header .wp-block-breadcrumbs span,
.cf-article-header .wp-block-breadcrumbs li:not(:last-child)::after {
    color: var(--wp--preset--color--background);
}

.cf-article-header .wp-block-breadcrumbs a,
.cf-article-header .wp-block-breadcrumbs li:not(:last-child)::after {
    opacity: 0.48;
}

.cf-article-header .wp-block-breadcrumbs a:hover {
    color: var(--wp--preset--color--secondary);
    opacity: 1;
}

/* --- Body ------------------------------------------------------------------ */

/* The article body and the similar articles section share the soft grey
   ground of the blog listing (blog-listing-v1.css), so the header, body and
   cards read as one surface. */
.cf-article-body,
.cf-similar-articles {
    background-color: #EEEDF1;
}

/* The theme's root block gap is 0, which is right for patterns but leaves
   prose with no rhythm. Give the article's own blocks spacing and bring
   the heading sizes down to reading-column proportions. */
.pattern-blog-content > * + * {
    margin-top: var(--wp--preset--spacing--sm);
}

.pattern-blog-content > h2,
.pattern-blog-content > h3,
.pattern-blog-content > h4 {
    margin-top: var(--wp--preset--spacing--lg);
}

.pattern-blog-content > h2 {
    font-size: var(--wp--preset--font-size--large);
}

.pattern-blog-content > h3 {
    font-size: var(--wp--preset--font-size--medium);
}

.pattern-blog-content > h4 {
    font-size: var(--wp--preset--font-size--base);
}

.pattern-blog-content p,
.pattern-blog-content li {
    color: var(--wp--preset--color--foreground-muted);
}

.pattern-blog-content a {
    color: var(--wp--preset--color--primary);
}

/* Lists: a 1em inset keeps the markers in line with the text column, and
   each item gets a little air. Ordered lists keep their numbers. */
.pattern-blog-content ul,
.pattern-blog-content ol {
    margin-left: 0;
    padding-left: 1em;
}

.pattern-blog-content ul {
    list-style: none;
}

.pattern-blog-content ul > li {
    position: relative;
    padding-left: 1em;
}

.pattern-blog-content ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--wp--preset--color--secondary);
}

.pattern-blog-content ol > li {
    padding-left: 0.25em;
}

.pattern-blog-content ol > li::marker {
    color: var(--wp--preset--color--secondary);
    font-weight: var(--wp--custom--font-weight--semibold);
}

.pattern-blog-content li + li {
    margin-top: var(--wp--preset--spacing--2-xs);
}

/* Podcast player embed. */
.pattern-blog-content .wp-block-html {
    margin-top: var(--wp--preset--spacing--lg);
}

/* --- Similar articles ------------------------------------------------------
   The same image cards as the category archives (see
   taxonomy-article-category.css), laid out by the Forge query loop. Each
   loop item is the link, so the title needs no anchor of its own. */

.cf-similar-articles__loop.forge-query-loop {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--sm);
    align-items: stretch;
}

.cf-similar-articles__loop .forge-query-no-results {
    grid-column: 1 / -1;
}

.cf-similar-articles__loop .forge-loop-item {
    display: flex;
    text-decoration: none;
}

.cf-similar-articles .cf-article-card__excerpt {
    -webkit-line-clamp: 2;
}

@media (max-width: 991px) {
    .cf-similar-articles__loop.forge-query-loop {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    .cf-similar-articles__loop.forge-query-loop {
        grid-template-columns: minmax(0, 1fr);
    }
}