/*
 * Blog index.
 * Loaded by slug (see Theme\enqueue_page_assets(), which calls this one blog).
 *
 * Reference: prod /blog/ at 1920px.
 *
 * Geometry at 1920px:
 *   head 302 (a 600px column, 80px padding) · posts 571 · partners 667
 *
 * The cards are the global post teaser (css/global/post-teaser.css) and the
 * head is the global page head with its --narrow modifier.
 */

.posts {
    padding:          80px 20px;
    background-color: var(--color-bg-alt);
}

.posts__inner {
    display:        flex;
    flex-direction: column;
    gap:            20px;
    width:          100%;
    max-width:      1160px;
    margin:         0 auto;
}

.posts__grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   24px;
    margin:                0;
    padding:               0;
    list-style:            none;
}

/* Nothing found: a line, centred, in the muted tone the site uses for asides. */
.posts__empty {
    margin:      0;
    text-align:  center;
    font-family: var(--font-body);
    font-weight: 400;
    font-size:   16px;
    line-height: 1.5;
    color:       var(--color-muted);
}

/* ── Search form ───────────────────────────────────────────────────────── */
/* On the results page, above the cards: a field and the site's pill. */
.search-form {
    display:   flex;
    gap:       12px;
    width:     100%;
    max-width: 560px;
    margin:    0 auto;
}

.search-form__field {
    flex:             1;
    min-width:        0;
    padding:          10px 20px;
    border:           0;
    background-color: #25272c;
    font-family:      var(--font-body);
    font-weight:      400;
    font-size:        16px;
    line-height:      20px;
    color:            var(--color-text);
}

.search-form__field::placeholder {
    color:   rgba(255, 255, 255, .7);
    opacity: 1;
}

.search-form__field:focus-visible {
    outline:        2px solid var(--color-primary);
    outline-offset: -2px;
}

/* ── Pagination ────────────────────────────────────────────────────────── */
/* Not on prod, which has three posts and never reaches a second page. The
   markup is WordPress's own, so it only needs the site's type and colour. */
.posts__pagination {
    margin-top: 20px;
}

.posts__pagination .nav-links {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    justify-content: center;
    gap:             8px;
}

.posts__pagination .page-numbers {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       40px;
    height:          40px;
    padding:         0 12px;
    border:          1px solid rgba(192, 156, 77, .3);
    font-family:     var(--font-body);
    font-weight:     400;
    font-size:       14px;
    line-height:     1.143;
    color:           var(--color-text);
    text-decoration: none;
    transition:      border-color var(--transition), color var(--transition);
}

.posts__pagination .page-numbers:hover,
.posts__pagination .page-numbers:focus-visible {
    border-color: var(--color-primary);
    color:        var(--color-primary);
}

.posts__pagination .page-numbers.current {
    border-color:     var(--color-primary);
    background-color: var(--color-primary);
    color:            var(--color-bg);
}

.posts__pagination .page-numbers.dots {
    border-color: transparent;
}


/* ── Tablet ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

    .posts {
        padding: 60px 20px;
    }

    .posts__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ── Phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    .posts {
        padding: 40px 16px;
    }

    .posts__grid {
        grid-template-columns: 1fr;
        gap:                   16px;
    }
}