/* Why Maestra Section */
@keyframes shine {
    0% {
        left: -100%;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50%, 100% {
        left: 100%;
        opacity: 0;
    }
}

@keyframes arrowBounce {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5px);
    }
}

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.why-maestra {
    padding: var(--section-padding);
    background-color: transparent !important;
    color: var(--text-white);
    transition: all 0.3s;

    .cta-button {
        width: fit-content;
        background: var(--maestra-yellow);
        text-decoration: none;
        color: black;
        font-family: "Plus Jakarta Sans", sans-serif;
        font-weight: var(--font-weight-bold);
        font-size: var(--font-md);
        border: none;
        padding: 0.5rem 1.5rem;
        height: 2.5em;
        cursor: pointer;
        border-radius: var(--button-border-radius);
        display: flex;
        align-items: center;
        position: relative;

        &::before {
            display: block;
            content: "→";
            margin-right: 0.5em;
            font-family: monospace;
            font-size: var(--font-xl);
            font-weight: var(--font-weight-regular);
        }
    }

    .grand-title {
        text-align: center;
        margin-bottom: 2rem;
        font-size: var(--font-xl);
        font-weight: var(--font-weight-bold);
        color: var(--text);
    }

    /* Compact Design */
    &.compact-design {
        padding: 3rem 0;

        .compact-container {
            background-color: var(--ncs-container-weak);
            border-radius: var(--border-radius);
            padding: 2.5rem;

            h2 {
                margin-bottom: 3rem;
                text-align: start;
                font-size: var(--font-xl);
            }
        }

        .why-maestra-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem 3rem;
        }

        .why-maestra-item {
            transform: none;
            opacity: 1;
            border-radius: 0;
            overflow: visible;
        }

        .why-maestra-item-inner {
            display: grid;
            grid-template-columns: 1.75rem 1fr;
            grid-template-rows: auto auto;
            gap: 0 1.25rem;
            align-items: start;
            background-color: transparent;
            border: none;
            box-shadow: none;
            border-radius: 0;
            overflow: visible;

            &:hover {
                transform: none;
                box-shadow: none;
            }
        }

        .why-maestra-item-title {
            display: contents;
        }

        .why-maestra-item-icon {
            grid-column: 1;
            grid-row: 1;
            width: 1.75rem;
            height: 1.75rem;
            min-width: 1.75rem;
            transform: translateY(-3px);
            overflow: visible;

            &::before {
                display: none !important;
            }

            & > img {
                display: block !important;
                width: 100%;
                height: 100%;
                object-fit: contain;
                filter: brightness(0) saturate(100%);

                .dark-mode & {
                    filter: brightness(0) saturate(100%) invert(1);
                }
            }

            &.svg-icon {
                width: 1.75rem;
                height: 1.75rem;

                svg {
                    width: 1.75rem;
                    height: 1.75rem;
                    color: var(--text);
                }
            }
        }

        .why-title {
            grid-column: 2;
            grid-row: 1;
            font-weight: var(--font-weight-bold);
            font-size: var(--font-ml);
            color: var(--text);
            margin: 0;
            text-align: start;
        }

        .why-maestra-item-description {
            grid-column: 2;
            grid-row: 2;
            background-color: transparent;
            padding: 0;
            padding-top: 0.5rem;
            color: var(--text-faded);
            font-size: var(--font-md);
            line-height: 1.6;
            text-align: start;
            display: block;

            div {
                color: var(--text-faded);
                text-align: start;
            }
        }

        .why-maestra-title {
            img,
            .icon-svg {
                display: none;
            }
        }

        @media (max-width: 767px) {
            .compact-container {
                padding: 1.5rem;

                h2 {
                    text-align: center;
                }
            }

            .why-maestra-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
        }
    }
}

.text-image + .why-maestra {
    padding-top: 0;
}

.why-maestra-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 10px;

    &.grid-4 {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    &.grid-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .item1 {
        grid-row: span 1;
    }

    .content {
        padding: 25px;
        text-align: start;
        color: var(--text);
        border-radius: var(--border-radius);
        border: none !important;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        height: 100%;
        position: relative;
        background: var(--ncs-container-weak) !important;
        overflow: hidden;

        .cta-button {
            margin-top: auto;
        }

        p {
            flex: 1;
            margin-bottom: 1rem;
            font-size: var(--font-md);
            font-weight: var(--font-weight-regular);
            line-height: 1.6;
        }

        div h3,
        div p {
            color: var(--text) !important;
        }

        /* Color cycling for icons */
        &:nth-child(4n+1) .icon-svg svg {
            color: var(--maestra-blue);
        }
        &:nth-child(4n+2) .icon-svg svg {
            color: var(--maestra-green);
        }
        &:nth-child(4n+3) .icon-svg svg {
            color: var(--maestra-yellow);
        }
        &:nth-child(4n+4) .icon-svg svg {
            color: var(--maestra-purple);
        }

        /* Color cycling for CTA buttons */
        &:nth-child(4n+1) .cta-button {
            background: var(--maestra-blue);
            color: white;
            &:hover {
                background-color: var(--maestra-blue);
                box-shadow: 0 0 0 8px color-mix(in srgb, var(--maestra-blue) 25%, transparent);
            }
        }
        &:nth-child(4n+2) .cta-button {
            background: var(--maestra-green);
            color: white;
            &:hover {
                background-color: var(--maestra-green);
                box-shadow: 0 0 0 8px color-mix(in srgb, var(--maestra-green) 25%, transparent);
            }
        }
        &:nth-child(4n+3) .cta-button {
            background: var(--maestra-yellow);
            color: white;
            &:hover {
                background-color: var(--maestra-yellow);
                box-shadow: 0 0 0 8px color-mix(in srgb, var(--maestra-yellow) 25%, transparent);
            }
        }
        &:nth-child(4n+4) .cta-button {
            background: var(--maestra-purple);
            color: white;
            &:hover {
                background-color: var(--maestra-purple);
                box-shadow: 0 0 0 8px color-mix(in srgb, var(--maestra-purple) 25%, transparent);
            }
        }
    }

    div p {
        color: var(--text);
        z-index: 3 !important;
        position: relative;
    }
}

.why-maestra-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    position: relative;
    width: 100%;

    .icon-svg,
    img {
        position: absolute;
        right: -20px;
        top: -20px;
        height: 100px;
        width: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.15;
        transform: perspective(200px) rotateX(10deg) rotateY(-20deg) rotateZ(0deg);
        transform-origin: center center;
        z-index: 0;
    }

    img {
        right: -48px;
        top: -48px;
        height: 250%;
        width: auto;
        opacity: 0.06;
        transform: none;
        filter: brightness(0) saturate(100%);

        .dark-mode & {
            filter: brightness(0) saturate(100%) invert(1);
        }
    }

    .icon-svg svg {
        width: 80px;
        height: 80px;
    }

    .img-icon-container {
        position: absolute;
        left: 0px;
        top: 0px;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: flex-end;
    }

    h3 {
        font-size: var(--font-lg);
        margin: 0;
        font-weight: var(--font-weight-bold);
        font-family: 'Plus Jakarta Sans';
        min-height: 66.3px;
    }
}

.why-title {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-ml);
    text-align: start;
    color: var(--text);
    z-index: 3 !important;
    position: relative;
}

/* Responsive */
@media (max-width: 991px) {
    .why-maestra-grid {
        grid-template-columns: 1fr !important;

        .item1 {
            grid-row: auto;
        }
    }
}

@media (max-width: 767px) {
    .text-image .big-card-case-text h2 {
        text-align: center !important;
    }

    .why-maestra-grid {
        grid-template-columns: inherit !important;

        &.grid-4 {
            grid-template-columns: 1fr;
        }
    }

    .why-maestra-columns div {
        width: 100%;
    }
}