/*  -----------------------------------------------------------------------------------------------
    Loop Posts Common Styles
    @package v.1.0.0
--------------------------------------------------------------------------------------------------- */

article
{
	@import '../post-formats/post_format_quote';
	@import '../post-formats/post_format_video';
    @import '../post-formats/post_format_gallery';
    @import '../post-formats/post_format_audio';
    @import '../post-formats/post_format_image';
    @import '../post-formats/post_format_link';
    
    &:hover,
    &:focus
    {
        .category-links
        {
            opacity: 1;
            visibility: visible;
            right: 100%;
        }
    }
    
    &.sticky .sticky-post 
    {
        position: absolute;
        z-index: 1;
        right: 0;
        bottom: 0;
        padding: 3px 6px 2px;
        background-color:$accent_color;
        display: flex;
        align-items: center;
        color: $white;
        font-weight: bold;
        letter-spacing: 2.5px;
        font-size: 11px;
        text-transform: uppercase;
        -webkit-justify-content: center;
        justify-content: center;
    }

    .entry-image 
    {
    	position: relative;
    	z-index: 1; 
    	display: block;
    	
    	&:after
    	{
    		content: "";
    		display: block;
    		position: absolute;
    		top: 0;
    		bottom: 0;
    		right: 0;
    		left: 0;
    		width: 100%;
    		height: 0;
    		background: rgba($black, .4);
    		opacity: 0;
    		visibility: hidden;
    		z-index: -1;
    		transition: all .25s;
    	}

        img
        {
            @include media('<=tablet')
            {
                width: 100%;
            }
        }

    	> .entry-image-wrapper 
    	{
    		img
    		{
    			display: block;
    			margin: 0 auto;
    			transition: filter .25s ease-in-out;
    			height: auto; /* Make sure images are scaled correctly. */
    			max-width: 100%; /* Adhere to container width. */
    			width: 100%; /* IE11 fix. */
    		}
    	}

    	.hover 
    	{
    		position: absolute;
    		top: 0%;
    		left: 50%;
    		transform: translate(-50%, 0);
    		z-index: 100;
    		text-transform: uppercase;
    		text-align: center;
    		color: $white;
    		opacity: 0;
    		transition: all 0.3s;
    		backface-visibility: hidden;
    	}
    }

    .entry-content-inner
    {
        position: relative;
        z-index: 4;
        
        @include media('<=tablet')
        {
            background: $white;
            max-width: 100%;
            margin: 0 auto;
            padding: $left_and_right_mobile;
            z-index: 5;
        }

        .entry-header
        {
            margin-bottom: 12px;
            
            .entry-title
            {
                margin: 0;
                font-size: 24px;
                line-height: 32px;
                text-transform: uppercase;
            }
        }
        
        .entry-content
        {
            
            hyphens: manual;
            word-break: break-word;
            margin-top: 12px;
            
            p
            {
                color: $black;
                margin-top: 0;
                text-align: justify;
                
                &:last-child
                {
                    margin-bottom: 0;
                }
                
                @include media('<=tablet')
                {
                    margin-bottom: 0;
                }
            }

        }
    }

    .entry-footer
    {       
        .post-edit-link
        {
            text-transform: uppercase;
            font-size: 14px;
            margin: 12px 0;
            @extend .flex-item;
            
            svg
            {
                fill: none;
            }
            
            &:before
            {
                content: '';
                width: 24px;
                height: 24px;
                mask-image: url(/wp-content/themes/chained/assets/images/svg/edit-link-icon.svg);
                mask-size: cover;
                background-color: $black;
                display: inline-block;
                margin-right: 8px;
            }
        }
    }

    &:hover ,
    &:focus
    {
        &.entry-card:not(.format-video):not(.format-gallery)
        {
            .entry-image 
            {
                .entry-image-wrapper 
                {
                    backface-visibility: hidden;
                }

                .hover 
                {
                    opacity: 1;
                    top: 50%;
                    transform: translate(-50%, -50%);
                }

                &:after
                {
                    opacity: 1;
                    z-index: 1;
                    visibility: visible;
                    height: 100%;
                }
            }
        }
    }
}