/* ==========================================================
   TECHODEC CARD SYSTEM
   ========================================================== */

/* ----------------------------------------------------------
   BASE CARD
---------------------------------------------------------- */

.card {

    background: #ffffff;

    border: 1px solid rgba(0, 0, 0, .06);

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

    padding: var(--space-lg);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}

/* ----------------------------------------------------------
   HOVER
---------------------------------------------------------- */

.card:hover {

    transform: translateY(-6px);

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

}

/* ----------------------------------------------------------
   TITLE
---------------------------------------------------------- */

.card-title {

    margin-top: 0;

    margin-bottom: .5rem;

}

/* ----------------------------------------------------------
   BODY
---------------------------------------------------------- */

.card-body {

    margin: 0;

    color: var(--color-charcoal);

    opacity: .85;

    line-height: 1.7;

}

/* ----------------------------------------------------------
   FOOTER
---------------------------------------------------------- */

.card-footer {

    margin-top: var(--space-lg);

}

/* ----------------------------------------------------------
   VARIANTS
---------------------------------------------------------- */

.card-outline {

    background: transparent;

    border: 2px solid var(--color-oak);

}

.card-dark {

    background: var(--color-charcoal);

    color: white;

}

.card-dark .card-body {

    color: rgba(255,255,255,.82);

}

.card-glass {

    background: rgba(255,255,255,.70);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

}

/* ----------------------------------------------------------
   FEATURE CARD
---------------------------------------------------------- */

.feature-card {

    text-align: center;

}

.feature-icon {

    width: 72px;

    height: 72px;

    margin: 0 auto var(--space-md);

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--color-cream);

    font-size: 2rem;

}

.feature-title {

    margin-bottom: .5rem;

}

.feature-text {

    margin: 0;

}

/* ----------------------------------------------------------
   BADGE
---------------------------------------------------------- */

.card-badge {

    display: inline-flex;

    align-items: center;

    padding: .35rem .8rem;

    border-radius: 999px;

    background: var(--color-cream);

    color: var(--color-charcoal);

    font-size: .8rem;

    font-weight: 600;

    margin-bottom: var(--space-md);

}