@import "mixins";

.ftm_author_content_wrapper{
    .ftm-author-top {
        display: flex;
        flex-direction: column;
        align-content: flex-start;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        -moz-column-gap: 10px;
        column-gap: 10px;
        margin-bottom: 20px;
        row-gap: 10px;
    
        .author-avatar-wrapper {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: flex-start;
            align-items: center;
            min-width: 114px;
    
            > img.avatar {
                width: 96px;
                height: 96px;
                aspect-ratio: 1 / 1;
                object-fit: contain;
                border-radius: 50%;
            }
        }
    
        .author-info-wrapper {
            display: flex;
            flex-direction: column;
            align-content: flex-start;
            justify-content: center;
            align-items: flex-start;
    
            .top-info {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-content: flex-start;
                justify-content: flex-start;
                align-items: flex-start;
                margin-bottom: 12px;                
    
                > h1 {
                    margin: 10px 0px;
                    font-family: helvetica;
                    color: #000;
                    border-bottom: 2px solid #68bf36;
                    padding-bottom: 16px;
                }
    
                > .sub-info {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    align-content: flex-start;
                    justify-content: flex-start;
                    align-items: center;
                    column-gap: 5px;
    
                    > label {
                        font-size: 12px;
                        font-family: helvetica;
                        color: #64b734;
                    }
    
                    > span {
                        font-size: 12px;
                        font-family: helvetica;
                        color: #000;
                        font-weight: 100;
                    }
                }
            }
    
            .general-info-wrapper {
                display: flex;
                flex-direction: column;
                align-content: center;
                justify-content: center;
                align-items: center;
    
                > .left-panel {
                    width: 100%;
                    font-family: helvetica;
                    font-size: 15px;
                    font-weight: 100;
                    text-align: left;
                    line-height: 29px;
                    padding-right: 0px;
    
                    > p {
                        font-family: inherit;
                        font-size: inherit;
                        font-weight: inherit;
                        text-align: inherit;
                        line-height: inherit;
                    }

                    .bottom-buttons {
                        display: flex;
                        flex-direction: row;
                        align-content: center;
                        justify-content: center;
                        align-items: center;
                        flex-wrap: wrap;
                        width: 100%;
                        margin: 14px auto;

                        .contact-link {
                            display: flex;
                            flex-direction: row;
                            flex-wrap: nowrap;
                            align-content: center;
                            justify-content: flex-start;
                            align-items: center;
                            width: 50%;
                            min-width: 315px;
                        }

                        .author-media-links {
                            display: flex;
                            flex-direction: row;
                            flex-wrap: wrap;
                            align-content: center;
                            justify-content: center;
                            align-items: center;
                            width: 100%;
                            max-width: 50%;

                            .dashicons {
                                font-size: 30px;
                                color: #3d3c3c;
                                width: 40px;
                                height: 40px;
                                display: flex;
                                flex-direction: row;
                                flex-wrap: nowrap;
                                align-content: center;
                                justify-content: center;
                                align-items: center;
                            }
                        }
                    }
                }
                
                > .right-panel {
                    width: 25%;
                    min-width: 245px;
    
                    .favorites-title {
                        border-bottom: 2px solid #cccccc63;
                        color: #000;
                        font-size: 16px;
                        font-family: helvetica;
                        font-weight: 400;
                        margin-bottom: 10px;
                        max-width: 86%;
                    }
    
                    .favorites-list {
                        display: flex;
                        flex-direction: row;
                        flex-wrap: wrap;
                        align-content: flex-start;
                        justify-content: flex-start;
                        align-items: flex-start;
    
                        > div{
                            display: flex;
                            flex-direction: row;
                            flex-wrap: nowrap;
                            align-content: flex-start;
                            justify-content: flex-start;
                            align-items: flex-start;
                            width: 100%;
    
                            > label {
                                font-family: helvetica;
                                font-weight: 100;
                                font-size: 12px;
                                text-wrap: wrap;
                                padding-right: 5px;
                                display: inline-block;
                            }
                            
                            > span {
                                max-width: 50%;
                                width: 100%;
                                font-family: helvetica;
                                font-weight: 600;
                                font-size: 12px;
                                text-align: left;
                                text-wrap: wrap;
                                display: inline-flex;
                                justify-content: flex-start;
                                align-items: center;
                                align-content: center;
                                flex-direction: row;
                                height: 100%;
                            }
                        }                    
                    }
                }
            }
        }
    
    }

    .latest-posts-title {
        text-align: left;
        border-bottom: 2px solid #68bf36;
        width: 100%;
        margin-bottom: 15px;

        > h3 {
            margin: 0;
            color: #000;
            font-family: helvetica;
            font-size: 20px;
        }
    }
}


@mixin xs {
    .ftm_author_content_wrapper {
        .ftm-author-top {
            display: flex;
            flex-direction: column;
            align-content: flex-start;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            -moz-column-gap: 10px;
            column-gap: 10px;
            margin-bottom: 20px;
            row-gap: 10px;

            .author-info-wrapper {
                .general-info-wrapper {
                    display: flex;
                    flex-direction: row;
                    align-content: flex-start;
                    justify-content: center;
                    align-items: flex-start;

                    >.left-panel {
                        width: 75%;
                        font-family: helvetica;
                        font-size: 15px;
                        font-weight: 100;
                        text-align: left;
                        line-height: 29px;
                        padding-right: 30px;

                        .bottom-buttons {
                            display: flex;
                            flex-direction: row;
                            align-content: center;
                            justify-content: space-between;
                            align-items: center;
                            flex-wrap: wrap;
                            width: 100%;
                            margin: unset;

                            .author-media-links {
                                display: flex;
                                flex-direction: row;
                                flex-wrap: wrap;
                                align-content: center;
                                justify-content: flex-end;
                                align-items: center;
                                width: 100%;
                                max-width: 50%;
                            }
                        }
                    }
                }
            }
        }
    }
}

@include sm {
    .ftm_author_content_wrapper{
        .ftm-author-top {
            flex-direction: row;
            align-content: flex-start;
            justify-content: center;
            align-items: flex-start;
            margin-top: 20px;
            column-gap: 10px;
            row-gap: unset;

            .author-info-wrapper {
                .general-info-wrapper {
                    flex-direction: row;
                    align-content: flex-start;
                    justify-content: center;
                    align-items: flex-start;

                    >.left-panel {
                        margin-right: 10px;
                        .bottom-buttons {
                            flex-direction: row;
                            justify-content: center;

                            .author-media-links {
                                flex-direction: row;
                                align-content: center;
                                justify-content: center;
                                align-items: center;
                            }
                        }
                    }
                }
            }
        }
    }
}

@include md {
    .ftm_author_content_wrapper{
        .ftm-author-top {
            flex-direction: row;
            align-content: flex-start;
            justify-content: center;
            align-items: flex-start;
            margin-top: 20px;
            column-gap: 10px;
            row-gap: unset;

            .author-info-wrapper {
                .general-info-wrapper {
                    >.left-panel {       
                        margin-right: 20px;

                        .bottom-buttons {
                            display: flex;
                            flex-direction: row;
                            align-content: center;
                            justify-content: space-between;
                            align-items: center;
                            flex-wrap: wrap;
                            width: 100%;
    
                            .contact-link {
                                display: flex;
                                flex-direction: row;
                                flex-wrap: nowrap;
                                align-content: center;
                                justify-content: flex-start;
                                align-items: center;
                                width: 50%;
                                min-width: 315px;
                            }
    
                            .author-media-links {
                                display: flex;
                                flex-direction: row;
                                flex-wrap: wrap;
                                align-content: center;
                                justify-content: flex-end;
                                align-items: center;
                                width: 100%;
                                max-width: 50%;
    
                                .dashicons {
                                    font-size: 30px;
                                    color: #3d3c3c;
                                    width: 40px;
                                    height: 40px;
                                    display: flex;
                                    flex-direction: row;
                                    flex-wrap: nowrap;
                                    align-content: center;
                                    justify-content: center;
                                    align-items: center;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}