@use "../../../../../../dev/assets/sass/_settings/mixinscontrast" as *;

body {
    padding: 0;
    margin: 0;
}

.m-wrapper {
    padding: 0 16px;

    @include mq(desktop-l) {
        padding: 0;
    }
}

//stage
.mod-stage {
    width: 100%;
    margin-left: 0;
    margin-bottom: 50px;

    @include mq(desktop) {
        width: unset;
        margin-left: unset;
        margin-bottom: 80px;
    }

    > .m-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        padding: 0;

        &.is-contrast {
            @include contrast-theme(transparent, $color-black, false);
        }

        > figure {
            height: 100%;
            width: 100%;

            > picture {
                > img {
                    height: 546px;
                    @include mq(desktop) {
                        height: 800px;
                    }
                    object-fit: cover;
                    width: 100%;
                }
            }
        }

        > .m-textbox {
            left: 30px;
            bottom: 40px;
            position: absolute;

            @include mq(desktop) {
                left: 230px;
                bottom: 80px;
            }

            > h1 {
                > p {
                    font-size: 40px;
                    color: $color-white;
                    margin-bottom: 38px;

                    @include mq(desktop) {
                        font-size: 80px;
                    }
                }
            }

            .m-buttons {
                display: flex;
                flex-direction: column;
                align-items: start;
                gap: 20px;

                @include mq(tablet) {
                    flex-direction: row;
                    align-items: center;
                }

                > .m-button {
                    &.m-default-button {
                        &.is-button-contrast {
                            color: $color-white !important;
                        }
                    }

                    &.m-outline-button {
                        background: transparent;
                        color: $color-accent;
                        border: 2px solid $color-accent;

                        &:hover {
                            background: $color-accent;
                            color: $color-white;
                        }
                    }
                }
            }
        }
    }
}

//text
.mod-text {
    margin-bottom: 80px;

    > .m-wrapper {
        max-width: 900px;
        margin: 0 auto;
        text-align: center;

        &.is-contrast {
            @include contrast-theme(transparent, $color-black, false);
        }

        > .m-text {
            padding: 30px 0;
        }
    }
}

//counter
.mod-counter {
    margin-top: 30px;
    margin-bottom: 80px;

    > .m-wrapper {
        display: flex;
        gap: 30px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: 100%;
        margin: 0 auto;

        @include mq(desktop) {
            gap: 50px;
            flex-direction: row;
            flex-wrap: wrap;
            max-width: 1440px;
        }

        &.is-contrast {
            @include contrast-theme(transparent, $color-black, true);

            .m-counter-item {
                .m-inner {
                    border: 1px solid;
                }
            }
        }

        > .m-counter-item {
            > .m-inner {
                display: flex;
                flex-direction: column;
                justify-content: center;
                text-align: center;
                width: 158px;
                height: 158px;
                border-radius: 14px;

                @include mq(desktop) {
                    width: 230px;
                    height: 230px;
                    border-radius: 20px;
                }

                > .m-text {
                    padding: 0 10px;

                    > h2 {
                        font-size: 25px;
                        font-weight: 600;
                        color: $color-accent;
                        text-transform: uppercase;
                    }
                }

                > .m-number {
                    > .m-counter-content {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 28px;
                        font-weight: 600;
                        color: $color-primary;
                        column-gap: 5px;
                        padding-bottom: 10px;

                        > span {
                            text-align: center;
                        }

                        > h2 {
                            text-align: center;
                            font-size: 58px;
                            font-weight: 700;
                            color: $color-primary;
                        }
                    }
                }
            }
        }
    }
}

//grid
.mod-grid {
    margin-bottom: 30px;

    @include mq(desktop) {
        margin-bottom: 70px;
    }

    > .m-wrapper {
        align-items: baseline;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 50px;
        max-width: 100%;
        margin: 0 auto;

        @include mq(desktop) {
            flex-direction: row;
            gap: 50px 20px;
            max-width: 1440px;
        }

        &.is-contrast {
            @include contrast-theme(transparent, $color-black, false);
        }

        > .m-text-bild-item {
            width: 100%;
            max-width: 100%;

            @include mq(desktop) {
                max-width: 30%;
            }

            > .m-image {
                max-height: 100%;
                height: 100%;

                @include mq(desktop) {
                    max-height: 400px;
                }

                > a {
                    max-height: 100%;
                    height: 100%;

                    @include mq(desktop) {
                        max-height: 400px;
                    }

                    > img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            > .m-description {
                margin-top: 20px;

                > .m-title {
                    > h3 {
                        color: $color-primary;
                        font-size: 20px;
                        text-transform: uppercase;
                        font-weight: 700;
                    }
                }

                > .m-text {
                    margin-top: 10px;

                    > p {
                        color: $color-accent;
                    }
                }
            }
        }
    }
}


//text has bg
.mod-text-has-background {
    background: $color-primary;
    margin-bottom: 80px;

    > .m-wrapper {
        padding: 40px;

        &.is-contrast {
            @include contrast-theme($color-black, $color-white, false);
        }

        .m-container-text {
            max-width: 900px;
            margin: 0 auto;
            text-align: center;


            > .m-headline {
                > h2 {
                    color: $color-white;
                }
            }

            > .m-text {
                padding: 30px 0;

                > p {
                    color: $color-white;
                }
            }
        }
    }
}

//Text Media
.mod-text-image {
    margin-top: 0;
    margin-bottom: 80px;

    > .m-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 30px;
        flex-direction: column;

        &.is-contrast {
            @include contrast-theme(transparent, $color-black, false);
        }

        @include mq(desktop) {
            gap: 50px;
            flex-direction: row;
        }

        @include if-parent('.mod-text-image---right') {
            flex-direction: row-reverse;
        }

        > .m-text-content {
            > h2 {
                color: $color-primary;
                text-transform: uppercase;
                margin-bottom: 20px;
            }

            > p {
                margin-bottom: 20px;
            }

            > .m-button {
                &.m-default-button {
                    &.is-button-contrast {
                        color: $color-white !important;
                    }
                }
            }
        }

        > .m-image-content {
            .m-image {
                height: 100%;
                width: 100%;
                max-width: 600px;
            }
        }
    }
}