.cat-filter {
    position: sticky;
    top: 0;
    padding-block: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    background: var(--wp--preset--color--base);
    z-index: 10;

    @media (max-width: 768px) {
        flex-direction: column;
    }
}

.cat-filter-button {
    padding: 0.5rem 1rem;
    border: 1px solid var(--wp--preset--color--accent-1);
    /*color: var(--wp--preset--color--contrast);*/
    text-decoration: none;
    border-radius: 50rem;
    text-align: center;

    &:hover, &:focus-visible {
        background: var(--wp--preset--color--accent-1);
        color: var(--wp--preset--color--contrast);
    }

    &.active {
        border: 1px solid var(--wp--preset--color--contrast);
        background: var(--wp--preset--color--contrast);
        color: var(--wp--preset--color--base);
    }
}

.category-post-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.category-post-list .category-post-list-item {
    height: 300px;
    position: relative;
    overflow: clip;
    border-radius: 1rem;
    transition: scale 0.1s ease;

    &:hover, &:has(a.post-item-link:focus) {
        scale: 1.05;
    }

    a.post-item-link {
        position: absolute;
        inset: 0;

        .post-item-link-title {
            position: absolute;
            bottom: 0;
            inset-inline: 0;
            padding: 1rem;
            background: rgba(0, 0, 0, 0.7);
            color: white;

            .category-badge {
                margin-top: 0.25rem;
                font-size: 0.875rem;
                opacity: 0.8;
            }
        }
    }

    img.post-item-thumbnail {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}