/*=========================================
    GRID DE FAVORITOS
=========================================*/

.favorites-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fill, minmax(280px, 340px));

    gap:25px;

    margin-top:30px;

    justify-content:start;

}


/*=========================================
    TARJETA
=========================================*/

.favorite-card{

    width:100%;

    max-width:340px;

    background:var(--bg-card);

    border:1px solid var(--border);

    border-radius:18px;

    overflow:hidden;

    transition:0.3s;

}


.favorite-card:hover{

    transform:translateY(-5px);

    box-shadow:0 10px 30px rgba(0,0,0,.25);

}


/*=========================================
    IMAGEN
=========================================*/

.favorite-image{

    position:relative;

    width:100%;

    height:190px;

    overflow:hidden;

}


.favorite-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/*=========================================
    BOTÓN FAVORITO
=========================================*/

.favorite-btn{

    position:absolute;

    top:15px;

    right:15px;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:rgba(0,0,0,.65);

    color:white;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

}


.favorite-btn.activo{

    color:#ffd43b;

}


/*=========================================
    CONTENIDO
=========================================*/

.favorite-content{

    padding:20px;

}


.favorite-content .project-category{

    color:var(--primary);

    font-size:13px;

    font-weight:600;

}


.favorite-content h3{

    margin:8px 0;

    color:var(--text);

    font-size:20px;

}


.favorite-content p{

    color:var(--text-muted);

    line-height:1.6;

    font-size:14px;

}


/*=========================================
    INFORMACIÓN
=========================================*/

.favorite-info{

    display:flex;

    flex-direction:column;

    gap:8px;

    margin-top:15px;

    color:var(--text-muted);

    font-size:13px;

}


.favorite-info span{

    display:flex;

    align-items:center;

    gap:7px;

}


/*=========================================
    ESTADÍSTICAS
=========================================*/

.favorite-stats{

    display:flex;

    gap:18px;

    margin:18px 0;

    color:var(--text-muted);

    font-size:13px;

}


/*=========================================
    BOTÓN VER PROYECTO
=========================================*/

.btn-favorite{

    display:block;

    width:100%;

    text-align:center;

    padding:11px;

    border-radius:10px;

    background:linear-gradient(
        90deg,
        var(--secondary),
        var(--primary)
    );

    color:white;

    text-decoration:none;

    font-weight:600;

    transition:0.3s;

}


.btn-favorite:hover{

    transform:translateY(-2px);

}