Hero: Fullpage Scroller

$hero-secondary__heading--font-style             : normal !default;
$hero-secondary__heading--font-family            : $font-family-heading !default;
$hero-secondary__heading--font-weight            : $font-weight-bold !default;
$hero-secondary__heading--font-size              : $font-size-heading-larger !default;
$hero-secondary__heading--font-size\@large       : $font-size-heading-largest !default;
$hero-secondary__heading--line-height            : normal !default;
$hero-secondary__heading--line-height\@large     : 110% !default;
$hero-secondary__heading--color                  : $white !default;
//$hero-secondary__heading--text-shadow            : 2px 2px 7px $bg-color-dark !default;
$hero-secondary__heading--text-shadow            : none !default;
$hero-secondary__heading--max-width              : 768px !default;
$hero-secondary__heading--second--max-width      : 1024px !default;

$hero-tertiary__heading--second--font-family     : $font-family-base !default;
$hero-tertiary__heading--second--font-size       : $font-size-heading !default;

$hero-tertiary__heading--title-font-size         : 30px !default;
$hero-tertiary__heading--title-line-height       : 110% !default;
$hero-tertiary__heading--title-font-weight       : $font-weight-normal !default;
$hero-tertiary__heading--title-color             : $theme-second !default;

$hero-tertiary__heading--description-font-size   : 15px !default;
$hero-tertiary__heading--description-line-height : 165% !default;
$hero-tertiary__heading--description-color       : $white !default;
$hero-tertiary__heading--description-font-weight : $font-weight-normal !default;

$hero-advanced__column-gap                       : 1% !default;
$hero-advanced__grid-template-columns            : 69% 30% !default;

.hero {
    width: 100%;
    display: grid;
    z-index: 1;
    height: 100vh;

    &__page {
        width: 100%;
        display: grid;
        z-index: 1;
        height: 70vh;
        &--image {
            grid-area: 1/-1; //sass-lint:disable-line space-around-operator
            z-index: 2;
            &--picture {
                display: block;
                height: 70vh;
            }
            &__asset {
                border-radius: 0;
                bottom: 0;
                display: block;
                float: none;
                inset-inline-start: 0;
                margin-inline-end: 0;
                margin-inline-start: 0;
                margin-top: 0;
                max-width: none;
                min-width: 0;
                object-fit: cover;
                object-position: center center;
                opacity: 1;
                position: static;
                top: 0;
                transform: none;
                visibility: visible;
                width: 100%;
                height: 70vh;
            }
        }
        &--objectfit-position {
            &--center {
                object-position: 100% 50%;
            }
        }
        &--content {
            align-items: flex-start;
            display: flex;
            flex-flow: column nowrap;
            grid-area: 1/-1;
            //margin: 0 auto;
            text-align: center;
            z-index: 3;
            justify-content: center;
            width: 100%;

            &-end {
                position: absolute;
                width: 100%;
                bottom: 0;
            }
        }
        &--usps {
            height: auto;
            background: transparent;

            ul {
                height: 100%;
                @include mq($screen-m) {
                    height: auto;
                }
            }
        }
    }

    &--primary {
        display: flex;
        flex-direction: column;
        padding: 0;

        @include mq($screen-m) {
            position: relative;
        }
        &__wrapper {
            position: absolute;
            margin-top: $spacer--extra-large;
            padding: $spacer--large;
            bottom: $spacer--medium;
            background: rgba(255, 255, 255, 0.65);
            border-radius: 0 15px 15px 0;
        }
        &__right {
            display: flex;
            flex-direction: row;
            @include mq($screen-m) {
                display: grid;
                row-gap: 1.4%; // sass-lint:disable-line no-misspelled-properties
            }
        }
        &__item {
            display: flex;
            padding: $spacer 0 0;
            @include mq($screen-m) {
                padding: 0;
            }
            a {
                width: 100%;
            }
        }
    }
    &__wrapper {
        display: flex;
        overflow: hidden;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        background: linear-gradient(90deg, #444 1.5%, rgba(31, 27, 26, 0) 110%);
        grid-area: overflow;
        position: relative;
        @include mq($screen-m) {
            flex-direction: row;
        }

        .desktop.bottom {
            padding-right: 0;
            padding-bottom: 0;
            @include mq($screen-xxl) {
                padding-bottom: $spacer--medium;
            }

            ul {
                width: 100%;
                @include mq($screen-xxl) {
                    width: 75%;
                }
                @include mq($screen-xxxl) {
                    width: 50%;
                }
            }
        }
    }

    &__text {
        position: relative;
        width: 100%;
        padding: 0 20px;
        @include mq($screen-l) {
            padding: 0;
        }
        .position-absolute {
            left: 40px;
        }
        &--heading--first {
            display: flex;
            flex-direction: column;
            font-style: $hero-secondary__heading--font-style;
            font-family: $hero-secondary__heading--font-family;
            font-weight: $hero-secondary__heading--font-weight;
            color: $hero-secondary__heading--color;
            text-shadow: $hero-secondary__heading--text-shadow;
            max-width: $hero-secondary__heading--max-width;
            line-height: normal;
            @include mq($screen-l) {
                font-size: $hero-secondary__heading--font-size\@large;
                line-height: $hero-secondary__heading--line-height\@large;
            }
        }

        &--color {
            font-style: $hero-secondary__heading--font-style;
            font-weight: $hero-secondary__heading--font-weight;
            font-size: $hero-secondary__heading--font-size;
            line-height: $hero-secondary__heading--line-height;
            color: $theme-second;
            //-webkit-text-fill-color: transparent; // sass-lint:disable-line no-vendor-prefixes
            //-webkit-text-stroke-width: 2px; // sass-lint:disable-line no-vendor-prefixes
            //-webkit-text-stroke-color: $theme-second; // sass-lint:disable-line no-vendor-prefixes
        }

        &--heading--second {
            font-family: $hero-tertiary__heading--second--font-family;
            font-size: $hero-tertiary__heading--second--font-size;
            color: $hero-tertiary__heading--description-color;
            margin-bottom: 1em;
            letter-spacing: 0.5px;
            max-width: $hero-secondary__heading--second--max-width;
        }

        &--heading--title {
            font-weight: $hero-tertiary__heading--title-font-weight;
            font-size: $hero-tertiary__heading--title-font-size;
            line-height: $hero-tertiary__heading--description-line-height;
            color: $hero-tertiary__heading--description-color;
        }

        &--heading--description {
            font-weight: $hero-tertiary__heading--description-font-weight;
            font-size: $hero-tertiary__heading--description-font-size;
            line-height: $hero-tertiary__heading--description-line-height;
            color: $hero-tertiary__heading--description-color;
        }
    }

    &__image {
        grid-area: 1/-1;
        display: block;
        &--picture {
            display: block;
            height: 70vh;
        }
    }
    &__objectfit-position--center {
        object-position: 100% 50%;
    }
    &__background {
        grid-area: overflow;
        height: inherit;

        & .image {
            object-fit: cover;
            object-position: top;
            height: 100%;
        }
    }

    &--secondary {
        display: grid;
        grid-template-areas: "overflow";
        height: auto;

        @include mq($screen-l) {
            height: auto;
        }

        & .hero__wrapper {
            grid-area: overflow;
            position: relative;
            height: 100vh;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
    }

    &--category {
        background-color: $black;
        margin-bottom: $spacer--semi-medium;

        @include mq($screen-l) {
            height: 320px;
        }
    }
    // ==============
    // HERO SLIDER
    // ==============
    &-slider {
        position: relative;
        overflow: hidden;
        transition: $transition-base;

        &__inner {
            display: grid;
            grid-auto-columns: 100%;
            grid-auto-flow: column;
            overflow: scroll;
            overflow-y: hidden;
            scroll-snap-type: x mandatory;
            padding: 0;

            @include mq($screen-l) {
                overflow: hidden;
            }
        }

        &--responsive {
            & .slider__inner {
                @include mq($screen-l) {
                    grid-auto-flow: row;
                }
            }
        }


        &__button {
            display: none;
            position: absolute;
            z-index: 9;
            top: 45%;
            padding: $spacer;
            cursor: pointer;
            user-select: none;
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid $theme-primary;
            border-radius: 10px;

            @include mq($screen-l) {
                display: block;
            }

            &--left {
                left: 0;
            }

            &--right {
                right: 0;
            }

            &--icon {
                fill: $theme-primary;
                width: $spacer--25;
                height: $spacer--25;

            }
        }
    }
}