
// =============================
// s_latest_posts_big_picture
// =============================
@s_latest_posts_big_picture-figure_bg: @brand-primary;

//  ====== hooks(hook) =====================================
//  ===========================================================
//  Use them to inject NEW rules or overwrite the old ones.
//  This method is more maintenable than classic css overwrite
//  'couse it works also if the snippet's structure will change.

//  How to:
//  in your theme, just call the backdoor like a normal
//  CSS class adding parethesis at the end ".backdoor-name()"
//  (this will prevent the creation of a standard CSS class).
//  Add your rules inside. Your style will take the priority.
//  Done.

//  .s_latest_posts-figure() {
//    background: red;
//    min-height: 200px;
//  }

.s_latest_posts-js_get_posts-hook() {};
.s_latest_posts-figure-hook() {};

.s_latest_posts_big_picture {
    .container-fluid();

    > div {
        .row();

        .content {
            opacity: 1;
            position: relative;
            height: 100%;
            overflow: hidden;
            background: @s_latest_posts_big_picture-figure_bg;
        }

        figure {
            @media (max-width: @screen-xs-max) {
                width: 100%;
            }

            position: relative;
            overflow: hidden;
            margin: 10px 0;
            height: 250px;
            text-align: center;
            cursor: pointer;
            .transition(all 300ms);

            &.js-loading {
                background: #E7E7E7!important;
            }

            .thumb {
                position: relative;
                display: block;
                width: 100%;
                height: 100%;
                padding: 0;
                opacity: 0.8;

                > .o_blog_cover_component {
                    .o-position-absolute(0, 0, 0, 0);
                }
                > .o_blog_cover_image {
                    background-size: cover;
                    background-position: center;
                }
            }
            figcaption, figcaption > a {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                padding: 2em;
                color: #fff;
                text-transform: uppercase;
                font-size: 1.25em;
                .backface-visibility(hidden);
                &:after, &:before {
                    pointer-events: none;
                }

                > a {
                    z-index: 1000;
                    text-indent: 200%;
                    white-space: nowrap;
                    font-size: 0;
                    opacity: 0;
                }
                h2 {
                    margin: 0;
                    font-size: 1.5em;
                    font-weight: 300;
                    span {
                        font-weight: 800;
                    }
                }
                p {
                    margin: 1em 0 0;
                    letter-spacing: 1px;
                    font-size: 68.5%;
                }
            }
            .s_latest_posts-figure-hook;
        }
        // global figure
        .s_latest_posts-js_get_posts-hook;
    }
}
