@import "~css/_mixins.scss";
@import "~css/posts.scss";


.single-article {
    padding-top: #{toRem(60px)};
    background-color: var(--sme-body-background);

    &.not-author {
        header {
            .meta-data {
                padding-left: 0;
            }
        }
    }

    header {
        margin-bottom: #{toRem(40px)};

        .authors {
            display: flex;
            flex-wrap: wrap;
            margin: 0 #{toRem(-15px)} #{toRem(8px)};

            .author {
                width: 50%;
                padding: 0 #{toRem(15px)};
                margin-bottom: #{toRem(24px)};

                &:nth-last-of-type(-n+2) {
                    margin-bottom: 0;
                }

                .inner {
                    display: flex;
                    align-items: flex-start;
                }


                .image {
                    width: #{toRem(50px)};
                    height: #{toRem(50px)};
                    margin-right: #{toRem(16px)};
                    flex-shrink: 0;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        border-radius: 50%;
                    }
                }

                .text {
                    strong {
                        line-height: 150%;
                    }

                    p {
                        margin-bottom: 0;
                        font-size: var(--sme-fs-md-p);
                        line-height: 156.25%;
                    }
                }
            }
        }

        .meta-data {
            display: flex;
            align-items: flex-start;
            padding-left: #{toRem(66px)};
            margin-bottom: #{toRem(24px)};

            time {
                color: var(--sme-primary-color);
                font-size: var(--sme-fs-md-p);
                line-height: var(--sme-lh-md-p);
                flex-shrink: 0;
                height: #{toRem(36px)};
                display: flex;
                align-items: center;
            }

            .tags {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                margin-bottom: 0;
                position: relative;
                margin-left: #{toRem(37px)};
                margin-bottom: #{toRem(-16px)};

                &::after {
                    content: '';
                    display: block;
                    width: #{toRem(5px)};
                    height: #{toRem(5px)};
                    border-radius: 50%;
                    background-color: #707070;
                    position: absolute;
                    top: #{toRem(16px)};
                    left: #{toRem(-21px)};
                }

                li {
                    color: var(--sme-primary-color);
                    font-size: var(--sme-fs-md-p);
                    line-height: var(--sme-lh-md-p);
                    background-color: var(--sme-light-background-color);
                    border-radius: #{toRem(50px)};
                    padding: #{toRem(7px)} #{toRem(23px)};
                    margin-right: #{toRem(16px)};
                    margin-bottom: #{toRem(16px)};

                    &:last-of-type {
                        margin-right: 0;
                    }
                }
            }
        }

        h1 {
            color: var(--sme-primary-text-color);
        }
    }

    .content {
        .wp-block-image {
            display: flex;
            margin-bottom: #{toRem(40px)};

            img{
                border-radius: #{toRem(16px)};
            }
        }

        p {
            margin-bottom: #{toRem(20px)};
        }

        h1 {
            font-size: var(--sme-fs-h2);
            line-height: var(--sme-lh-h2);
        }

        h2 {
            font-size: var(--sme-fs-h3);
            line-height: var(--sme-lh-h3);
        }

        h3 {
            font-size: var(--sme-fs-h4);
            line-height: var(--sme-lh-h4);
        }

        h1,
        h2,
        h3 {
            margin-top: #{toRem(40px)};
            margin-bottom: #{toRem(20px)};

        }

        &>:last-child {
            margin-bottom: 0;
        }
    }

    .related-posts {
        .content {
            h2 {
                font-size: var(--sme-fs-h2);
                line-height: var(--sme-lh-h2);
                color: var(--sme-primary-text-color);
                margin-bottom: #{toRem(24px)};
                margin-top: 0;
            }

            .posts {
                margin: 0 #{toRem(-11.49px)} 0;

                .blog-post {
                    padding: 0 #{toRem(11.5px)};
                    margin-bottom: 0;
                }

                .title {
                    margin-top: 0;
                }
            }
        }
    }

    .share-section {
        .content-block {
            .title-section {
                font-size: var(--sme-fs-h2);
                line-height: var(--sme-lh-h2);
            }

            p {
                text-align: center;
            }

            .share-links {
                margin-top: #{toRem(40px)};
                margin-bottom: #{toRem(24px)};

                ul {
                    display: flex;
                    margin-bottom: 0;
                    justify-content: center;
                    flex-wrap: wrap;
                    margin-bottom: #{toRem(-10px)};

                    li {
                        padding: 0 #{toRem(20px)};
                        margin-bottom: #{toRem(10px)};
                    }

                    a {
                        height: #{toRem(45px)};
                        width: #{toRem(45px)};
                        display: block;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }

            .yellow {
                color: var(--sme-active-text-color);
                text-align: center;
                margin-bottom: 0;
            }
        }
    }
}

@include breakpoint(md, "max-width") {
    .single-article{
        padding-top: #{toRem(30px)};
        header{
            margin-bottom: #{toRem(20px)};
            .meta-data{
                flex-direction: column;
                margin-bottom: #{toRem(20px)};
                .tags{
                    margin-left: 0;
                    &::after{
                        content: none;
                    }
                }
            }
        }
        .content{
            .wp-block-image{
                margin-bottom: #{toRem(24px)};
            }
        }
        .related-posts{
            .content{
                .posts{
                    margin: 0;
                    .blog-post{
                        width: 100%;
                        padding: 0;
                        margin-bottom: #{toRem(24px)};

                        &:last-of-type{
                            margin-bottom: 0;
                        }
                    }
                }
            }
        }
    }
}

@include breakpoint(sm, "max-width") {
    .single-article{
        header{
            .authors{
                margin: 0 0 #{toRem(8px)};
                .author{
                    width: 100%;
                    padding: 0;
                }
            }
        }

        .share-section{
            .content-block{
                .share-links{
                    ul{
                        li{
                            padding: 0 #{16px};
                        }
                    }
                }
            }
        }
    }
}