//== Dependencies
@import (optional) "../../node_modules/gee.less/gee";
@import (optional) "../../../../node_modules/gee.less/gee";
@import (optional) "../../node_modules/dotsunited-equal-height-blocks/lib/mixins";
@import (optional) "../../../../node_modules/dotsunited-equal-height-blocks/lib/mixins";

@hdeng-teaser-breakpoint-half: 1024px;
@hdeng-teaser-breakpoint-single: 480px;

//== Generates
.hdeng-teaser-critical-generate() {
    // Silence
}

.hdeng-teaser-generate() {
    .teaser {
        .gee-grid(@hdeng-gutter);
        .dotsunited-equal-height-blocks-container();
        margin-bottom: @hdeng-spacing;
    }

    .teaser--stage {
        margin-top: -(@hdeng-spacing * 3);

        @media (max-width: @hdeng-breakpoint-mobile) {
            margin-top: 0;
        }
    }

    .teaser__item {
        .hdeng-box();
        .hdeng-box-shadow();

        position: relative;

        .gee-unit(3, 12, 2%);
        max-width: 100%;
        padding-bottom: 60px;

        figure {
            margin: 0;
        }

        figcaption {
            margin: -@hdeng-spacing 0 @hdeng-spacing 0;
        }

        @media (max-width: @hdeng-teaser-breakpoint-half) {
            .gee-unit-width(6, 12, 2%);
            margin-bottom: @hdeng-spacing;
        }

        @media (max-width: @hdeng-teaser-breakpoint-single) {
            .gee-unit-width(12, 12, 2%);
        }

        @media (max-width: @hdeng-breakpoint-mobile) {
            // Overwrite .box padding
            padding: @hdeng-content-padding-mobile;
        }
    }

    .teaser__item--highlight {
        .hdeng-box-highlight();
    }

    .teaser__img, .teaser__img-link {
        display: block;
    }

    .teaser__img-link {
        margin-bottom: @hdeng-spacing;
    }

    .teaser__img {
        .hdeng-img-responsive();
    }

    .teaser__title {
        .hdeng-h3();
        margin: 0 0 @hdeng-spacing;
        line-height: 1;
    }

    .teaser__text {
        font-size: 14px;
        margin-bottom: 0;
    }

    .teaser__more {
        position: absolute;
        bottom: @hdeng-spacing;

        @media (max-width: @hdeng-breakpoint-mobile) {
            position: static;
            display: block;
            margin-top: @hdeng-spacing;
        }

        font-size: 14px;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }

    .teaser__item--banner {
        padding-bottom: 20px;

        .teaser__img-link {
            margin-bottom: 0;
        }

        .teaser__img {
            margin: 0 auto;
        }

        .teaser__text {
            visibility: hidden;
            position: absolute;
        }

        @media (max-width: @hdeng-breakpoint-mobile) {
            // Overwrite .box padding
            padding: @hdeng-content-padding-mobile;
        }

    }
}

