.blog-listing-v1-main-wrapper {
    background-color: #EEEDF1;
}

.blog-listing-v1.forge-query-loop {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wp--preset--spacing--md) var(--wp--preset--spacing--sm);
    align-items: stretch;
}

.blog-listing-v1 .forge-query-filter-wrapper,
.blog-listing-v1 .forge-query-no-results,
.blog-listing-v1 .forge-query-pagination {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .blog-listing-v1.forge-query-loop {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .blog-listing-v1.forge-query-loop {
        grid-template-columns: 1fr;
    }
}

.blog-listing-v1 .forge-query-filter--links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    list-style: none;
}

.blog-listing-v1 .forge-query-filter li {
    margin: 0;
}

/* display:block so the whole pill is the hit target, not just its text. */
.blog-listing-v1 .forge-query-filter li a {
    display: block;
    padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: var(--wp--custom--border-radius--full);
    color: var(--wp--preset--color--foreground);
    font-weight: var(--wp--custom--font-weight--semibold);
    font-size: var(--wp--preset--font-size--small);
    line-height: 1.6;
    background-color: var(--wp--preset--color--white);
    text-decoration: none;
    white-space: nowrap;
    transition: var(--wp--custom--transition--base);
}

.blog-listing-v1 .forge-filter-link::after {
    content: none !important;
}

/* Border recoloured along with the fill, so the active pill reads as one solid
   navy shape instead of a fill inside a grey outline. */
.blog-listing-v1 .forge-query-filter li a.forge-filter-link--active,
.blog-listing-v1 .forge-query-filter li a:hover,
.blog-listing-v1 .forge-query-filter li a:focus-visible {
    background-color: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--foreground-inverted);
}

/* --- Card --------------------------------------------------------------- */

.blog-listing-v1 .forge-loop-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

.blog-listing-v1 .blog-listing-v1__media {
    margin: 0 0 var(--wp--preset--spacing--md);
}

/* Square: blog, podcast and campaign featured images are supplied as 1:1
   exports, so the card shows the whole image rather than a band across its
   middle. Shared by every listing that reuses this pattern's classes. */
.blog-listing-v1.forge-query-loop .forge-loop-item img {
    aspect-ratio: 1 / 1;
    width: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.blog-listing-v1__date {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    width: fit-content;
    margin: 0 0 var(--wp--preset--spacing--xs);
    padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--sm);
    border-radius: 30px;
    background-color: #3935681F;
    color: var(--wp--preset--color--foreground);
    font-weight: var(--wp--custom--font-weight--semibold);
    line-height: 1.4;
    letter-spacing: -0.02em;
}

.blog-listing-v1__title {
    margin: 0 0 var(--wp--preset--spacing--sm);
    transition: color var(--wp--custom--transition--base);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

/* The heading colour is a preset class on the element itself, which the theme
   emits with !important, matched here to win the hover back. */
.blog-listing-v1 .forge-loop-item:hover .blog-listing-v1__title,
.blog-listing-v1 .forge-loop-item:focus-visible .blog-listing-v1__title {
    color: var(--wp--preset--color--secondary) !important;
}

.blog-listing-v1__excerpt {
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.6;
    overflow: hidden;
}

.blog-listing-v1 .forge-query-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--wp--preset--spacing--sm);
    width: 100%;
    padding-top: var(--wp--preset--spacing--md);
    border-top: 1px solid #DBDAD9;
}

/* The block carries WordPress flow layout, which spaces its children with a
   top margin, meaningless once they are grid cells on a single row. */
.blog-listing-v1 .forge-query-pagination > * {
    margin-block: 0;
}

.blog-listing-v1 .forge-pagination-prev {
    grid-column: 1;
    justify-self: start;
}

.blog-listing-v1 .forge-pagination-numbers {
    grid-column: 2;
    justify-self: center;
}

.blog-listing-v1 .forge-pagination-next {
    grid-column: 3;
    justify-self: end;
}

.blog-listing-v1 .forge-pagination__list {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--2-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-listing-v1 .forge-pagination__item {
    margin: 0;
}

/* Square-ish rather than wide: min-width carries the single digits and the box
   grows for 10 and up, instead of the row jumping between the two widths. */
.blog-listing-v1 .forge-query-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 0.4rem;
    border-radius: 8px;
    color: var(--wp--preset--color--foreground);
    font-size: var(--wp--preset--font-size--small);
    line-height: 1;
    text-decoration: none;
    transition: var(--wp--custom--transition--base);
}

.blog-listing-v1 .forge-query-pagination a.page-numbers:hover,
.blog-listing-v1 .forge-query-pagination a.page-numbers:focus-visible,
.blog-listing-v1 .forge-query-pagination .page-numbers.current {
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--foreground-inverted);
}

/* The ellipsis marks a gap in the range, not a target, no box, no hover. */
.blog-listing-v1 .forge-query-pagination .page-numbers.dots {
    min-width: 0;
    padding: 0 0.15rem;
    background: none;
}

/* Both ends are coral, the one accent on an otherwise navy-and-grey row. */
.blog-listing-v1 .forge-pagination-prev,
.blog-listing-v1 .forge-pagination-next {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wp--preset--color--secondary);
    font-size: var(--wp--preset--font-size--base);
    text-decoration: none;
    transition: var(--wp--custom--transition--base);
}

.blog-listing-v1 .forge-pagination-prev:hover,
.blog-listing-v1 .forge-pagination-next:hover {
    color: var(--wp--preset--color--primary);
}

/* At the ends of the query these render as a span with no href (see
   pagination_disabled_ends in includes/blocks.php), greyed and inert. */
.blog-listing-v1 .forge-pagination-prev.is-disabled,
.blog-listing-v1 .forge-pagination-next.is-disabled {
    color: var(--wp--preset--color--background-alt);
    pointer-events: none;
}

.blog-listing-v1 .forge-pagination-prev::before,
.blog-listing-v1 .forge-pagination-next::after {
    content: "";
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: transform var(--wp--custom--transition--base);
}

.blog-listing-v1 .forge-pagination-prev::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 8H2M7 3l-5 5 5 5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 8H2M7 3l-5 5 5 5'/%3E%3C/svg%3E");
}

.blog-listing-v1 .forge-pagination-next::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h12M9 3l5 5-5 5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h12M9 3l5 5-5 5'/%3E%3C/svg%3E");
}

/* Nudge the arrow in its travel direction on hover */
.blog-listing-v1 .forge-pagination-prev:hover::before {
    transform: translateX(-3px);
}

.blog-listing-v1 .forge-pagination-next:hover::after {
    transform: translateX(3px);
}

/* Numbers take the whole row and the two ends drop beneath them, still at the
   edges, three columns of prose do not survive a phone. */
@media (max-width: 600px) {
    .blog-listing-v1 .forge-query-pagination {
        grid-template-columns: 1fr 1fr;
        row-gap: var(--wp--preset--spacing--sm);
    }

    .blog-listing-v1 .forge-pagination-numbers {
        grid-row: 1;
        grid-column: 1 / -1;
    }

    .blog-listing-v1 .forge-pagination-prev {
        grid-row: 2;
        grid-column: 1;
    }

    .blog-listing-v1 .forge-pagination-next {
        grid-row: 2;
        grid-column: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blog-listing-v1__title,
    .blog-listing-v1 .forge-pagination-prev::before,
    .blog-listing-v1 .forge-pagination-next::after {
        transition-duration: 0.01ms;
    }
}