@import "../settings/_mixins";
@import "../settings/_variables";

.dnetor-post-grid{
    .dnetor-post-title{
        font-size: 24px;
        margin-top: 0;
        margin-bottom: 0;
        a{
            color: #111;
            &:hover{
                color: $accent_color;
            }
        }
    }

    .dnetor-post-meta{
        margin-bottom: 12px;
        @include d-flex();
        @include align-items-center();
    }

    .dnetor-post-excerpt{
        margin-top: 18px;
    }

    .dnetor-post-date{
        position: relative;
        margin-left: 20px;
        &:before{
            content: '';
            width: 5px;
            height: 5px;
            display: inline-block;
            background-color: #999;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            @include transform(translateY(-50%));
            left: -12px;
        }
    }

    .dnetor-post-thumbnail-inner{
        position: relative;
        ul.post-categories {
            position: absolute;
            top: 15px;
            left: 15px;
        }
    }

    .dnetor-post-thumbnail{
        margin-bottom: 20px;
        border-radius: 8px;
        overflow: hidden;
        img{
            border-radius: 8px;
            @include transform(scale(1));
            @include transition(0.3s ease-in-out);
        }
    }

    .dnetor-post-grid-item{
        overflow: hidden;
        &:hover{
            .dnetor-post-thumbnail img{
                @include transform(scale(1.2));
            }
        }
    }

    ul.post-categories{
        @include d-inline-flex;
        @include align-items-center();
        @include flex-wrap();
        gap: 10px;
        list-style: none;
        padding-left: 0;
        font-weight: 500;
        margin-bottom: 15px;
        &.cat-label li{
            &:after {
                content: none;
            }
            a{
                padding: 5px 12px 5px 26px;
                border: 1px solid #eee;
                background-color: #fff;
                border-radius: 30px;
                font-size: 15px;
                color: $text_color;
                @include transition(all .3s);
                display: inline-block;
                position: relative;
                &:before {
                    content: '';
                    width: 8px;
                    height: 8px;
                    background-color: $accent_color;
                    position: absolute;
                    left: 12px;
                    top: 50%;
                    @include transform(translateY(-50%));
                    border-radius: 50%;
                }
                &:hover{
                    color: #fff;
                    background-color: $accent_color;
                    border-color: $accent_color;
                    &:before{
                        background: #fff;
                    }
                }
            }
        }
        li{
            &:after{
                content: ',';
                padding-right: 5px;
            }
            &:nth-last-child(2):after,
            &:last-child:after{
                content: none;
            }
            a{
                color: $accent_color;
            }
        }
    }

    .dnetor-post-author{
        img{
            @include border-radius(50%);
            width: 32px;
            height: 32px;
            object-fit: cover;
        }
        a{
            margin-left: 10px;
            color: #111;
            &:hover{
                color: $accent_color;
            }
        }
    }
    .dnetor-btn{
        margin-top: 15px;
    }
}

.dnetor-post-grid.box-01{
    .dnetor-post-thumbnail-inner{
        position: relative;
        ul.post-categories {
            position: absolute;
            top: auto;
            left: 30px;
            bottom: -16px;
            margin-bottom: 0;
            z-index: 1;
        }
    }
    .dnetor-post-thumbnail{
        margin-bottom: 0;
        border-radius: 8px 8px 0 0;
        img{
            border-radius: 8px 8px 0 0;
        }
    }
    .dnetor-post-content{
        padding: 40px 30px 30px 30px;
        border-width: 0 1px 1px 1px;
        border-style: solid;
        border-color: #eee;
        border-radius: 0 0 8px 8px;
    }
}

.dnetor-post-grid.overlay-01{
    *, * a{
        color: #fff;
    }
    .dnetor-post-grid-item{
        position: relative;
        border-radius: 8px;
    }
    .dnetor-post-content{
        position: absolute;
        bottom: 30px;
        left: 30px;
        right: 30px;
        z-index: 2;
    }
    .dnetor-post-thumbnail{
        margin-bottom: 0;
        height: 100%;
        &:before {
            background-color: rgba(0, 0, 0, 0.3);
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            border-radius: inherit;
            z-index: 1;
        }
        img{
            height: 100%;
            object-fit: cover;
        }
    }
}

.dnetor-post-grid.grid-02{
    ul.post-categories{
        position: absolute;
        top: auto;
        bottom: 0;
        left: 0;
        background-color: #fff;
        margin-bottom: 0;
        padding: 15px;
        border-radius: 0 16px 0 0;
        z-index: 1;
    }
}

.dnetor-post-grid{
    &.overlay-01,
    &.box-01{
        ul.post-categories.cat-label li a{
            color: #fff;
            background-color: $accent_color;
            border-color: $accent_color;
            &:before{
                background-color: #fff;
            }
        }
        .dnetor-post-meta{
            margin-bottom: 0;
            margin-top: 15px;
        }
        .dnetor-post-author{
            &:before{
                content: '\f007';
                font-family: "Font Awesome 5 Pro";
            }

            a{
                margin-left: 5px;
            }
            img{
                display: none;
            }
        }
        .dnetor-post-date{
            margin-left: 40px;
            &:before{
                content: none;
            }
            &:after{
                position: absolute;
                left: -22px;
                content: '\f073';
                font-family: "Font Awesome 5 Pro";
            }
        }
    }
}

@media (max-width: 576px) {
    .dnetor-post-grid.overlay-01{
        .dnetor-post-content{
            bottom: 15px;
            left: 20px;
            right: 20px;
        }
    }
}