/**
 * Blog index.
 *
 * The cards themselves come from the Link cards block, so there is little left
 * to dress here: their size on this page, and the pager under them. The index
 * shows 32 articles a page, addressed as /blog/?page-2 — see
 * bebestschool_es_blog_paging() in inc/article.php.
 */

.bbs-blog {
    --bbs-blog-font: 'ApercuPro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --bbs-blog-container: 1200px;
    --bbs-blog-gutter: 20px;
    --bbs-blog-orange: #ff5c00;

    background: #ffffff;
    font-family: var(--bbs-blog-font);
}

.bbs-blog *,
.bbs-blog *::before,
.bbs-blog *::after {
    box-sizing: border-box;
}

/*
 * The blog index uses the same cards as the exercises page at a smaller
 * scale: a 24 px/600 heading against 36 px/700, and a ~92 px icon against
 * 145 px. Everything else — the grey card, the 50 px radius, the 14 px text
 * at 40% black, the button — is identical, so only these are overridden.
 */
.bbs-link-cards--posts {
    --bbs-link-cards-icon: 92px;
    --bbs-link-cards-min-h: 420px;
}

.bbs-link-cards--posts .bbs-link-cards__title {
    font-size: 24px;
    font-weight: 600;
}

/*
 * On the exercises page the whole text block sits low in the card; on the
 * blog it starts right under the icon and only the button is pinned down.
 */
.bbs-link-cards--posts .bbs-link-cards__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin-top: 0;
}

/* auto pins the button down; the gap above it comes from the text's margin. */
.bbs-link-cards--posts .bbs-link-cards__text {
    margin-bottom: 25px;
}

.bbs-link-cards--posts .bbs-link-cards__btn {
    margin-top: auto;
}

@media (max-width: 1199px) {
    .bbs-link-cards--posts {
        --bbs-link-cards-icon: 80px;
    }

    .bbs-link-cards--posts .bbs-link-cards__title {
        font-size: 22px;
    }
}

@media (max-width: 639px) {
    .bbs-link-cards--posts {
        --bbs-link-cards-icon: 70px;
    }

    .bbs-link-cards--posts .bbs-link-cards__title {
        font-size: 21px;
    }
}

/* The contacts section closes the page; it brings its own padding. */
.bbs-blog__after {
    margin: 0;
}

@media (max-width: 639px) {
    .bbs-blog {
        --bbs-blog-gutter: 16px;
    }
}

/* ── Pager ──
 * Round number buttons in the cards' grey, the current page filled with the
 * site orange. Centred under the grid; wraps rather than scrolls on a phone. */
.bbs-blog-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: calc(var(--bbs-blog-container) + var(--bbs-blog-gutter) * 2);
    margin: 0 auto;
    padding: 10px var(--bbs-blog-gutter) 80px;
}

.bbs-blog-pager__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bbs-blog-pager__item {
    margin: 0;
}

.bbs-blog-pager__num,
.bbs-blog-pager__step,
.bbs-blog-pager__gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    padding: 0 12px;
    border-radius: 24px;
    font-size: 18px;
    line-height: 1;
    font-weight: 600;
    text-decoration: none;
}

.bbs-blog-pager__num,
.bbs-blog-pager__step {
    background: #f4f4f4;
    color: #000000;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.bbs-blog-pager__num:hover,
.bbs-blog-pager__num:focus-visible,
.bbs-blog-pager__step:hover,
.bbs-blog-pager__step:focus-visible {
    background: var(--bbs-blog-orange);
    color: #ffffff;
    text-decoration: none;
}

.bbs-blog-pager__num:focus-visible,
.bbs-blog-pager__step:focus-visible {
    outline: 2px solid var(--bbs-blog-orange);
    outline-offset: 3px;
}

.bbs-blog-pager__num--current {
    background: var(--bbs-blog-orange);
    color: #ffffff;
}

.bbs-blog-pager__gap {
    min-width: 24px;
    padding: 0;
    color: rgba(0, 0, 0, 0.4);
}

@media (max-width: 639px) {
    .bbs-blog-pager {
        --bbs-blog-gutter: 16px;

        gap: 6px;
        padding-bottom: 50px;
    }

    .bbs-blog-pager__list {
        gap: 6px;
    }

    .bbs-blog-pager__num,
    .bbs-blog-pager__step,
    .bbs-blog-pager__gap {
        min-width: 40px;
        height: 40px;
        padding: 0 10px;
        font-size: 16px;
    }

    .bbs-blog-pager__gap {
        min-width: 16px;
        padding: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bbs-blog-pager__num,
    .bbs-blog-pager__step {
        transition: none;
    }
}