/*
 * epiano — Blocks Base
 * =====================
 * Wspólne tokeny CSS i utility classes współdzielone przez wszystkie bloki CF.
 * Ładowane globalnie przed stylami bloków.
 *
 * Zawiera:
 *  1. CSS Custom Properties (tokeny)
 *  2. Utility: .epiano-container
 *  3. Utility: .epiano-eyebrow
 *  4. Utility: .epiano-section-heading / --light
 *  5. Utility: .epiano-divider / --light
 *  6. Padding-bottom dla elementów desc (ochrona przed Kadence margin reset)
 *
 * Jak dodać nowy blok:
 *  - Container    → dodaj klasę .epiano-container do elementu w template.php
 *  - Eyebrow      → dodaj .epiano-eyebrow
 *  - Heading      → dodaj .epiano-section-heading (+ --light na ciemnym tle)
 *  - Divider      → dodaj .epiano-divider (+ --light na ciemnym tle)
 *  NIE definiuj tych właściwości ponownie w pliku block/style.css!
 */

/* ── 1. Tokeny ────────────────────────────────────────────── */

:root {
    /* Kolory */
    --bg-primary:      #fcfbf9;
    --bg-secondary:    #f0ede5;
    --bg-dark:         #191614;
    --text-main:       #2b2624;
    --text-light:      #524e4c;
    --text-inverse:    #fcfbf9;
    --accent-gold:     #c59b27;
    --accent-gold-hover: #e0b435;
    --border-color:    #e3decb;

    /* Typografia */
    --font-heading:    'Playfair Display', serif;
    --font-body:       'Inter', sans-serif;

    /* Rozmiary fontów (fluid) */
    --fz-xs:   clamp(0.75rem,  0vw   + 0.75rem, 0.75rem);
    --fz-sm:   clamp(0.875rem, 0.2vw + 0.8rem,  0.9375rem);
    --fz-md:   clamp(1rem,     0.4vw + 0.9rem,  1.125rem);
    --fz-lg:   clamp(1.25rem,  0.5vw + 1.1rem,  1.5rem);
    --fz-xl:   clamp(1.5rem,   1vw   + 1.25rem, 2rem);
    --fz-2xl:  clamp(2rem,     1.5vw + 1.6rem,  2.75rem);
    --fz-3xl:  clamp(2.5rem,   3vw   + 1.75rem, 4.5rem);

    /* Spacing */
    --space-xs:  0.5rem;
    --space-sm:  1rem;
    --space-md:  1.5rem;
    --space-lg:  2rem;
    --space-xl:  3rem;
    --space-2xl: 5rem;
    --space-3xl: 8rem;

    /* Layout */
    --container-width:  1200px;
    --inline-padding:   clamp(1rem, 4vw, 2rem);

    /* Misc */
    --transition-fast:   0.2s ease;
    --transition-normal: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* Overlay / opacity warianty */
    --bg-primary-95:    rgba(252, 251, 249, 0.95);
    --shadow-header:    0 1px 4px rgba(25, 22, 20, 0.08);
    --text-inverse-muted: rgba(252, 251, 249, 0.7);
    --text-inverse-dim:   rgba(255, 255, 255, 0.4);
    --border-dark-subtle: rgba(255, 255, 255, 0.1);
    --bg-dark-overlay:  rgba(25, 22, 20, 0.85);
}

/* ── 2. Utility: container ────────────────────────────────── */
/*
 * Centralny kontener szerokości 1200px.
 * Użycie: dodaj klasę .epiano-container do elementu w template.php.
 * Jeśli element musi mieć position:relative lub z-index (np. nad overlayem),
 * ustaw to w pliku block/style.css na klasie BEM — nie tutaj.
 */

.epiano-container {
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--inline-padding);
    padding-right: var(--inline-padding);
}

/* ── 3. Utility: eyebrow ──────────────────────────────────── */
/*
 * Złoty napis nad nagłówkiem sekcji.
 * Użycie: dodaj .epiano-eyebrow do elementu w template.php.
 * Ewentualna nadpisana wartość (np. margin-bottom) → w block/style.css na klasie BEM.
 */

.epiano-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--fz-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-gold);
    margin-bottom: var(--space-xs);
}

/* ── 4. Utility: section heading ──────────────────────────── */
/*
 * Główny nagłówek sekcji (h2/h3).
 * Wariant domyślny: ciemny tekst (na jasnym tle)  → .epiano-section-heading
 * Wariant jasny: tekst inverse (na ciemnym tle)   → dodaj też --light
 */

.epiano-section-heading {
    font-family: var(--font-heading);
    font-size: var(--fz-2xl);
    font-weight: 600;
    color: var(--bg-dark);
    line-height: 1.2;
    margin-bottom: 0;
}

.epiano-section-heading--light {
    font-size: var(--fz-3xl);
    color: var(--text-inverse);
    line-height: 1.15;
}

/* ── 5. Utility: divider ──────────────────────────────────── */
/*
 * Krótka kreska dekoracyjna pod nagłówkiem sekcji.
 * Wariant ciemny (na jasnym tle)   → .epiano-divider
 * Wariant jasny (na ciemnym tle)   → dodaj też --light
 */

.epiano-divider {
    border: none;
    width: 60px;
    height: 2px;
    background-color: var(--bg-dark);
    opacity: 0.15;
    margin: var(--space-lg) auto !important; /* !important: Kadence resetuje margin na hr */
}

.epiano-divider--light {
    background-color: var(--text-inverse);
    opacity: 0.3;
}

/* ── 6. Padding-bottom na desc / subtitle ─────────────────── */
/*
 * Kadence resetuje margin-bottom paragrafów i nagłówków
 * przez selektory .single-content p, .single-content h2 itd.
 * Padding nie jest narażony na te reguły — więc tu trzymamy
 * odstęp dolny dla elementów opisowych.
 *
 * (Marginesy są zerowane w kadence-overrides.css,
 *  za spacing odpowiada padding-bottom poniżej.)
 */

.epiano-hero__desc {
    padding-bottom: var(--space-xl);
}

.epiano-usp__subtitle {
    padding-bottom: var(--space-xl);
}

.epiano-cta__desc {
    padding-bottom: var(--space-xl);
}

.epiano-subpage-hero__desc {
    padding-bottom: var(--space-sm);
}

.epiano-transport-cards__desc {
    padding-bottom: var(--space-md);
}

.epiano-contact-form__intro {
    padding-bottom: var(--space-md);
}

.epiano-usp__desc {
    padding-bottom: var(--space-xs);
}

/* ── 7. Utility: section wrapper ─────────────────────────────── */
/*
 * Generyczny wrapper sekcji (wp:group lub <section>) —
 * tło jasne + padding pionowy.
 * Użycie: dodaj klasę .epiano-section do elementu wrappera.
 */

.epiano-section {
    background-color: var(--bg-primary);
    padding: var(--space-2xl) 0;
}

/* ── 8. Utility: section intro ───────────────────────────────── */
/*
 * Wyśrodkowany akapit wprowadzający nad treścią sekcji.
 * Użycie: dodaj .epiano-section-intro do <p> lub <div>.
 */

.epiano-section-intro {
    max-width: 800px;
    margin-left:  auto;
    margin-right: auto;
    text-align: center;
    font-size: var(--fz-lg);
    color: var(--text-light);
    padding-bottom: var(--space-xl);
}

/* ── 9. Komponent: karta pianina (.epiano-card) ───────────────── */
/*
 * Reużywana przez: catalog-slider, catalog-grid
 * Kontekstowe nadpisania (flex-grow w gridzie) → w stylu danego bloku.
 */

.epiano-card {
    width: 100%;
    background-color: var(--bg-primary);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    transition: border-color var(--transition-normal);
}

.epiano-card:hover {
    border-color: var(--accent-gold);
}

/* Zdjęcie */
.epiano-card__image-wrapper {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--bg-secondary);
}

.epiano-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    transition: transform 0.5s ease;
}

.epiano-card:hover .epiano-card__image {
    transform: scale(1.04);
}

.epiano-card__image--placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--border-color);
    font-size: 3rem;
}

/* Badge kategorii */
.epiano-card__category {
    position: absolute;
    top: 14px;
    right: 14px;
    background-color: var(--bg-dark-overlay);
    color: var(--text-inverse);
    backdrop-filter: blur(4px);
    padding: 0.25rem 0.75rem;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    z-index: 2;
}

/* Badge statusu */
.epiano-card__status {
    position: absolute;
    bottom: 14px;
    left: 14px;
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 0.3rem 0.7rem;
    z-index: 2;
}

.epiano-card__status--reserved {
    background-color: var(--accent-gold);
    color: var(--bg-dark);
}

.epiano-card__status--sold {
    background-color: #888;
    color: var(--text-inverse);
}

/* Treść */
.epiano-card__content {
    padding: var(--space-md);
}

.epiano-card__top {
    margin-bottom: var(--space-md);
}

.epiano-card__title {
    font-family: var(--font-heading);
    font-size: var(--fz-lg);
    font-weight: 600;
    color: var(--bg-dark);
    line-height: 1.25;
    margin: 0 0 var(--space-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.epiano-card__separator {
    display: block;
    width: 32px;
    height: 1px;
    background-color: var(--accent-gold);
}

.epiano-card__price {
    font-family: var(--font-heading);
    font-size: clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
    font-weight: 700;
    color: var(--bg-dark);
    letter-spacing: -0.5px;
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.epiano-card__action {
    display: block;
    width: 100%;
    padding: 0.7rem 1rem;
    text-align: center;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: var(--fz-xs);
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--bg-dark);
    border: 1.5px solid var(--bg-dark);
    background: transparent;
    transition: background-color var(--transition-fast),
                color var(--transition-fast);
}

.epiano-card__action:hover,
.epiano-card__action:focus-visible {
    background-color: var(--bg-dark);
    color: var(--text-inverse);
    outline: none;
}

/* Karta sprzedana */
.epiano-card--sold {
    opacity: 0.55;
    pointer-events: none;
}