@use "../mixins" as *;
@use "../media" as *;

.why-us {
    padding-block: var(--section-padding-y);

    &__title {
        text-align: center;
        margin-bottom: 2.5rem;

        @include mobile {
            text-align: start;
            max-width: 600px;
            margin-inline: auto;
        }
    }

    &__cards {
        display: grid;
        place-content: center;
        grid-template-columns: repeat(4, minmax(390px, 400px));
        gap: 1em;

        @include desktop-wide {
            grid-template-columns: repeat(2, minmax(350px, 450px));
            gap: 3em;
        }

        @include tablet {
            gap: 2em;
        }

        @include mobile {
            grid-template-columns: minmax(340px, 600px);
        }

        @include mobile-s {
            gap: 1em;
        }
    }

    &__card {
        background-color: var(--color-light-accent);
        border-radius: var(--border-radius-30);
        padding: 40px 30px;
        display: flex;
        flex-direction: column;
        row-gap: 0.7em;

        @include mobile {
            min-height: 350px;
        }

        @include mobile-s {
            padding: 30px 20px;
            min-height: 330px;
        }

        &-title {
            @include fluid-text(25, 22, 1024);
        }

        &-subtitle {
            color: var(--color-dark-80);
            transition: var(--transition-duration-03);
        }

        &:first-of-type {
            background-color: var(--color-stable-dark);
            color: var(--color-accent);

            & .why-us__card-subtitle {
                color: var(--color-accent-70);
                order: 2;

                &>span {
                    color: var(--color-accent);
                    font-weight: 600;
                }
            }

        }

        & img {
            user-select: none;
        }

        &-4 {
            background-image: url(../img/service/why-us-4-light.png);
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
        }

        &-image {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            align-self: center;
            height: 140px;
            width: fit-content;

            @include mobile {
                height: 100%;
                align-items: center;
            }

            &-rating {
                @include flex-center(space-between);

                position: absolute;
                width: 144px;
                height: 61px;
                top: -10px;
                right: -90px;
                border-radius: var(--border-radius-15);
                background-color: var(--color-light-accent-2);
                padding-inline: 20px;
                font-size: 30px;
                font-weight: 600;
                color: var(--color-dark-80);

                @include mobile-s {
                    width: 120px;
                    height: 50px;
                    top: -5px;
                    right: -50px;
                    padding-inline: 15px;
                    font-size: 25px;
                }
            }

            &-2 {
                position: relative;

                &-text {
                    position: absolute;
                    text-align: center;
                    top: 50%;
                    transform: translateY(-25%);
                    line-height: 130%;
                    z-index: 10;

                    @include mobile {
                        transform: translateY(-45%);
                        line-height: 200%;
                    }

                    @include mobile-s {
                        line-height: 150%;
                    }
                }

                &-header {
                    color: var(--color-dark-80);
                    font-size: 30px;
                    font-weight: bold;

                    @include mobile {
                        @include fluid-text(42, 36, 600);
                    }
                }

                &-description {
                    color: var(--color-dark-20);
                    font-size: 14px;

                    @include mobile {
                        @include fluid-text(18, 16, 600);
                    }
                }

                &>img {

                    @include mobile {
                        width: 215px;
                    }

                    @include mobile-s {
                        width: 180px;
                    }
                }
            }

            &-icon-wrapper {
                background-color: var(--color-light-accent-3);
                padding: 8px;
                border-radius: var(--border-radius-15);
            }

            &-3 {
                transform: translate(25px, -10px);
                top: 50%;
                line-height: 140%;

                @include mobile {
                    transform: translateY(-45%);
                }



                &-text {
                    position: absolute;
                    text-align: center;
                    top: 54%;
                    line-height: 160%;
                    z-index: 10;

                    @include tablet {
                        top: 51%;
                        line-height: 160%;
                    }

                    @include mobile-s {
                        top: 45%;
                        line-height: 200%;
                    }
                }

                &-header {
                    color: var(--color-dark-80);
                    font-size: 40px;
                    font-weight: bold;

                    @include tablet {
                        @include fluid-text(40, 25, 900);
                    }

                    @include mobile {
                        @include fluid-text(42, 40, 600);
                    }
                }

                &-description {
                    color: var(--color-dark-20);
                    font-size: 14px;

                    @include mobile {
                        @include fluid-text(18, 14, 450);
                    }
                }

                @include mobile {
                    transform: translate(0, 0) scale(1.2);
                }

                @include mobile-s {
                    transform: translate(0, 0) scale(1.1);
                }
            }

            &-2,
            &-3>img {
                @include mobile {
                    transform: translateY(20px);
                }

                @include mobile-s {
                    transform: translateY(10px);
                }
            }
        }
    }
}