/*
    Block: Full Bleed Card Links
    Note: Selectors must start with .block-full-bleed-card-links
*/

@layer blocks {
    .block-full-bleed-card-links .main-wrapper {
        --height: 100vh;
        --height: 100svh;
        --height: 100dvh;
        position: relative;
        height: calc(var(--height) - 2.5rem);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .block-full-bleed-card-links .cards-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 1.25rem;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .block-full-bleed-card-links .cta-card {
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
        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-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: 2.5rem;
        padding: 2.5rem;
    }

    .block-full-bleed-card-links .cta-card .media-wrapper::after {
        content: '';
        position: absolute;
        inset: 0;
        background-color: #0000004D;
        mix-blend-mode: multiply;
    }

    .block-full-bleed-card-links .card__label {
        margin: 0;
    }

    .block-full-bleed-card-links .card__description {
        max-width: 34.625rem;
        margin: 0;
    }

    @media screen and (width > 920px) {
        .block-full-bleed-card-links .cta-card {
            --transition-func: ease-in-out;
            -webkit-transition: -webkit-flex-basis var(--transition-dur) var(--transition-func);
            transition: -webkit-flex-basis var(--transition-dur) var(--transition-func);
            transition: flex-basis var(--transition-dur) var(--transition-func);
            transition: flex-basis var(--transition-dur) var(--transition-func), -webkit-flex-basis var(--transition-dur) var(--transition-func), -ms-flex-preferred-size var(--transition-dur) var(--transition-func);
        }

        .block-full-bleed-card-links .card__description {
            max-height: 0;
            margin-block: 0 -2.5rem;
            opacity: 0;
            -webkit-transition: var(--transition-dur) var(--transition-func);
            transition: var(--transition-dur) var(--transition-func);
            -webkit-transition-property: max-height, margin, opacity;
            transition-property: max-height, margin, opacity;
        }
        
        .block-full-bleed-card-links .cta-card:is(:hover, :focus-within) {
            -ms-flex-preferred-size: 200%;
                flex-basis: 200%;
        }

        .block-full-bleed-card-links .cta-card:is(:hover, :focus-within) .card__description {
            max-height: var(--max-height, 500px);
            margin-block: 0;
            opacity: 1;
        }
    }

    @media screen and (width <= 620px) {
        .block-full-bleed-card-links .main-wrapper {
            height: auto;
        }

        .block-full-bleed-card-links .cards-list {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            gap: .9375rem;
        }

        .block-full-bleed-card-links .cta-card {
            min-height: 27.5rem;
            -ms-flex-preferred-size: unset;
                flex-basis: unset;
            gap: 1.875rem;
        }

        .block-full-bleed-card-links .card__description {
            max-width: 90%;
        }

        .block-full-bleed-card-links .card__button {
            margin-top: -.25rem;
        }
    }
}