/* ==========================================================================
   Pattern: Card V8.1
   Heading, intro and a button above a three-column grid of the latest posts.
   The grid is a Forge query loop; each card is a loop item rendered as a link
   to the post, with the image, date pill, title and excerpt bound to post
   fields.
   ========================================================================== */

/* Grid: the no-results notice spans the full width. */
.forge-card-v8-1__grid.forge-query-loop {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--sm);
    align-items: start;
}

.forge-card-v8-1__grid .forge-query-no-results {
    grid-column: 1 / -1;
}

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

/* Phones: one column, and the "Read more" button moves below the cards.
   The section becomes a flex column and the header group dissolves into it
   (display: contents), so its content block and its buttons become direct
   flex items that can be reordered around the grid. */
@media (max-width: 599px) {
    .forge-card-v8-1__grid.forge-query-loop {
        grid-template-columns: minmax(0, 1fr);
    }

    .forge-card-v8-1 {
        display: flex;
        flex-direction: column;
    }

    /* Two classes: the layout rule WordPress prints for the header's flex
       layout has one, and would otherwise win on source order. */
    .forge-card-v8-1 > .forge-card-v8-1__header {
        display: contents;
    }

    .forge-card-v8-1__header .wp-block-buttons {
        order: 1;
        margin-top: var(--wp--preset--spacing--xl);
        justify-content: center;
    }
}

/* Card */
.forge-card-v8-1 .forge-loop-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    text-decoration: none;
}

/* The figure clips the image to its rounded box. */
.forge-card-v8-1__media {
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
}

/* Square, matching the blog listing the cards link through to. */
.forge-card-v8-1__media img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* The date is a <p> with padding; inline-flex keeps the pill hugging its
   text instead of stretching across the card. */
.forge-card-v8-1__date {
    background-color: #3935681F !important;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    line-height: 1.5;
}

/* Hover: the title turns the secondary colour, the same as the blog listing
   cards (taxonomy-article-category.css); the image stays still. !important
   because the heading carries a preset colour class, which core prints with
   !important. */
.forge-card-v8-1__title {
    transition: color var(--wp--custom--transition--base);
}

.forge-card-v8-1 .forge-loop-item:hover .forge-card-v8-1__title,
.forge-card-v8-1 .forge-loop-item:focus-visible .forge-card-v8-1__title {
    color: var(--wp--preset--color--secondary) !important;
}

/* The header button is Dark Small with its icon off. On this white section
   the dark style's white hover would vanish, so it goes to secondary instead
   (the same as Dark Alt, which has no small size). */
.forge-card-v8-1__header .wp-block-button.is-style-dark-small > .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--secondary);
    border-color: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--background);
}