/**
 * Blog page styles — Mobile-first base
 * Masonry layout (CSS columns) + category filter buttons
 *
 * @package T3BR
 */

/* Category Filter Buttons */
.blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--t3br-spacing-sm);
    margin-bottom: var(--t3br-spacing-xl);
}

.blog-filter {
    display: inline-flex;
    align-items: center;
    gap: var(--t3br-spacing-xs);
    padding: var(--t3br-spacing-xs) var(--t3br-spacing-md);
    font-size: var(--t3br-font-size-sm);
    font-weight: var(--t3br-font-weight-medium);
    color: var(--t3br-text-muted);
    background-color: var(--t3br-white);
    border: 1px solid var(--t3br-border);
    text-decoration: none;
    transition: all var(--t3br-transition-fast);
}

.blog-filter:hover {
    color: var(--t3br-green);
    border-color: var(--t3br-green);
}

.blog-filter--active {
    background-color: var(--t3br-deep-green);
    color: var(--t3br-white);
    border-color: var(--t3br-deep-green);
}

.blog-filter--active:hover {
    background-color: var(--t3br-green);
    color: var(--t3br-white);
    border-color: var(--t3br-green);
}

.blog-filter__count {
    font-weight: var(--t3br-font-weight-normal);
    opacity: 0.7;
}

/* Masonry Grid */
.blog-masonry {
    columns: 2;
    column-gap: var(--t3br-spacing-sm);
}

.blog-masonry .post-card {
    break-inside: avoid;
    margin-bottom: var(--t3br-spacing-sm);
}

/* Post card category badges */
.post-card__categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--t3br-spacing-xs);
    margin-bottom: var(--t3br-spacing-sm);
}

.post-card__category {
    font-size: var(--t3br-font-size-xxs);
    font-weight: var(--t3br-font-weight-semibold);
    color: var(--t3br-green);
    text-transform: uppercase;
    letter-spacing: var(--t3br-letter-spacing-wider);
    text-decoration: none;
}

/* Post card date on blog masonry */
.blog-masonry .card__date {
    order: -1;
}

/* Pagination */
.blog-pagination {
    margin-top: var(--t3br-spacing-2xl);
    text-align: center;
}

.blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--t3br-spacing-sm);
    font-size: var(--t3br-font-size-sm);
    font-weight: var(--t3br-font-weight-medium);
    color: var(--t3br-text-muted);
    text-decoration: none;
    border: 1px solid var(--t3br-border);
    transition: all var(--t3br-transition-fast);
}

.blog-pagination .page-numbers:hover {
    color: var(--t3br-green);
    border-color: var(--t3br-green);
}

.blog-pagination .page-numbers.current {
    background-color: var(--t3br-deep-green);
    color: var(--t3br-white);
    border-color: var(--t3br-deep-green);
}

.blog-pagination .page-numbers.dots {
    border: none;
}