/**
 * Component: CTA Grid
 * 
 * Styles for the CTA Grid component.
 *
 * @package SCDA-2025
 */

/* Basic component styling */
.cta-grid {
    .cta-link {
        position: relative;
        display: block;
        text-decoration: none;
        border-radius: var(--border-radius);
        overflow: hidden;
        transition: transform 0.3s ease;

        &:hover, &:focus-visible {
            .cta-image img {
                transform: scale(1.2);
            }
            .cta-text {
                .arrow-icon {
                    background: url('../../../assets/svg/arrow-right-white.svg') no-repeat center center;
                }
                .external-icon {
                    background-color: transparent;

                    svg {
                        color: var(--color-white);
                    }
                }
            }
        }
        .cta-image {
            width: 100%;
            height: 240px;

            img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 1s ease;
            }
        }
        .cta-text {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            padding: 30px;
            
            &:after {
                content: '';
                display: block;
                width: 100%;
                height: 100%;
                background-color: rgba(var(--color-scda-blue-rgb), 0.8);
                mix-blend-mode: multiply;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
            }
            p {
                color: var(--color-white);
                font-size: 32px;
                line-height: 1.4;
                font-weight: 500;
                text-transform: uppercase;
                letter-spacing: 3.2px;
                position: relative;
                z-index: 2;
                margin: 0 0 .5rem;

                @media screen and (max-width: 1024px) {
                    font-size: 28px;
                    letter-spacing: 2.8px;
                }
                @media screen and (max-width: 576px) {
                    font-weight: 400;
                }
            }
            .arrow-icon {
                position: relative;
                z-index: 2;
                width: 36px;
                height: 36px;
                background: url('../../../assets/svg/circle-arrow-right.svg') no-repeat center center;
                background-size: cover;
                transition: .3s ease-in-out;
            }
            .external-icon {
                position: relative;
                z-index: 2;
                width: 36px;
                height: 36px;
                background-color: var(--color-white);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: .3s ease-in-out;

                svg {
                    width: 20px;
                    height: 20px;
                    color: var(--color-scda-blue);
                }
            }
        }
    }
}