/**
 * CARD COMPONENTS
 * Système de cartes glassmorphism avec variantes
 */

/* ================================
   BASE CARD
   ================================ */

.card {
    /* Layout */
    display: flex;
    flex-direction: column;
    
    /* Sizing */
    width: 100%;
    
    /* Appearance - Glassmorphism */
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    
    /* Shadows */
    box-shadow: var(--shadow-md);
    
    /* Transitions */
    transition: all var(--duration-300) var(--ease-out);
    
    /* Performance */
    transform: translateZ(0);
    will-change: transform, box-shadow;
}

.card:hover {
    transform: translateY(-4px) translateZ(0);
    box-shadow: var(--shadow-xl), var(--shadow-glow);
    border-color: var(--primary-green-300);
}

/* ================================
   CARD SECTIONS
   ================================ */

.card__header {
    padding: var(--space-6);
    border-bottom: 1px solid var(--border-divider);
}

.card__body {
    padding: var(--space-6);
    flex: 1;
}

.card__footer {
    padding: var(--space-6);
    border-top: 1px solid var(--border-divider);
}

/* ================================
   CARD VARIANTS
   ================================ */

.card--bordered {
    border: 2px solid var(--primary-green-300);
}

.card--elevated {
    box-shadow: var(--shadow-xl);
}

.card--flat {
    box-shadow: none;
    border: 1px solid var(--border-subtle);
}

.card--interactive {
    cursor: pointer;
    user-select: none;
}

.card--interactive:active {
    transform: translateY(-2px) translateZ(0);
}

/* ================================
   CARD SIZES
   ================================ */

.card--compact .card__header,
.card--compact .card__body,
.card--compact .card__footer {
    padding: var(--space-4);
}

.card--comfortable .card__header,
.card--comfortable .card__body,
.card--comfortable .card__footer {
    padding: var(--space-8);
}

/* ================================
   RESPONSIVE
   ================================ */

@media (max-width: 640px) {
    .card__header,
    .card__body,
    .card__footer {
        padding: var(--space-4);
    }
}