@layer components {
  /* Base card styles */
  .wizard-category-card {
    flex: 3;
    transition: flex 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  }

  /* Horizontal flex layout for desktop */
  @media (min-width: 768px) {
    .wizard-category-cards {
      display: flex;
      gap: 1rem;
      min-height: 500px;
    }

    /* Hover expand effect - 40% for hovered, 30% for others */
    .wizard-category-card:hover {
      flex: 4;
    }
  }

  /* Vertical stack for mobile */
  @media (max-width: 767px) {
    .wizard-category-cards {
      flex-direction: column;
    }

    .wizard-category-card {
      min-height: 300px;
    }

    .wizard-category-card:hover {
      flex: 1;
    }
  }

  /* Focus state for accessibility */
  .wizard-category-card:focus-within {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
  }

  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    .wizard-category-card {
      transition: none;
    }
  }
}