$blog_gutter: $gl-gutter;

.bypostauthor {
    display: inline-block;
}

.entry-title {
    word-wrap: break-word;
}

.entry-meta {
    > span {
        display: inline-block;
        padding: 5px 0;
    }
    .sep {
        margin-left: 8px;
        margin-right: 8px;
    }
    .author {
        img {
            vertical-align: middle;
            overflow: hidden;
            border-radius: 50%;
            margin-right: 5px;
        }
    }
}


.posts-layout {
    .entry {
        margin-bottom: 2em;
    }
    .entry--item {
        margin-bottom: 15px;
        &:last-child {
            margin-bottom: 0px;
        }
    }

    .entry-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        width: 100%;
        border-bottom: 1px solid $color_border;
        padding-bottom: 2em;
        @include for_device( mobile ){
            display: block;
        }
    }

    .entry-media {
        position: relative;
        max-width: 100%;
        flex-basis: 40%;
        padding-top: 0;
        overflow: hidden;
        @include for_device( mobile ){
            margin-bottom: 1em;
            width: 100% !important;
            padding-top: 56.25%; // 16:9
        }
        &.no-ratio {
			.entry-thumbnail {
				position: relative;
			}
        }
    }
    .entry-thumbnail {
        position: absolute;
        top: 0px;
        bottom: 0px;
        width: 100%;
        height: 100%;
        display: flex;
        line-height: 0;
        background-color: #d5d5d5;
        img {
            object-fit: cover;
            width: 100%;
            height: auto;
        }
        a {
            position: absolute;
            top: 0px;
            top: 0px;
            display: block;
        }
    }
    .entry-title {
        font-size: 1.5em;
        font-weight: 500;
        word-wrap: break-word;
        display: flex;
        align-items: center;
        a {
            text-align: inherit;
            display: block;
            flex-basis: 100%;
        }
    }
    .entry-excerpt {
        p{
            &:last-child {
                margin-bottom: 0px;
            }
        }
    }
    .entry-media-link {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0; display: block;
        z-index: 30;
    }
    .entry-content-data {
        flex: 1;
        word-wrap: break-word;
        max-width: 100%;
    }

    .entry-readmore {
        margin-top: 1em;
    }

    .entry-cat {
        top: 0;
        display: block;
        a {
            color: inherit;
            &:hover {
                color: inherit;
            }
        }
    }

    .readmore-button {
        display: inline-block;
        line-height: 1;
        border: 1px solid $color_primary;
        color: $color_primary;
        border-radius: 2px;
        cursor: pointer;
        padding: 7px 17px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: transform .18s, border .18s, background .18s, box-shadow .18s, opacity .18s, color .18s;
        font-weight: 500;
        &:hover {
            background: $color_primary;
            color: #FFFFFF;
            border-color: $color_primary;
        }
    }

    .entry-content-data {
        display: flex;
        flex-flow: column nowrap;
    }
    .entry-article-part {
        position: relative;
        width: 100%;
        margin-bottom: 15px;
        &:first-child {
            margin-top: 0;
        }
        &.entry-article-media {
            flex: none;
            position: absolute;
            top: 0px;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        &.entry-article-footer{
            display: flex;
            margin-top: auto;
            margin-bottom: 0px;
            justify-content: space-between;
            &.only-more {
                .entry-readmore {
                    width: 100%;
                }
            }
        }
    }

    .entry-article-footer {
        align-items: center;
        > *, .entry-meta {
            margin-bottom: 0px;
            margin-top: 0px;
            display: inline-block;
        }
    }
    .entry-thumbnail {
        transition: all .3s linear;
        img {
            transition: all .3s linear;
        }
        &:before {
            transition: all .3s linear;
            content: "";
            display: block;
            position: absolute;
            top: 0px; left: 0px; bottom: 0px; right: 0px;
            z-index: 2;
        }
    }
    .entry-article-media {
        z-index: 5;
    }

    // Media content align
    .mc-bottom {
        .media-content-inner {
            position: absolute;
            left: 0px;
            bottom: 0px;
            width: 100%;
            display: block;
        }
    }
    .mc-top {
        .media-content-inner {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            display: block;
        }
    }
    .mc-center {
        .media-content-inner {
            position: absolute;
            left: 0px;
            top: 0px;
            bottom: 0px;
            right: 0px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    }


    &.layout-- {

        &blog_column, &blog_boxed {
            .entry-inner {
                display: block;
                .entry-content-data, .entry-article-header {
                    display: flex;
                    flex-direction: column;
                }
            }
        }

        &blog_classic {
            .entry-media {
                margin-right: $blog_gutter;
                @include for_device( mobile ) {
                    margin-right: 0px;
                }
            }
        }


        &blog_column, &blog_boxed {
            .entry-media {
                padding-top: 40%;
            }
            .entry {
                display: block;
            }
            .sticky {
                .entry-content-data {
                    background-color: #fcf8e3;
                    border: 1px solid #faf2cc;
                    border-top: 0px none;
                    color: #8a6d3b;
                    padding: 1em;
                }
            }
            .entry-media {
                margin-bottom: 1em;
                display: block;
                position: relative;
            }
        }

        &blog_boxed {
            .entry-content-data {
                padding: ( $blog_gutter /2 );
            }
        }

    }

}

// Pagination
.pagination {
    margin: 30px auto;
    display: block;
    .nav-links {
        > * {
            border: 1px solid $color_border;
            color: $color_meta;
            padding: 4px 12px 4px;
            border-radius: 1px;
            text-transform: uppercase;
            font-weight: 500;
            letter-spacing: 0.8px;
            display: inline-block;
            &:hover {
                border-color: $color_primary;
                background: $color_primary;
                color: #FFFFFF;
            }
        }
        span {
            border-color: $color_primary;
            background: $color_primary;
            color: #FFFFFF;
        }
    }
}

// Single post
.single {
    .entry-meta {
        margin-bottom: ms(1);
    }
    .entry-footer {
        margin-bottom: ms(2);
    }
}

.entry-content {
    .page-links {
        display: block;
        margin: 5px 0px 20px;
        font-weight: 500;
        a {
            border: 1px solid $color_border;
            padding: 5px 12px 5px;
            text-transform: uppercase;
            color: $color_text;
            margin: 0px 2px;
        }
    }
    .table-wrapper {
        max-width: 100%;
        overflow: auto;
    }
}

.single-post {
    .entry-content {
        a {
            &:hover {
                text-decoration: underline;
            }
        }
    }
}

.entry-single {
    .entry--item:not( .entry-title ), .entry-thumbnail {
        margin-bottom: 1.41575em;
        &:last-child {
            margin-bottom: 0px;
        }
    }
    .entry--item.entry-related {
        margin-bottom: 0.41575em;
    }
    .tags-links, .cats-links {
        &:before {
            font: normal normal normal 16px/1 FontAwesome;
            text-decoration: inherit;
            text-transform: none;
            position: relative;
            margin-right: 5px;
            color: $color_meta;
        }
    }

    .cats-links:before {
        content: "\f115";
    }

    .tags-links:before {
        content: "\f02c";
    }

    .edit-link {
        display: block;
        width: 100%;
        margin-top: ms(-3);
        a {
            text-transform: uppercase;
            font-weight: 500;
            font-size: 80%;
            letter-spacing: 0.5px;
        }
    }
}

// Biography box
.author-bio {
    display: flex;
    .avatar {
        flex-basis: 90px;
        @include for_device( mobile ){
            flex-basis: 90px;
        }
    }
    .author-bio-details {
        flex-basis: calc( 100% - 90px );
        margin-left: 1.5em;
        @include for_device( mobile ){
            flex-basis: calc( 100% - 50px );
        }
    }
    .author-bio-desc p:last-child {
        margin-bottom: 0.72em;
    }
}

.post-navigation .nav-links {
    @include clearfix();
    padding: 16px 0px 15px;
    border-top: 1px solid $color_border;
    border-bottom: 1px solid $color_border;
    .nav-previous, .nav-next {
        width: 49%;
        a {
            span.meta-nav {
                display: block;
                margin-bottom: 5px;
            }
        }

    }
    .nav-previous {
        float: left;
        text-align: left;
    }
    .nav-next {
        float: right;
        text-align: right;
    }
}

// Related Posts
.related-post-title {
    margin-bottom: 0.41575em;
    @include for_device( mobile ){
        margin-bottom: 0;
    }
}
.related-post {
    margin-bottom: 1em;
    .entry-title {
        font-size: 1.1em;
        line-height: 1.3;
    }
}

.related-thumbnail {
    a {
        display: block;
        line-height: 0px;
        position: relative;
    }
}

.img-pos-left , .img-pos-right {
    .related-post {
        display: flex;
        @include for_device( mobile ){
            display: block;
        }
    }
    .related-thumbnail {
        flex-basis: 160px;
        position: relative;

        @include for_device( mobile ){
            margin-bottom: 1em;
        }
        img {
            width: 100%;
            object-fit: cover;
            display: block;
        }
    }
    .related-body {
        flex-basis: calc( 100% - 160px );
        p {
            margin-bottom: 0px;
        }
    }
}

.img-pos-left {
    .related-body {
        padding-left: 1em;
        @include for_device( mobile ){
            padding-left: 0em;
        }
    }
}

.img-pos-right {
    .related-body {
        order: 1;
        padding-right: 1em;
        @include for_device( mobile ){
            padding-right: 0em;
        }
    }
    .related-thumbnail {
        order: 2;
    }
}

.img-pos-top {
    .related-thumbnail {
        margin-bottom: 0.5em;
        img {
            width: 100%;
        }
    }
}

