@use "../common/utils" as *;
@use "../common/mixins" as *;

.faq-archive {

    &__filters {

        .filter-list {
            display: flex;
            gap: calc-rem(5px);
            list-style-type: none;
            padding-left: 0;
            margin-bottom: 0;
            overflow-x: auto;

            @include media-breakpoint-up(lg) {
                overflow: initial;
                flex-wrap: wrap;
            }

            .filter {
                height: calc-rem(45px);
                padding-inline: calc-rem(10px);
                border: calc-rem(1px) solid rgba(var(--color-secondary), .2);
                color: rgba(var(--color-secondary));
                border-radius: calc-rem(5px);
                white-space: nowrap;

                &.active {
                    border-color: rgba(var(--color-primary));
                }
            }
        }


    }

    &__divider {
        margin-block: calc-rem(45px);
    }

    &__section {

        .title {
            font-size: clamp-font(14px, 14px);
        }

        .wrapper {
            display: grid;

            @include media-breakpoint-up(lg) {
                grid-template-columns: repeat(2, 1fr);
                gap: calc-rem(30px);
            }

            .column-odd {
                .faq-card {
                    &:last-child {
                        border-bottom: none;

                        @include media-breakpoint-up(lg) {
                            border-bottom: 1px solid rgba(var(--color-border));
                        }

                    }
                }
            }
        }

        + div {
            margin-top: calc-rem(40px);
        }

    }
}
