// =============================
// feed.scss
// =============================
// Used for page feed - used in index and categories.

.feed{

    padding: 2rem;
    margin: 2rem;
    max-width: 1000px;
    width: 100%;
    justify-self: center;

    @include flexbox{
        flex-direction: column;
    };

    &__description{
        @include flexbox{
            flex-direction: column;
        };

        color: var(--c-feed-title);

        text-align: center;
        padding: 0 2rem;
        margin-bottom: 2rem;
        min-width: 80%;

        h1{
            margin: 1rem 0 0 0;

            @include for-size('tablet'){
                margin: 0;
            }
        }
    }

    .snippet{

        @include flexbox;
        position: relative;
        width: 100%;
        
        &__link{
            text-decoration: none;
            color: initial;
            width: 100%;
            height: 100%;
            margin: 1rem 0;
            padding: 1rem 2rem;
            box-shadow: inset 0px 0px 14px -4px var(--c-snippetShadow);
            transition: $t-smooth;

            &:hover{
                transform: scale(.99);
                box-shadow: inset 0px 0px 14px -4px var(--c-snippetShadowHover);
            }
        }

        @include for-size('tablet'){
            width: 100%;
            padding: 0;
        }

        &__data{

            @include flexbox{
                flex-direction: column;
                align-items: flex-start;
            };

            &__metadata{
                font-family: var(--f-header);
                
                @include flexbox;

                &__category{
                    text-transform: uppercase;
                    margin: 0;
                    @include flexbox;

                    &__title{
                        color: var(--c-noCategoryText);
                        background: var(--c-noCategoryBackground);                        
                        padding: .2rem .5rem;
                    }

                    
                    @include for-size('tablet'){
                        flex-direction: column;

                        p{
                            text-align: center;
                            width: 100%;
                            margin: 0;
                        }
                    }
                }

                &__date{
                    margin: 0 0 0 1rem;
                    color: var(--c-snippetDate);

                    @include for-size('tablet'){
                        margin: 1rem 0 0 0;
                    }
                }

                @include for-size('tablet'){
                    flex-direction: column;
                }
            }
            
            &__header{
                margin: 1rem 0 0 0;
                color: var(--c-articleHeading);

                @include for-size('tablet'){
                    margin: 1rem 0 0 0;
                    text-align: center;
                }
            }

            &__text{

                color: var(--c-snippetHeading);
                margin: 1rem 0 0 0;
            }

            &__author{

                margin: 1.5rem 0 0 0;
                color: var(--c-snippetAuthor);

                @include flexbox{
                    flex-direction: row;
                };

                img{
                    height: 2rem;
                    border-radius: 100%;
                }

                p{
                    margin: 0 0 0 1rem;
                }
            }

            @include for-size('tablet'){
                align-items: center;
            }
        }
        
        &::after{
            content: "";
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            z-index: -1;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            opacity: .2;

            @include for-size('tablet'){
                opacity: .3;
            }
        }
    }

    @include for-size('tablet'){
        padding: 0;
    }
}