/* @group categorize-items STATE
------------------------------------ */


.categorize-items[data-state="ready"] .items {
    opacity: 1;

}

.categorize-items:is([data-state="loading"], [data-state="empty"]) .status {
    opacity: 1;
}

.categorize-items[data-state="loading"] .status .loader {
    opacity: 1;
}

.categorize-items[data-state="empty"] .status .notification {
    opacity: 1;
}

.categorize-items:is([data-state="loading"], [data-state="empty"]) .load-more {
    opacity: 0;
    pointer-events: none;
}

/* @end */


/* @group categorize-items
------------------------------------ */

.categorize-items .status {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    inset: 0;
    pointer-events: none;

}

.categorize-items .items .item>* {
    pointer-events: none;

}

.categorize-items .items .item:not(.active) {
    display: none;
}

.categorize-items .items {
    opacity: 0;
    transition: 0.5s;
}

.categorize-items :where(.status, .loader, .status .notification) {
    opacity: 0;
    transition: 0.5s;
}

.categorize-items .status .notification {
    position: absolute;
    text-align: center;
}

/* @end */


/* @group categorize-items FILTER
------------------------------------ */

.categorize-items .filter :where(ul, li) {
    list-style: none;
}

.categorize-items .filter ul {
    display: flex;
}

.categorize-items .filter .category {
    cursor: pointer;
    transition: 0.5s;
}

.categorize-items .filter .category * {
    pointer-events: none;
}

.categorize-items .filter .category-menu ul {
    transition: 0.5s;
}

.categorize-items .filter header * {
    pointer-events: none;
}

.categorize-items .selector-all ul {
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
}

.categorize-items .category-menu:is(.open, #important) ul {
    opacity: 1;
    pointer-events: all;
}

@media only screen and (min-width : 961px) {
    .categorize-items .selector-desktop ul {
        flex-direction: column;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        z-index: 1;
    }

    .categorize-items .selector-mobile header {
        display: none;
    }
}

@media only screen and (min-width : 0) and (max-width : 960px) {

    .categorize-items .selector-mobile ul {
        flex-direction: column;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        z-index: 1;
    }

    .categorize-items .selector-desktop header {
        display: none;
    }
}

/* @end */


/* @group news-events
------------------------------------ */

.news-events .filter ul {
    margin-inline: auto;
    justify-content: center;
    align-items: center;
}

.news-events .filter .category.active {
    background-color: var(--_color);
    color: var(--_bg-color)
}

.news-events .filter .category.active span {
    color: var(--_bg-color)
}

.news-events article {
    border-block: 1px solid var(--white);
}

.news-events article {
    min-height: 15rem;
}

.news-events .item:not(:last-of-type) {
    border-bottom: 1px solid var(--white);
}
.news-events .item .tag {
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.1em;
    text-transform: uppercase;
    
}
@media only screen and (min-width : 961px) {

    .news-events article {
        min-height: 35rem;
    }

    
    .news-events .filter ul {
        gap: 4rem;
        padding-bottom: 17.4rem;
    }

    .news-events .filter li {
        position: relative;
    }

    .news-events .filter li::after {
        content: '';
        height: 9.4rem;
        top: 12.5rem;
        display: block;
        margin-inline: auto;
        background: var(--_color);
        width: 1px;
        position: absolute;
        left: 50%;
        translate: -50% 0;
        transition: opacity 0.5s, scale 1s;
        opacity: 0;
        bottom: -1px;
    }

    .news-events .filter li.active::after {
        opacity: 1;
    }

    .news-events .item {
        display: flex;
        padding-block: 5rem 4.4rem;
        align-content: center;
    }

    .news-events .item :is(header, .content) {
        flex-basis: 42.3%;
    }

    .news-events .item .content {
        padding-inline: 2.5rem 4.5rem;
    }

    .news-events .item .bttn-wrapper {
        flex-basis: 15.38%;
    }
    .news-events .item .tag {
        font-size: 2.5rem;
        padding-bottom: 2.5rem;
    }
}

@media only screen and (min-width : 0) and (max-width : 960px) {

    .news-events article {
        padding: 0;
        max-width: calc(100% - 6rem);
    }

    .news-events .filter {
        display: flex;
        padding-bottom: 14rem;
        justify-content: center;
    }

    .news-events .filter::after {
        content: '';
        height: 9.4rem;
        width: 1px;
        background: var(--_color);
        position: absolute;
        margin-top: 10rem;
        bottom: 0;
    }

    .news-events .filter.open header {
        background-color: var(--_color);
        color: var(--_bg-color);
    }

    .news-events .filter .category.active {
        display: none;
    }

    .news-events .filter ul {
        gap: 2rem;
        left: 50%;
        translate: -50% 7rem;
    }
    .news-events .filter .bttn {
        white-space: nowrap;
    }

    .news-events .filter.open {
        padding-bottom: 44rem;
    }

    .news-events .item {
        padding-block: 4rem;
        display: flex;
        flex-direction: column;
        gap: 4rem;
    }
    .news-events .item .tag {
        font-size: 2rem;
        padding-bottom: 2rem;
    }
}

/* @end */

/* ANIMATIONS */
.news-events :is(article) {
    opacity: 0;
    --duration: 1s;
}

.news-events:where(.animateActive) :is(article) {
    animation: fade var(--duration) forwards;
    animation-delay: var(--delay, 0);
}
.news-events li::after {
    transform-origin: bottom;
    scale: 1 0;
}

.news-events:where(.animateActive) li::after {
    scale: 1;
}

@media only screen and (min-width : 0) and (max-width : 960px) {
    .news-events :is(.filter) {
        opacity: 0;
        --duration: 1s;
    }

    .news-events:where(.animateActive) :is(.filter) {
        animation: fade var(--duration) forwards;
        animation-delay: var(--delay, 0);
    }

    .news-events:where(.animateActive) .filter {
        --delay: 0.5s;
    }


}

@media only screen and (min-width : 961px) {
    .news-events :is(.category) {
        opacity: 0;
        --duration: 1s;
    }

    .news-events:where(.animateActive) :is(.category) {
        animation: fade var(--duration) forwards;
        animation-delay: var(--delay, 0);
    }

    .news-events:where(.animateActive) .category:nth-of-type(2) {
        --delay: 0.25s;
    }

    .news-events:where(.animateActive) .category:nth-of-type(3) {
        --delay: 0.5s;
    }

    .news-events:where(.animateActive) .category:nth-of-type(4) {
        --delay: 0.75s;
    }

    .news-events:where(.animateActive) .category:nth-of-type(5) {
        --delay: 1s;
    }

    .news-events:where(.animateActive) .category:nth-of-type(6) {
        --delay: 1.25s;
    }

    .news-events:where(.animateActive) .category:nth-of-type(7) {
        --delay: 1.5s;
    }
}