# Flip Card - Dokumentacja

## 📋 Przegląd
Blok Flip Card to interaktywny komponent z efektem przewracania 3D. Po najechaniu myszką karta obraca się pokazując tylną stronę z opisem.

## 🎯 Wykorzystanie
- Prezentacja kroków procesu (storytelling)
- Showcase funkcjonalności produktu
- Timeline wydarzeń
- Lista benefitów z opisami

## 🔧 Atrybuty
- **icon** (string): Emoji ikona wyświetlana z przodu
- **title** (string): Tytuł karty (strona przednia)
- **description** (string): Opis wyświetlany po najechaniu (strona tylna)
- **stepNumber** (number): Numer kroku w rogu karty

## 🎨 Wygląd

### Strona przednia
- Gradient tło biały → szary
- Numer kroku w lewym górnym rogu (niebieski okrąg)
- Duża ikona emoji (64px)
- Tytuł (22px, bold)

### Strona tylna
- Gradient primary → secondary
- Biały tekst
- Numer kroku (półprzezroczyste tło)
- Opis (16px)

## 📱 Responsywność
```scss
Desktop: min-height 320px, ikona 64px
Mobile: min-height 280px, ikona 48px
```

## 🔄 Efekt
- Transition: 0.6s
- Transform: rotateY(180deg)
- Perspective: 1000px
- Box-shadow przy hover

## 📦 Integracja
Parent block: `kordit/section-cards-grid`

## 🎬 Pattern Storytelling
Gotowy pattern z 4 krokami:
```
1. Problem - 🤔
2. Rozwiązanie - 💡
3. Zaufanie - ⭐
4. Akcja (CTA) - 🚀
```

Pattern slug: `kordit/storytelling-4-steps`

## 📂 Pliki
```
blocks/flip-card/
├── block.json          - Konfiguracja bloku
├── index.js           - React editor komponent
├── render.php         - PHP frontend render
├── style.scss         - Style frontend
└── editor.scss        - Style tylko dla edytora
```

## 🚀 Deployment
Build automatycznie kompiluje do:
```
build/blocks/flip-card/
├── index.js
├── index.css
├── index.asset.php
├── style-index.css
└── style-index-rtl.css
```