@import '../../../../assets/scss/abstracts/variables';
@import '../../../../assets/scss/abstracts/mixins';

.rdg-blocks .rdg-latest-post {
    width: 100%;

    .title {
        width: 100%;
        display: flex;

        h1, h2, h3, span {
            margin: 0;
            font-weight: 400;
            font-size: var(--font-size);
            line-height: var(--line-height);
    
            @media (max-width: $breakpoint-lg) {
                & {
                    font-size: var(--font-size-lg);
                    line-height: var(--line-height-lg);
                }
            }
    
            @media (max-width: $breakpoint-md) {
                & {
                    font-size: var(--font-size-md);
                    line-height: var(--line-height-md);
                }
            }
    
            @media (max-width: $breakpoint-sm) {
                & {
                    font-size: var(--font-size-sm);
                    line-height: var(--line-height-sm);
                }
            }
        }
    }

    .posts {
        @media (max-width: $breakpoint-xl) {
            & {
                padding: 0;
                width: 100%;
            }
        }

        .item {
            display: flex;
            padding-top: 1rem;
            padding-bottom: 1rem;
            border-top: var(--width-separator-latest-post) solid var(--color-separator-latest-post);

            @media (max-width: 350px) {
                & {
                    flex-direction: column-reverse;
                }
            }

            &:first-of-type {
                padding-top: 0;
                border-top: none;

                &.first-item-line {
                    padding-top: 1rem;
                    border-top: var(--width-separator-latest-post) solid var(--color-separator-latest-post);
                }
            }

            .content {
                width: 88%;
                display: flex;
                margin-right: 1rem;
                flex-direction: column;

                @media (max-width: $breakpoint-lg) {
                    & {
                        width: 85%;
                    }
                }

                @media (max-width: $breakpoint-md) {
                    & {
                        width: 70%;
                    }
                }

                @media (max-width: $breakpoint-sm) {
                    & {
                        width: 70%;
                    }
                }

                @media (max-width: 350px) {
                    & {
                        width: 100%;
                        margin-right: 0;
                        margin-top: .5rem;
                    }
                }

                .title {
                    text-transform: uppercase;
                    color: var(--color-latest-post-title);

                    a {
                        color: var(--color-latest-post-title);
                        text-decoration: none !important;
                        transition: all 0.3s ease-in-out;
                        
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        text-overflow: ellipsis;

                        &:hover {
                            color: var(--color-latest-post-title-hover);
                        }
                    }
                }

                .description {
                    margin-top: .4rem;
                    color: var(--color-latest-post-description);

                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;

                    @media (max-width: $breakpoint-md) {
                        & {
                            -webkit-line-clamp: 3;
                        }
                    }

                    @media (max-width: 350px) {
                        & {
                            -webkit-line-clamp: 4;
                        }
                    }
                }

                .published {
                    span {
                        color: var(--color-latest-post-published);
                    }
                }
            }

            .image {
                width: 12%;
                display: flex;
                height: 8rem;
                border-radius: .5rem;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center top;

                @media (max-width: $breakpoint-lg) {
                    & {
                        width: 15%;
                        height: 7rem;
                    }
                }

                @media (max-width: $breakpoint-md) {
                    & {
                        width: 30%;
                        height: 7rem;
                    }
                }

                @media (max-width: $breakpoint-sm) {
                    & {
                        width: 30%;
                        height: 7rem;
                    }
                }

                @media (max-width: 350px) {
                    & {
                        width: 100%;
                        height: 15rem;
                    }
                }
            }
        }
    }
}

.acf-block-preview {
    .rdg-latest-post {
        width: 100%;
        left: 0;
        right: 0;
        margin-left: 0;
        margin-right: 0;
    }
}
