/* ==========================================================================
   Article category archive (templates/taxonomy-article-category.html)
   Hero V1 styling with the category name and image, then a grid of article
   cards in the USPs V1 card style.
   ========================================================================== */

/* --- Hero ------------------------------------------------------------------ */

/* The home hero fills the viewport (min-height 825px in hero-v1.css); the
   category hero matches Page Header V2 on the single article: 480px, 400px
   on small screens. */
.cf-category-hero.forge-hero-v1 {
    min-height: 480px;
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .cf-category-hero.forge-hero-v1 {
        min-height: 400px;
    }
}


.cf-category-hero .forge-hero-v1__content h1 {
    margin: 0;
}

.cf-category-hero__image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 30px;
}

/* --- Cards -----------------------------------------------------------------
   Image on top, pill row, title and excerpt, no card ground: the same card on
   the category archives, Similar articles and Other courses. */

.cf-category-articles__grid {
    gap: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--sm);
}

.cf-category-articles__grid > li {
    display: flex;
}

/* Vertical rhythm is set by margins below, not the flex gap: 16px under
   the image, 11px under the pills, 16px under the title. */
.cf-article-card,
.cf-article-card.is-layout-flex {
    position: relative;
    width: 100%;
    gap: 0;
}

/* !important: the flex layout's own child margin rule wins otherwise. */
.cf-article-card__media {
    width: 100%;
    margin: 0 0 var(--wp--preset--spacing--sm) !important;
}

.cf-article-card__media img {
    display: block;
    width: 100%;
    aspect-ratio: 416 / 340;
    object-fit: cover;
    border-radius: 12px;
}

/* Blog posts are supplied square, as on the other blog listings
   (blog-listing-v1.css); articles keep the landscape crop. The blog page and
   the category archive carry this class on their listing. */
.cf-blog-listing .cf-article-card__media img {
    aspect-ratio: 1 / 1;
}

/* An unset image (no featured image and no category image) leaves an empty
   figure rather than a broken icon. */
.cf-article-card__media img:not([src]),
.cf-article-card__media img[src=""] {
    display: none;
}

.cf-article-card__pills,
.cf-article-card__pills.is-layout-flex {
    gap: var(--wp--preset--spacing--2-xs);
    margin: 0 0 var(--wp--preset--spacing--xs) !important;
}

.cf-article-card__pill {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    width: fit-content;
    min-height: 32px;
    margin: 0;
    padding: 0 var(--wp--preset--spacing--xs);
    margin-bottom: var(--wp--preset--spacing--xs) !important;
    border-radius: 30px;
    background-color: var(--wp--preset--color--background-alt);
    color: var(--wp--preset--color--foreground);
    font-weight: var(--wp--custom--font-weight--semibold);
    line-height: 1;
}

.cf-article-card__pills .cf-article-card__pill {
    margin-bottom: 0 !important;
}

.cf-article-card__pill--duration {
    background-color: color-mix(in srgb, var(--wp--preset--color--secondary) 24%, transparent);
    color: var(--wp--preset--color--secondary);
}

/* !important: the blocks carry inline zero margins. */
.cf-article-card__title {
    margin: 0 0 var(--wp--preset--spacing--sm) !important;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.02em;
    transition: color var(--wp--custom--transition--base);
}

.cf-article-card__title a {
    color: var(--wp--preset--color--foreground);
    text-decoration: none;
    transition: color var(--wp--custom--transition--base);
}

/* The title link covers the whole card, so the card is the click target. */
.cf-article-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.cf-article-card__excerpt {
    margin: 0;
    color: var(--wp--preset--color--foreground-muted);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.cf-article-card__excerpt p {
    margin: 0;
}

.cf-article-card:hover .cf-article-card__title,
.cf-article-card:hover .cf-article-card__title a {
    color: var(--wp--preset--color--secondary);
}

.cf-article-card:focus-within {
    outline: 2px solid var(--wp--preset--color--secondary);
    outline-offset: 4px;
    border-radius: 4px;
}

/* --- Pagination ------------------------------------------------------------
   Same treatment as the blog and podcast listings: numbers centred in boxes,
   Previous and Next in the secondary colour at either end. */

/* Two classes: the query block's flow layout zeroes every child's top margin
   with a single-class rule, and the block's own margin setting is not
   printed for this block. */
.cf-category-articles__query > .cf-category-articles__pagination {
    margin-top: var(--wp--preset--spacing--xl);
}

.cf-category-articles__pagination {
    display: grid !important;
    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 var(--wp--preset--color--background-alt);
}

.cf-category-articles__pagination > * {
    margin: 0;
}

.cf-category-articles__pagination .wp-block-query-pagination-previous {
    grid-column: 1;
    justify-self: start;
}

.cf-category-articles__pagination .wp-block-query-pagination-numbers {
    grid-column: 2;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--2-xs);
}

.cf-category-articles__pagination .wp-block-query-pagination-next {
    grid-column: 3;
    justify-self: end;
}

/* Square-ish boxes: the min-width carries single digits and the box grows
   for 10 and up. */
.cf-category-articles__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);
}

.cf-category-articles__pagination a.page-numbers:hover,
.cf-category-articles__pagination a.page-numbers:focus-visible,
.cf-category-articles__pagination .page-numbers.current {
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--background);
}

/* The ellipsis marks a gap in the range, not a target. */
.cf-category-articles__pagination .page-numbers.dots {
    min-width: 0;
    padding: 0 0.15rem;
    background: none;
}

.cf-category-articles__pagination .wp-block-query-pagination-previous,
.cf-category-articles__pagination .wp-block-query-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);
}

.cf-category-articles__pagination .wp-block-query-pagination-previous:hover,
.cf-category-articles__pagination .wp-block-query-pagination-next:hover {
    color: var(--wp--preset--color--primary);
}

.cf-category-articles__pagination .wp-block-query-pagination-previous::before,
.cf-category-articles__pagination .wp-block-query-pagination-next::after {
    content: "";
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
    background-color: currentColor;
    -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");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    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-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    transition: transform var(--wp--custom--transition--base);
}

.cf-category-articles__pagination .wp-block-query-pagination-previous::before {
    transform: scaleX(-1);
}

.cf-category-articles__pagination .wp-block-query-pagination-previous:hover::before {
    transform: scaleX(-1) translateX(3px);
}

.cf-category-articles__pagination .wp-block-query-pagination-next:hover::after {
    transform: translateX(3px);
}

/* Phones: numbers take the row, the two ends drop beneath at the edges. */
@media (max-width: 600px) {
    .cf-category-articles__pagination {
        grid-template-columns: 1fr 1fr;
        row-gap: var(--wp--preset--spacing--sm);
    }

    .cf-category-articles__pagination .wp-block-query-pagination-numbers {
        grid-row: 1;
        grid-column: 1 / -1;
    }

    .cf-category-articles__pagination .wp-block-query-pagination-previous {
        grid-row: 2;
        grid-column: 1;
    }

    .cf-category-articles__pagination .wp-block-query-pagination-next {
        grid-row: 2;
        grid-column: 2;
    }
}

@media (max-width: 991px) {
    .cf-category-articles__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 599px) {
    .cf-category-articles__grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Illustrations with transparent backgrounds (the Energy Efficiency category)
   sit whole instead of being cropped to the card shape. */
.cf-category-hero__image--contain img {
    aspect-ratio: auto;
    object-fit: contain;
    border-radius: 0;
}

/* --- List header ------------------------------------------------------------
   Heading and intro on the left, button on the right, above a card grid
   (Article List V1, Similar articles, Other courses). */

/* Two classes: the flex layout WordPress prints for the group has one. */
.cf-list-header.is-layout-flex {
    gap: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
}

/* Phones: the button moves below the cards. The section becomes a flex
   column and the header dissolves into it (display: contents), so its text
   block and its buttons become direct flex items that can be reordered. */
@media (max-width: 599px) {
    .forge-article-list-v1,
    .cf-similar-articles {
        display: flex;
        flex-direction: column;
    }

    .forge-article-list-v1 > .cf-list-header,
    .cf-similar-articles > .cf-list-header {
        display: contents;
    }

    .cf-list-header > .wp-block-group {
        margin-bottom: var(--wp--preset--spacing--xl);
    }

    .cf-list-header > .wp-block-buttons {
        order: 1;
        margin-top: var(--wp--preset--spacing--xl);
        justify-content: center;
    }
}