/* =========================================================
   blocks.css — wspólny CSS biblioteki bloków bm/*
   ---------------------------------------------------------
   Jeden plik dla wszystkich uniwersalnych bloków (R3). Zawiera:
   1. Full-width reset dla uniwersalnego template (body.is-uniwersalny)
   2. Bazową typografię i klasy sekcji (.section, .eyebrow, .h2, .lead)
   3. System "Styl sekcji" (.bm-sec + zmienne --sec-*) z panelu window.bmStylePanel
   4. Style poszczególnych bloków (dopisywane per blok w Fazie C)
   ========================================================= */

/* =========================================================
   1. FULL-WIDTH reset — sekcje od krawędzi do krawędzi
   ========================================================= */
body.is-uniwersalny .site-main,
body.is-uniwersalny .content-area,
body.is-uniwersalny .inside-article,
body.is-uniwersalny .inside-content,
body.is-uniwersalny .entry-content {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.is-uniwersalny .entry-header,
body.is-uniwersalny .separator { display: none !important; }

body.is-uniwersalny .entry-content,
body.is-uniwersalny .site-main {
    --wp--style--block-gap: 0 !important;
}
body.is-uniwersalny .entry-content > *,
body.is-uniwersalny .site-main > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* =========================================================
   2. Bazowa typografia i klasy sekcji (kanoniczne, globalne)
   ========================================================= */
.section { padding: 120px 0; position: relative; }
.section--tight { padding: 90px 0; }
.section--beige { background: var(--c-bg); }
.section--surface { background: var(--c-surface); }
.section--dark { background: var(--c-text); color: var(--c-bg); }

.eyebrow {
    font-family: var(--f-sans);
    font-size: 12px; font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-primary);
    display: inline-flex; align-items: center; gap: 14px;
    margin: 0 0 22px;
}
.eyebrow::before {
    content: ""; width: 32px; height: 1px; background: var(--c-primary);
}
.section--dark .eyebrow { color: var(--c-accent); }
.section--dark .eyebrow::before { background: var(--c-accent); }

.h2 {
    font-family: var(--f-serif);
    font-weight: 500;
    font-size: var(--fs-h2);
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 28px;
    color: inherit;
    max-width: 1040px;
}
.lead {
    font-family: var(--f-serif);
    font-style: italic;
    font-size: var(--fs-lead);
    line-height: 1.55;
    letter-spacing: 0.02em;
    margin: 0 0 40px;
    max-width: 780px;
    color: color-mix(in srgb, currentColor 82%, transparent);
}

/* =========================================================
   3. System "Styl sekcji" — .bm-sec + zmienne --sec-*
   ---------------------------------------------------------
   Render: bm_section_style_attrs() ustawia klasy + zmienne inline,
   bm_section_bg_media() wstawia <video>/overlay. Puste atrybuty →
   brak zmiennej → blok dziedziczy domyślny wygląd sekcji.
   ========================================================= */
.bm-sec {
    position: relative;
    /* Padding z panelu "Styl sekcji" (--sec-p*). Fallback = domyślne 80/0.
       Nadpisuje .section { padding:120px 0 } — wartości zawsze wstrzykiwane inline. */
    padding: var(--sec-pt, 80px) var(--sec-pr, 0px) var(--sec-pb, 80px) var(--sec-pl, 0px);
}

/* Tło: kolor / gradient (--sec-bg) lub obraz (--sec-bg-image) */
.bm-sec--has-bg { background-color: var(--sec-bg, transparent); }
.bm-sec--bg-image {
    background-image: var(--sec-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Tło wideo */
.bm-sec__bg-video {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Overlay przyciemniający (obraz/wideo) */
.bm-sec__overlay {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: var(--sec-overlay, 0);
    z-index: 1;
    pointer-events: none;
}

/* Treść nad tłem/overlayem */
.bm-sec--bg-video > *:not(.bm-sec__bg-video):not(.bm-sec__overlay),
.bm-sec--bg-image > *:not(.bm-sec__overlay),
.bm-sec--has-overlay > *:not(.bm-sec__bg-video):not(.bm-sec__overlay) {
    position: relative;
    z-index: 2;
}

/* Kolory per-element z panelu "Styl sekcji" (puste → dziedziczenie / marka).
   Każda zmienna emitowana tylko gdy ustawiona; selektor [style*=...] aktywuje regułę.
   Elementy współdzielone (eyebrow/nagłówki/lead/tekst/akcent) sterowane tu centralnie;
   listy/numery/markery + dekoracyjne akcenty — w CSS poszczególnych bloków (fallback
   chain var(--sec-list / --sec-accent, var(--sec-link, var(--c-primary)))). */
.bm-sec[style*="--sec-text"] { color: var(--sec-text); }

.bm-sec[style*="--sec-eyebrow"] .eyebrow { color: var(--sec-eyebrow); }
.bm-sec[style*="--sec-eyebrow"] .eyebrow::before { background: var(--sec-eyebrow); }

.bm-sec[style*="--sec-heading"] .h2,
.bm-sec[style*="--sec-heading"] h1,
.bm-sec[style*="--sec-heading"] h2,
.bm-sec[style*="--sec-heading"] h3 { color: var(--sec-heading); }

.bm-sec[style*="--sec-lead"] .lead { color: var(--sec-lead); }

/* Akcent: linki (poza przyciskami CTA). Legacy --sec-link nadal obsługiwane. */
.bm-sec[style*="--sec-link"] a:not(.cta-btn)   { color: var(--sec-link); }
.bm-sec[style*="--sec-accent"] a:not(.cta-btn) { color: var(--sec-accent); }

/* =========================================================
   3d. Shape dividers — przejścia na krawędziach sekcji
   ---------------------------------------------------------
   Render: bm_section_dividers() (dołączany przez bm_section_bg_media()).
   Kolor = --div-color (zwykle tło sąsiedniej sekcji), wysokość = --div-h.
   SVG fill="currentColor"; preserveAspectRatio="none" rozciąga na 100%.
   ========================================================= */
.bm-divider {
    position: absolute;
    left: 0;
    width: 100%;
    height: var(--div-h, 80px);
    color: var(--div-color, var(--c-bg));
    line-height: 0;
    z-index: 3;
    pointer-events: none;
}
.bm-divider svg { display: block; width: 100%; height: 100%; }
.bm-divider--bottom { bottom: -1px; }
.bm-divider--top    { top: -1px; transform: scaleY(-1); } /* odbicie w pionie: lity brzeg na górze */
.bm-divider--flip svg { transform: scaleX(-1); }

/* =========================================================
   3e. Domyślne efekty hover (.bm-fx) — globalne, bez konfiguracji
   ---------------------------------------------------------
   Włączane klasą body.bm-fx (Customizer → „Subtelne efekty", domyślnie
   ON; wyłącznik per projekt). Wypełnia braki: lift+cień dla pricing/
   testimonials (brak hover) i team (miał tylko zoom), oraz zoom zdjęć
   w cards. team/gallery mają już własny zoom, cards-link już ma lift —
   nie dublujemy. prefers-reduced-motion zeruje czasy przejść globalnie. */
.bm-fx .bm-pricing__card,
.bm-fx .bm-testimonials__card,
.bm-fx .bm-team__card {
    transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.bm-fx .bm-pricing__card:hover,
.bm-fx .bm-testimonials__card:hover,
.bm-fx .bm-team__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 42px -16px rgba(0, 0, 0, 0.22);
}
/* Zoom zdjęcia w kartach cards (kontener .bm-cards__media ma overflow:hidden). */
.bm-fx .bm-cards__media img { transition: transform 0.6s var(--ease-out); }
.bm-fx .bm-cards__item:hover .bm-cards__media img { transform: scale(1.06); }

/* =========================================================
   3b. Wyświetlanie zdjęć treściowych (panel "Wyświetlanie zdjęcia")
   Wspólny system dla bm/hero, bm/text-media, bm/about-split, bm/contact.
   Wrapper .bm-media-box + <img class="bm-media-img">. Sterowanie przez
   zmienne --media-fit / --media-pos / --media-ratio / --media-bg
   (emitowane w render.php przez bm_media_box_attrs()).
   ========================================================= */
.bm-media-box {
    position: relative;
    width: 100%;
    overflow: hidden;
}
/* Stała proporcja ramki (cover/contain działają w jej obrębie). */
.bm-media-box--fixed {
    aspect-ratio: var(--media-ratio, 4 / 5);
    background: var(--media-bg, transparent);
}
/* Oryginalna proporcja zdjęcia — ramka rośnie do wysokości zdjęcia. */
.bm-media-box--original { aspect-ratio: auto; }

.bm-media-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: var(--media-fit, cover);
    object-position: var(--media-pos, 50% 50%);
}
.bm-media-box--original .bm-media-img { height: auto; }

/* =========================================================
   3c. Oprawa mediów (panel "Oprawa mediów")
   Wspólny system upiększeń dla bm/hero, bm/text-media, bm/about-split,
   bm/contact, bm/video. Klasa .bm-decor na wrapperze mediów; trzy
   niezależne, stackowalne warstwy emitowane przez bm_media_decor_attrs():
     - cień        : box-shadow (zmienna --dec-sh)
     - tło / ramka : ::before, przesunięte ZA media (--dec-back-color)
     - linie/akcent: ::after, NA krawędzi mediów (--dec-acc-color)
   Warstwy rysowane względem wrappera => respektują rozmiar i proporcje
   wstawionego zdjęcia / wideo (4:5, 16:9, 9:16 ...).
   ========================================================= */
.bm-decor { position: relative; }

/* Media nad warstwą "tło za mediami" (::before), pod warstwą "akcent" (::after). */
.bm-decor > .bm-media-img,
.bm-decor > img,
.bm-decor > video,
.bm-decor > iframe {
    position: relative;
    z-index: 1;
}

/* —— Warstwa 1: cień (nie jest przycinany przez overflow wrappera) —— */
.bm-decor--shadow {
    box-shadow: var(--dec-sh, 0 22px 50px -12px rgba(36, 35, 33, 0.22));
}

/* —— Warstwa 2: tło / ramka za mediami (::before, przesunięte w dół-prawo) —— */
/* Podwójna klasa, by pewnie nadpisać overflow:hidden z .bm-media-box / CSS bloku. */
.bm-decor.bm-decor--has-backing { overflow: visible; }
.bm-decor--back-frame::before,
.bm-decor--back-block::before,
.bm-decor--back-double::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    transform: translate(18px, 18px);
    pointer-events: none;
}
.bm-decor--back-block::before  { background: var(--dec-back-color, var(--c-primary)); }
.bm-decor--back-frame::before  { border: 2px solid var(--dec-back-color, var(--c-primary)); }
.bm-decor--back-double::before {
    border: 1px solid var(--dec-back-color, var(--c-primary));
    outline: 1px solid var(--dec-back-color, var(--c-primary));
    outline-offset: 5px;
}

/* —— Warstwa 3: linie / akcenty na krawędzi (::after, nad mediami) —— */
.bm-decor--acc-corners::after,
.bm-decor--acc-bar-bottom::after,
.bm-decor--acc-bar-left::after,
.bm-decor--acc-inset::after {
    content: "";
    position: absolute;
    z-index: 2;
    pointer-events: none;
}
/* Narożniki: wsporniki w lewym-górnym i prawym-dolnym rogu. */
.bm-decor--acc-corners::after {
    inset: 12px;
    --acc: var(--dec-acc-color, var(--c-primary));
    background-image:
        linear-gradient(var(--acc), var(--acc)),
        linear-gradient(var(--acc), var(--acc)),
        linear-gradient(var(--acc), var(--acc)),
        linear-gradient(var(--acc), var(--acc));
    background-repeat: no-repeat;
    background-position: left top, left top, right bottom, right bottom;
    background-size: 2px 26px, 26px 2px, 2px 26px, 26px 2px;
}
.bm-decor--acc-bar-bottom::after {
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background: var(--dec-acc-color, var(--c-primary));
}
.bm-decor--acc-bar-left::after {
    top: 0; bottom: 0; left: 0;
    width: 4px;
    background: var(--dec-acc-color, var(--c-primary));
}
.bm-decor--acc-inset::after {
    inset: 12px;
    border: 1px solid var(--dec-acc-color, var(--c-primary));
}

/* =========================================================
   4. Style poszczególnych bloków — dopisywane w Fazie C
   ========================================================= */