/*******************************************************/
/******************** 21. Blog Area ********************/
/*******************************************************/
.blog-item
    margin-bottom: 55px
    +res-ab(sm)
        display: flex
        align-items: center
    .image
        flex: none
        max-width: 35%
        margin-right: 40px
        +res-bl(sm)
            max-width: none
            margin-right: 0
            margin-bottom: 15px
            img
                width: 100%
    .content
        font-size: 18px
        line-height: 1.4
        .date
            display: block
            margin-bottom: 10px
            i
                margin-right: 8px
        h4
            line-height: 1.4
            margin-bottom: 18px
            +res-bt(lg, xl)
                font-size: 20px
            +res-bl(xs)
                font-size: 20px
        .author
            display: flex
            align-items: center
            img
                +size(50px)
                border-radius: 50%
                margin-right: 15px
            span
                display: block
            a
                font-weight: 500
                &:not(:hover)
                    color: $heading-color
                
                
/* Blog Grid */
.blog-grid-item
    margin-bottom: 60px
    .image
        img
            width: 100%
.blog-content
    background: white
    padding: 30px 35px 35px
    box-shadow: 10px 0 60px rgba(223, 223, 223, 0.5)
    +res-bl(ms)
        +gapLR(padding, 25px)
    h5
        line-height: 1.75
        margin-bottom: 10px
        letter-spacing: -1px
        +res-ab(xs)
            font-size: 20px
    .read-more
        color: $primary-color
        text-decoration: underline
        +res-ab(xs)
            font-size: 18px
.blog-meta
    display: flex
    flex-wrap: wrap
    margin-bottom: 10px
    align-items: center
    li
        display: flex
        line-height: 1.3
        margin-bottom: 8px
        align-items: center
        img
            +size(30px)
            margin-right: 8px
            border-radius: 50%
        i
            margin-right: 6px
        &:not(:last-child)
            margin-right: 22px
        &:not(:first-child)
            padding-left: 22px
            border-left: 2px solid $primary-color
            
/* Blog List */
.blog-list-item
    margin-bottom: 30px
    +res-ab(xl)
        display: flex
    .image
        flex: none
        max-width: 44%
        align-self: center
        +res-bl(xl)
            max-width: 100%
        img
            width: 100%
    .blog-content
        display: flex
        align-items: center
        padding: 40px 60px 30px
        +res-bl(md)
            +gapLR(padding, 35px)
        +res-bl(ms)
            +gapLR(padding, 25px)
        h4
            line-height: 1.52
            margin-bottom: 15px
            letter-spacing: -1px
            +res-ab(sm)
                font-size: 27px
            +res-bl(ms)
                font-size: 20px
                line-height: 1.65
            +res-bl(xs)
                font-size: 16px
                
/* Blog Details */
.blog-details-content
    padding-bottom: 35px
    border-bottom: 1px solid rgba(41, 48, 67, 0.1)
    .blog-meta
        margin-bottom: 30px
        border-bottom: 1px solid rgba(41, 48, 67, 0.1)
        
blockquote
    position: relative
    padding: 30px 70px 20px 160px
    +res-bl(md)
        padding-right: 0
        padding-left: 75px
    +res-bl(xs)
        padding-left: 55px
    &:before
        line-height: 1
        content: "\f125"
        font-size: 50px
        font-family: "Flaticon"
        color: $secondary-color
        position: absolute
        margin-left: -75px
        +res-bl(xs)
            font-size: 40px
            margin-left: -55px
    h4
        +res-bl(ms)
            font-size: 20px
        +res-bl(xs)
            font-size: 18px
    .blockquote-footer
        display: flex
        margin-top: 5px
        align-items: center
        +res-ab(xs)
            font-size: 18px
        &:before
            content: ''
            +size(40px, 3px)
            margin-right: 20px
            background: $yellow-color
        
.tag-share
    flex-wrap: wrap
    +flexcenter(space-between)
    .item
        display: flex
        align-items: center
        margin-bottom: 25px
        h5
            margin: 0 20px 0 0
        .tag-coulds
            a
                +gapTB(padding, 0)
                border-radius: 5px
                text-transform: capitalize

/* Comments */
h4.comment-title
    margin-bottom: 0
    border-bottom: none
.comment-body
    padding-top: 40px
    padding-bottom: 15px
    border-bottom: 1px solid rgba(41, 48, 67, 0.1)
    &:first-child
        border-top: 1px solid rgba(41, 48, 67, 0.1)
    +res-ab(ms)
        display: flex
    .author-thumb
        flex: none
        max-width: 85px
        margin-right: 30px
        margin-bottom: 15px
        img
            border-radius: 50%
    .content
        h5
            margin-bottom: 0
            +flexcenter(space-between)
            .theme-btn
                font-size: 16px
                padding: 6px 20px
                font-family: $heading-font
        .date
            display: block
            margin: -2px 0 8px
            
.admin-comment
    .comment-body
        border: none
        background: white
        padding: 35px 40px
        align-items: center
        box-shadow: 10px 0 60px rgba(219, 219, 219, 0.4)
        +res-bl(sm)
            display: block
            +gapLR(padding, 25px)
        .author-thumb
            max-width: 140px
            +res-ab(sm)
                margin-bottom: 0
                
/* Next Prev Post */
.next-prev-post
    display: flex
    flex-wrap: wrap
    justify-content: space-between
    .post-item
        max-width: 250px
        margin-bottom: 20px
        h5
            margin-bottom: 5px
            a
                color: $heading-color
                &:hover
                    text-decoration: underline
        .date
            i
                margin-right: 5px
                
                
/* Comment Form */
.comment-form
    padding: 50px 50px 60px
    +res-bl(xs)
        +gapLR(padding, 25px)
    h4
        margin-bottom: 0
    .form-group
        label
            position: absolute
            top: 0
            right: 0
    .form-control
        font-size: 18px
        border-radius: 0
        padding: 15px 0 12px
        border-width: 0 0 1px
        background-color: transparent
        border-color: rgba(41, 48, 67, 0.1)
        &::placeholder
            color: $heading-color
    .form-check
        display: flex
        margin-bottom: 30px
        .form-check-input[type=radio]
            +size(24px)
            padding: 0
            flex: none
            cursor: pointer
            box-shadow: none
            position: relative
            margin-right: 20px
            border-radius: 5px
            background: transparent
            border: 2px solid rgba(32, 78, 207, 0.2)
            &:after
                content: ''
                +size(7px)
                +abs-middle()
                border-radius: 50%
                background: $border-color
            &:checked
                &:after
                    background: $primary-color
        label
            font-weight: 400
            position: relative