@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700&display=swap');
@import "variables/colors.scss";
@import "mixin.scss";

body {
    min-height: 100vh;
    @include display(flex, center, center, none);
    background-color: $bg-body;
    font-family: 'Manrope', sans-serif;
    font-size: 0.8125rem;
    padding: 0.625rem;

    main {
        position: relative;
        width: 45.625rem;
        height: 18.75rem;
        background-color: $white;
        display: grid;
        grid-template-columns: 18.75rem 25rem;
        grid-template-rows: 18.75rem;
        place-items: center;
        border-radius: 0.625rem;
        box-shadow: 0rem 2.5rem 2.5rem -0.625rem rgb(183 199 216 / 30%);

        section img {
            width: 19.375rem;
            height: 18.75rem;
            object-fit: cover;
            object-position: left;
            border-radius: 0.625rem 0 0 0.625rem;
            transition: ease-out 0.3s;

            &:hover {
                transform: scale(1.01);
            }
        }

        .content {
            @include display(flex, none, space-evenly, column);
            width: 100%;
            height: 18.75rem;
            padding: 0.625rem 0.625rem 0.625rem 1.875rem;

            article {
                h1 {
                    font-weight: 700;
                    font-size: 20px;
                    line-height: 1.75rem;
                    letter-spacing: 0.0156rem;
                    color: #48556a;
                    margin-bottom: 1.25rem;

                    &:hover {
                        color: $green;
                        transform: scale(1.01);
                    }
                }

                h2 {
                    font-weight: 500;
                    font-size: 13.12px;
                    line-height: 20px;
                    letter-spacing: 0.0081rem;
                    color: hsla(214, 17%, 51%, 1);
                }
            }

            .info {
                @include display(flex, center, none, none);
                gap: 0.75rem;

                .avatar img {
                    width: 2.875rem;
                    height: 2.5rem;
                    border-radius: 50%;
                }

            }

            .details {
                @include display(flex, none, space-between, row);
                width: 100%;

                .nameAndDate {
                    @include display(flex, none, space-evenly, column);

                    .name {
                        font-weight: 700;
                        font-size: 13px;
                        line-height: 1.1;
                        letter-spacing: 0.0075rem;
                        color: $dark-grey;

                        &:hover {
                            color: $brown;
                        }
                    }

                    .date {
                        font-weight: 500;
                        font-size: 13px;
                        line-height: 1;
                        letter-spacing: 0.0075rem;
                        color: $light-grey
                    }
                }

                .socialButton {
                    button {
                        border: none;
                        width: 2.5rem;
                        height: 2.5rem;
                        @include display(flex, center, center, row);
                        border-radius: 50%;

                        &:hover {
                            background-color: $light-green;
                        }

                        img {
                            &:hover {
                                transform: rotate(-80deg);
                            }
                        }
                    }

                    .socialLinks {
                        opacity: 0;
                        transition: opacity 0.6s ease-out;
                        position: absolute;
                        top: 8.4375rem;
                        right: -2.75rem;

                        .content {
                            @include display(flex, center, space-evenly, row);
                            gap: 0.75rem;
                            background-color: $dark-grey;
                            border-radius: 0.625rem;
                            width: 14.375rem;
                            height: 3.5rem;

                            p {
                                font-weight: 500;
                                color: $light-grey;
                                text-transform: uppercase;
                                opacity: 75%;
                                font-size: 13px;
                                letter-spacing: 5px;
                            }

                            img {
                                filter: brightness(0) invert(100%);
                                width: auto;
                                height: 1.375rem;
                            }
                        }

                        .arrow {
                            background-color: $dark-grey;
                            position: absolute;
                            top: 2.875rem;
                            left: 50%;
                            width: 1.25rem;
                            height: 1.25rem;
                            transform: rotate(45deg);
                        }
                    }
                }
            }
        }
    }

    @media (max-width: $small) {
        main {
            width: 100%;
            max-width: 23.125rem;
            height: 100%;
            display: grid;
            grid-template-columns: 100%;
            grid-template-rows: none;

            section img {
                width: 100%;
                height: 100%;
                max-height: 18.75rem;
                object-position: none;
                border-radius: 0.625rem 0.625rem 0rem 0;
            }

            .content {
                @include display(flex, none, space-between, column);
                width: 100%;
                height: 18.75rem;
                padding: 0 1.5625rem;

                article {
                    h1 {
                        font-size: 16px;
                        line-height: 24px;
                        letter-spacing: 0.2px;
                        margin: 1.625rem 0;
                    }

                    h2 {
                        font-size: 13.12px;
                        line-height: 20px;
                        letter-spacing: 0.0081rem;
                        color: $grey-75;
                    }
                }

                .info {
                    @include display(flex, center, none, none);
                    gap: 0.75rem;
                    margin-bottom: 1.5rem;

                    .avatar img {
                        width: 2.875rem;
                        height: 2.5rem;
                        border-radius: 50%;
                    }

                }

                .details {
                    @include display(flex, none, space-between, row);
                    width: 100%;

                    .nameAndDate {
                        .name {
                            font-weight: 700;
                            font-size: 13px;
                            line-height: 1.1;
                            letter-spacing: 0.0075rem;
                        }

                        .date {
                            font-weight: 500;
                            font-size: 13px;
                            line-height: 1;
                            letter-spacing: 0.0075rem;
                        }
                    }

                    .socialButton {
                        button {
                            z-index: 2;
                            width: 2.5rem;
                            height: 2.5rem;

                            img {
                                z-index: 2;

                                &:hover {
                                    transform: none;
                                }

                                filter: brightness(0) invert(100%);
                            }
                        }

                        .socialLinks {
                            opacity: 0;
                            position: absolute;
                            top: 88%;
                            right: 0;
                            z-index: 1;
                            width: 100%;

                            .content {
                                @include display(flex, none, flex-start, row);
                                gap: 1rem;
                                position: relative;
                                width: 100%;
                                border-radius: 0 0 0.625rem 0.625rem;
                                height: 5rem;

                                a {
                                    img {
                                        object-fit: cover;
                                        max-width: 100%;
                                        width: auto;
                                        height: 1.875rem;
                                    }
                                }
                            }

                            .arrow {
                                display: none;
                            }
                        }
                    }
                }
            }
        }
    }

    @media (max-width: 25rem) {
        h1 {
            margin: 1rem 0 !important;
        }

        .socialLinks {
            top: 86% !important;
            width: 100%;
            gap: 0.125rem;

            .content {
                gap: 0.375rem !important;

                img {
                    height: 1.25rem;
                }
            }
        }
    }
}