.footer { margin-top: 0; }

.archive-section {
    margin-bottom: 3rem;
}

/*  ========================================================
    #FILTER / ФИЛЬТРЫ
    ======================================================== */

.filter-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.filter-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
    background: transparent;
    border: .0625rem solid rgba(255, 107, 1, .4);
    border-radius: 50%;
    color: var(--color-accent);
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform .3s ease, background .3s ease, color .3s ease;
}

.filter-toggle:hover {
    background: rgba(255, 107, 1, .1);
}

.filter-wrapper.is-open .filter-toggle {
    background: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
}

.filter-container {
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    transition: max-width .5s cubic-bezier(0.4, 0, 0.2, 1), opacity .4s ease, padding .3s ease;
}

.filter-wrapper.is-open .filter-container {
    max-width: 2000px;
    opacity: 1;
    overflow: scroll;
}

.filter-wrapper.is-open .filter-container::-webkit-scrollbar {
    display: none;
}

    /*  #1024_FILTER  */

.filter-btn {
    background: transparent;
    color: var(--color-black);
    border: .0625rem solid rgba(255, 107, 1, .2);
    padding: .625rem 1.375rem;
    border-radius: 6.25rem;
    font-family: 'Ysabeau SC', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .0625rem;
    cursor: pointer;
    transition: all .3s ease;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
    box-shadow: 0 .25rem .9375rem rgba(255, 107, 1, 0.2);
}

/*  ========================================================
    #CARDS / КАРТОЧКИ
    ======================================================== */

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.875rem;
    transition: opacity .3s ease;
}

.related-card {
    position: relative;
    display: block;
    text-decoration: none;
    border-radius: 1.25rem;
    overflow: hidden;
    background: rgb(32, 41, 56);
    border: .0625rem solid rgba(255, 107, 1, .1);
    transition: border-color .3s, transform .35s ease, opacity .35s ease, visibility .35s;
}

.related-card:hover {
    border-color: rgba(255, 107, 1, .32);
    transform: translateY(-0.375rem);
}

.related-card.is-hidden,
.related-card.is-pager-hidden {
    display: none;
}

.related-card-img {
    aspect-ratio: 4/3;
    overflow: hidden;
    position: relative;
    background: #222;
}

.related-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(.78) saturate(.8);
    transition: transform .5s ease, filter .4s;
}

.related-card:hover .related-card-img img {
    filter: brightness(.96) saturate(1);
}

.rc-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 15, 15, .65) 0%, transparent 60%);
    pointer-events: none;
    }

    /*  #1024_CARDS_BODY  */

.rc-cat {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-family: 'Ysabeau SC', sans-serif;
    font-size: 1.063rem;
    font-weight: 700;
    letter-spacing: .09375rem;
    text-transform: uppercase;
    color: var(--color-accent);
    background: rgba(15, 15, 15, .7);
    backdrop-filter: blur(.25rem);
    padding: .3125rem .75rem;
    border-radius: 6.25rem;
    border: .0625rem solid rgba(255, 107, 1, .2);
}

.rc-body {
    padding: 1.75rem 1.75rem 2rem;
}

.rc-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 1.563rem;
    font-weight: 800;
    color: #f0ede6;
    line-height: 1.3;
    margin-bottom: .75rem;
    letter-spacing: -.01875rem;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;

    min-height: 6.1rem;
}

.rc-desc {
    font-size: 1.625rem;
    line-height: 1.65;
    margin-bottom: 1.5rem;
    height: 4.9rem;
    overflow: hidden;
}

.rc-link {
    background-color: var(--color-accent);
    padding: .75rem 3.125rem;
    border-radius: 5rem;
    text-transform: uppercase;
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .938rem;
    height: 100%;
    cursor: pointer;
    justify-content: center;
    color: var(--color-white);
}

/*  ========================================================
    #LOAD / ЗАГРУЗКА
    ======================================================== */

.load-more-container {
    margin-top: 3.75rem;
    display: flex;
    justify-content: center;
}

.load-more-btn {
    background: transparent;
    color: var(--color-accent);
    border: .125rem solid var(--color-accent);
    padding: 1rem 2.5rem;
    border-radius: 6.25rem;
    font-family: 'Ysabeau SC', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .0625rem;
    cursor: pointer;
    transition: all .3s ease;
}

.load-more-btn:hover {
    background: var(--color-accent);
    color: #0f0f0f;
    box-shadow: 0 .25rem .9375rem rgba(255, 107, 1, 0.3);
}

.load-more-btn.is-hidden {
    display: none;
}


/*  ========================================================
    #ADAPT / АДАПТАЦИЯ
    ======================================================== */

@media (max-width: 1024px) {
    /*  #1024_CARDS  */

    .related-grid {
        grid-template-columns: 1fr 1fr;
    }

    /*  #1024_FILTER  */

    .filter-btn {
        font-size: 1.378rem;
    }

    /*  #1024_CARDS_BODY  */

    .rc-cat {
        font-size: .918rem;
    }

    .rc-title {
        font-size: 1.492rem;
    }

    .rc-desc {
        font-size: 1.492rem;
    }

    .rc-link {
        font-size: 1.378rem;
    }

    /*  #1024_LOAD  */

    .load-more-btn {
        font-size: 1.378rem;
    }
}

@media (max-width: 768px) {
    /*  #768_CARDS  */

    .related-grid {
        grid-template-columns: 1fr;
    }

    /*  #768_FILTER  */
	
	.filter-wrapper.is-open .filter-container {
		mask-image: linear-gradient(to right, black 80%, transparent 100%);
	}
	
    .filter-btn {
        font-size: 1.607rem;
    }

    .filter-toggle {
        width: 4rem;
        height: 4rem;
        min-width: 4rem;
        font-size: 2rem;
    }

    /*  #768_CARDS_BODY  */

    .rc-cat {
        font-size: 1.286rem;
        padding: .5rem 1.5rem;
    }

    .rc-title {
        font-size: 2.089rem;
        min-height: 8.2rem;
    }

    .rc-desc {
        font-size: 1.928rem;
        height: 5.8rem;
    }

    /*  #768_LOAD  */

    .rc-link,
    .load-more-btn {
        padding: 1.25rem 2.893rem;
        font-size: 1.607rem;
        gap: 1.607rem;
    }
}