@import url('tokens.css');
@import url('tokens-primitives.css');

/* Card Sideproject component styles */

.card-sideproject
{
    background: var(--card-sideproject-bg);
    border: 1px solid var(--card-sideproject-border);
    border-radius: var(--card-sideproject-radius);
    padding: var(--card-sideproject-padding);
    box-shadow: var(--card-shadow);
    width: var(--card-width);
    height: var(--card-height);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 708px;
    width:100%;
    gap:48px;
}
.card-sideproject-header
{
display:flex;
flex-direction: row;
justify-content: space-between;
padding-bottom: var(--space-component-lg);
color: var(--neutral-90);
}
.card-sideproject h2
{
    font-family: var(--font-family-primary);
    font-size: var(--font-size-2xl);
    padding-bottom: var(--space-component-xs);
}
.card-sideproject p
{   
    padding-top: var(--space-component-xs);
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
    text-align: left;
    color: var(--neutral-60);
}
.card-sideproject-badge
{
    display: flex;
    flex-direction: row;
    gap: var(--space-component-xs);
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap; 
}
/*+++++++++++++++++++++ Card STATES +++++++++++++++++++++*/
.card-sideproject:hover
{
    background: var(--card-sideproject-bg-inverse);
    transform: translateX( var(--base-8));
    transition: transform 0.4s ease-in-out;
    box-shadow: var(--card-sideproject-shadow-hover);
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6" fill="black" opacity="0.3"/></svg>'), auto;
}
.card-sideproject:active
{
    border: 2px solid var(--card-sideproject-border-focus);  
}
.card-sideproject:focus
{
    border: 2px solid var(--card-sideproject-border-focus);   
}
.card-sideproject-inactive
{
    cursor: wait !important;
    
}
/*+++++++++++++++++++++ CArd MEDIA QUERY +++++++++++++++++++++*/
@media screen and (max-width: 480px) 
{

    .card-sideproject-header
    {
   
        flex-direction: column;
        gap: var(--space-component-xs);
    }
}