Card Component

<x-artisanpack-card>
    This is a basic card with simple content.
</x-artisanpack-card>

<x-artisanpack-card>
    <x-slot:header>
        <h3 class="text-lg font-bold">Card Title</h3>
    </x-slot:header>
    
    <p>This is the main content of the card.</p>
    
    <x-slot:footer>
        <div class="flex justify-end">
            <x-artisanpack-button>Action</x-artisanpack-button>
        </div>
    </x-slot:footer>
</x-artisanpack-card>

<x-artisanpack-card>
    <x-slot:figure>
        <img src="https://example.com/image.jpg" alt="Card image" class="w-full h-48 object-cover" />
    </x-slot:figure>
    
    <h3 class="text-lg font-bold">Card with Image</h3>
    <p class="mt-2">This card includes an image at the top (default position).</p>
</x-artisanpack-card>

<x-artisanpack-card figure-position="bottom">
    <x-slot:figure>
        <img src="https://example.com/image.jpg" alt="Card image" class="w-full h-48 object-cover" />
    </x-slot:figure>
    
    <h3 class="text-lg font-bold">Card with Bottom Image</h3>
    <p class="mt-2">This card includes an image at the bottom.</p>
</x-artisanpack-card>

<x-artisanpack-card figure-position="left">
    <x-slot:figure>
        <img src="https://example.com/image.jpg" alt="Card image" class="w-32 h-full object-cover" />
    </x-slot:figure>
    
    <h3 class="text-lg font-bold">Card with Left Image</h3>
    <p class="mt-2">This card includes an image on the left side.</p>
</x-artisanpack-card>

<x-artisanpack-card figure-position="right">
    <x-slot:figure>
        <img src="https://example.com/image.jpg" alt="Card image" class="w-32 h-full object-cover" />
    </x-slot:figure>
    
    <h3 class="text-lg font-bold">Card with Right Image</h3>
    <p class="mt-2">This card includes an image on the right side.</p>
</x-artisanpack-card>

<x-artisanpack-card bordered>
    <h3 class="text-lg font-bold">Bordered Card</h3>
    <p class="mt-2">This card has a border around it.</p>
</x-artisanpack-card>

<x-artisanpack-card shadow="lg">
    <h3 class="text-lg font-bold">Card with Shadow</h3>
    <p class="mt-2">This card has a large shadow effect.</p>
</x-artisanpack-card>

<x-artisanpack-card compact>
    <h3 class="text-lg font-bold">Compact Card</h3>
    <p class="mt-2">This card has reduced padding for a more compact appearance.</p>
</x-artisanpack-card>

<x-artisanpack-card class="bg-primary text-primary-content">
    <h3 class="text-lg font-bold">Colored Card</h3>
    <p class="mt-2">This card has a primary color background.</p>
</x-artisanpack-card>

<x-artisanpack-card side>
    <img src="https://example.com/image.jpg" alt="Card image" class="w-1/3 object-cover" />
    
    <div class="p-4 w-2/3">
        <h3 class="text-lg font-bold">Side-by-Side Card</h3>
        <p class="mt-2">This card displays the image on the side instead of at the top.</p>
    </div>
</x-artisanpack-card>

<x-artisanpack-card>
    <x-slot:header>
        <div class="flex justify-between items-center">
            <h3 class="text-lg font-bold">Card with Actions</h3>
            <div>
                <x-artisanpack-button size="sm">Edit</x-artisanpack-button>
                <x-artisanpack-button size="sm" color="error">Delete</x-artisanpack-button>
            </div>
        </div>
    </x-slot:header>
    
    <p>This card has action buttons in the header.</p>
</x-artisanpack-card>

<x-artisanpack-card>
    <x-slot:header>
        <h3 class="text-lg font-bold">Card with Tabs</h3>
    </x-slot:header>
    
    <x-artisanpack-tabs>
        <x-artisanpack-tab name="tab1" label="Tab 1" active>
            <div class="p-4">Content for Tab 1</div>
        </x-artisanpack-tab>
        
        <x-artisanpack-tab name="tab2" label="Tab 2">
            <div class="p-4">Content for Tab 2</div>
        </x-artisanpack-tab>
        
        <x-artisanpack-tab name="tab3" label="Tab 3">
            <div class="p-4">Content for Tab 3</div>
        </x-artisanpack-tab>
    </x-artisanpack-tabs>
</x-artisanpack-card>

<x-artisanpack-card loading>
    <h3 class="text-lg font-bold">Loading Card</h3>
    <p class="mt-2">This card is in a loading state.</p>
</x-artisanpack-card>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <x-artisanpack-card>
        <h3 class="text-lg font-bold">Card 1</h3>
        <p class="mt-2">This is the first card in a grid.</p>
    </x-artisanpack-card>
    
    <x-artisanpack-card>
        <h3 class="text-lg font-bold">Card 2</h3>
        <p class="mt-2">This is the second card in a grid.</p>
    </x-artisanpack-card>
    
    <x-artisanpack-card>
        <h3 class="text-lg font-bold">Card 3</h3>
        <p class="mt-2">This is the third card in a grid.</p>
    </x-artisanpack-card>
</div>

<x-artisanpack-card class="bg-gradient-to-r from-blue-500 to-purple-500 text-white">
    <h3 class="text-lg font-bold">Custom Styled Card</h3>
    <p class="mt-2">This card has a custom gradient background.</p>
</x-artisanpack-card>

:root {
  --card-p: 1.5rem;        /* Card padding */
  --card-fs: 1rem;         /* Card font size */
  --card-title-fs: 1.25rem; /* Card title font size */
}