/**
 * FUNDAAHE - Card Components
 * Dual theme: dark default + light mode overrides
 */

/* ===== BASE CARD ===== */
.card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-0.25rem);
}

/* ===== DARK CARD (Glassmorphism) ===== */
.card-glass {
  background: linear-gradient(135deg, rgba(10,14,26,0.95), rgba(29,78,137,0.15));
  border: 1px solid rgba(3,136,138,0.15);
  border-radius: 1.25rem;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-glass:hover {
  border-color: rgba(3,136,138,0.4);
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3), 0 0 20px rgba(3,136,138,0.1);
}

html.light .card-glass {
  background: white;
  border: 1px solid rgba(29,78,137,0.08);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

html.light .card-glass:hover {
  box-shadow: 0 16px 40px rgba(29,78,137,0.1);
  border-color: rgba(3,136,138,0.2);
}

/* ===== CARD WITH TEAL ACCENT ===== */
.card-teal {
  background: linear-gradient(135deg, rgba(10,14,26,0.95), rgba(3,136,138,0.08));
  border: 1px solid rgba(3,136,138,0.15);
  border-radius: 1rem;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-teal:hover {
  border-color: rgba(3,136,138,0.4);
  transform: translateY(-4px);
}

/* ===== CARD WITH GOLD ACCENT ===== */
.card-gold {
  background: linear-gradient(135deg, rgba(10,14,26,0.95), rgba(255,213,79,0.05));
  border: 1px solid rgba(255,213,79,0.15);
  border-radius: 1rem;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-gold:hover {
  border-color: rgba(255,213,79,0.4);
  transform: translateY(-4px);
}

/* ===== CARD WITH RED/PINK ACCENT ===== */
.card-red {
  background: linear-gradient(135deg, rgba(10,14,26,0.95), rgba(242,56,90,0.05));
  border: 1px solid rgba(242,56,90,0.15);
  border-radius: 1rem;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-red:hover {
  border-color: rgba(242,56,90,0.4);
  transform: translateY(-4px);
}

/* ===== CARD WITH NAVY ACCENT ===== */
.card-navy {
  background: linear-gradient(135deg, rgba(10,14,26,0.95), rgba(29,78,137,0.2));
  border: 1px solid rgba(29,78,137,0.15);
  border-radius: 1rem;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-navy:hover {
  border-color: rgba(29,78,137,0.4);
  transform: translateY(-4px);
}

/* ===== STAT CARD ===== */
.stat-card {
  background: linear-gradient(135deg, rgba(10,14,26,0.9), rgba(3,136,138,0.1));
  border: 1px solid rgba(3,136,138,0.2);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
}

.stat-card:hover {
  border-color: rgba(3,136,138,0.4);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

html.light .stat-card {
  background: white;
  border-color: rgba(3,136,138,0.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

/* ===== PILLAR CARD ===== */
.pillar-card {
  position: relative;
  background: linear-gradient(135deg, rgba(10,14,26,0.95), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 1.25rem;
  padding: 2rem;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.pillar-card:hover {
  border-color: rgba(255,255,255,0.15);
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

/* ===== FEATURE CARD ===== */
.feature-card {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05);
  background: linear-gradient(135deg, rgba(10,14,26,0.95), rgba(255,255,255,0.02));
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.feature-card:hover {
  border-color: rgba(255,255,255,0.15);
  transform: translateY(-8px);
  box-shadow: 0 25px 60px rgba(0,0,0,0.4);
}

/* ===== LIGHT MODE OVERRIDES ===== */
html.light .card {
  background-color: #F5F8FA;
  border-color: rgba(29, 78, 137, 0.1);
  box-shadow: 0 4px 12px rgba(29, 78, 137, 0.06);
}

html.light .card:hover {
  box-shadow: 0 16px 40px rgba(29, 78, 137, 0.1);
  border-color: rgba(3, 136, 138, 0.15);
}

html.light .card-teal {
  background: #E8F4F4;
  border: 1px solid rgba(3,136,138,0.15);
  border-left: 3px solid var(--teal);
}

html.light .card-teal:hover {
  box-shadow: 0 10px 30px rgba(3,136,138,0.12);
}

html.light .card-gold {
  background: #FDF8EC;
  border: 1px solid rgba(255,213,79,0.25);
  border-left: 3px solid var(--gold-bright);
}

html.light .card-gold:hover {
  box-shadow: 0 10px 30px rgba(255,213,79,0.12);
}

html.light .card-red {
  background: #FDF0F2;
  border: 1px solid rgba(242,56,90,0.15);
  border-left: 3px solid var(--hot-pink);
}

html.light .card-red:hover {
  box-shadow: 0 10px 30px rgba(242,56,90,0.1);
}

html.light .card-navy {
  background: #E8EEF4;
  border: 1px solid rgba(29,78,137,0.15);
  border-left: 3px solid var(--navy);
}

html.light .card-navy:hover {
  box-shadow: 0 10px 30px rgba(29,78,137,0.12);
}

html.light .pillar-card {
  background: #E8F4F4;
  border-color: rgba(29,78,137,0.12);
  box-shadow: 0 2px 8px rgba(3,136,138,0.08);
}

html.light .pillar-card:hover {
  border-color: rgba(3,136,138,0.25);
  box-shadow: 0 15px 40px rgba(29,78,137,0.12);
}

html.light .feature-card {
  background: #E8EEF4;
  border-color: rgba(29,78,137,0.12);
  box-shadow: 0 2px 8px rgba(29,78,137,0.08);
}

html.light .feature-card:hover {
  border-color: rgba(3,136,138,0.25);
  box-shadow: 0 15px 40px rgba(29,78,137,0.12);
}

html.light .feature-card:hover {
  border-color: rgba(3,136,138,0.2);
  box-shadow: 0 20px 50px rgba(29,78,137,0.1);
}