/*
 *  Copyright 2016 Adobe Systems Incorporated
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

@import "/apps/weretail/clientlibs/common/helpers.less";

.we-HeroImage {
    min-height: 460px;

    padding: @jumbotron-padding 0;
    margin-bottom: 40px;

    background: @gray 50% no-repeat;
    background-size: cover;

    position: relative;

    text-align: center;

    .navbar {
        margin-top: @jumbotron-padding;
    }

    &-title {
        display: block;

        margin: 0 auto 20px;

        text-transform: uppercase;
    }

    p {
        margin: 0 auto;
    }

    &-title, p {
        text-shadow: 2px 4px 3px rgba(0,0,0,0.5);

        .btn {
            text-shadow: none;
        }
    }
}

// Put hero image under header component if placed below it
.header ~ .heroimage,
.header ~ .target .heroimage {
    position: relative;
    top: -1 * @header-height - 30;
    margin-bottom: -1 * @header-height - 30;
    overflow: visible;

    @media(max-width: @screen-md-max) {
        margin-top: -40px;
    }
}

@media (min-width: @screen-md-min) {
        .we-HeroImage {
            text-align: left;

            .container {
                transform: translateX(-50%);

                position: absolute;
                top: 0;
                bottom: 0;
                left: 50%;
            }

            &-wrapper {
                transform: translateY(-50%);

                .make-md-column-offset(2);

                position: absolute;
                top: 50%;
                left: 0;
            }
        }
}

@media (max-width: @screen-sm-max) {
        .we-HeroImage {
            &.width-full {
                padding: 180px 0 70px;
            }
        }
}
