/*
    Block: Glossary Listing
    Note: Selectors must start with .block-glossary-listing
*/

@layer blocks {
    .block-glossary-listing .ajax-filters {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        gap: 1.25rem;
        padding-bottom: 2.5rem;
        border-bottom: 1px solid rgb(from var(--c-blue) r g b / .15);
        margin-bottom: 4.375rem;
    }
    
    .block-glossary-listing .search-input-wrapper {
        -ms-flex-preferred-size: 40.6667%;
            flex-basis: 40.6667%;
        -ms-flex-negative: 1;
            flex-shrink: 1;
        position: relative;
    }

    .block-glossary-listing .search-input-wrapper input {
        width: 100%;
        padding: 1rem 1.5rem 1rem 3rem;
        border-radius: 100vw;
        background-color: rgb(from var(--c-blue) r g b / .03);
    }

    .block-glossary-listing .search-input-wrapper button {
        position: absolute;
        left: 1.625rem;
        top: 50%;
        color: currentColor;
        background: none;
        border: 0;
        padding: 0;
        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%);
        cursor: pointer;
        border-radius: 50%;
        outline-offset: 5px;
    }

    .block-glossary-listing .initials-wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: .3125rem;
    }
    
    .block-glossary-listing .filter-initial {
        display: block;
        padding: .8125rem .5625rem;
        color: var(--c-body-grey);
        border: 1px solid transparent;
        border-radius: 100vw;
        cursor: pointer;
        text-decoration: none;
    }
    
    .block-glossary-listing .filter-initial:is(:hover, :focus) {
        color: var(--c-dark-blue);
        background-color: rgb(from var(--c-blue) r g b / .05);
        border-color: rgb(from var(--c-blue) r g b / .15);
    }

    .block-glossary-listing .filter-initial::before {
        content: unset;
    }

    .block-glossary-listing .glossary-wrapper {
        --cols: 4;
        display: -ms-grid;
        display: grid;
        grid-template-columns: repeat(var(--cols), 1fr);
        gap: 4.0625rem;
    }

    .block-glossary-listing .glossary-group {
        scroll-margin-top: calc(1.875rem - var(--header-height, 0px));
    }

    .block-glossary-listing .glossary-group__head {
        padding-bottom: 1.875rem;
        margin-bottom: 2.625rem;
        border-bottom: 1px solid rgb(from var(--c-blue) r g b / .15);
    }

    .block-glossary-listing .glossary-group__head .initial {
        margin: 0;
    }

    .block-glossary-listing .glossary-group__items {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        gap: 1.25rem;
    }

    .block-glossary-listing .glossary-item {
        color: var(--c-body-grey);
        text-decoration: none;
        -webkit-transition: color var(--transition-dur) var(--transition-func);
        transition: color var(--transition-dur) var(--transition-func);
    }

    .block-glossary-listing .glossary-item:is(:hover, :focus) {
        color: var(--c-dark-blue);
    }

    @media screen and (width <= 920px) {
        .block-glossary-listing .main-wrapper {
            padding-inline: .5625rem;
        }

        .block-glossary-listing .ajax-filters {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            -webkit-box-align: stretch;
                -ms-flex-align: stretch;
                    align-items: stretch;
            gap: 1.875rem;
        }

        .block-glossary-listing .initials-wrapper {
            width: 100vw;
            margin-left: calc(50% - 50vw);
            padding-inline: calc(50vw - 50%);
            overflow-x: auto;
            scrollbar-width: 0;
        }

        .block-glossary-listing .initials-wrapper::-webkit-scrollbar {
            display: none;
        }

        .block-glossary-listing .glossary-wrapper {
            --cols: 3;
        }
    }

    @media screen and (width <= 620px) {
        .block-glossary-listing .ajax-filters {
            padding-bottom: 2.5rem;
            margin-bottom: 3.125rem;
        }

        .block-glossary-listing .initials-wrapper {
            gap: .25rem;
        }

        .block-glossary-listing .filter-initial {
            padding: .75rem .5rem;
        }

        .block-glossary-listing .glossary-wrapper {
            --cols: 2;
            gap: 2.5rem .9375rem;
        }

        .block-glossary-listing .glossary-group__head {
            padding-bottom: 1rem;
            margin-bottom: 1.5rem;
        }
    }
}