/* Additional CSS for card component variants and enhancements */

/* Base card component styles */
.card-component {
  @apply relative;
  @apply transition-all duration-300 ease-in-out;
}

/* Hover effects */
.card-component:hover {
  @apply transform;
}

.card-component:hover .card-image img {
  @apply scale-105;
}

/* Variant styles */
.card-component--compact .card-header,
.card-component--compact .card-body,
.card-component--compact .card-footer {
  @apply p-4;
}

.card-component--compact .card-title {
  @apply text-lg;
}

.card-component--elevated {
  @apply shadow-xl;
  @apply hover:shadow-2xl;
}

.card-component--elevated:hover {
  @apply -translate-y-2;
}

/* Shadow intensity variants */
.card-component--shadow-light {
  @apply shadow-sm hover:shadow-md;
}

.card-component--shadow-medium {
  @apply shadow-md hover:shadow-lg;
}

.card-component--shadow-strong {
  @apply shadow-lg hover:shadow-xl;
}

/* Disable animations when specified */
.card-component--no-animations,
.card-component--no-animations *,
.card-component--no-animations:hover,
.card-component--no-animations:hover * {
  @apply transition-none;
  @apply transform-none;
}

/* Focus styles for accessibility */
.card-component:focus-within {
  @apply ring-2 ring-blue-500 ring-offset-2;
}

/* Action button enhancements */
.card-footer a {
  @apply relative;
  @apply overflow-hidden;
}

.card-footer a::before {
  @apply absolute inset-0;
  @apply bg-white bg-opacity-20;
  @apply transform scale-x-0;
  @apply transition-transform duration-300;
  @apply origin-left;
  content: '';
}

.card-footer a:hover::before {
  @apply scale-x-100;
}

.card-footer a:focus {
  @apply ring-2 ring-white ring-offset-2 ring-offset-blue-600;
}

/* Loading skeleton styles (optional) */
.card-component--loading {
  @apply animate-pulse;
}

.card-component--loading .card-title {
  @apply bg-gray-200 text-transparent rounded;
  @apply h-6 w-3/4;
}

.card-component--loading .card-body {
  @apply bg-gray-200 text-transparent rounded;
  @apply h-20;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .card-header {
    @apply flex-col space-y-3 space-x-0;
  }
  
  .card-header.flex-row-reverse {
    @apply flex-col space-x-0 space-x-reverse-0;
  }
  
  .card-footer {
    @apply flex-col;
  }
  
  .card-footer a {
    @apply w-full justify-center;
  }
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
  .card-component {
    @apply bg-gray-800 border-gray-700;
  }
  
  .card-title {
    @apply text-gray-100;
  }
  
  .card-body {
    @apply text-gray-300;
  }
  
  .card-component:hover {
    @apply border-blue-600;
  }
}