# Golden Hour → Bricks

Kitul e prototipul aprobat; migrarea urmează skill-ul `html-to-bricks` (faze, măsurare după fiecare fază).

## Fundația (Faza 2)
Nu o reconstrui din CSS: aplică pachetul din design system (`bricks/apply-golden-hour.php`, dry run întâi).
Pune pe site paleta Golden Hour (Color Manager), variabilele `text-*`, `space-*`, `radius-*`, `shadow-*`,
`section-y`, `gutter`, `container-max`, `header-height`, Theme Style-ul și clasele `gh-*` de bază.
Fonturile: cele 5 fișiere din `assets/fonts/` → Bricks → Custom Fonts.

## Ce devine Global CSS
Secțiunea 9 din `assets/css/style.css` („bricks-bridge”): focus, gradient, glow (`::before`), voalul hero-ului,
separatorul din breadcrumbs, semnul +/− din accordion, `::backdrop`, scrollbar, săgeata din select, switch, marquee, reduced motion.

## Teme pe categorii
Clasa `gh-theme--ocean` / `--orchid` / `--raspberry` / `--cream` pe `<body>` (Page settings → Body classes)
sau pe Section. Fără clasă = Night.

## Componente → elemente Bricks
| Componentă | Clase | În Bricks |
|---|---|---|
| Culori | `tokenii semantici + brand` | Color Manager → paleta Golden Hour |
| Tipografie | `gh-display · gh-title · h3 · gh-lead · gh-kicker · gh-legal` | Theme Style + clase |
| Spațieri și colțuri | `space-3xs … space-3xl · radius-s / m / pill` | Global Variables |
| Iconițe | `<svg><use href="#i-nume"/></svg>` | Icon (SVG) — sau un set de iconițe în Bricks |
| Butoane | `gh-btn + --primary / --outline / --gradient / --text · --lg / --sm / --block` | Button cu clase globale |
| Tag și badge | `gh-tag · gh-badge + --new / --hot / --soldout / --ok` | Text / Div cu clasă |
| Header + meniu | `<gh-header active="…"> · gh-header · gh-offcanvas` | Template Header + Nav (nestable) + Offcanvas |
| Bară de anunț | `gh-announce` | Section/Div cu clasă, deasupra header-ului |
| Breadcrumbs | `gh-breadcrumbs` | Breadcrumbs (element nativ) |
| Footer, cookie, înapoi sus | `<gh-footer> · gh-footer · gh-cookie · gh-back-top` | Template Footer + Popup pentru cookie |
| Bară de bilete (mobil) | `gh-sticky-cta` | Block fixed, vizibil doar pe mobil |
| Hero | `gh-hero + --center / --short · gh-hero__media · gh-glow` | Section cu imagine de fundal |
| Split (imagine + text) | `gh-split + --reverse` | Container cu 2 coloane |
| Tile | `gh-tile` | Block cu clasă |
| Card de spectacol | `gh-card + --horizontal` | Component „Card” cu proprietăți (imagine, titlu, subtitlu, loc, dată) |
| Slider (carusel) | `gh-slider` | Slider (nestable) sau Block cu scroll-snap |
| Filtre + grilă | `gh-filters · gh-chip · data-filters` | Query Loop + Filters (sau JS ca aici) |
| Galerie + lightbox | `gh-gallery · gh-lightbox (<dialog>)` | Image Gallery cu lightbox nativ |
| Parteneri | `gh-partners` | Logo-uri (Image) în grilă |
| Cifre-cheie | `gh-stats` | Block + Counter (opțional) |
| Citat | `gh-quote` | Block cu Heading + Text |
| Informații practice | `gh-features` | Icon Box sau Block cu Icon |
| Video (fațadă) | `gh-video · data-video` | Video (nativ, cu imagine de previzualizare) |
| Bandă CTA | `gh-cta` | Section cu clasă |
| Seara pe ore | `gh-timeline` | Block cu listă |
| Bandă în mișcare | `gh-marquee` | Block + CSS (bricks-bridge) |
| Date de contact | `gh-info-list` | Icon List |
| Pași (rezervare) | `gh-steps` | Block cu listă |
| Stare goală | `gh-empty` | Block cu clasă |
| Alerte | `gh-alert + --info / --success / --error` | Alert (nativ) sau Block |
| Glow și linie | `gh-glow (+ --left / --right) · gh-divider` | Clasă pe Section (bricks-bridge) |
| Tabs | `gh-tabs · role="tablist"` | Tabs (nestable) |
| Accordion / FAQ | `gh-accordion · <details name="…">` | Accordion (nestable) |
| Modal / popup | `gh-modal (<dialog>) · data-modal-open` | Popup template |
| Toast | `GoldenHour.toast("…") · data-toast` | Mesajul de succes al formularului Bricks |
| Countdown | `gh-countdown · data-countdown="ISO"` | Countdown (nativ) |
| Program de spectacole | `gh-schedule` | Query Loop pe date (JetEngine) cu rândul ca componentă |
| Categorii de bilete | `gh-tickets · gh-ticket (+ --featured)` | Component „Bilet” cu proprietăți |
| Cantitate | `gh-qty · data-qty` | Form → câmp Number (sau JS ca aici) |
| Căutare | `gh-search` | Search (nativ) sau Form |
| Newsletter | `gh-newsletter` | Form cu acțiune de abonare |
| Formular complet | `gh-form · gh-field · gh-input / gh-select / gh-textarea · gh-check · gh-radio · gh-switch` | Form (nativ) cu câmpurile lui |
| Paginare | `gh-pagination` | Pagination (nativ) |

## Doar în prototip
- `components.js` (header/footer ca web components) → template-uri Header și Footer.
- `app.js`: rămân ca JS doar header la scroll, filtre, countdown, toast, cantitate, bara de bilete, cookie;
  restul are element nativ (Offcanvas, Tabs, Accordion, Slider, Lightbox, Popup, Form).
- Secțiunea 10 din CSS (catalogul) nu se migrează.

## Conținut de completat înainte de publicare
`XX lei` (prețuri), `00` (cifre), adresa/telefonul/e-mailul din `gh-info-list`, linkurile sociale, linkul video (`data-video`),
logo-urile partenerilor, citatele (sunt exemple, nu citate reale).