/* ==========================================================================
   Component: Card
   ========================================================================== */

/* Import subcomponents */
@import "media.css";
@import "header.css";
@import "body.css";
@import "footer.css";

/* Base Card Container */
.c-card {
  background-color: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Clip media to card corners */
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

/* Size Variants (padding control) */
.c-card--sm {
  padding: var(--space-md); /* 16px */
}

.c-card--md {
  padding: var(--space-lg); /* 24px */
}

.c-card--lg {
  padding: var(--space-xl); /* 32px */
}

/* Optional: Interactive variant (for clickable cards) */
.c-card--interactive {
  cursor: pointer;
}

.c-card--interactive:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.c-card--interactive:active {
  transform: translateY(0);
}