Hero: Advanced

$hero-secondary__heading--font-style             : italic !default;
$hero-secondary__heading--font-family            : $font-family-base !default;
$hero-secondary__heading--font-weight            : $font-weight-bold !default;
$hero-secondary__heading--font-size              : 55px !default;
$hero-secondary__heading--line-height            : 110% !default;
$hero-secondary__heading--color                  : $white !default;
$hero-secondary__heading--text-shadow            : 2px 2px 7px $bg-color-dark !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             : $dkk-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 {
    &--advanced {
        display: flex;
        flex-direction: column;
        padding: 0;

        @include mq($screen-m) {
            position: relative;
            margin-top: $spacer--semi-medium;
        }
        &__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;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        background: linear-gradient(90deg, #444 1.5%, rgba(31, 27, 26, 0) 110%);

        @include mq($screen-m) {
            flex-direction: row;
        }
    }

    &__text {
        width: 100%;

        &--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;
            font-size: $hero-secondary__heading--font-size;
            line-height: $hero-secondary__heading--line-height;
            color: $hero-secondary__heading--color;
            text-shadow: $hero-secondary__heading--text-shadow;
        }

        &--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: $dkk-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: $dkk-second; // sass-lint:disable-line no-vendor-prefixes
        }

        &--heading--second {
            font-family: $font-family-sans-serif;
            font-size: $font-size-medium;
            color: $hero-tertiary__heading--description-color;
            margin-bottom: 1em;
            letter-spacing: 0.5px;
            width: 60%;
        }

        &--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 {
        display: none;

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

    &__background {
        grid-area: overflow;
        height: inherit;

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

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

        @include mq($screen-m) {
            height: 515px;
        }

        & .hero__wrapper {
            grid-area: overflow;
            position: relative;
        }
    }

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

        @include mq($screen-m) {
            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-m) {
                overflow: hidden;
            }
        }

        &--responsive {
            & .slider__inner {
                @include mq($screen-m) {
                    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 $dkk-primary;
            border-radius: 10px;

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

            &--left {
                left: 0;
            }

            &--right {
                right: 0;
            }

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

            }
        }
    }
}