@import url("./header.css");
@import url("./aside.css");
@import url("./footer.css");
@import url("./perfil.css");
@import url("./inicial-home.css");
@import url("./publicar-home.css");
@import url("./plus-page.css");
@import url("./publicar-form.css");
@import url("./views-pages.css");
@import url("./pesquisa.css");
@import url("./sobre-page.css");
@import url("./modals.css");
@import url("./editProfile.css");

.home__header,
.home__footer,
.home__content {
    padding: 0 clamp(.2rem, 3vw, 3rem);
    max-width: 1440px;
    margin: auto;
}

/* Código dos cards de fichas */
.card__ficha {
    width: clamp(120px, 100vw, 220px);
    display: flex;
    flex-flow: column nowrap;
    gap: 10px;
    cursor: pointer;
    position: relative;
    --bdrr: 20px;

    & .editIcon {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 100;
    }

    & .card__content {
        position: relative;
        border-radius: var(--bdrr);
        overflow: hidden;
        height: clamp(180px, 100vh, 330px);

        & img {
            width: 100%;
            transform: scale(1.1);
            margin: 0;
            transition: all ease .3s;
            opacity: .8;
            object-fit: cover;
            height: inherit;

        }

        &:hover {
            & img {
                opacity: 1;
                transform: scale(1.3);
            }
        }

        & .card-title {
            background: linear-gradient(to top, rgba(0, 0, 0, 0.514)20%, transparent);
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            padding: 1rem 0;

            & .subtitle {
                color: #ffffff;
                text-align: center;
                font-size: calc(var(--fs-subtitle) - 5px);
            }
        }
    }

    & .card__autor {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--cor-texto);

        & .usuario {
            display: flex;
            align-items: center;
            gap: 10px;

            & img {
                width: 35px;
                height: 35px;
                border-radius: 50%;
                object-fit: cover;
            }

            & .icon-perfil {
                width: 30px;
                height: 30px;
                border-radius: 0;

            }

            & a {
                color: var(--cor-texto);

                &:hover {
                    color: var(--cor-principal);
                }
            }
        }
    }

}

.card__video {
    position: relative;
    width: clamp(180px, 100vw, 250px);
    display: flex;
    flex-flow: column nowrap;
    gap: 10px;
    cursor: pointer;
    --bdrr: 20px;

    & .editIcon {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 100;
    }

    & .card__content {
        position: relative;
        border-radius: var(--bdrr);
        overflow: hidden;
        height: clamp(180px, 100vh, 330px);

        & img {
            width: 100%;
            transform: scale(1.1);
            margin: 0;
            transition: all ease .3s;
            opacity: .8;
            object-fit: cover;
            height: inherit;

        }

        &:hover {
            & img {
                opacity: 1;
                transform: scale(1.3);
            }
        }

        & .card-title {
            background: linear-gradient(to top, rgba(0, 0, 0, 0.514)20%, transparent);
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            padding: 1rem;
            color: #ffffff;


        }
    }

}

.card__resenha {
    width: clamp(180px, 100vw, 280px);
    display: flex;
    flex-flow: column nowrap;
    cursor: pointer;
    --bdrr: 20px;
    border-radius: var(--bdrr);
    box-shadow: 0 0 8px #0000009d;
    position: relative;

    & .editIcon {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 100;
    }

    & .card__img {
        position: relative;
        width: 100%;
        overflow: hidden;
        border-radius: var(--bdrr) var(--bdrr) 0 0;
        height: clamp(135px, 100vw, 210px);

        & img.img__resenha {
            width: 100%;
            transform: scale(1.1);
            object-fit: cover;
            transition: transform .4s;
            height: 100%;
        }

        & .usuario {
            background: #0000007a;
            position: absolute;
            bottom: 0;
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            padding: 0.4em;

            & img {
                width: 35px;
                height: 35px;
                border-radius: 50%;
                object-fit: cover;
            }

            & .icon-perfil {
                border-radius: 0;
                width: 30px;
                height: 30px;

            }

            & a {
                color: white;

                &:hover {
                    color: var(--cor-principal);
                }
            }
        }

        &:hover {
            & img.img__resenha {
                transform: scale(1.3);
            }
        }
    }

    & .card__content {
        padding: 1.2rem 1.5rem;
        padding-bottom: calc(1.5rem + 35px);
        background: var(--cor-containers);
        border-radius: 0 0 var(--bdrr) var(--bdrr);
        color: var(--cor-texto);
        position: relative;
        flex-grow: 1;

        & .text {
            width: 100%;
            word-wrap: break-word;
            padding-right: .3rem;
        }

        & .btn {
            border: 10px solid var(--cor-containers);
            border-radius: 50%;
            padding: .3rem .8rem;
            font-size: var(--fs-title);
            position: absolute;
            right: -25px;
            bottom: 25px;
            box-shadow: 5px 0 8px #0000004f;

        }
    }


}



.userLink {
    display: flex;
    align-items: center;
    background: var(--cor-containers);
    width: fit-content;
    color: var(--cor-texto);
    padding: .7rem;
    gap: 10px;
    border-radius: 5px;
    box-shadow: 0 0 3px var(--cor-texto);

    &:hover {
        color: var(--cor-principal);
    }

    & .userImg {
        width: 30px;
        height: 30px;
        object-fit: cover;
        border-radius: 50%;
    }

    & .icon-perfil{
        width: 20px;
        height: 20px;
    }
}

.tag {
    background: var(--cor-secundaria);
    color: white;
    padding: 5px 10px;
    margin: 5px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    width: fit-content;

    & span {
        background: transparent;
        color: white;
        outline: none;
        padding: 2px;
        border-radius: 50%;
        font-size: 14px;

        &:hover {
            background: var(--cor-secundaria-hover);
        }
    }
}

.comentarios__container {
    display: flex;
    flex-flow: column nowrap;
    align-items: start;

    & .subtitle {
        text-align: center;
        color: var(--cor-secundaria);
    }

    & .comment__form {
        width: 100%;
        max-width: 700px;

        & .input__container textarea {
            resize: vertical;
            max-height: 200px;
        }
    }

    & .comentarios {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        padding: 2rem 0;
        gap: 1rem;
        width: 100%;
        max-width: 700px;

        & .comment__item {
            position: relative;
            color: var(--cor-texto);
            width: 100%;

            & p {
                word-wrap: break-word;
            }

            & .row {
                position: relative;
                padding: 1rem;
                border: 2px solid var(--cor-secundaria);
                border-radius: 10px;
                padding-top: 60px;
                background: var(--cor-containers);

                & .comment__user {
                    display: flex;
                    position: absolute;
                    align-items: center;
                    gap: 1.5rem;
                    top: -25px;
                    color: var(--cor-texto);

                    & .userImg {
                        width: 80px;
                        height: 80px;
                        border-radius: 50%;
                        object-fit: cover;
                        border: 2px solid var(--cor-secundaria);
                    }

                }
            }


            & .avaliacao__stars {
                justify-content: end;

                & i {
                    font-size: 18px;
                }
            }
        }
    }
}



@media (min-width:769px) {

    .home__header,
    .home__footer,
    .home__content,
    .slogan {
        padding-left: calc(var(--aside-width) + clamp(1rem, 10vw, 1.4rem)) !important;
    }
}