/**
 * K2 Card Component
 * -----------------------------------------------------------------------------
 * Provides a versatile, responsive, and theme-aware card container
 * that can be used for content display, feature boxes, or dashboard widgets.
 * 
 * ✅ Mobile-first, works seamlessly with K2 UI framework
 * ✅ Uses CSS variables from k2-theme.css (colors, spacing, shadows, etc.)
 * ✅ Supports optional header, body, and footer sections
 * ✅ Works with both <article> or <div> tags
 * 
 * -----------------------------------------------------------------------------
 * USAGE EXAMPLE:
 * -----------------------------------------------------------------------------
 * <article class="k2-card">
 *   <header class="k2-card-header">
 *     <h3 class="k2-card-title">STEM & AI Clubs</h3>
 *   </header>
 *   <div class="k2-card-body">
 *     <p>Empower your students with hands-on robotics, coding, and innovation projects.</p>
 *   </div>
 *   <footer class="k2-card-footer">
 *     <a href="#" class="k2-btn k2-btn-sm k2-btn-primary">Learn More</a>
 *   </footer>
 * </article>
 * 
 * -----------------------------------------------------------------------------
 * STRUCTURE:
 * -----------------------------------------------------------------------------
 * .k2-card              → Main container (background, border, radius, shadow)
 * .k2-card-header       → Optional top section (title, icon, or media)
 * .k2-card-body         → Main content area
 * .k2-card-footer       → Optional bottom section (actions or metadata)
 * -----------------------------------------------------------------------------
 */

.k2-card {
  display: flex;
  flex-direction: column;
  background-color: var(--k2-bg-muted);
  color: var(--k2-bg-muted-text);
  border: 1px solid var(--k2-border-color, var(--k2-color-gray-200));
  border-radius: var(--k2-radius-lg);
  box-shadow: var(--k2-shadow-md);
  transition: transform var(--k2-transition-fast), box-shadow var(--k2-transition-fast);
  overflow: hidden;
}

/* Hover state for interactive cards (e.g. clickable tiles) */
.k2-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--k2-shadow-lg);
}

/* -----------------------------------
 * Card Header
 * ----------------------------------- */
.k2-card-header {
  padding: var(--k2-space-3);
  border-bottom: 1px solid var(--k2-border-color, var(--k2-color-gray-200));
  background-color: var(--k2-surface-alt, var(--k2-color-muted));
}

.k2-card-title {
  margin: 0;
  font-size: var(--k2-font-lg);
  font-weight: 600;
  color: var(--k2-text-heading);
}

/* -----------------------------------
 * Card Body
 * ----------------------------------- */
.k2-card-body, .k2-card-body p {
  flex: 1 1 auto;
  padding: var(--k2-space-3);
  font-size: var(--k2-font-base);
  line-height: 1.6 !important;
}

/* -----------------------------------
 * Card Footer
 * ----------------------------------- */
.k2-card-footer {
  padding: var(--k2-space-3);
  border-top: 1px solid var(--k2-border-color, var(--k2-color-gray-200));
  background-color: var(--k2-surface-alt, var(--k2-color-gray-100));
}

/* Optional alignment helpers for footer actions */
.k2-card-footer--right {
  text-align: right;
}
.k2-card-footer--center {
  text-align: center;
}

/* -----------------------------------
 * Variants (optional future extensions)
 * ----------------------------------- */

/* Elevated variant */
.k2-card--elevated {
  box-shadow: var(--k2-shadow-lg);
}

/* Bordered-light variant */
.k2-card--light {
  border-color: var(--k2-color-gray-100);
  background-color: var(--k2-surface-light);
}

/* Compact variant for tighter spaces */
.k2-card--compact .k2-card-header,
.k2-card--compact .k2-card-body,
.k2-card--compact .k2-card-footer {
  padding: var(--k2-space-2);
}

/* -----------------------------------
 * Responsive adjustments (optional)
 * ----------------------------------- */
@media (min-width: 768px) {
  .k2-card {
    border-radius: var(--k2-radius-xl);
  }
}