import { styled } from "styled-components";
import { device } from "../../common/Devices";
import { Colors } from "../../common/variable";

export const BlogListSection = styled.section`
    margin-bottom: -60px;
    .blog-col{
        margin-bottom: 60px;
    }
    .blog-card{
        width: 100%;
        height: 100%;
        .blog-image{
            border: 1px solid ${Colors.white};
            background: linear-gradient(180deg, #F4F4F4 0%,  ${Colors.white} 100%);
            width: 100%;
            height: 334px;
            overflow: hidden;
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: all 0.8s;
            }
            
        }
        .blog-content{
            padding-top: 15px;
            h5{
                padding-bottom: 18px;
                margin-bottom: 20px;
                position: relative;
                color: ${Colors.body};
                font-weight: 600;
                transition: all 0.4s;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;  
                overflow: hidden;
                padding-right: 22px;
                &::before{
                    content: '';
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 75px;
                    height: 1px;
                    background: ${Colors.black};
                    transition: all 0.4s;
                }
            }
            p{
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;  
                overflow: hidden;
                color: ${Colors.gray_33};
                letter-spacing: 0.2px;
                margin-bottom: 20px;
            }
            .date{
                margin-bottom:15px;
            }
            .link{
                font-size: 20px;
                line-height: 1.5;
                font-weight: 500;
                letter-spacing: 0.2px;
                color: ${Colors.primary};
                svg{
                    transition: all 0.8s;
                }
                &:hover{
                    svg{
                        transform: translateX(10px);
                        transition: all 0.8s;
                    }
                }
            }
        }
        &:hover{
            .blog-image{
                img{
                    transform: scale(1.1);
                    transition: all 0.8s;
                }
            }
        }
    }
    .blog-card.skeleton{
        background: ${Colors.white};
        padding: 10px;
        border-radius: 5px;
        .blog-image {
            background: transparent;
            border: none;
            span{
                display: block;
                height: 100%;
                border-radius: 5px;
            }
        }
    }
    @media ${device.laptop}{
        .blog-card {
            .blog-content {
                h5{
                    padding-right: 0;
                }
            }
        }
    }
    @media ${device.laptopS}{
        margin-bottom: -40px;
        .blog-col{
            margin-bottom: 40px;
        }
        .blog-card {
            .blog-image{

            }
        }
    }

    @media ${device.tablet}{
        margin-bottom: -24px;
        .blog-col{
            margin-bottom: 24px;
        }
        .blog-card {
            .blog-content {
                .link{
                    font-size: 16px;
                    svg{
                        width: 22px;
                    }
                }
            }
        }
    }

    @media ${device.mobile}{
        .blog-card {
            .blog-image{
                height: 300px;
            }
            .blog-content {
                h5{
                    padding-bottom: 10px;
                    margin-bottom: 16px;
                }
            }
        }
    }
`;