/*
    Block: Product Summary Links
    Note: Selectors must start with .block-product-summary-links
*/

@layer blocks {
    .block-product-summary-links .text-content {
        margin-bottom: 5rem;
    }

    .block-product-summary-links .cta-cards {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .block-product-summary-links .cta-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-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        height: 38.75rem;
        padding: 2.5rem 1.875rem;
        overflow: hidden;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
    }

    .block-product-summary-links .cta-card .media-wrapper::after {
        content: '';
        position: absolute;
        inset: 0;
        background:
            -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), color-stop(44.96%, rgba(0, 0, 0, 0))),
            -webkit-gradient(linear, left top, left bottom, color-stop(55.04%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
        background:
            linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 44.96%),
            linear-gradient(180deg, rgba(0, 0, 0, 0) 55.04%, rgba(0, 0, 0, 0) 100%);
    }

    .block-product-summary-links .cta-card__link {
        text-decoration: none;
        margin-right: 3.25rem;
    }

    .block-product-summary-links .cta-card__description {
        font-size: var(--fs-17-22);
        font-weight: 500;
        line-height: 1.1;
        letter-spacing: -.06em;
        margin: 0;
        max-width: 93%;
    }

    .block-product-summary-links .plus-circle-btn {
        position: absolute;
        top: 1.875rem;
        right: 1.75rem;
    }

    @media screen and (width > 920px) {
        .block-product-summary-links .cta-card {
            --transition-dur: 180ms;
            --transition-func: ease-in-out;
        }

        .block-product-summary-links .cta-card .media-wrapper::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                -webkit-gradient(linear, left top, left bottom, from(#000000), color-stop(44.96%, rgba(0, 0, 0, 0))),
                -webkit-gradient(linear, left top, left bottom, color-stop(55.04%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.7)));
            background:
                linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 44.96%),
                linear-gradient(180deg, rgba(0, 0, 0, 0) 55.04%, rgba(0, 0, 0, 0.7) 100%);
            opacity: 0;
            -webkit-transition: opacity var(--transition-dur) var(--transition-func);
            transition: opacity var(--transition-dur) var(--transition-func);
        }
    
        .block-product-summary-links .cta-card .media-wrapper::after {
            -webkit-transition: opacity var(--transition-dur) var(--transition-func);
            transition: opacity var(--transition-dur) var(--transition-func);
        }
        
        .block-product-summary-links .cta-card .media-wrapper {
            -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-product-summary-links .cta-card__description {
            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-product-summary-links .plus-circle-btn .icon {
            -webkit-transition: var(--transition-dur) var(--transition-func);
            transition: var(--transition-dur) var(--transition-func);
            -webkit-transition-property: color, -webkit-transform;
            transition-property: color, -webkit-transform;
            transition-property: color, transform;
            transition-property: color, transform, -webkit-transform;
        }

        .block-product-summary-links .cta-card:is(:hover, :focus-within) .media-wrapper {
            -webkit-transform: scale(1.05);
                -ms-transform: scale(1.05);
                    transform: scale(1.05);
        }

        .block-product-summary-links .cta-card:is(:hover, :focus-within) .cta-card__description {
            opacity: 1;
            -webkit-transform: translateX(0);
                -ms-transform: translateX(0);
                    transform: translateX(0);
        }

        .block-product-summary-links .cta-card:is(:hover, :focus-within) .plus-circle-btn .icon {
            color: var(--c-orange);
            -webkit-transform: rotate(90deg);
                -ms-transform: rotate(90deg);
                    transform: rotate(90deg);
        }

        .block-product-summary-links .cta-card:is(:hover, :focus-within) .media-wrapper::before {
            opacity: 1;
        }

        .block-product-summary-links .cta-card:is(:hover, :focus-within) .media-wrapper::after {
            opacity: 0;
        }
    }

    @media screen and (width <= 1400px) {
        .block-product-summary-links .cta-cards {
            gap: .9375rem;
        }

        .block-product-summary-links .cta-card {
            padding: 1.875rem 1.25rem 1.25rem;
        }

        .block-product-summary-links .plus-circle-btn {
            top: 1.5rem;
            right: 1.25rem;
            width: 2.5rem;
            height: 2.5rem;
        }

        .block-product-summary-links .cta-card__link {
            margin-right: 2.5rem;
        }
    }

    @media screen and (width <= 920px) {
        .block-product-summary-links .text-content {
            margin-bottom: 3.125rem;
        }

        .block-product-summary-links .cta-cards {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            gap: .9375rem;
        }

        .block-product-summary-links .cta-card {
            height: 13.75rem;
            -ms-flex-preferred-size: unset;
                flex-basis: unset;
        }

        .block-product-summary-links .cta-card .media-wrapper::after {
            background:
                -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.8)), color-stop(44.96%, rgba(0, 0, 0, 0))),
                -webkit-gradient(linear, left top, left bottom, color-stop(55.04%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.8)));
            background:
                linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 44.96%),
                linear-gradient(180deg, rgba(0, 0, 0, 0) 55.04%, rgba(0, 0, 0, 0.8) 100%);
        }

        .block-product-summary-links .plus-circle-btn {
            top: 1.25rem;
            width: 2.125rem;
            height: 2.125rem;
        }

        .block-product-summary-links .cta-card__link {
            margin-right: 2rem;
        }
    }
}