/* ==========================================================================
   PORTAL AARCA - CARDS PREMIUM
   ========================================================================== */

.card{
    display:flex;
    flex-direction:column;

    height:100%;

    overflow:hidden;

    background:var(--surface);

    border:1px solid var(--border-color);
    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-sm);

    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        border-color var(--transition-base);
}

.card:hover{
    transform:translateY(-6px);

    border-color:var(--border-color-strong);

    box-shadow:var(--shadow-lg);
}

.card-image{
    position:relative;
    overflow:hidden;
}

.card-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;

    transition:transform .45s ease;
}

.card:hover .card-image img{
    transform:scale(1.05);
}

.card-content{
    display:flex;
    flex-direction:column;
    flex:1;

    padding:28px;
}

.card-title{
    margin:0 0 14px;

    color:var(--heading);

    font-size:var(--font-size-lg);
    font-weight:var(--font-weight-bold);
    line-height:1.3;
}

.card-title a{
    color:inherit;
    text-decoration:none;
}

.card-title a:hover{
    color:var(--primary);
}

.card-text{
    flex:1;

    color:var(--text-muted);
    line-height:1.7;
}

.card-meta{
    display:flex;
    flex-wrap:wrap;
    gap:12px;

    margin:18px 0;

    color:var(--gray-500);
    font-size:var(--font-size-sm);
}

.card-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;

    margin-top:auto;
    padding-top:20px;
}

.card-badge{
    display:inline-flex;
    align-items:center;

    padding:6px 12px;

    border-radius:var(--radius-pill);

    background:var(--primary-soft);

    color:var(--primary);

    font-size:var(--font-size-xs);
    font-weight:var(--font-weight-bold);
    text-transform:uppercase;
    letter-spacing:.06em;
}

@media(max-width:640px){

    .card-content{
        padding:22px;
    }

    .card-footer{
        flex-direction:column;
        align-items:stretch;
    }

    .card-footer .btn{
        width:100%;
    }

}