@use '../utils' as *;

/*=============================
    12. Latest Post
===============================*/
.latest {
    &-post-area {
        & > .container {
            & > .row:first-child {
                &>*:first-child {
                    padding-right: 25px;
                    @media #{$md} {
                        padding-right: 15px;
                    }
                }
            }
        }
    }
    &__post {
        &-item {
            @include flexbox();
            align-items: center;
            padding: 0 0 38px;
            margin-bottom: 30px;
            position: relative;
            display: none;
            &::before {
                content: "";
                position: absolute;
                left: 0;
                bottom: 0;
                background-image: url(../img/bg/line5.png);
                width: calc(100% - 5px);
                height: 8px;
            }
            @media #{$lg} {
                &[style="display: flex;"] {
                    display: block !important;
                }
            }
            & .tgbanner__content-meta {
                margin: 0 0 9px;
            }
        }
        &-thumb {
            width: 400px;
            flex: 0 0 auto;
            margin-right: 40px;
            @media #{$xl} {
                width: 370px;
            }
            @media #{$lg} {
                width: 100%;
                margin: 0 0 25px;
            }
            & img {
                height: 300px;
                object-fit: cover;
                object-position: center;
                @media #{$lg} {
                    width: 100%;
                }
                @media #{$md} {
                    height: 365px;
                }
                @media #{$xs} {
                    height: 200px;
                }
                @media #{$sm} {
                    height: 280px;
                }
            }
        }
        &-content {
            flex-grow: 1;
            margin-right: 30px;
            @media #{$xs} {
                margin-right: 0;
            }
            & .title {
                font-size: 30px;
                letter-spacing: -.9px;
                margin: 0 0 18px;
                @media #{$xs} {
                    font-size: 22px;
                    letter-spacing: -0.3px;
                    line-height: 1.3;
                }
            }
            & p {
                margin: 0 0;
            }
            & .post__activity {
                margin-top: 35px;
            }
        }
        &-more {
            margin-top: 40px;
            & .noContent {
                pointer-events: none;
            }
        }
        &-item-two {
            margin: 0 0 50px;
            display: none;
        }
        &-thumb-two {
            & img {
                width: 100%;
                height: 500px;
                object-fit: cover;
                object-position: center;
                @media #{$xl} {
                    height: 440px;
                }
                @media #{$lg} {
                    height: auto;
                }
            }
        }
        &-content-two {
            background: var(--tg-common-color-white);
            margin: -140px 120px 0;
            padding: 45px 50px 50px;
            position: relative;
            text-align: center;
            z-index: 1;
            @media #{$xl} {
                margin: -120px 110px 0;
                padding: 35px 35px 30px;
            }
            @media #{$lg} {
                margin: 0 0;
            }
            @media #{$md} {
                padding: 40px 50px 30px;
            }
            @media #{$xs} {
                padding: 30px 25px 25px;
            }
            @media #{$sm} {
                padding: 35px 30px 30px;
            }
            & .tgbanner__content-meta {
                justify-content: center;
            }
            & .title {
                font-size: 30px;
                line-height: 1.3;
                letter-spacing: -.9px;
                margin: 0 30px;
                @media #{$lg} {
                    margin: 0 0;
                }
                @media #{$xs} {
                    font-size: 23px;
                    letter-spacing: -0.3px;
                }
                @media #{$sm} {
                    font-size: 25px;
                    letter-spacing: -0.35px;
                }
            }
        }
        &-bottom {
            @include flexbox();
            padding-top: 35px;
            margin-top: 35px;
            position: relative;
            flex-wrap: wrap;
            gap: 12px 0;
            @media #{$xl} {
                padding-top: 30px;
                margin-top: 25px;
            }
            &::before {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 8px;
                background-image: url(../img/bg/line3.png);
                opacity: .6;
            }
            & .post__activity {
                margin-right: 20px;
                @media #{$xs} {
                    gap: 10px 15px;
                }
            }
        }
        &-read-more {
            margin-left: auto;
            & a {
                display: block;
                text-transform: uppercase;
                font-size: 14px;
                font-weight: var(--tg-fw-bold);
                color: var(--tg-heading-color);
                &:hover {
                    color: var(--tg-theme-primary);
                }
                & i {
                    color: var(--tg-theme-primary);
                    margin-left: 3px;
                    font-size: 16px;
                }
            }
        }
    }
}