/*
    Block: Post Listing
    Note: Selectors must start with .block-post-listing
*/

@layer blocks {
    .block-post-listing .category-filters {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 0.5rem;
        list-style: none;
        padding: 0;
        margin: 0;

        overflow-x: scroll;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .block-post-listing .category-filters::-webkit-scrollbar {
        display: none;
    }

    .block-post-listing .category-filters li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    }

    .block-post-listing .category-filters input {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .block-post-listing .category-filter {
        white-space: nowrap;
        font-family: var(--ff-secondary);
        font-size: var(--fs-11-13);
        font-weight: 300;
        line-height: 1.3;
        letter-spacing: -.01em;
        text-transform: uppercase;
        padding: .875rem 1.125rem;
        background: none;
        border: 1px solid transparent;
        border-radius: 100vw;
        color: var(--c-body-grey);
        cursor: pointer;
        -webkit-transition: var(--transition-dur) var(--transition-func);
        transition: var(--transition-dur) var(--transition-func);
        -webkit-transition-property: color, border-color, background-color;
        transition-property: color, border-color, background-color;
    }

    .block-post-listing .category-filters input:checked + .category-filter {
        background-color: rgb(from var(--c-blue) r g b / .05);
        border-color: rgb(from var(--c-blue) r g b / .15);
        color: var(--c-dark-blue);
    }

    .block-post-listing .category-filters input:focus-visible + .category-filter {
        background-color: rgb(from var(--c-blue) r g b / .05);
        border-color: rgb(from var(--c-blue) r g b / .15);
        color: var(--c-dark-blue);
    }

    .block-post-listing .posts-wrapper {
        display: -ms-grid;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 3.75rem 1.25rem;
    }

    .block-post-listing .posts-wrapper:not(:first-child) {
        margin-top: 1.5625rem;
        padding-top: 2.5rem;
        border-top: 1px solid rgb(from var(--c-blue) r g b / .15);
    }

    .block-post-listing .plus-circle-btn {
        position: absolute;
        top: 1.25rem;
        right: 1.25rem;
    }

    .block-post-listing .post-meta {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: 0.9375rem;
    }

    .block-post-listing .post__category {
        margin: 0;
    }

    .block-post-listing .post__date {
        font-size: var(--fs-11-13);
        color: var(--c-body-grey);
        letter-spacing: -.05em;
        border: 1px solid var(--c-lighter-grey);
        border-radius: 100vw;
        font-weight: 500;
        padding: 0.625rem 1rem;
    }

    .block-post-listing .post__title {
        margin: 0;
        text-decoration: none;
    }

    .block-post-listing .pagination {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        gap: 0.375rem;
        margin-top: 4.4375rem;
        border-top: 1px solid rgb(from var(--c-blue) r g b / .15);
        padding-top: 1.875rem;
    }

    .block-post-listing .pagination:empty {
        display: none;
    }

    .block-post-listing .pagination .page-numbers {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        gap: .625rem;
        color: var(--c-body-grey);
        font-family: var(--ff-secondary);
        font-size: var(--fs-11-13);
        font-weight: 300;
        line-height: 1.3;
        letter-spacing: -.01em;
        text-transform: uppercase;
    }

    .block-post-listing .pagination .page-numbers:where(:not(.prev, .next)) {
        border: 1px solid rgb(from var(--c-blue) r g b / .1);
        border-radius: 50%;
        width: 2.75rem;
        height: 2.75rem;
    }

    .block-post-listing .pagination .prev {
        margin-right: auto;
    }

    .block-post-listing .pagination .next {
        margin-left: auto;
    }

    .block-post-listing .pagination a {
        text-decoration: none;
    }

    .block-post-listing .pagination a:is(.prev, .next) {
        color: var(--c-dark-blue);
    }

    .block-post-listing .page-numbers.current {
        color: var(--c-dark-blue);
        border-color: rgb(from var(--c-blue) r g b / .15);
        background-color: rgb(from var(--c-blue) r g b / .05);
    }

    .block-post-listing .post-card {
        --transition-dur: 120ms;
        --transition-func: ease-in-out;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 2.1875rem;
    }

    .block-post-listing .post-data {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 1.5625rem;
    }

    .block-post-listing .image-wrapper {
        aspect-ratio: 1.6826;
        overflow: hidden;
        position: relative;
        isolation: isolate;
    }

    .block-post-listing .image-wrapper::before, .block-post-listing .image-wrapper::after {
        content: '';
        position: absolute;
        inset: 0;
        mix-blend-mode: multiply;
        z-index: -1;
        -webkit-transition: opacity var(--transition-dur) var(--transition-func);
        transition: opacity var(--transition-dur) var(--transition-func);
    }

    .block-post-listing .image-wrapper .post__image {
        -webkit-transition: -webkit-transform var(--transition-dur) var(--transition-func);
        transition: -webkit-transform var(--transition-dur) var(--transition-func);
        transition: transform var(--transition-dur) var(--transition-func);
        transition: transform var(--transition-dur) var(--transition-func), -webkit-transform var(--transition-dur) var(--transition-func);
    }

    .block-post-listing .image-wrapper::before {
        background: linear-gradient(246.93deg, rgb(from var(--c-dark-blue) r g b / 0.1) 44.31%, transparent 88.04%);
    }

    .block-post-listing .image-wrapper::after {
        background: linear-gradient(246.93deg, rgb(from var(--c-dark-blue) r g b / 0.25) 44.31%, transparent 88.04%);
        opacity: 0;
    }

    .block-post-listing .image-wrapper .plus-circle-btn {
        --size: 2.75rem;
        --icon-size: 1rem;
        position: absolute;
        top: 1.25rem;
        right: 1.25rem;
    }

    .block-post-listing .image-wrapper .plus-circle-btn {
        opacity: 0;
        -webkit-transition: var(--transition-dur) var(--transition-func);
        transition: var(--transition-dur) var(--transition-func);
        -webkit-transition-property: opacity, -webkit-transform;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform;
    }

    .block-post-listing .image-wrapper .post__image {
        position: relative;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        z-index: -2;
    }

    .block-post-listing .post-card:is(:hover, :focus-within) .image-wrapper::before {
        opacity: 0;
    }

    .block-post-listing .post-card:is(:hover, :focus-within) .image-wrapper::after {
        opacity: 1;
    }

    .block-post-listing .post-card:is(:hover, :focus-within) .image-wrapper .plus-circle-btn {
        opacity: 1;
        -webkit-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
                transform: rotate(90deg);
    }

    .block-post-listing .post-card:is(:hover, :focus-within) .post__image {
        -webkit-transform: scale(1.02);
            -ms-transform: scale(1.02);
                transform: scale(1.02);
    }

    .block-post-listing .page-numbers.prev::before {
        content: var(--i-arrow-left);
    }

    .block-post-listing .page-numbers.next::after {
        content: var(--i-arrow-right);
    }

    @media screen and (width <= 920px) {
        .block-post-listing .posts-wrapper {
            grid-template-columns: repeat(2,1fr);
        }
        .block-post-listing .posts-wrapper:not(:first-child) {
            margin-top: 1.25rem;
            padding-top: 1.875rem;
        }
        .block-post-listing .category-filters {
            margin-inline: calc(-1 * var(--page-padding, 1rem));
            padding-inline: var(--page-padding, 1rem);
        }
        .block-post-listing .category-filter {
            padding: 0.75rem 1.125rem;
        }
        .block-post-listing .post__image {
            aspect-ratio: 1.71;
        }
        .block-post-listing .post-card {
            gap: 1.5625rem;
        }
        .block-post-listing .post-data {
            gap: 1rem;
        }
        .block-post-listing .post-meta {
            gap: 0.75rem;
        }
        .block-post-listing .post__date {
            padding: 0.5rem 0.75rem;
        }
        .block-post-listing .pagination {
            gap: 0.25rem;
            margin-top: 3.125rem;
        }
        .block-post-listing .pagination .page-numbers {
            border: 1px solid rgb(from var(--c-blue) r g b / .15);
            width: 2.1875rem;
            height: 2.1875rem;
        }
        .block-post-listing .pagination .page-numbers:is(.prev, .next) {
            position: relative;
            font-size: 0;
            width: 1.875rem;
            height: 1.875rem;
            border-radius: 50%;
        }
        .block-post-listing .pagination .prev::before,
        .block-post-listing .pagination .next::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: .625rem;
            height: .5rem;
            background-repeat: no-repeat;
            background-position: center;
            background-size: .625rem .5rem;
        }
        .block-post-listing .pagination .prev::before {
            background-image: var(--i-arrow-left);
        }
        .block-post-listing .pagination .next::after {
            background-image: var(--i-arrow-right);
        }
        .block-post-listing .pagination span.page-numbers:is(.prev, .next) {
            opacity: .5;
        }
    }

    @media screen and (width <= 620px) {
        .block-post-listing .category-filters {
            gap: 0;
        }
        .block-post-listing .posts-wrapper {
            grid-template-columns: 1fr;
            gap: 2.5rem;
        }
    }
}