/* assets/css/04-components/cards.css */
/* Feature cards, workflow cards, stat cards */

.card {
    background:    var(--bg-raised);
    border:        1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding:       var(--space-6);
    transition:    all var(--transition-normal);
    position:      relative;
    overflow:      hidden;
}

.card::before {
    content:    '';
    position:   absolute;
    top:        0; left: 0; right: 0;
    height:     2px;
    background: linear-gradient(90deg, transparent, var(--accent-color, var(--teal)), transparent);
    opacity:    0;
    transition: opacity var(--transition-normal);
}
.card:hover::before { opacity: 1; }
.card:hover {
    border-color: rgba(78,201,176,0.2);
    transform:    translateY(-3px);
    box-shadow:   var(--shadow-lg);
}

.card--teal { --accent-color: var(--teal); }
.card--gold { --accent-color: var(--gold); }
.card--blue { --accent-color: var(--blue); }

.card--teal:hover { border-color: rgba(78,201,176,0.25); }
.card--gold:hover { border-color: rgba(224,168,0,0.25); }
.card--blue:hover { border-color: rgba(86,156,214,0.25); }

.card__icon {
    width:           44px;
    height:          44px;
    border-radius:   var(--radius-md);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.25rem;
    margin-bottom:   var(--space-4);
    flex-shrink:     0;
}
.card__icon--teal { background: var(--teal-dim); color: var(--teal); border: 1px solid rgba(78,201,176,0.2); }
.card__icon--gold { background: var(--gold-dim); color: var(--gold); border: 1px solid rgba(224,168,0,0.2); }
.card__icon--blue { background: var(--blue-dim); color: var(--blue); border: 1px solid rgba(86,156,214,0.2); }

.card__label {
    font-family:    var(--font-mono);
    font-size:      0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color:          var(--fg-muted);
    margin-bottom:  var(--space-2);
}
.card__title {
    font-family:   var(--font-display);
    font-size:     1.15rem;
    font-weight:   700;
    color:         var(--fg-primary);
    margin-bottom: var(--space-3);
    letter-spacing: -0.01em;
}
.card__desc {
    font-size:   0.875rem;
    line-height: 1.65;
    color:       var(--fg-secondary);
}

.card__list {
    margin-top: var(--space-4);
    display:    flex;
    flex-direction: column;
    gap:        var(--space-2);
}
.card__list-item {
    display:     flex;
    align-items: flex-start;
    gap:         var(--space-2);
    font-size:   0.8rem;
    color:       var(--fg-secondary);
}
.card__list-item::before {
    content:      '▸';
    color:        var(--teal);
    font-size:    0.65rem;
    margin-top:   3px;
    flex-shrink:  0;
}
.card--gold .card__list-item::before { color: var(--gold); }
.card--blue .card__list-item::before { color: var(--blue); }

.stat-card {
    background:    linear-gradient(135deg, var(--bg-raised) 0%, var(--bg-overlay) 100%);
    border:        1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding:       var(--space-6) var(--space-8);
    text-align:    center;
}
.stat-card__value {
    font-family: var(--font-display);
    font-size:   2.5rem;
    font-weight: 800;
    background:  linear-gradient(135deg, var(--teal), var(--blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: var(--space-2);
}
.stat-card__label {
    font-size:   0.8rem;
    color:       var(--fg-secondary);
    font-weight: 500;
}