/* ==========================================================================
   Card Components
   ========================================================================== */

/* Base Cyber Card */
.cyber-card {
    background: var(--gradient-card);
    border: 1px solid var(--cyber-border);
    position: relative;
    transition: all var(--transition-smooth);
}

.cyber-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cyber-blue), transparent);
}

.cyber-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--cyber-blue-rgb), 0.5);
    box-shadow: var(--shadow-card);
}

/* Card with left accent border */
.cyber-card-accent-blue { border-left: 3px solid var(--cyber-blue); }
.cyber-card-accent-purple { border-left: 3px solid var(--cyber-purple); }
.cyber-card-accent-teal { border-left: 3px solid var(--cyber-teal); }
.cyber-card-accent-warning { border-left: 3px solid var(--color-warning); }

/* Metric Card */
.metric-card {
    background: var(--gradient-card);
    border: 1px solid var(--cyber-border);
    position: relative;
    transition: all var(--transition-base);
}

.metric-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--gradient-vertical);
}

.metric-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--cyber-blue-rgb), 0.5);
    box-shadow: 0 0 20px rgba(var(--cyber-blue-rgb), 0.1);
}

.metric-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--cyber-blue);
    font-family: var(--font-mono);
    text-shadow: 0 0 10px rgba(var(--cyber-blue-rgb), 0.5);
}

/* Collaboration Card */
.collaboration-card {
    background: var(--gradient-card);
    border: 1px solid var(--cyber-border);
    cursor: pointer;
    transition: all var(--transition-smooth);
}

.collaboration-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 0 30px rgba(var(--cyber-blue-rgb), 0.2);
}

.collaboration-card.card-blue:hover { border-color: var(--cyber-blue); }
.collaboration-card.card-teal:hover { border-color: var(--cyber-teal); }
.collaboration-card.card-purple:hover { border-color: var(--cyber-purple); }
.collaboration-card.card-orange:hover { border-color: var(--color-warning); }

/* Featured Card */
.cyber-card-featured {
    background: var(--gradient-card);
    border: 1px solid var(--cyber-border);
    position: relative;
    overflow: hidden;
}

.cyber-card-featured::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-accent);
}

.cyber-card-featured::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(var(--cyber-blue-rgb), 0.1) 0%, transparent 70%);
    pointer-events: none;
}

/* Quote Card */
.cyber-quote {
    background: var(--gradient-card);
    border-left: 4px solid;
    border-image: var(--gradient-vertical) 1;
}

/* Contact Icon */
.contact-icon {
    background: var(--gradient-card);
    border: 1px solid var(--cyber-border);
    transition: all var(--transition-base);
}

.contact-icon:hover {
    border-color: var(--cyber-blue);
    box-shadow: 0 0 15px rgba(var(--cyber-blue-rgb), 0.2);
}

/* Badge Icon */
.badge-icon {
    background: var(--gradient-card);
    border: 2px solid var(--cyber-border);
    box-shadow: 0 0 15px rgba(var(--cyber-blue-rgb), 0.2);
}