/**
 * ============================================
 * CARD COMPONENTS - Unified Card System
 * ============================================
 *
 * Extracted van: kennisbank.css, style.css, agreement.css, home-components.css
 * Datum: 2025-01-03
 *
 * GEBRUIK:
 * - .card = standaard witte card
 * - .card-dark = donkere variant
 * - .card-flat = zonder shadow
 *
 * Old classes werken nog (backwards compatibility):
 * - .simple-card → .card
 * - .chique-service-card → .card
 * - .enhanced-glass-light → .card
 * - .enhanced-glass-dark → .card-dark
 */

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

.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.card-dark {
  background: #1f2937;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  color: #ffffff;
  transition: all 0.2s ease;
}

.card-dark:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.card-flat {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem;
  transition: border-color 0.2s ease;
}

.card-flat:hover {
  border-color: #d1d5db;
}

/* ============================================
   BACKWARDS COMPATIBILITY ALIASES
   ============================================ */

/* From kennisbank.css */
.simple-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  color: #1a1a1a;
}

.simple-card-dark {
  background: #1f2937;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  color: #ffffff;
}

/* From home-components.css & others */
.chique-service-card,
.enhanced-glass-light {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  border: 1px solid #e5e7eb;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  padding: 1.5rem;
}

.chique-service-card:hover,
.enhanced-glass-light:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);
  border-color: #d1d5db;
}

.enhanced-glass-dark {
  background: #1f2937;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: box-shadow 0.2s ease;
  padding: 1.5rem;
  color: #ffffff;
}

.enhanced-glass-dark:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ============================================
   KENNISBANK SPECIFIC CARDS
   ============================================ */

.kennisbank-card {
  transition: transform 0.2s ease;
  cursor: pointer;
}

.kennisbank-card:hover {
  transform: translateY(-2px);
}

.kennisbank-card .card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  border: 1px solid #e5e7eb;
  min-height: 120px;
  cursor: pointer;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.kennisbank-card:hover .card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);
  border-color: #d1d5db;
}

.kennisbank-card .card i {
  color: #2563eb;
}

.kennisbank-card .fw-bold {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #111827;
}

/* ============================================
   AGREEMENT CARDS
   ============================================ */

.agreement-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
}

.agreement-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.agreement-list-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  transition: all 0.2s ease;
}

.agreement-list-card:hover {
  border-color: #2563eb;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
}

/* ============================================
   UTILITY CARD MODIFIERS
   ============================================ */

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

.card-no-hover {
  transform: none !important;
}

.card-no-hover:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transform: none !important;
}

/* Card with icon */
.card-with-icon {
  display: flex;
  gap: 1rem;
}

.card-with-icon i {
  font-size: 2rem;
  color: #2563eb;
  flex-shrink: 0;
}

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

@media (max-width: 768px) {
  .card,
  .card-dark,
  .card-flat,
  .simple-card,
  .agreement-card {
    padding: 1rem;
  }

  .agreement-list-card {
    padding: 1rem;
  }
}

/* ============================================
   MIGRATION NOTES
   ============================================

   BEFORE:
   <div class="simple-card">...</div>
   <div class="chique-service-card">...</div>
   <div class="enhanced-glass-light">...</div>

   AFTER (recommended, but old still works):
   <div class="card">...</div>
   <div class="card">...</div>
   <div class="card">...</div>

   DARK VARIANTS:
   <div class="card-dark">...</div>

   ============================================ */