/* Card Component Styles - Base Card Component with Glassmorphism */
.ui-card {
    display: block;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: all var(--transition-base);
    text-decoration: none;
    color: inherit;
    position: relative;
    will-change: transform, box-shadow, backdrop-filter;
}

.ui-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.5);
    transition: all var(--transition-base);
}

/* Card Variants - Different depth levels */
.ui-card-default {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: all var(--transition-base);
    background: rgba(255, 255, 255, 0.3);

}

.ui-card-default:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.ui-card-elevated {
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.ui-card-elevated:hover {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.ui-card-flat {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.ui-card-flat:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Card Padding Variants */
.ui-card-compact {
    padding: var(--spacing-md);
}

.ui-card-comfortable {
    padding: var(--spacing-xl);
}

.ui-card-spacious {
    padding: var(--spacing-2xl);
}

/* Card without hover effect */
.ui-card-static {
    transition: none;
}

.ui-card-static:hover {
    transform: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Glassmorphism variant - more frosted glass effect */
.ui-card-glass {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.ui-card-glass:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Card as link/button */
.ui-card-interactive {
    cursor: pointer;
}

/* Card with border */
.ui-card-bordered {
    border: 1px solid var(--color-border);
}

/* Card Grid Layout Helper */
.ui-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-lg);
}

@media (max-width: 768px) {
    .ui-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--spacing-md);
    }
}