/*
    Block: Support Listing
    Note: Selectors must start with .block-support-listing
*/

@layer blocks {
    .block-support-listing .text-content {
        margin-bottom: 3.75rem;
    }

    .block-support-listing .cards-wrapper {
        --cols: 2;
        display: -ms-grid;
        display: grid;
        grid-template-columns: repeat(var(--cols), 1fr);
        gap: 1.25rem;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .block-support-listing .card {
        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: 2.5rem;
        padding: 2.1875rem;
        min-height: 12.25rem;
    }

    .block-support-listing .card__icon {
        width: 1.625rem;
        height: 1.625rem;
        -o-object-fit: contain;
           object-fit: contain;
        margin-bottom: auto;
    }

    .block-support-listing .card__label {
        margin: 0;
        text-decoration: none;
        margin-right: 1.125rem;
    }

    .block-support-listing .card__link {
        margin-top: auto;
    }

    .block-support-listing .card--cta {
        border: 1px solid black;
    }

    .block-support-listing .card--cta .card__label {
        color: rgb(from var(--c-white) r g b / .75);
    }

    .block-support-listing .card--cta .card__label :is(strong, b) {
        color: var(--c-white);
        font-weight: 500;
    }

    .block-support-listing .card--text {
        --transition-dur: 120ms;
        --transition-func: ease-in-out;
        position: relative;
        background-color: rgb(from var(--c-blue) r g b / .05);
        border: 1px solid rgb(from var(--c-blue) r g b / .15);
        -webkit-transition: border-color var(--transition-dur) var(--transition-func);
        transition: border-color var(--transition-dur) var(--transition-func);
    }

    .block-support-listing .card--text .card__label {
        -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-support-listing .card--text .hover-icon {
        position: absolute;
        right: 2.1875rem;
        bottom: 2.25rem;
        width: 1.0625rem;
        height: auto;
        color: var(--c-orange);
        opacity: 0;
        -webkit-transform: translateX(-.625rem);
            -ms-transform: translateX(-.625rem);
                transform: translateX(-.625rem);
        -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-support-listing .card--text:is(:hover, :focus-within) {
        border-color: rgb(from var(--c-blue) r g b / .5);
    }
    
    .block-support-listing .card--text:is(:hover, :focus-within) .hover-icon {
        opacity: 1;
        -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
                transform: translateX(0);
    }
    
    .block-support-listing .card--text:is(:hover, :focus-within) .card__label {
        -webkit-transform: translateX(2px);
            -ms-transform: translateX(2px);
                transform: translateX(2px);
    }

    @media screen and (width <= 920px) {
        .block-support-listing .card {
            padding: 1.5rem;
        }
    }

    @media screen and (width <= 620px) {
        .block-support-listing .text-content {
            margin-bottom: 1.5625rem;
        }

        .block-support-listing .cards-wrapper {
            --cols: 1;
            gap: .9375rem;
        }

        .block-support-listing .card {
            min-height: unset;
        }

        .block-support-listing .card--text {
            gap: 1.875rem;
        }

        .block-support-listing .card__icon {
            width: 1.125rem;
            height: 1.125rem;
        }

        .block-support-listing .card--text .hover-icon {
            width: 1rem;
            right: 1.5rem;
            bottom: 1.5rem;
        }
    }
}