@import '../../scss/variables.scss';



.news-container {
    .news-categories {
        background-color: var(--color-primary);
        display: flex;
        margin: 0 0 30px;
        padding: 0;
        list-style: none;

        li {
            color: #ffffff;
            position: relative;
            width: 100%;
            display: flex;
            align-items: center;

            &:hover,
            &.active {
                background-color: #ffffff;
                color: var(--color-primary);
            }

            // &:not(:last-child)::after {
            //   width: 1px;
            //   content: "";
            //   background: #fff;
            //   height: 20px;
            //   position: absolute;
            //   right: 0;
            //   top: 50%;
            //   transform: translateY(-50%);
            // }

            a {
                color: inherit;
                display: inline-block;
                font-size: 15px;
                padding: 6px 14px;
                text-align: center;
                text-decoration: none;
                width: 100%;
            }
        }
    }

    .large {
        .single-news-wrapper {
            .single-news-details-wrapper {
                overflow: hidden;
                position: relative;

                &:hover img {
                    transform: scale(1.1);
                }

                img {
                    height: 100%;
                    max-height: 300px;
                    object-fit: cover;
                    transition: transform 0.3s;
                    width: 100%;
                }

                .single-news-details {
                    position: absolute;
                    bottom: 10px;
                    left: 10px;
                    right: 10px;
                    text-shadow: 2px 2px 8px #000;
                }
            }
        }
    }

    .category-news {
        .category-title {
            border-left: 4px solid $color-secondary;
            padding-left: 10px;
        }

        .single-news-wrapper {
            text-decoration: none;
            width: 100%;

            &:hover .single_news-title {
                text-decoration: underline;
            }

            .single-news-details {
                color: #000;

                .image-wrapper {
                    padding-top: 56.25%;
                    position: relative;
                    width: 100%;

                    img {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }

        }
    }

    .latest-news {
        h5 {
            border-left: 4px solid $color-secondary;
            padding-left: 10px;
        }

        .single-latest-news {
            a {
                color: #000;

                &:hover {
                    .single_news-title {
                        text-decoration: underline;
                    }
                }
            }

            .image-wrapper {
                padding-top: calc(50% * 9 / 16);
                position: relative;
                width: 40%;

                img {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 5px;
                    transition: 0.2s all ease-in;
                }

                a:hover {
                    img {
                        filter: brightness(0.75);
                    }
                }
            }

            .news-info {
                width: 60%;

                .category {
                    a {
                        color: var(--color-golden-2);
                        font-weight: 600;
                    }
                }
            }
        }
    }
}

.single-news-details-wrapper::before {
    content: "";
    width: 100%;
    position: absolute;
    background: rgba(0, 0, 0, .1);
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
}

@media screen and (max-width:767px) {
    .category-news>div:first-child {
        order: 2;
    }
}