/**
 * #.# Styles
 *
 * CSS for both Frontend+Backend.
 */

.wp-block-sno-block-snolab-recent-news {
    padding: 0 0 5rem 0;

    @media only screen and (max-width:35em) {
        padding: 2.5rem 0 5rem;
    }

    .heading {
        margin-bottom: 2.6rem;

        @media only screen and (min-width:55em) {
            margin-bottom: 3.4rem;
        }
    }

    ul.recent-news {
        list-style: none;
        padding: 0;
        margin: 0;
        
        li {
            margin-bottom: 0;

            // Offset border
            &:not(:first-child){
                margin-top: -1px;
            }

            &:first-of-type {
                .news-card {
                    .title {
                        font-size: 3.6rem;
                        font-weight: bold;
                        line-height: 1.2;
                        max-width: 35ch;

                        @media only screen and (max-width:35em) {
                            flex: 1 1 100%;
                            font-size: 2rem;
                        }
                    }
                }
            }

            .news-card {
                display: block;
                text-decoration: none;
                transition: 0.15s ease all;
                
                .inner {
                    display: flex;
                    align-items: center;
                    position: relative;
                    padding: 3.8rem 0;
                    border-top: 1px solid $primary;
                    border-bottom: 1px solid $primary;

                    @media only screen and (max-width:35em) {
                        flex-wrap: wrap;
                        flex-direction: column-reverse;
                        align-items: flex-start;
                        padding: 2.4rem 0;

                        .details {
                            margin-top: 1.2rem;
                        }

                        .cat-icon {
                            font-size: 3rem;
                        }
                    }
                }

                @media only screen and (min-width:35em) {
                    .details {
                        display: flex;
                        align-items: center;
                    }
                }

                &:hover,
                &:focus {
                    background-color: $primary;
                    color: white;

                    .icon-arrow-right {
                        color: white;
                    }

                    .date {
                        @media only screen and (max-width:35em) {
                            border-right: 2px solid white;
                        }
                    }
                }

                .cat-icon {
                    position: relative;
                    display: inline-block;
                    font-size: 6.5rem;
                    margin-right: 2.8rem;
                    line-height: 0.5;
                    max-width: 50ch;

                    &::before {
                        position: relative;
                        top: 0.5rem;

                        @media only screen and (max-width:35em) {
                            top: 0.75rem;
                        }
                    }
                }

                .date {
                    display: inline-block;
                    font-size: 1.8rem;
                    margin-right: 3.5rem;
                    font-weight: normal;
                    transition: 0.15s ease all;
                    min-width: 10.5rem;

                    @media only screen and (max-width:35em) {
                        font-size: 1.4rem;
                        border-right: 2px solid $primary;
                        margin-right: 1rem;
                        padding-right: 1.35rem;
                        font-weight: bold;
                        min-width: initial;
                    }
                }

                .title {
                    font-size: 2.4rem;
                    line-height: 1.2;
                    letter-spacing: -0.03em;

                    @media only screen and (max-width:35em) {
                        font-size: 1.8rem;
                        flex: 1 1 100%;
                    }
                }

                .icon-arrow-right {
                    position: absolute;
                    right: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    color: transparent;
                    transition: 0.15s ease all;

                    @media only screen and (max-width:35em) {
                        top: initial;
                        bottom: 6%;
                        color: $primary;
                    }
                }
            }
        }
    }

    .view-all-wrapper {
        position: relative;
        margin-top: 4.8rem;

        a {
            font-size: 1.8rem;
            font-weight: bold;
            text-decoration: none;

            .icon-arrow-right {
                position: relative;
                top: 0.2rem;
                margin-left: 1.6rem;
                font-size: 1.6rem;
            }
        }
    }
}