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

.hero {
    margin-top: 95px;

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

        padding-top: calc(var(--section-padding-y) * 2);
        padding-bottom: var(--section-padding-y);
        position: relative;

        @include desktop {
            padding-top: calc(var(--section-padding-y) * 0.50);
            flex-wrap: wrap;
            justify-content: space-between;
        }

        @include tablet {
            padding-top: 0;
            padding-bottom: 0;
        }

        @include mobile {
            flex-direction: column;
            row-gap: 2em;
            padding-top: calc(var(--section-padding-y) * 0.50);
            padding-inline: 0;
        }
    }

    &__content {
        align-self: flex-start;

        @include desktop {
            flex-basis: 50%;
            align-self: center;
        }

        @include tablet {
            flex-basis: 57%;
            align-self: flex-end;
            margin-bottom: 2em;
        }

        @include mobile {
            flex-basis: auto;
            align-self: flex-start;
            translate: 15px 0;
            padding-inline: calc(var(--container-padding-x) * 2);
            margin-bottom: 1em;
        }

        @include mobile-s {
            padding-inline: calc(var(--container-padding-x));
            translate: 0px 0;
        }

        &-label {
            background-color: var(--color-stable-dark);
            margin-bottom: 16px;
            padding: 10px 20px;
            width: fit-content;
            border-radius: var(--border-radius-5);
            color: var(--color-stable-light);
            font-size: var(--font-size-alt);
            line-height: 13px;

            @include mobile-s {
                font-size: 16px;
                padding: 10px 10px;
            }
        }

        &-header {
            margin-bottom: 0.25em;
            line-height: 1em;
        }

        &-description {
            line-height: 25px;
            margin-bottom: 40px;
            color: var(--color-dark-80);
            transition: color var(--transition-duration-03);
        }

    }

    &__image {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        max-width: 400px;
        height: 400px;
        user-select: none;

        @include desktop {
            height: 600px;
            max-width: 100%;
            flex-grow: 1;
            overflow-y: clip;
        }

        @include tablet {
            flex-basis: 40%;
            height: 450px;
        }

        @include mobile {
            order: 1;
            flex-basis: auto;
        }

        & img {
            translate: 0 -130px;
            filter: drop-shadow(0 20px 38px #00000033);

            @include desktop {
                max-width: 400px;
                translate: 0 40px;
            }

            @include tablet {
                max-width: 300px;
            }
        }
    }


    &__stats {
        display: flex;
        flex-direction: column;
        row-gap: 3em;

        @include desktop-wide {
            row-gap: 2em;
        }

        @include desktop {
            background-color: var(--color-light-accent);
            padding: 40px 40px 50px;
            flex-grow: 1;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            border-radius: var(--border-radius-15);
            z-index: 10;
        }

        @include tablet {
            padding: 40px 40px 50px;
            grid-template-columns: repeat(2, 1fr);
        }

        @include mobile {
            padding: 20px 20px 40px;
            width: 100%;
        }

        @include mobile-s {
            grid-template-columns: repeat(1, 1fr);
            row-gap: 1.5em;
        }

        &-item {
            @include desktop {
                justify-self: center;
            }

            @include tablet {
                justify-self: flex-start;
                translate: 60px 0;
            }

            @include mobile {
                translate: 35px 0;
            }

            @include mobile-s {
                translate: 0;
            }
        }

        &-header {
            @include fluid-text(80, 48);
            @include flex-center(center, true);

            margin-bottom: 0.25em;
            width: fit-content;
            position: relative;
            max-height: 56px;
            font-weight: 700;
            line-height: 100%;
            z-index: 100;

            @include desktop {
                margin-bottom: 5px;

            }

            &::after {
                content: "";
                position: absolute;
                top: 47px;
                left: 9px;
                width: 95%;
                height: calc(var(--button-height) + 3px);
                background-color: var(--color-stats-after);
                border-radius: var(--border-radius-15);
                z-index: -10;


                @include desktop {
                    top: 30px;
                    left: 5px;
                    height: calc(var(--button-height) + 5px);
                    width: 150px;
                }

                @include mobile-s {
                    top: 25px;
                    left: 5px;
                    height: calc(var(--button-height) + 8px);
                    width: 150%;
                }

                @include mobile {
                    height: calc(var(--button-height) + 3px);
                }
            }

        }

        &-text {
            color: var(--color-dark-80);
            position: relative;
            z-index: 100;
        }

    }
}