@charset "UTF-8";
/* =============================================================================
   L-TEK — arkusz stylow tresci podstron
   -----------------------------------------------------------------------------
   Plik: ltek-tresc.css
   Cel:  jeden spojny system wizualny dla podstron przepisanych z shortcode'ow
         WPBakery na czysty HTML (/, /o-nas/, /kontakt/, /nasza-marka/, /team/,
         /wlasnosc-intelektualna/).

   Wgranie: wp_enqueue_style w mu-pluginie ALBO Wyglad -> Dostosuj -> Dodatkowy CSS.
   Autorzy stron uzywaja WYLACZNIE klas z tego arkusza. Zadnych style="..." w HTML.
   Opis kazdej klasy z gotowym fragmentem HTML: tresc/PRZEWODNIK-KLAS.md

   -----------------------------------------------------------------------------
   SKAD PALETA I FONTY
   Wartosci nie sa wymyslone — zostaly odczytane z dzialajacej instalacji:
     - https://l-tek.pl/wp-content/themes/brooklyn/style.css (Brooklyn 4.9.9.5)
     - wygenerowany blok <style id="ut-theme-custom-css"> na https://l-tek.pl/
   Ustalenia:
     - kolor akcentu motywu: rgba(218, 37, 29, 1) = #da251d
       (::selection, blockquote border, hover linkow, ikony stopki, .bklyn-btn)
     - tekst strony:       rgba(0, 0, 0, 1)  = #000000
     - linki w tresci:     rgba(51, 51, 51, 1) = #333333, podkreslone
     - naglowki h1-h6:     #151515 (baza motywu), nadpisane na #000000 w opcjach
     - szarosc obramowan:  #dddddd    - jasna plyta: #f7f8fa
     - ciemna plyta:       #141618 / #151515
     - font tekstu i naglowkow: "Montserrat" (Google Fonts, ladowany przez motyw)
     - font akapitu wiodacego:  "Barlow"     (motyw uzywa go w .lead)
   Wszystkie zestawienia kolorow ponizej maja kontrast >= 4.5:1 (WCAG AA).

   TRYB CIEMNY
   Motyw Brooklyn nie zawiera ani jednej reguly @media (prefers-color-scheme)
   — sprawdzone w style.css, ut.theme.min.css i ut.core.plugins.min.css.
   Dodanie tu wlasnego trybu ciemnego rozjechaloby sie z naglowkiem, menu
   i stopka, ktore pozostalyby jasne. Dlatego trybu ciemnego NIE dodajemy.
   Zamiast tego jest jawny wariant ciemnej sekcji: .ltek-sekcja--ciemna

   UKLAD DOCELOWY
   Tresc trafia do:
     .grid-container (max-width 1200px) > #primary > .post-XXXX > .entry-content
   Dlatego zadna klasa nie ustawia sztywnej szerokosci w px — tylko %, fr, ch,
   clamp() i minmax(). Uklad dziala od 320 px, bez poziomego przewijania.
   ============================================================================= */


/* =============================================================================
   1. ZMIENNE
   ========================================================================== */

:root {
    /* --- Kolory marki ---------------------------------------------------- */
    --ltek-akcent:            #da251d;  /* kolor motywu; 4.93:1 na bieli      */
    --ltek-akcent-ciemny:     #b31d16;  /* hover na jasnym tle; 6.77:1        */
    --ltek-akcent-jasny:      #ff6b60;  /* akcent NA ciemnym tle; 6.50:1      */

    /* --- Kolory tekstu --------------------------------------------------- */
    --ltek-atrament:          #000000;  /* tekst podstawowy (jak w motywie)   */
    --ltek-atrament-2:        #151515;  /* naglowki, bazowy kolor motywu      */
    --ltek-tekst-drugi:       #5f5f5f;  /* podpisy, role, meta; 6.39:1        */
    --ltek-tekst-na-ciemnym:  #d6d8db;  /* tekst na ciemnej plycie; 12.7:1    */

    /* --- Tla i linie ----------------------------------------------------- */
    --ltek-papier:            #ffffff;
    --ltek-plyta:             #f7f8fa;  /* jasne tlo sekcji                   */
    --ltek-plyta-ciemna:      #141618;  /* ciemne tlo sekcji                  */
    --ltek-linia:             #dddddd;

    /* --- Typografia ------------------------------------------------------ */
    --ltek-font:      "Montserrat", -apple-system, BlinkMacSystemFont,
                      "Segoe UI", Roboto, Arial, sans-serif;
    --ltek-font-lead: "Barlow", "Montserrat", -apple-system, BlinkMacSystemFont,
                      "Segoe UI", Roboto, Arial, sans-serif;

    --ltek-tekst-podstawowy: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --ltek-tekst-maly:       clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
    --ltek-tytul-duzy:       clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
    --ltek-tytul-sredni:     clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
    --ltek-tytul-maly:       clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
    --ltek-lead-rozmiar:     clamp(1.125rem, 1rem + 0.7vw, 1.375rem);
    --ltek-liczba-rozmiar:   clamp(2.25rem, 1.6rem + 3vw, 3.75rem);

    /* --- Rytm i odstepy -------------------------------------------------- */
    --ltek-rytm:      clamp(3rem, 1.6rem + 6vw, 6rem);   /* miedzy sekcjami   */
    --ltek-odstep:    clamp(1.5rem, 1rem + 2.2vw, 3rem); /* gap w siatkach    */
    --ltek-odstep-s:  clamp(0.75rem, 0.6rem + 0.8vw, 1.25rem);

    /* --- Ksztalt --------------------------------------------------------- */
    --ltek-promien:   4px;
    /* Delikatny cien kart — motyw uzywa 0 0 10px rgba(0,0,0,.09) na kaflach bloga. */
    --ltek-cien:      0 1px 2px rgba(0, 0, 0, 0.05),
                      0 10px 24px rgba(0, 0, 0, 0.06);
    --ltek-przejscie: 180ms ease;

    /* --- Szerokosci ------------------------------------------------------ */
    --ltek-szer-tekstu: 66ch;  /* komfortowa dlugosc wiersza                 */
}


/* =============================================================================
   2. FUNDAMENT — opcjonalny wrapper calej tresci
   -----------------------------------------------------------------------------
   .ltek owija cala tresc strony wewnatrz .entry-content. Nie jest obowiazkowy,
   ale porzadkuje fokus klawiaturowy i lamanie dlugich slow.
   ========================================================================== */

.ltek {
    font-family: var(--ltek-font);
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Widoczny fokus klawiaturowy — motyw go nie zapewnia. */
.ltek a:focus-visible,
.ltek-btn:focus-visible,
.ltek-link:focus-visible {
    outline: 3px solid var(--ltek-akcent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Obrazy w naszych komponentach nigdy nie wychodza poza kontener. */
.ltek img {
    max-width: 100%;
    height: auto;
}

/* Kasowanie punktorow motywu w naszych listach.
   Motyw ustawia `.entry-content ul { list-style-type: disc }` na elemencie <ul>,
   skad wartosc DZIEDZICZY sie do <li>. Deklaracja postawiona wprost na <li>
   zawsze wygrywa z wartoscia dziedziczona — niezaleznie od specyficznosci —
   wiec nie trzeba tu ani wyzszych selektorow, ani !important. */
.ltek-cechy > li,
.ltek-liczby > li,
.ltek-zespol > li,
.ltek-logotypy > li {
    list-style: none;
}


/* =============================================================================
   3. SEKCJA — pionowy rytm i oddzielenie blokow tresci
   ========================================================================== */

.ltek-sekcja {
    margin: 0;
}

/* Odstep tylko MIEDZY sekcjami — pierwsza sekcja nie odbija sie od naglowka. */
.ltek-sekcja + .ltek-sekcja {
    margin-top: var(--ltek-rytm);
}

/* Ostatni element w sekcji nie dodaje wiszacego marginesu (motyw daje p{20px}). */
.ltek-sekcja > *:last-child {
    margin-bottom: 0;
}

/* Wariant: brak odstepu u gory, gdy sekcja jest pierwsza w kolejnosci. */
.ltek-sekcja--pierwsza {
    margin-top: 0;
}

/* Wariant: jasna plyta — wyroznienie bloku tlem. */
.ltek-sekcja--plyta {
    background: var(--ltek-plyta);
    padding: var(--ltek-rytm) var(--ltek-odstep);
    border-radius: var(--ltek-promien);
}

/* Wariant: ciemna plyta — mocny akcent kompozycyjny. */
.ltek-sekcja--ciemna {
    background: var(--ltek-plyta-ciemna);
    color: var(--ltek-tekst-na-ciemnym);
    padding: var(--ltek-rytm) var(--ltek-odstep);
    border-radius: var(--ltek-promien);
}

.ltek-sekcja--ciemna h1,
.ltek-sekcja--ciemna h2,
.ltek-sekcja--ciemna h3,
.ltek-sekcja--ciemna h4,
.ltek-sekcja--ciemna .ltek-tytul,
.ltek-sekcja--ciemna .ltek-podtytul,
.ltek-sekcja--ciemna .ltek-haslo {
    color: var(--ltek-papier);
}

.ltek-sekcja--ciemna .ltek-nadtytul,
.ltek-sekcja--ciemna .ltek-liczba__wartosc {
    color: var(--ltek-akcent-jasny);
}

.ltek-sekcja--ciemna .ltek-lead,
.ltek-sekcja--ciemna .ltek-liczba__opis,
.ltek-sekcja--ciemna .ltek-osoba__bio,
.ltek-sekcja--ciemna .ltek-figura__podpis {
    color: var(--ltek-tekst-na-ciemnym);
}

.ltek-sekcja--ciemna .ltek-liczba,
.ltek-sekcja--ciemna .ltek-kontakt__karta,
.ltek-sekcja--ciemna .ltek-osoba {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: none;
}


/* --- Szerokosc czytania i wyrownanie ------------------------------------- */

/* Ogranicza dlugosc wiersza do komfortowej i centruje blok. */
.ltek-waska {
    max-width: var(--ltek-szer-tekstu);
    margin-inline: auto;
}

.ltek-srodek {
    text-align: center;
}

/* Cienka linia rozdzielajaca. */
.ltek-kreska {
    border: 0;
    height: 1px;
    background: var(--ltek-linia);
    margin: var(--ltek-rytm) 0;
}


/* =============================================================================
   4. NAGLOWKI
   ========================================================================== */

/* Nadtytul — maly, rozstrzelony napis nad naglowkiem, np. "— KIM JESTESMY?".
   Uzywany na wszystkich szesciu podstronach. To NIE jest naglowek semantyczny:
   wstawiamy go jako <p>, zeby nie psuc hierarchii h2 -> h3. */
.ltek-nadtytul {
    display: block;
    margin: 0 0 var(--ltek-odstep-s);
    font-family: var(--ltek-font);
    font-size: var(--ltek-tekst-maly);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ltek-akcent);
}

/* Glowny naglowek sekcji — zakladany na <h2>. */
.ltek-tytul {
    margin: 0 0 var(--ltek-odstep-s);
    font-family: var(--ltek-font);
    font-size: var(--ltek-tytul-duzy);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--ltek-atrament);
    text-wrap: balance;
}

/* Naglowek nizszego rzedu — zakladany na <h3>. */
.ltek-podtytul {
    margin: 0 0 var(--ltek-odstep-s);
    font-family: var(--ltek-font);
    font-size: var(--ltek-tytul-maly);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ltek-atrament);
}


/* =============================================================================
   5. LEAD — akapit wprowadzajacy
   -----------------------------------------------------------------------------
   Wlasna klasa zamiast motywowej .lead: .lead niesie ze soba sztywne
   font-size:20px i line-height:30px z opcji motywu, ktorych nie da sie
   przeskalowac na malych ekranach.
   ========================================================================== */

.ltek-lead {
    margin: 0 0 var(--ltek-odstep);
    max-width: var(--ltek-szer-tekstu);
    font-family: var(--ltek-font-lead);
    font-size: var(--ltek-lead-rozmiar);
    font-weight: 500;
    line-height: 1.55;
    color: var(--ltek-atrament-2);
}

/* Zwykly akapit tresci — jawne line-height, bo motyw dziedziczy 30px z body. */
.ltek-tekst {
    margin: 0 0 var(--ltek-odstep-s);
    max-width: var(--ltek-szer-tekstu);
    font-size: var(--ltek-tekst-podstawowy);
    line-height: 1.75;
}


/* =============================================================================
   6. UKLAD DWUKOLUMNOWY — tekst obok obrazu
   -----------------------------------------------------------------------------
   Domyslnie: 1 kolumna. Od 720 px kontenera: 2 rowne kolumny.
   Uzyty jest container query z zapasem w postaci media query, dzieki czemu
   uklad dziala tak samo w tresci strony i w wezszym kontenerze.
   ========================================================================== */

.ltek-duo {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ltek-odstep);
    align-items: center;
}

.ltek-duo__tekst,
.ltek-duo__media {
    min-width: 0;   /* pozwala tresci sie zwezac zamiast rozpychac siatke */
}

.ltek-duo__tekst > *:last-child {
    margin-bottom: 0;
}

.ltek-duo__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ltek-promien);
}

@media (min-width: 720px) {
    .ltek-duo {
        grid-template-columns: 1fr 1fr;
    }

    /* Obraz po lewej, tekst po prawej — na mobile kolejnosc zostaje z HTML. */
    .ltek-duo--media-pierwsze .ltek-duo__media {
        order: -1;
    }

    /* Wariant: szerszy tekst, wezszy obraz. */
    .ltek-duo--waskie-media {
        grid-template-columns: 3fr 2fr;
    }
}


/* =============================================================================
   7. KAFELKI Z LICZBAMI — 2002, 300 m2, 9 drukarek, 50% energii
   ========================================================================== */

.ltek-liczby {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--ltek-odstep-s);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ltek-liczba {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    padding: var(--ltek-odstep);
    background: var(--ltek-papier);
    border: 1px solid var(--ltek-linia);
    border-radius: var(--ltek-promien);
    text-align: center;
}

.ltek-liczba__wartosc {
    display: block;
    font-family: var(--ltek-font);
    font-size: var(--ltek-liczba-rozmiar);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--ltek-akcent);
}

/* Mala jednostka przy liczbie, np. "m²" albo "%". */
.ltek-liczba__jednostka {
    font-size: 0.5em;
    font-weight: 700;
    letter-spacing: 0;
    vertical-align: baseline;
}

.ltek-liczba__opis {
    display: block;
    font-size: var(--ltek-tekst-maly);
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ltek-tekst-drugi);
}


/* =============================================================================
   8. LISTA CECH — marker graficzny zamiast kropki
   ========================================================================== */

.ltek-cechy {
    display: grid;
    gap: var(--ltek-odstep-s);
    margin: 0 0 var(--ltek-odstep);
    padding: 0;
    list-style: none;
}

.ltek-cechy > li {
    position: relative;
    min-width: 0;
    padding-left: 1.9em;
    font-size: var(--ltek-tekst-podstawowy);
    line-height: 1.65;
    margin: 0;
}

/* Marker: kwadrat obrocony o 45 stopni w kolorze akcentu. */
.ltek-cechy > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.55em;
    height: 0.55em;
    background: var(--ltek-akcent);
    transform: rotate(45deg);
}

.ltek-sekcja--ciemna .ltek-cechy > li::before {
    background: var(--ltek-akcent-jasny);
}

/* Wariant: dwie kolumny na szerszym ekranie. */
@media (min-width: 720px) {
    .ltek-cechy--dwie {
        grid-template-columns: 1fr 1fr;
        column-gap: var(--ltek-odstep);
    }
}


/* =============================================================================
   9. KARTA OSOBY — zespol
   ========================================================================== */

.ltek-zespol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--ltek-odstep);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ltek-osoba {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 0 0 var(--ltek-odstep);
    background: var(--ltek-papier);
    border: 1px solid var(--ltek-linia);
    border-radius: var(--ltek-promien);
    box-shadow: var(--ltek-cien);
    overflow: hidden;
}

.ltek-osoba__foto {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin: 0 0 var(--ltek-odstep-s);
    background: var(--ltek-plyta);
}

.ltek-osoba__imie {
    margin: 0 var(--ltek-odstep) 0.15rem;
    font-family: var(--ltek-font);
    font-size: var(--ltek-tytul-maly);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ltek-atrament);
}

.ltek-osoba__rola {
    margin: 0 var(--ltek-odstep) var(--ltek-odstep-s);
    font-size: var(--ltek-tekst-maly);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ltek-akcent);
}

.ltek-osoba__bio {
    margin: 0 var(--ltek-odstep);
    font-size: var(--ltek-tekst-podstawowy);
    line-height: 1.65;
    color: var(--ltek-tekst-drugi);
}


/* =============================================================================
   10. BLOK KONTAKTOWY — adres, telefony, e-mail
   ========================================================================== */

.ltek-kontakt {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--ltek-odstep-s);
    margin: 0 0 var(--ltek-odstep);
}

.ltek-kontakt__karta {
    min-width: 0;
    padding: var(--ltek-odstep);
    background: var(--ltek-papier);
    border: 1px solid var(--ltek-linia);
    border-radius: var(--ltek-promien);
}

.ltek-kontakt__etykieta {
    display: block;
    margin: 0 0 0.5rem;
    font-size: var(--ltek-tekst-maly);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ltek-akcent);
}

.ltek-sekcja--ciemna .ltek-kontakt__etykieta {
    color: var(--ltek-akcent-jasny);
}

.ltek-kontakt__dane {
    margin: 0;
    font-size: var(--ltek-tekst-podstawowy);
    font-weight: 600;
    line-height: 1.7;
}

/* Adres pocztowy — <address> bez kursywy, ktora daje przegladarka. */
.ltek-kontakt__adres {
    margin: 0;
    font-style: normal;
    font-size: var(--ltek-tekst-podstawowy);
    line-height: 1.7;
}


/* =============================================================================
   11. PRZYCISKI
   -----------------------------------------------------------------------------
   UWAGA NA SPECYFICZNOSC — czytaj przed edycja.
   Motyw styluje linki w tresci regula:
       .ut-vc-disabled .entry-content a:not(.checkout-button):not(.woocommerce-Button)
       { color: rgba(51,51,51,1); text-decoration: underline; font-weight: normal; }
   To specyficznosc 0-4-1. Klasa .ltek-btn (0-1-0) przegralaby z nia niezaleznie
   od kolejnosci w pliku, a przycisk zostalby szary i podkreslony.
   Dlatego kazda regula przycisku powtarza strukture motywu i dokłada wlasna
   klase — daje 0-5-1 i wygrywa CZYSTO, bez !important.
   Drugi selektor w kazdej parze jest zapasem na wypadek, gdyby <body> nie mialo
   klasy .ut-vc-disabled — wtedy regula motywu i tak nie zadziala, wiec nizsza
   specyficznosc wystarczy.
   Klasa .ut-vc-disabled jest obecna na wszystkich podstronach, poniewaz wtyczka
   js_composer zostala usunieta (potwierdzone w zrodle /dotacje/).
   ========================================================================== */

/* Grupa przyciskow — zawija sie na waskim ekranie. */
.ltek-przyciski {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ltek-odstep-s);
    margin: var(--ltek-odstep) 0 0;
}

/* Wyglad bazowy = przycisk glowny. */
.ut-vc-disabled .entry-content a.ltek-btn:not(.checkout-button):not(.woocommerce-Button),
.entry-content a.ltek-btn,
a.ltek-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.85em 1.9em;
    max-width: 100%;
    font-family: var(--ltek-font);
    font-size: var(--ltek-tekst-maly);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    color: var(--ltek-papier);
    background: var(--ltek-akcent);
    border: 2px solid var(--ltek-akcent);
    border-radius: var(--ltek-promien);
    transition: background-color var(--ltek-przejscie),
                border-color var(--ltek-przejscie),
                color var(--ltek-przejscie);
}

/* Jawny alias wariantu glownego — dla czytelnosci kodu stron. */
.ut-vc-disabled .entry-content a.ltek-btn--glowny:not(.checkout-button):not(.woocommerce-Button),
.entry-content a.ltek-btn--glowny,
a.ltek-btn--glowny {
    color: var(--ltek-papier);
    background: var(--ltek-akcent);
    border-color: var(--ltek-akcent);
}

/* Wariant drugorzedny — obrys, bez wypelnienia. */
.ut-vc-disabled .entry-content a.ltek-btn--drugi:not(.checkout-button):not(.woocommerce-Button),
.entry-content a.ltek-btn--drugi,
a.ltek-btn--drugi {
    color: var(--ltek-atrament);
    background: transparent;
    border-color: currentColor;
}

/* Stany hover/focus/active.
   Motyw ma tu 0-5-1 (dochodzi :hover), wiec nasze reguly musza miec 0-6-1. */
.ut-vc-disabled .entry-content a.ltek-btn:not(.checkout-button):not(.woocommerce-Button):hover,
.ut-vc-disabled .entry-content a.ltek-btn:not(.checkout-button):not(.woocommerce-Button):focus,
.ut-vc-disabled .entry-content a.ltek-btn:not(.checkout-button):not(.woocommerce-Button):active,
.entry-content a.ltek-btn:hover,
.entry-content a.ltek-btn:focus,
.entry-content a.ltek-btn:active,
a.ltek-btn:hover,
a.ltek-btn:focus,
a.ltek-btn:active {
    color: var(--ltek-papier);
    background: var(--ltek-akcent-ciemny);
    border-color: var(--ltek-akcent-ciemny);
}

.ut-vc-disabled .entry-content a.ltek-btn--drugi:not(.checkout-button):not(.woocommerce-Button):hover,
.ut-vc-disabled .entry-content a.ltek-btn--drugi:not(.checkout-button):not(.woocommerce-Button):focus,
.ut-vc-disabled .entry-content a.ltek-btn--drugi:not(.checkout-button):not(.woocommerce-Button):active,
.entry-content a.ltek-btn--drugi:hover,
.entry-content a.ltek-btn--drugi:focus,
.entry-content a.ltek-btn--drugi:active,
a.ltek-btn--drugi:hover,
a.ltek-btn--drugi:focus,
a.ltek-btn--drugi:active {
    color: var(--ltek-papier);
    background: var(--ltek-atrament-2);
    border-color: var(--ltek-atrament-2);
}

/* Przyciski na ciemnej plycie. */
.ltek-sekcja--ciemna .ltek-btn--drugi {
    color: var(--ltek-papier);
}

.ut-vc-disabled .entry-content .ltek-sekcja--ciemna a.ltek-btn--drugi:not(.woocommerce-Button):hover,
.entry-content .ltek-sekcja--ciemna a.ltek-btn--drugi:hover {
    color: var(--ltek-atrament-2);
    background: var(--ltek-papier);
    border-color: var(--ltek-papier);
}


/* =============================================================================
   12. LINKI
   ========================================================================== */

/* .ltek-link — link bez podkreslenia narzuconego przez motyw (karty, kontakt).
   Ta sama sztuczka ze specyficznoscia co przy przyciskach: 0-5-1 vs 0-4-1. */
.ut-vc-disabled .entry-content a.ltek-link:not(.checkout-button):not(.woocommerce-Button),
.entry-content a.ltek-link,
a.ltek-link {
    color: var(--ltek-atrament);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--ltek-akcent);
    transition: color var(--ltek-przejscie),
                border-color var(--ltek-przejscie);
}

.ut-vc-disabled .entry-content a.ltek-link:not(.checkout-button):not(.woocommerce-Button):hover,
.ut-vc-disabled .entry-content a.ltek-link:not(.checkout-button):not(.woocommerce-Button):focus,
.entry-content a.ltek-link:hover,
.entry-content a.ltek-link:focus,
a.ltek-link:hover,
a.ltek-link:focus {
    color: var(--ltek-akcent-ciemny);
    border-bottom-color: var(--ltek-akcent-ciemny);
}

/* Zwykle linki wewnatrz ciemnej plyty — motyw dalby im #333 (nieczytelne).
   0-5-1 pokonuje regule motywu 0-4-1. */
.ut-vc-disabled .entry-content .ltek-sekcja--ciemna a:not(.checkout-button):not(.woocommerce-Button),
.entry-content .ltek-sekcja--ciemna a:not(.ltek-btn) {
    color: var(--ltek-papier);
}

.ut-vc-disabled .entry-content .ltek-sekcja--ciemna a:not(.checkout-button):not(.woocommerce-Button):hover,
.entry-content .ltek-sekcja--ciemna a:not(.ltek-btn):hover {
    color: var(--ltek-akcent-jasny);
}

.ltek-sekcja--ciemna .ltek-link {
    border-bottom-color: var(--ltek-akcent-jasny);
}


/* =============================================================================
   13. CYTAT I HASLO
   -----------------------------------------------------------------------------
   Motyw styluje blockquote regula
     blockquote:not(.ut-parallax-quote-title):not(.ut-quote-post-block)  (0-2-1)
   ze sztywnym font-size:24px. Selektor ponizej ma 0-3-1, wiec skalowanie
   clamp() dziala takze na malych ekranach — bez !important.
   ========================================================================== */

.entry-content blockquote.ltek-cytat:not(.ut-parallax-quote-title),
blockquote.ltek-cytat {
    margin: var(--ltek-odstep) 0;
    padding: 0 0 0 var(--ltek-odstep);
    max-width: var(--ltek-szer-tekstu);
    font-family: var(--ltek-font);
    font-size: var(--ltek-tytul-maly);
    font-weight: 500;
    font-style: normal;
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: var(--ltek-atrament-2);
    border-left: 4px solid var(--ltek-akcent);
    quotes: none;
}

.ltek-cytat > p {
    margin: 0 0 var(--ltek-odstep-s);
}

.ltek-cytat > *:last-child {
    margin-bottom: 0;
}

/* Podpis pod cytatem — zakladany na <cite> lub <footer>. */
.ltek-cytat__autor {
    display: block;
    font-size: var(--ltek-tekst-maly);
    font-weight: 700;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ltek-tekst-drugi);
}

.ltek-sekcja--ciemna .ltek-cytat {
    border-left-color: var(--ltek-akcent-jasny);
}

.ltek-sekcja--ciemna .ltek-cytat__autor {
    color: var(--ltek-tekst-na-ciemnym);
}

/* Haslo — wyeksponowane zdanie marki, np. "Technologia ktora porusza."
   Nie jest cytatem, wiec zakladamy je na <p>, nie na <blockquote>. */
.ltek-haslo {
    margin: var(--ltek-odstep) 0;
    max-width: 24ch;
    font-family: var(--ltek-font);
    font-size: var(--ltek-tytul-sredni);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--ltek-atrament);
    text-wrap: balance;
}

.ltek-haslo--srodek {
    max-width: 30ch;
    margin-inline: auto;
    text-align: center;
}


/* =============================================================================
   14. OBRAZY I LOGOTYPY
   ========================================================================== */

.ltek-figura {
    margin: 0 0 var(--ltek-odstep);
}

.ltek-figura img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ltek-promien);
}

.ltek-figura__podpis {
    margin-top: var(--ltek-odstep-s);
    font-size: var(--ltek-tekst-maly);
    line-height: 1.5;
    color: var(--ltek-tekst-drugi);
}

/* Siatka logotypow partnerow (strona /nasza-marka/). */
.ltek-logotypy {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: var(--ltek-odstep);
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ltek-logotypy img {
    display: block;
    width: 100%;
    max-height: 4.5rem;
    height: auto;
    object-fit: contain;
    margin-inline: auto;
}


/* =============================================================================
   15. DOSTEPNOSC — ograniczenie ruchu
   -----------------------------------------------------------------------------
   Motyw Brooklyn nie respektuje prefers-reduced-motion i animuje obrazy
   (animation-duration: 1s na img.size-full, .aligncenter itd.).
   Wylaczamy to w obrebie naszej tresci wraz z wlasnymi przejsciami.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .ltek,
    .ltek *,
    .ltek-btn,
    .ltek-link {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
        scroll-behavior: auto;
    }
}


/* =============================================================================
   16. WYDRUK
   ========================================================================== */

@media print {
    .ltek-sekcja--ciemna {
        background: transparent;
        color: #000;
    }

    .ltek-sekcja--ciemna h2,
    .ltek-sekcja--ciemna h3,
    .ltek-sekcja--ciemna .ltek-tytul,
    .ltek-sekcja--ciemna .ltek-podtytul {
        color: #000;
    }

    .ltek-btn {
        border-color: #000;
        color: #000;
        background: transparent;
    }
}


/* --- Zastepnik zdjecia: inicjaly ------------------------------------------
   Uzywany, gdy osoba nie ma fotografii w bibliotece mediow.
   Zachowuje te sama proporcje co .ltek-osoba__foto, wiec karty w siatce
   maja rowna wysokosc niezaleznie od tego, czy zdjecie istnieje.        */

.ltek-osoba__inicjaly {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 0 var(--ltek-odstep-s);
  background: var(--ltek-plyta);
  color: var(--ltek-tekst-drugi);
  font-family: var(--ltek-font);
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  user-select: none;
}


/* --- Stopka ---------------------------------------------------------------
   Trzy kolumny na desktopie, jedna na telefonie. Osadzona w ciemnym pasku
   motywu, wiec kolory bierze z --ltek-tekst-na-ciemnym.                   */

.ltek-stopka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  /* odstep miedzy kolumnami wyraznie wiekszy niz miedzy wierszami —
     kolumny maja oddychac, wiersze nie muszą */
  column-gap: clamp(2.5rem, 6vw, 5rem);
  row-gap: var(--ltek-odstep-l);
  align-items: start;
}
.ltek-stopka__kolumna {
  min-width: 0;
  max-width: 34ch;
}
.ltek-stopka__tytul {
  margin: 0 0 var(--ltek-odstep-s);
  font-family: var(--ltek-font);
  font-size: var(--ltek-tytul-maly);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ltek-tekst-na-ciemnym);
}
.ltek-stopka__haslo {
  margin: 0;
  font-family: var(--ltek-font);
  font-size: var(--ltek-tytul-sredni);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ltek-tekst-na-ciemnym);
}
.ltek-stopka__adres,
.ltek-stopka__dane,
.ltek-stopka__tekst {
  margin: 0 0 var(--ltek-odstep-s);
  font-size: var(--ltek-tekst-podstawowy);
  font-style: normal;
  line-height: 1.7;
  color: var(--ltek-tekst-na-ciemnym);
}



/* --- Haslo otwierajace ----------------------------------------------------
   Duza linia z rotujacym slowem. Uzywana raz, na gorze strony glownej.   */

.ltek-haslo {
  margin: 0 0 var(--ltek-odstep-s);
  font-family: var(--ltek-font);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ltek-naglowek);
}

/* --- Lista danych (patenty, dane rejestrowe) ------------------------------
   Dwie kolumny na desktopie: etykieta i wartosc. Jedna na telefonie.     */

.ltek-dane {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: 0.6rem var(--ltek-odstep);
  margin: var(--ltek-odstep) 0;
}
.ltek-dane dt {
  margin: 0;
  font-size: var(--ltek-tekst-maly);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ltek-tekst-drugi);
}
.ltek-dane dd {
  margin: 0;
  font-size: var(--ltek-tekst-podstawowy);
  line-height: 1.6;
  color: var(--ltek-tekst);
}

@media (max-width: 34rem) {
  .ltek-dane { grid-template-columns: 1fr; gap: 0.15rem; }
  .ltek-dane dd { margin-bottom: 0.7rem; }
}


/* --- Stopka: listy i pasek prawny ----------------------------------------
   Mapa strony i odnosniki. Drobny druk — stopka nie ma konkurowac
   z trescia strony.                                                       */

.ltek-stopka__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  line-height: 1.9;
}
.ltek-stopka__lista > li { margin: 0; }
.ltek-stopka__lista--pozioma {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem clamp(1.6rem, 4vw, 3rem);
  padding-top: var(--ltek-odstep);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  line-height: 1.6;
}
.ltek-stopka__kolumna--pelna { grid-column: 1 / -1; }

/* drobny druk w calej stopce */
.ltek-stopka__adres,
.ltek-stopka__dane,
.ltek-stopka__tekst { font-size: 0.8125rem; line-height: 1.8; }
.ltek-stopka__tytul { font-size: 0.75rem; letter-spacing: 0.12em; }
.ltek-stopka__haslo { font-size: clamp(1.05rem, 2.2vw, 1.35rem); }


/* --- Stopka: kontrast -----------------------------------------------------
   Motyw renderuje stopke na bialym tle (skin ut-footer-custom), wiec tekst
   musi byc ciemny. Wersja na ciemne tlo jest nizej, warunkowo.

   Kontrast wobec #ffffff:
     #151515 na bialym  = 18.3:1  (naglowki)
     #000000 na bialym  = 21:1    (linki)
     #4a4a4a na bialym  =  8.6:1  (tekst drugorzedny)
   Wymog WCAG AA dla tekstu ponizej 18px to 4.5:1 — mamy zapas.          */

.ltek-stopka,
.ltek-stopka__tekst,
.ltek-stopka__adres,
.ltek-stopka__dane,
.ltek-stopka__lista {
  color: #4a4a4a;
}
.ltek-stopka__haslo {
  color: #151515;
}
.ltek-stopka__tytul {
  color: #151515;
}
.ltek-stopka a,
.ltek-stopka .ltek-link {
  color: #000000;
  text-decoration-color: var(--ltek-akcent);
}
.ltek-stopka a:hover,
.ltek-stopka a:focus-visible {
  color: var(--ltek-akcent);
}
.ltek-stopka__lista--pozioma {
  border-top-color: rgba(0, 0, 0, 0.12);
}

/* Gdyby motyw przelaczono na ciemna stopke — odwracamy. */
.ut-footer-dark .ltek-stopka,
.ut-footer-dark .ltek-stopka__tekst,
.ut-footer-dark .ltek-stopka__adres,
.ut-footer-dark .ltek-stopka__dane,
.ut-footer-dark .ltek-stopka__lista { color: #d6d8db; }
.ut-footer-dark .ltek-stopka__haslo,
.ut-footer-dark .ltek-stopka__tytul { color: #ffffff; }
.ut-footer-dark .ltek-stopka a     { color: #ffffff; }
.ut-footer-dark .ltek-stopka__lista--pozioma { border-top-color: rgba(255,255,255,0.18); }




/* --- Rotujace slowo -------------------------------------------------------
   "TECHNOLOGIA / ktora porusza -> ktora laczy -> ..."

   Czysty CSS, bez JavaScriptu. Slowa leza w pionie, animacja przesuwa liste.

   KLUCZOWE: wysokosc wiersza i krok przesuniecia to ta sama zmienna
   --ltek-krok. Jesli sie rozjada, widac kawalek nastepnej frazy.
   Dlatego jedna wartosc, uzywana w trzech miejscach.

   Zeby dodac slowo: dopisz <span> w HTML i jeden krok w @keyframes.     */

.ltek-rotacja {
  --ltek-krok: 1.3em;
  display: inline-block;
  height: var(--ltek-krok);
  overflow: hidden;
  vertical-align: bottom;
  text-align: left;
}
.ltek-rotacja__lista {
  display: block;
  animation: ltek-rotacja-przesun 15s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}
.ltek-rotacja__lista > span {
  display: block;
  height: var(--ltek-krok);
  line-height: var(--ltek-krok);
  white-space: nowrap;
  color: var(--ltek-akcent);
}

@keyframes ltek-rotacja-przesun {
  0%,  16%  { transform: translateY(0); }
  20%, 36%  { transform: translateY(calc(-1 * var(--ltek-krok))); }
  40%, 56%  { transform: translateY(calc(-2 * var(--ltek-krok))); }
  60%, 76%  { transform: translateY(calc(-3 * var(--ltek-krok))); }
  80%, 96%  { transform: translateY(calc(-4 * var(--ltek-krok))); }
  100%      { transform: translateY(0); }
}

/* Wariant w hero motywu — dziedziczy kolor i rozmiar naglowka.
   Nadpisujemy TYLKO krok, nigdy samej wysokosci osobno. */
.ltek-rotacja--hero {
  --ltek-krok: 1.15em;
}
.ltek-rotacja--hero .ltek-rotacja__lista > span {
  color: inherit;
}

/* Na waskich ekranach frazy moga byc dluzsze niz szerokosc — pozwalamy
   zawijac i zwiekszamy krok, zeby dwie linie sie miescily. */
@media (max-width: 48rem) {
  .ltek-rotacja--hero { --ltek-krok: 2.4em; }
  .ltek-rotacja--hero .ltek-rotacja__lista > span {
    white-space: normal;
    display: flex;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ltek-rotacja__lista { animation: none; }
}