﻿.hero-block {
    position: relative;
    overflow: hidden;

    &__image {
        position: absolute;
        width: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        height: 100%;
        background-position: top center;
    }

    &__video {
        position: absolute;
        width: 100%;
        height: 100%;

        > video {
            width: 100%;
            height: auto;
        }
    }

    &__overlay {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    &__callout {
        position: absolute;
        width: 100%;
        display: flex;
        flex-direction: column;
        height: 100%;

        > .hero-block-link {
            position: absolute;
            height: 100%;
            width: 100%;
            cursor: pointer;
        }

        > .callout {
            position: relative;

            &:after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
        }
    }

    &__callout-content {
        position: relative;
        z-index: 1;
    }
}

/* Handle font-size responsiveness for multiple screen width and display options in Content Area*/

$hero-block-h1-font-size-base: 1.5rem;
$hero-block-h2-font-size-base: 1.4rem;
$hero-block-h3-font-size-base: 1.3rem;
$hero-block-h4-font-size-base: 1.2rem;
$hero-block-h5-font-size-base: 1.1rem;
$hero-block-h6-font-size-base: 1.0rem;
$hero-block-p-font-size-base: 0.875rem;

.heroblock {
    h1 {
        font-size: $hero-block-h1-font-size-base;
    }

    h2 {
        font-size: $hero-block-h2-font-size-base;
    }

    h3 {
        font-size: $hero-block-h3-font-size-base;
    }

    h4 {
        font-size: $hero-block-h4-font-size-base;
    }

    h5 {
        font-size: $hero-block-h5-font-size-base;
    }

    h6 {
        font-size: $hero-block-h6-font-size-base;
    }

    p {
        display: none;
    }

    @include media-breakpoint-up(lg) {
        h1 {
            font-size: $hero-block-h1-font-size-base + 1rem;
        }

        h2 {
            font-size: $hero-block-h2-font-size-base + 1rem;
        }

        h3 {
            font-size: $hero-block-h3-font-size-base + 1rem;
        }

        h4 {
            font-size: $hero-block-h4-font-size-base + 1rem;
        }

        h5 {
            font-size: $hero-block-h5-font-size-base + 1rem;
        }

        h6 {
            font-size: $hero-block-h6-font-size-base + 1rem;
        }

        p {
            font-size: $hero-block-p-font-size-base;
            display: block;
        }
    }

    &.displaymode-half {
        @include media-breakpoint-only(lg) {
            h1 {
                font-size: $hero-block-h1-font-size-base;
            }

            h2 {
                font-size: $hero-block-h2-font-size-base;
            }

            h3 {
                font-size: $hero-block-h3-font-size-base;
            }

            h4 {
                font-size: $hero-block-h4-font-size-base;
            }

            h5 {
                font-size: $hero-block-h5-font-size-base;
            }

            h6 {
                font-size: $hero-block-h6-font-size-base;
            }

            p {
                display: none;
            }
        }
    }

    &.displaymode-one-third {
        @include media-breakpoint-up(lg) {
            h1 {
                font-size: $hero-block-h1-font-size-base - 0.2rem;
            }

            h2 {
                font-size: $hero-block-h2-font-size-base - 0.2rem;
            }

            h3 {
                font-size: $hero-block-h3-font-size-base - 0.2rem;
            }

            h4 {
                font-size: $hero-block-h4-font-size-base - 0.2rem;
            }

            h5 {
                font-size: $hero-block-h5-font-size-base - 0.2rem;
            }

            h6 {
                font-size: $hero-block-h6-font-size-base - 0.2rem;
            }

            p {
                display: none;
            }
        }

        @include media-breakpoint-up(xl) {
            h1 {
                font-size: $hero-block-h1-font-size-base + 0.5rem;
            }

            h2 {
                font-size: $hero-block-h2-font-size-base + 0.5rem;
            }

            h3 {
                font-size: $hero-block-h3-font-size-base + 0.5rem;
            }

            h4 {
                font-size: $hero-block-h4-font-size-base + 0.5rem;
            }

            h5 {
                font-size: $hero-block-h5-font-size-base + 0.5rem;
            }

            h6 {
                font-size: $hero-block-h6-font-size-base + 0.5rem;
            }

            p {
                display: none;
            }
        }
    }

    &.displaymode-one-quarter {
        @include media-breakpoint-up(lg) {
            h1 {
                font-size: $hero-block-h1-font-size-base - 0.6rem;
            }

            h2, h3, h4, h5, h6, p {
                display: none;
            }
        }

        @include media-breakpoint-up(xl) {
            h1 {
                font-size: $hero-block-h1-font-size-base - 0.3rem;
            }

            h2 {
                display: block;
                font-size: $hero-block-h2-font-size-base - 0.3rem;
            }

            h3 {
                display: block;
                font-size: $hero-block-h3-font-size-base - 0.3rem;
            }

            h4, h5, h6, p {
                display: none;
            }
        }
    }

    &.displaymode-one-sixth {
        @include media-breakpoint-up(md) {
            h1 {
                font-size: $hero-block-h1-font-size-base - 0.7rem;
            }

            h2, h3, h4, h5, h6, p {
                display: none;
            }
        }
    }
}
