section.ms-icon-grid
{
    padding: var(--section-padding);
}

.ms-icon-grid :where(.accent, .highlight) {
    color: var(--ncs-primary);
}

.ms-icon-grid {
    &>.container {
        display: flex;
        flex-direction: column;

        & > .cta
        {
            margin-top: 2.5rem;
        }

        &>.ms-icon-grid-title {
            font-size: var(--font-xxl);
            line-height: var(--font-xxl);
            margin: 0;
            margin-bottom: var(--font-md);
        }

        &>.ms-icon-grid-description {
            font-size: var(--font-md);
            margin: 0;
            margin-bottom: var(--font-lg);
        }

        &>.ms-icon-grid-items {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--font-lg);
            width: 100%;

            .ms-icon-grid-item-text .ms-icon-grid-item-description {
                color: var(--text-faded);
            }

            &[data-cols="2"] {
                grid-template-columns: repeat(2, 1fr);
            }

            &[data-cols="4"] {
                grid-template-columns: repeat(4, 1fr);
            }

            &>.ms-icon-grid-item {
                &:not(.scroll-intersecting)
                {
                    opacity: 0;
                    transform: translateY(20px);
                }
                &.scroll-intersecting
                {
                    opacity: 1;
                    transform: translateY(0);
                    transition-property: opacity, transform;
                    transition-duration: 0.4s;
                    transition-timing-function: ease-out;
                }
                &.ig-block-item
                {
                    & > .ms-icon-grid-item-inner
                    {

                        display: flex;
                        flex-direction: row;
                    
                        & > .ms-icon-grid-item-icon
                        {
                            display: block;
                            margin-top: var(--font-xs);

                            .ig-no-color &
                            {
                                background-color: var(--text);
                            }
                        }

                        & > .ms-icon-grid-item-text
                        {
                            display: flex;
                            flex-direction: column;
                            gap: var(--font-xs);

                            & > .ms-icon-grid-item-title
                            {
                                line-height: var(--font-xl);
                                & > .ms-icon-grid-item-title-text
                                {
                                    line-height: inherit;
                                    font-size: inherit;
                                    display: block;
                                }
                            }

                            .ig-large-title &
                            {
                                & > .ms-icon-grid-item-title
                                {
                                    font-size: var(--font-xl);
                                    line-height: calc(var(--font-xl) * 1.2);
                                }

                                & > .ms-icon-grid-item-subtitle
                                {
                                    font-size: var(--font-ml);
                                    line-height: calc(var(--font-ml) * 1.2);
                                }
                            }

                            .ig-mega-title &
                            {
                                & > .ms-icon-grid-item-title
                                {
                                    font-size: var(--font-xxl);
                                    line-height: calc(var(--font-xxl) * 1.2);
                                }

                                & > .ms-icon-grid-item-subtitle
                                {
                                    font-size: calc(var(--font-lg) * 0.9);
                                    line-height: calc(var(--font-lg) * 1);
                                }
                            }

                            & > .ms-icon-grid-item-subtitle
                            {
                                margin: 0;
                                margin-top: calc(var(--font-xs) * -1);
                            }
                        }
                    }
                }
                &>.ms-icon-grid-item-inner {
                    --msi-primary: var(--ncs-cc-primary);
                    --msi-primary-contrast: var(--ncs-cc-primary-contrast);
                    --msi-container-weak: var(--ncs-cc-container-weak);
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    padding: 28px;
                    gap: 0;
                    border-radius: var(--border-radius-small);
                    text-align: start;
                    background-color: var(--ncs-container-weak);
                    transition: transform 0.2s ease;

                    .ms-icon-grid-item-top {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        gap: 8px;
                        margin-bottom: 16px;

                        .ms-icon-grid-item-top-left {
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            min-width: 0;
                        }

                        .ms-icon-grid-item-title {
                            margin-bottom: 0;
                        }

                        .ms-icon-grid-item-icon {
                            display: block;
                            width: 48px;
                            height: 48px;
                            border-radius: 12px;
                            background: var(--background);
                            position: relative;
                            mask-image: none;
                            transform: scale(0.5);
                            opacity: 0;
                            flex-shrink: 0;

                            &::after {
                                content: '';
                                position: absolute;
                                inset: 0;
                                margin: auto;
                                width: 22px;
                                height: 22px;
                                background: var(--msi-primary);
                                mask-image: var(--icon-url);
                                mask-size: contain;
                                mask-repeat: no-repeat;
                                mask-position: center;
                            }

                            &.scroll-intersecting {
                                transition: 0.4s cubic-bezier(.87,-.41,.19,1.44);
                                transform: scale(1);
                                opacity: 1;
                            }
                        }
                    }

                    .ms-icon-grid-item-icon {
                        display: inline-block;
                        width: var(--font-xl);
                        height: var(--font-xl);
                        aspect-ratio: 1;
                        vertical-align: bottom;
                        background: var(--msi-primary);
                        mask-image: var(--icon-url);
                        mask-size: contain;
                        mask-repeat: no-repeat;
                        mask-position: center;
                        margin-right: calc(var(--font-xs) * 0.3);
                        transform: scale(0.5);
                        opacity: 0;

                        &.scroll-intersecting {
                            transition: 0.4s cubic-bezier(.87,-.41,.19,1.44);
                            transform: scale(1);
                            opacity: 1;
                        }
                    }

                    .ms-icon-grid-item-tags {
                        display: flex;
                        gap: 4px;
                        flex-direction: column;
                    }

                    .ms-icon-grid-item-tag {
                        padding: 3px 8px;
                        border-radius: 9999px;
                        font-size: var(--font-xs);
                        font-weight: var(--font-weight-bold);
                        text-transform: uppercase;
                        letter-spacing: 0.3px;
                        justify-content: center;
                        text-decoration: none;

                        &.ig-tag-upload {
                            background: var(--background);
                            color: var(--ncs-base-primary-contrast);
                        }

                        &.ig-tag-live {
                            background: var(--background);
                            color: #DC0F0F;
                            display: inline-flex;
                            align-items: center;
                            flex-direction: row;

                            &::before {
                                content: "";
                                display: inline-block;
                                width: 6px;
                                height: 6px;
                                border-radius: 50%;
                                background-color: currentColor;
                                margin-inline-end: 5px;
                                vertical-align: center;
                            }
                        }
                    }

                    & .ms-icon-grid-item-title {
                        color: var(--ncs-cc-text);
                        font-size: var(--font-md);
                        font-weight: var(--font-weight-bold);
                        line-height: 1.3;
                        margin-bottom: 8px;

                        &:not(.scroll-intersecting) {
                            opacity: 0;
                        }

                        &.scroll-intersecting {
                            opacity: 1;
                            transform: translateY(0);
                            transition: 0.4s ease-out;
                        }

                        &>.ms-icon-grid-item-title-text {
                            line-height: inherit;
                            opacity: 0;

                            &.scroll-intersecting {
                                opacity: 1;
                                transform: translateY(0px);
                                transition: 0.4s ease-out;
                            }
                        }
                    }

                    &>.ms-icon-grid-item-description {
                        font-size: var(--font-sm);
                        color: var(--text-faded);
                        line-height: 1.6;
                        margin-bottom: 14px;
                        opacity: 0;
                        transform: translateY(5px);

                        &.scroll-intersecting {
                            opacity: 1;
                            transform: translateY(0);
                            transition: 0.4s ease-out;
                        }
                    }

                    .ms-icon-grid-item-stat {
                        font-size: var(--font-xs);
                        color: var(--msi-primary-contrast);
                        font-weight: var(--font-weight-bold);
                        display: flex;
                        align-items: center;
                        gap: 6px;
                        margin-top: auto;

                        svg {
                            flex-shrink: 0;
                        }
                    }
                }
                &:hover > .ms-icon-grid-item-inner {
                    transform: translateY(-10px);
                }
            }
        }
    }

    &[data-use-cta="false"] > .container > .cta,
    &[data-use-cta="false"] > .container > .section-header > .cta {
        display: none;
    }

    &.ig-has-container-bg {
        & > .container
        {
            text-align: start;
            align-items: start;
            background: var(--ncs-container-weak);
            border-radius: var(--border-radius-small);
            padding: var(--font-xxl);

            & > .ms-icon-grid-items
            {
                width: 100%;
                & > .ms-icon-grid-item
                {
                    background: none;
                    padding: 0;

                    & > .ms-icon-grid-item-inner
                    {
                        padding: 0;
                        box-shadow: none;
                        border: none;
                        border-radius: 0;
                        background: none;
                    }
                }
            }
        }
        
    }

    &.ig-no-hover-effect > .container > .ms-icon-grid-items > .ms-icon-grid-item:hover > .ms-icon-grid-item-inner
    {
        transform: translateY(0);
    }

    &.ig-horizontal > .container {
        flex-direction: row;
        align-items: center;
        gap: clamp(25px, 4vw, 50px);

        & > .section-header {
            flex: 1 1 0;
            max-width: 540px;
            margin-bottom: 0;
            text-align: start;
            align-items: flex-start;

            & > .cta {
                margin-top: 1.5rem;
                align-self: flex-start;
            }
        }

        & > .ms-icon-grid-items {
            flex: 1 1 0;
            grid-template-columns: repeat(2, 1fr);
        }
    }

    &.ig-bento > .container > .ms-icon-grid-items {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--font-lg);

        & > .ms-icon-grid-item:first-child {
            grid-column: 1 / -1;
        }
    }

    &.ig-horizontal.ig-bento > .container > .ms-icon-grid-items {
        grid-template-columns: 1fr 1fr;
    }
    
    &.ig-narwhal > .container > .ms-icon-grid-items > .ms-icon-grid-item > .ms-icon-grid-item-inner,
    &.ig-narwhal-sanguine > .container > .ms-icon-grid-items > .ms-icon-grid-item > .ms-icon-grid-item-inner {
        background-color: var(--ncs-transcription-container-strong-dark)
    }

    &.ig-narwhal-sanguine > .container > .ms-icon-grid-items > .ms-icon-grid-item > .ms-icon-grid-item-inner .ms-icon-grid-item-top .ms-icon-grid-item-icon {
        background: #000000;
    }

    &.ig-colored-backgrounds > .container > .ms-icon-grid-items > .ms-icon-grid-item > .ms-icon-grid-item-inner {
        background-color: color-mix(in srgb, var(--msi-primary) 10%, transparent);

        .ms-icon-grid-item-description {
            color: var(--ncs-cc-text-faded);
        }
    }

    &.ig-title-below-top > .container > .ms-icon-grid-items > .ms-icon-grid-item > .ms-icon-grid-item-inner {
        .ms-icon-grid-item-tags {
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
        }
    }
}

@media (max-width: 991px) {
    .ms-icon-grid > .container > .ms-icon-grid-items {
        grid-template-columns: 1fr 1fr !important;
        width: 100%;
    }

    .ms-icon-grid.ig-horizontal > .container {
        flex-direction: column;
    }

    .ms-icon-grid.ig-horizontal.ig-narwhal-sanguine > .container > .section-header {
        text-align: center;
        align-items: center;
    }

    .ms-icon-grid.ig-horizontal.ig-narwhal-sanguine > .container > .section-header > .cta {
        align-self: center;
    }
}

@media (max-width: 767px) {
    .ms-icon-grid > .container > .ms-icon-grid-items {
        grid-template-columns: 1fr !important;
        width: 100%;
    }
}