/* Base styles for the entire card setup */
#vanilla-3d-card-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; /* 3 columns, responsive */
  gap: 20px !important; /* Space between cards */
  justify-items: center !important; /* Center cards in their grid cells */
  align-items: start !important; /* Align cards to the top of their grid cells */
  padding: 20px !important; /* Padding around the grid */
}

.vanilla-3d-card-item {
  width: 100% !important; /* Ensure it fills its grid cell */
  margin-bottom: 20px !important; /* Add some vertical spacing */
}

.card-container-wrapper {
  perspective: 1000px !important; /* Required for 3D effect */
  width: 100% !important; /* Ensure it takes full width of its parent */
  padding: 0 !important; /* Remove padding here, grid gap handles spacing */
}

.card-element {
  position: relative !important;
  transition: transform 0.5s ease-out !important; /* Smooth reset on mouseleave */
  transform-style: preserve-3d !important; /* Crucial for child 3D transforms */
  margin: 0 auto !important; /* Center the card horizontally within its wrapper if it's smaller than 100% */
  width: auto !important;
  min-width: 300px !important; /* Keep a minimum width */
  max-width: 480px !important; /* Keep max-width for overall card size */
  height: auto !important;
}

/* Styles for the card body (the actual visible card) */
.card-body {
  background-color: #f9fafb !important; /* bg-gray-50 */
  border: 1px solid rgba(0, 0, 0, 0.1) !important; /* border-black/[0.1] */
  border-radius: 12px !important; /* rounded-xl */
  padding: 24px !important; /* p-6 */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !important; /* Basic shadow */
  width: 100% !important; /* Ensure it fills its parent */
  box-sizing: border-box !important; /* Include padding/border in width */
  transform-style: preserve-3d !important; /* Allow children to have 3D transforms */
}

/* Dark mode approximation for card body */
@media (prefers-color-scheme: dark) {
  .card-body {
    background-color: #000 !important; /* dark:bg-black */
    border: 1px solid rgba(255, 255, 255, 0.2) !important; /* dark:border-white/[0.2] */
  }
}

/* Styles for CardItem elements */
.card-item-title {
  font-size: 1.25rem !important; /* text-xl */
  font-weight: 700 !important; /* font-bold */
  color: #4b5563 !important; /* text-neutral-600 */
  margin-bottom: 8px !important; /* Added for spacing */
  transform-style: preserve-3d !important; /* Needed for translateZ */
}

@media (prefers-color-scheme: dark) {
  .card-item-title {
    color: #fff !important; /* dark:text-white */
  }
}

.card-item-description {
  color: #6b7280 !important; /* text-neutral-500 */
  font-size: 0.875rem !important; /* text-sm */
  max-width: 24rem !important; /* max-w-sm */
  margin-top: 8px !important; /* mt-2 */
  transform-style: preserve-3d !important; /* Needed for translateZ */
}

@media (prefers-color-scheme: dark) {
  .card-item-description {
    color: #d1d5db !important; /* dark:text-neutral-300 */
  }
}

.card-item-image {
  width: 100% !important;
  margin-top: 16px !important; /* mt-4 */
  transform-style: preserve-3d !important; /* Needed for translateZ */
}

.card-item-image img {
  height: 150px !important; /* Adjusted height */
  width: 100% !important; /* w-full */
  object-fit: cover !important;
  border-radius: 12px !important; /* rounded-xl */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important; /* group-hover/card:shadow-xl */
  display: block !important; /* Ensure image is block level */
}

.card-actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 16px !important; /* mt-20, adjusted */
  transform-style: preserve-3d !important; /* Needed for translateZ */
}

.card-button {
  padding: 8px 16px !important; /* px-4 py-2 */
  border-radius: 12px !important; /* rounded-xl */
  font-size: 0.75rem !important; /* text-xs */
  font-weight: 700 !important; /* font-bold */
  color: #fff !important; /* text-white */
  background-color: #000 !important; /* bg-black */
  border: none !important;
  cursor: pointer !important;
  text-decoration: none !important; /* for anchor tag */
  transform-style: preserve-3d !important; /* Needed for translateZ */
}

@media (prefers-color-scheme: dark) {
  .card-button {
    background-color: #fff !important; /* dark:bg-white */
    color: #000 !important; /* dark:text-black */
  }
}

.card-link {
  padding: 8px 16px !important; /* px-4 py-2 */
  border-radius: 12px !important; /* rounded-xl */
  font-size: 0.75rem !important; /* text-xs */
  font-weight: 400 !important; /* font-normal */
  color: #000 !important; /* Default text color */
  text-decoration: none !important;
  transform-style: preserve-3d !important; /* Needed for translateZ */
}

@media (prefers-color-scheme: dark) {
  .card-link {
    color: #fff !important; /* dark:text-white */
  }
}