/*
 *  Copyright 2018 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.
 */
/* WKND teaser - card.less*/

$teaser-height: 400px;
$teaser-img-height: $teaser-height;

.cmp-teaser--card {

    .cmp-teaser {
        position: relative;
        height: $teaser-height;
        max-height: $teaser-height;
        overflow: hidden;
        background-color: #ededed;
        margin-bottom: $gutter-padding;
        margin-top: $gutter-padding;

        @media (max-width: $screen-small) {
            width: $teaser-height;
            margin-left: auto !important;
            margin-right: auto !important;
        }

        .cmp-teaser__image {
            width: 100%;
            overflow: hidden;
            padding-top: 0px;

            .cmp-image__image {
                margin-top: 0px;
                object-fit: cover;
                object-position: top;
                height: $teaser-img-height;
                width: 100%;
                -webkit-transition: all .2s;
                -moz-transition: all .2s;
                -o-transition: all .2s;
                transition: all .25s;
            }
        }

        .cmp-teaser__title {
            display: none;
        }

        .cmp-teaser__description {
            display: none;
        }

        .cmp-teaser__action-container {
            position: absolute;
            bottom: $gutter-padding * 2;
            right: $gutter-padding;
        }

        .cmp-teaser__action-link {
            border: 1px solid $teaser-light-color;
            color: $teaser-light-color;
            background-color: transparent;
            -webkit-transition: all .25s ease-out;
            -moz-transition: all .25s ease-out;
            -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
        }

        .cmp-teaser__pretitle {
            position: absolute;
            top:0;
            right:0;
            padding: 0.5em;
            /*background: linear-gradient(to top right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, #a48d01 50%, #a48d01 100%); */
            color: $white;
            background: $blue;
            border-bottom-left-radius: 4px;
            box-shadow: -1px 2px 4px 1px rgba(0,0,0,0.25);
        }

        &:hover {
            .cmp-teaser__action-link {
                color: $teaser-dark-color;
                background-color: $brand-primary;
                border-color: $brand-primary;
            }

            .cmp-image__image {
                -moz-transform: scale(1.05);
                -webkit-transform: scale(1.05);
                transform: scale(1.05);
            }
        }
    }
}