/*
 * list-components.css — Shared component styles for post-list templates
 * ─────────────────────────────────────────────────────────────────────
 * Single source of truth for:
 *   • The 2-column article-card grid (used in archive, home, search)
 *   • Default styling for core Query Loop block markup (wp-block-post-*)
 *   • Pagination styling for FSE Query Loop pagination
 *
 * Used by templates: home.html, archive.html, search.html
 * (single.html has different post-rendering needs and keeps its own
 *  per-template styles.)
 *
 * Enqueued from functions.php (after style.css), so updates here
 * apply to every list template automatically — edit ONE file, the
 * whole site picks it up.
 * ─────────────────────────────────────────────────────────────────────
 */

/* Query Loop post-template renders as <ul class="wp-block-post-template">
   with each post as a <li class="wp-block-post">. We use a CSS grid to
   layout the cards. The selector is scoped to .mfm-blog-query,
   .mfm-archive-query, and .mfm-search-query so it never accidentally
   restyles a Query Loop somewhere else (e.g. in the sidebar). */
.mfm-blog-query ul.wp-block-post-template,
.mfm-archive-query ul.wp-block-post-template,
.mfm-search-query ul.wp-block-post-template {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5);
    list-style: none;
    padding: 0;
    margin: 0;
}

.mfm-blog-query ul.wp-block-post-template > li.wp-block-post,
.mfm-archive-query ul.wp-block-post-template > li.wp-block-post,
.mfm-search-query ul.wp-block-post-template > li.wp-block-post {
    display: block;
}

/* Article-card: the wrapper rendered as a wp:group inside each
   wp-block-post. Styled identically across the three list templates. */
.mfm-blog-query .article-card,
.mfm-archive-query .article-card,
.mfm-search-query .article-card {
    background: var(--paper-2);
    border: 1px solid var(--hairline);
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    height: 100%;
}

/* Category eyebrow inside each card (wp:post-terms with prefix "— ") */
.mfm-blog-query .article-card .wp-block-post-terms,
.mfm-archive-query .article-card .wp-block-post-terms,
.mfm-search-query .article-card .wp-block-post-terms {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ember);
    margin: 0;
}
.mfm-blog-query .article-card .wp-block-post-terms a,
.mfm-archive-query .article-card .wp-block-post-terms a,
.mfm-search-query .article-card .wp-block-post-terms a {
    color: var(--ember);
    text-decoration: none;
}

/* Post title — rendered as h3 with isLink=true. Linkable, hover-tinted. */
.mfm-blog-query .article-card .wp-block-post-title,
.mfm-archive-query .article-card .wp-block-post-title,
.mfm-search-query .article-card .wp-block-post-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--t-xl);
    margin: 0;
    line-height: 1.2;
}
.mfm-blog-query .article-card .wp-block-post-title a,
.mfm-archive-query .article-card .wp-block-post-title a,
.mfm-search-query .article-card .wp-block-post-title a {
    color: var(--ink);
    text-decoration: none;
}
.mfm-blog-query .article-card .wp-block-post-title a:hover,
.mfm-archive-query .article-card .wp-block-post-title a:hover,
.mfm-search-query .article-card .wp-block-post-title a:hover {
    color: var(--ember);
}

/* Post excerpt */
.mfm-blog-query .article-card .wp-block-post-excerpt,
.mfm-archive-query .article-card .wp-block-post-excerpt,
.mfm-search-query .article-card .wp-block-post-excerpt {
    font-size: var(--t-sm);
    color: var(--ink-2);
    margin: 0;
    line-height: 1.5;
}
.mfm-blog-query .article-card .wp-block-post-excerpt__excerpt,
.mfm-archive-query .article-card .wp-block-post-excerpt__excerpt,
.mfm-search-query .article-card .wp-block-post-excerpt__excerpt {
    margin: 0;
}
.mfm-blog-query .article-card .wp-block-post-excerpt__more-link,
.mfm-archive-query .article-card .wp-block-post-excerpt__more-link,
.mfm-search-query .article-card .wp-block-post-excerpt__more-link {
    display: none;
}

/* Post date — pushed to the bottom of the card */
.mfm-blog-query .article-card .wp-block-post-date,
.mfm-archive-query .article-card .wp-block-post-date,
.mfm-search-query .article-card .wp-block-post-date {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--mist);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: auto;
    padding-top: var(--s-3);
    border-top: 1px solid var(--hairline);
}

/* Responsive: single-column on narrow screens */
@media (max-width: 700px) {
    .mfm-blog-query ul.wp-block-post-template,
    .mfm-archive-query ul.wp-block-post-template,
    .mfm-search-query ul.wp-block-post-template {
        grid-template-columns: 1fr;
    }
}

/* Pagination — styled via the wp-block-query-pagination wrapper */
.mfm-blog-query .wp-block-query-pagination,
.mfm-archive-query .wp-block-query-pagination,
.mfm-search-query .wp-block-query-pagination {
    margin-top: var(--s-8);
    padding-top: var(--s-6);
    border-top: 1px solid var(--hairline);
    display: flex;
    gap: var(--s-2);
    justify-content: center;
    align-items: center;
    font-family: var(--font-body);
    font-size: var(--t-sm);
}
.mfm-blog-query .wp-block-query-pagination a,
.mfm-blog-query .wp-block-query-pagination span,
.mfm-archive-query .wp-block-query-pagination a,
.mfm-archive-query .wp-block-query-pagination span,
.mfm-search-query .wp-block-query-pagination a,
.mfm-search-query .wp-block-query-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--hairline);
    background: var(--paper-2);
    text-decoration: none;
    color: var(--ink-2);
    font-weight: 500;
}
.mfm-blog-query .wp-block-query-pagination a:hover,
.mfm-archive-query .wp-block-query-pagination a:hover,
.mfm-search-query .wp-block-query-pagination a:hover {
    border-color: var(--ember);
    color: var(--ember);
}
.mfm-blog-query .wp-block-query-pagination .current,
.mfm-archive-query .wp-block-query-pagination .current,
.mfm-search-query .wp-block-query-pagination .current {
    background: var(--pine);
    color: var(--paper);
    border-color: var(--pine);
}