/*******************************************************/
/******************** 18. Blog Area ********************/
/*******************************************************/
.news-slider-wrap
    +gapLR(margin, -15px)
    .news-item
        margin-top: 30px
        +gapLR(margin, 15px)
.news-item
    padding: 20px
    transition: 0.5s
    margin-bottom: 30px
    background: $lighter-color
    .image
        img
            width: 100%
            border-radius: 7px
    .content
        padding: 0 20px 20px
        +res-bl(xs)
            +gapLR(padding, 0)
            h5
                font-size: 18px
        .blog-meta
            left: 50%
            position: relative
            margin-right: -15px
            transform: translate(-50%, -50%)
    &:hover
        background: white
        box-shadow: 10px 0 60px rgba(31, 31, 31, 0.1)
    &.style-two
        padding: 0
        background: white
        border-radius: 7px
        .image
            img
                border-radius: 7px 7px 0 0
        .content
            transition: 0.5s
            position: relative
            padding: 30px 35px 35px
            border-radius: 0 0 7px 7px
            border: 1px solid $border-color
            +res-bl(xs)
                +gapLR(padding, 20px)
            h5
                +res-bl(xs)
                    font-size: 16px
            .blog-meta
                right: 0
                left: auto
                bottom: 100%
                margin-right: -1px
                position: absolute
                transform: translate(0)
                border-radius: 7px 0 0
        &:hover
            .content
                border-color: white
        &.bg-black-two
            background: $black-color-two
            .image
                position: relative
                .blog-meta
                    left: 0
                    top: 0
                    padding: 7px
                    height: 100%
                    position: absolute
                    justify-content: center
                    border-radius: 0 0 7px 0
                    transform: rotate(180deg)
                    -webkit-writing-mode: vertical-rl
                    li
                        i
                            margin-bottom: 3px
                            transform: rotate(90deg)
                            +res-bl(xs)
                                display: none
                        &:not(:last-child)
                            margin-right: 0
                            margin-bottom: 22px
                            +res-bl(xs)
                                margin-bottom: 15px
            .content
                border: none
                h5
                    a
                        &:not(:hover)
                            color: white
                .read-more
                    &:not(:hover)
                        color: white
                        opacity: 0.5
                        border-color: white
        
.blog-meta
    font-weight: 500
    background: white
    padding: 8px 22px
    border-radius: 7px
    align-items: center
    display: inline-flex
    color: $heading-color
    font-family: $heading-font
    +res-bl(xs)
        +gapLR(padding, 15px)
    li
        i
            margin-right: 5px
        a
            color: $heading-color
        &:not(:last-child)
            margin-right: 22px
            +res-bl(xs)
                margin-right: 15px
        
.slider-btns
    button
        &:not(:last-child)
            margin-right: 5px
        
/* News Area Three */
.news-area-three
    +overlay($black-color, 1)
    &:before
        mix-blend-mode: multiply
    
/* Blog Standard */
.blog-standard-item
    max-width: 730px
    margin-bottom: 30px
    .image
        &.video-news
            +overlay($black-color, 0.45)
            &:before
                z-index: 1
            .video-play
                position: absolute
                left: 50%
                top: 50%
                z-index: 2
                +size(85px)
                font-size: 16px
                line-height: 85px
                transform: translate(-50%, -50%)
                +res-bl(sm)
                    +size(65px)
                    line-height: 65px
    .blog-meta
        z-index: 2
        display: flex
        margin-top: -48px
        position: relative
        width: max-content
        margin-bottom: 30px
        border-radius: 0 7px 0 0
    .content
        h3
            line-height: 1.5
            margin-bottom: 15px
            +res-ab(md)
                font-size: 27px
            +res-bl(sm)
                font-size: 20px
            +res-bl(xs)
                font-size: 17px
        p
            margin-bottom: 30px
    &.blog-blockquote
        position: relative
        padding: 40px 50px
        background: $black-color
        +res-bl(ms)
            +gapLR(padding, 25px)
        h3
            a
                &:not(:hover)
                    color: white
        .author
            display: flex
            align-items: center
            img
                +size(45px)
                margin-right: 20px
                border-radius: 50%
            .name
                color: #cacaca
                font-size: 18px
                font-weight: 500
        &:after
            top: 0
            content: ""
            right: 65px
            z-index: -1
            color: white
            opacity: 0.05
            line-height: 1
            font-size: 250px
            position: absolute
            font-family: "Flaticon"
    
/* Blog Details */
.blog-details-content
    max-width: 730px
    .blog-meta
        display: flex
        border-radius: 0
        flex-wrap: wrap
        background: $lighter-color-two
        border-left: 3px solid $primary-color
        +res-ab(xl)
            justify-content: space-around
        +res-bl(ms)
            font-size: 14px
            i
                display: none
    .title
        line-height: 1.5
        margin-bottom: 15px
        +res-ab(md)
            font-size: 27px
        +res-bl(sm)
            font-size: 20px
        +res-bl(xs)
            font-size: 17px
.tag-share
    flex-wrap: wrap
    +flexcenter(space-between)
    b
        line-height: 1
        font-size: 18px
        @extend %heading
        margin: 5px 20px 0 0
        
.next-prev-post
    flex-wrap: wrap
    +flexcenter(space-between)
    .npp-item
        display: flex
        max-width: 300px
        align-items: center
        margin-bottom: 30px
        img
            flex: none
            max-width: 75px
            margin-right: 18px
            +res-bl(xs)
                margin-right: 15px
        h6
            margin-bottom: 0
            +res-bl(xs)
                font-size: 15px
        .date
            i
                font-size: 15px
                margin-right: 5px

/* Comments */
.comment-body
    +res-ab(ms)
        display: flex
    &:not(:last-child)
        margin-bottom: 30px
    .author-thumb
        flex: none
        max-width: 100px
        margin: 10px 25px 13px 0
        img
            border-radius: 50%
    .comment-content
        .name-date
            flex-wrap: wrap
            +flexcenter(space-between)
            h5
                font-size: 18px
        p, h5, ratting
            margin-bottom: 5px
        .reply-link
            @extend %heading
            text-transform: uppercase
    &.child-comment
        margin-left: 60px
        +res-bl(xs)
            margin-left: 30px
            
.admin-comment
    border-left: 5px solid $primary-color
    +res-bl(sm)
        +gapLR(padding, 25px)
    .comment-body
        align-items: center
        .author-thumb
            max-width: 160px
        .name-date
            h5
                font-size: 20px
                margin-bottom: 10px