/* =========================================================================
 * TOKENY SYSTEMU WIZUALNEGO
 *
 * Te same wartosci, ktore siedza w Ustawieniach globalnych Elementora
 * (zestaw stylow, `bin/ustaw-palete-globalna.php`). Deklarujemy je DRUGI RAZ
 * swiadomie: nasze shortcody rysuja wlasny znacznik, ktorego Elementor nie
 * dotyka, a czytanie u nas `--e-global-color-*` zwiazaloby caly wyglad strony
 * z jednym builderem. Przed rozjazdem tych dwoch list broni TEST (sekcja 25),
 * a nie dyscyplina.
 *
 * ZRODLO PRAWDY PALETY: zmienne w Figmie (`get_variable_defs`), identyczne na
 * wszystkich ekranach makiety. Tokeny statusow i paskowania nie sa zmiennymi
 * Figmy, ale sa w makiecie i uzywa ich zarowno front, jak i edytor obrysow
 * w panelu - dlatego maja nazwy, a nie literaly rozsiane po pliku.
 *
 * Pelny opis warstw i planu ujednolicenia: `SYSTEM-WIZUALNY.md`.
 * ====================================================================== */

:root {
    /* paleta marki */
    --chms-green: #12A579;
    --chms-blue: #1F325D;
    --chms-dark-blue: #15224F;
    --chms-dark: #1E3240;
    --chms-slate-gray: #7C8893;
    --chms-sand: #E2DDD9;
    --chms-gray: #BDBDBD;
    --chms-gray-1: #959595;
    --chms-yellow: #FEB426;
    --chms-white: #FFFFFF;

    /* statusy lokalu - te same na froncie i w edytorze obrysow */
    --chms-status-free: #12A579;
    --chms-status-reserved: #FF8D28;
    --chms-status-sold: #FF543E;

    /* SKALA TYPOGRAFICZNA - te same osiem stopni, co w Ustawieniach
       globalnych Elementora (`bin/ustaw-typografie-globalna.php`).
       Parzyste, bo tak rozstrzygnal sie rozjazd: Elementor uzywal 12/14,
       arkusz 13/15 - te same stopnie pod dwiema nazwami. */
    --chms-text-xs: 12px;
    --chms-text-sm: 14px;
    --chms-text-base: 16px;
    --chms-text-lead: 18px;
    --chms-text-xl: 20px;
    /* 26 px to naglowek kafelka opisowego z makiety - wysokosc wersalika 20 px
       przy stosunku 0,75 skalibrowanym na tekscie 16 px */
    --chms-text-h4: 26px;
    --chms-text-h3: 30px;
    --chms-text-h2: 40px;
    --chms-text-display: 50px;

    /* TRZY POZIOMY SZEROKOSCI, zmierzone w makiecie - nie jeden.
       Pas szeroki (wciecie 100), kolumna tresci (160) i kolumna waska (205).
       `--chms-content` jest ta sama liczba, co `container_width` w zestawie
       stylow Elementora. */
    --chms-band: 1240px;      /* pas szeroki - spis tresci, bloki Ekologii */
    --chms-content: 1120px;   /* kolumna tresci - domyslna */
    --chms-narrow: 1028px;    /* kolumna waska - plan osiedla */

    /* odcienie uzytkowe z makiety */
    --chms-stripe: #F4F4F4;          /* paskowanie tabeli lokali */
    --chms-card-border: #E0DEF7;     /* obramowanie karty hero na telefonie */
    --chms-green-dark: #0E8A65;      /* zielen w stanie hover */
}

.notch-btn {
    /* --- parametry do dostosowania --- */
    --chamfer: 25px;         /* wielkość ściętego rogu */
    --border-w: 1.5px;       /* grubość obramowania */
    --border-color: var(--chms-green); /* kolor obramowania i strzałki */
    --fill-color: var(--chms-white);   /* kolor tła przycisku */
    --text-color: var(--chms-dark);   /* kolor tekstu */

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 210px;
    height: 50px;
    padding: 0 28px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
    isolation: isolate; /* własny kontekst nakładania dla z-index pseudoelementów */
}

/* warstwa obramowania (spód) */
.notch-btn::before,
.notch-btn::after {
    content: "";
    position: absolute;
    inset: 0;
}

.notch-btn::before {
    z-index: 0;
    background: var(--border-color);
    clip-path: polygon(
            0 0,
            calc(100% - var(--chamfer)) 0,
            100% var(--chamfer),
            100% 100%,
            0 100%
    );
}

/* warstwa wypełnienia (biały środek, mniejszy o grubość obramowania) */
.notch-btn::after {
    z-index: 1;
    inset: var(--border-w);
    background: var(--fill-color);
    clip-path: polygon(
            0 0,
            calc(100% - (var(--chamfer) - var(--border-w))) 0,
            100% calc(var(--chamfer) - var(--border-w)),
            100% 100%,
            0 100%
    );
    transition: background-color 0.15s ease;
}

.notch-btn:hover::after {
    background: #F0FDF6;
}

.notch-btn__label,
.notch-btn__arrow {
    position: relative;
    z-index: 2;
}

.notch-btn__arrow {
    color: var(--border-color);
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.notch-btn:hover .notch-btn__arrow {
    transform: translateX(3px);
}



.cechy-lista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    row-gap: 14px;
}

.cecha-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cecha-item img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

.cecha-item span {
    font-size: 16px;
    color: #7C8893;
    line-height: 22px;
    font-weight: 400;
}

@media (max-width: 480px) {
    .cechy-lista {
        grid-template-columns: 1fr;
    }
}


.hp-available-invesments-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -50px;

}

.hp-available-invesments-btn a{
    width: 340px;
    height: 80px;
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 20px;
    color: #000;
    border-radius: 0px;
    background-color: #fff !important;
    box-shadow: 8px 4px 34px 0px #00000040 !important;
}

.about-us-features-wrapper{

    max-width: var(--chms-content);

    /* BEZ WCIECIA BOCZNEGO. Bylo tu `padding: 0 50px` po starej stronie
       i to ono - razem z dopelnieniem kontenera Elementora - scisnelo siatke
       „Twoich korzysci" do 820 px przy pasie tresci 1120. W makiecie kafelek
       tej sekcji ma ~527 px, czyli dokladnie polowe pasa pomniejszona o rynne;
       przy 820 px wychodzilo 380 i tekst lamal sie o dwa wiersze za wczesnie.
       Zmierzone na Ekologia.png: ikona 109-209, tresc 244-636 (kafelek 1),
       ikona 741-840, tresc 872-1263 (kafelek 2). */
    padding: 0;

}

@media screen and (max-width: 490px) {

}

.about-us-features{
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    /* RYNNA MIEDZY KAFELKAMI. Bez niej `space-between` nie daje nic, gdy
       kafelki wypelniaja kontener co do piksela - zmierzone na stronie
       glownej: trzy kafelki 158+169+185 w kolumnie 512 px, rynny **0**,
       a tekst sasiednich kafelkow sie stykal. Wczesniej separacje dawalo
       przypadkiem fabryczne dopelnienie kontenerow V4; po jego zdjeciu
       odstep musi byc zadeklarowany tam, gdzie jest jego miejsce - czyli
       w komponencie, bo ten znacznik rysuje NASZ shortcode.
       Makieta: kafelki 198 px z rynna ~39 przy kolumnie 672 (Landing Page,
       sekcja „O nas"). U nas kolumna bywa wezsza, wiec bierzemy 32 px -
       tyle miesci sie i przy 512 px, nie scinajac tresci do jednego slowa. */
    gap: 32px;
}

/* UKLAD RZEDOWY (strona glowna, sekcja „O nas"): kafelki DZIELA SIE KOLUMNA
   PO ROWNO, tak jak w makiecie - tam wszystkie trzy maja 198 px przy kolumnie
   672, czyli 29,5% szerokosci kazdy. Wczesniej szerokosc brala sie z tresci
   i konczyla na `max-width: 185px` ze starej strony, wiec kafelki wychodzily
   158/169/185 - nierowne i wezsze od projektu. `flex: 1 1 0` liczy je od zera,
   a nie od dlugosci napisu, wiec proporcja trzyma sie przy kazdej szerokosci
   kolumny. Siatka (`--siatka`) ma wlasne reguly i tego nie dotyczy. */
.about-us-features:not(.about-us-features--siatka) .about-us-feature-item{
    flex: 1 1 0;
    max-width: none;
}

.about-us-feature-item span{
    font-size: 16px;
}

.about-us-feature-item h3{
    font-size: 20px;
    font-weight: 700;
}

.about-us-feature-item{

}

@media screen and (max-width: 490px) {
    .about-us-features{
        flex-direction: column;
    }

    .about-us-feature-item{
        max-width: 100%;
    }

    .about-us-feature-item{
        display: flex;
        align-items: center;
        flex-direction: row;
        column-gap: 15px;
    }

    .about-us-feature-item__icon{

    }

    .about-us-feature-item__icon img{

    }

    .about-us-feature-item__content{
        padding: 5px 5px 5px 25px;
        max-width: 80%;
    }

    .about-us-feature-item__content h3{
        margin-bottom: 0 !important;
    }

    /*CONTANT FORM*/

    #wpforms-form-421 #wpforms-421-field_21-container{
        min-width: 100% !important;
    }

    #wpforms-form-421 .wpforms-submit-container {
        display: flex;
        justify-content: center !important;
        margin-top: 0px !important;
    }


    .about-us-features-wrapper{
        padding: 0 0 0 0;
    }

    .about-us-features-wrapper .about-us-features.about-us-features--prosty{
        row-gap: 20px;
    }

}


#wpforms-form-421 input, #wpforms-form-421 select, #wpforms-form-421 textarea{
    background: none;
    color: #BDBDBD;
    border: 1px solid #455781;
}

#wpforms-form-421 input::placeholder, #wpforms-form-421 textarea::placeholder{
    color: #BDBDBD !important;
    opacity: 1;
}


#wpforms-form-421 input[type=checkbox]::before{
    background-color: transparent !important;
}

#wpforms-form-421 label{
    font-size: 12px;
    color: #8C9CC0;
}


#wpforms-form-421 #wpforms-421-field_21-container{
    width: 50% !important;
}

#wpforms-form-421 #wpforms-421-field_21-container .wpforms-layout-column.wpforms-layout-column-50{
    width: auto !important;
}

#wpforms-form-421 .wpforms-submit-container{
    display: flex;
    justify-content: end;
    margin-top: -50px;
}

#wpforms-form-421 #wpforms-submit-421{
    background-color: #12A579;
    min-width: 190px !important;
}

.chms-cp-bloginfo{
    font-size: 12px;
    color: #1F325D;
    font-weight: 400;
}

/* =========================================================================
 * Komponent tekst + obraz - strona obrazu sterowana polem ACF
 *
 * Atrybut dostaje WPROST wartosc wybrana w polu "Obraz po stronie"
 * (lewo / prawo) - zasila go zapis `acf:strona_obrazu` w sekcji Attributes,
 * podmieniany przy renderze przez includes/acf-attributes.php. Edytor V4 nie
 * ma pola CSS Classes, wiec sterujemy atrybutem, nie klasa.
 *
 * UWAGA na specyficznosc: sam atrybut to 0,1,0, czyli tyle samo co styl bazowy
 * flexboxa, stad potrzeba !important. Dopisanie .e-atomic-element przed
 * atrybutem daje 0,2,0 i pozwala !important usunac - ta klasa jest na kazdym
 * elemencie V4 (elementor/modules/atomic-widgets/elements/base/_macros.html.twig:2).
 * ========================================================================= */

[data-chms-image-side="prawo"] {
    flex-direction: row;
}

[data-chms-image-side="lewo"] {
    flex-direction: row-reverse !important;
}

@media screen and (max-width: 782px) {
    [data-chms-image-side="lewo"] {
        flex-direction: column-reverse !important;
    }
}


/* =========================================================================
 * Komponent mapa (chms_mapa) - shortcode [chms_map]
 *
 * Plotno Leafleta plus dwie nakladki: podpis miejscowosci i zielona ramka
 * z adresem. Nadtytul, naglowek i zdjecie obok mapy sa po stronie Elementora,
 * bo to zwykle pola ACF.
 *
 * AKTUALIZACJA 2026-09-02: nadtytul i naglowek jednak renderuje shortcode -
 * leza w .chms-map-inner, NAD .chms-map. Do .chms-map-wrapper trafic nie moga,
 * bo ten jest flexem i naglowek stanalby obok mapy.
 * ========================================================================= */

.chms-map-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 740px;
}

.chms-map-inner {
    width: 100%;
    max-width: var(--chms-content);
}

/* Nadtytul i naglowek leza NAD mapa, poza jej kontenerem - ten jest odniesieniem
   dla nakladek. Kolory z systemu marki: Green #12A579, dark-blue #1F325D. */
.chms-map__header {
    text-align: center;
    margin-bottom: 160px;
}

.chms-map__overline {
    margin: 0 0 8px;
    color: #12A579;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.chms-map__heading {
    margin: 0;
    color: #1F325D;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
}

@media screen and (max-width: 782px) {
    .chms-map__header {
        margin-bottom: 24px;
    }

    .chms-map__heading {
        font-size: 30px;
    }
}

/* WLASNY KONTEKST NAKLADANIA - `isolation: isolate`.
   Leaflet numeruje swoje warstwy wysoko i NA SZTYWNO: kafelki 200, znaczniki
   i nakladki 400, dymki 700, przyciski 800 (`leaflet.css`). Nasza zielona
   tabliczka dokłada 500. Zaden z rodzicow tych warstw nie zakladal wlasnego
   kontekstu (`position: relative` przy `z-index: auto` go NIE TWORZY), wiec
   te liczby trafialy wprost do kontekstu strony i biły przyklejony pasek
   naglowka, ktory ma `z-index: 100` - zmierzone na telefonie: kafelki
   i tabliczka rysowaly sie NA logo i hamburgerze.
   `isolation: isolate` zamyka cala rodzine w jednym pudelku, ktore z reszta
   strony konkuruje jako POJEDYNCZY element o z-index 0. Lepsze niz podnoszenie
   paska ponad 800, bo dziala takze na kazdy kolejny element o wysokim
   z-indeksie i nie wchodzi w droge lightboxowi Elementora (9999). */
.chms-map {
    position: relative;
    isolation: isolate;
    max-width: var(--chms-content);
    margin: 0 auto;
}
/* Lagodny, odbarwiony styl z makiety. Standardowy OSM jest kolorowy i gesty,
   wiec zdejmujemy nasycenie, rozjasniamy i spuszczamy kontrast - zostaja cienkie
   szare drogi i szare podpisy. Filtr siedzi na WARSTWIE KAFELKOW, nie na calej
   mapie: inaczej odbarwilby tez zielona pinezke i nasze nakladki.
   Gdyby to nie wystarczylo, alternatywa jest podmiana zrodla kafelkow na Carto
   Positron - filtr chms_map_tile_layer w includes/assets.php. */
.chms-map .leaflet-tile-pane {
    filter: grayscale(1) brightness(1.06) contrast(0.82);
}

/* L.divIcon dostaje od Leafleta biale tlo i obramowanie - zdejmujemy je,
   zeby zostal sam ksztalt SVG */
.chms-map__pin {
    background: none;
    border: none;
}


.chms-map__canvas {
    height: 520px;
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
    /* CELOWO bez z-index. Plotno nie moze tworzyc wlasnego kontekstu nakladania,
       bo uwiezilby w sobie kontrolki Leafleta. Bez niego warstwy ukladaja sie
       tak, jak chcemy: kafelki i znaczniki 400, nasze nakladki 500,
       przyciski zoomu 1000 - czyli nad zdjeciem i klikalne. */
}

/* Zdjecie lotnicze NACHODZI na mape z lewej - stad pozycjonowanie absolutne
   zamiast dwoch kolumn obok siebie. Proporcje z makiety: zdjecie zajmuje
   niecale 45% szerokosci sekcji i jest wysrodkowane w pionie wzgledem mapy. */
.chms-map__photo {
    position: absolute;
    left: 5%;
    top: 20%;
    transform: translateY(-50%);
    z-index: 500;
    width: 44%;
    max-width: 500px;
    max-height: 400px;
    line-height: 0;
    box-shadow: 8px 5px 14px 0px rgb(81 81 81 / 70%);
    border: 1px solid #fff;
}


.chms-map__photo img {
    display: block;
    max-width: inherit !important;
    object-fit: cover;
    max-height: inherit !important;
    width: 100%;
    height: 100% !important;
}

.chms-map__place {
    position: absolute;
    top: 24px;
    right: 32px;
    z-index: 500;
    padding: 6px 14px;
    background: #ffffff;
    color: #1F325D;
    font-size: 18px;
    font-weight: 600;
    pointer-events: none; /* podpis nie ma przechwytywac przeciagania mapy */
}

.chms-map__card {
    --chamfer: 26px; /* ten sam zabieg co w .notch-btn - sciety prawy gorny rog */

    position: absolute;
    right: 32px;
    bottom: 48px;
    z-index: 500;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 300px;
    padding: 20px 26px;
    background: #12A579;
    color: #ffffff;
    font-size: 14px;
    line-height: 24px;
    /* Jednowarstwowy clip-path wystarczy, bo tabliczka nie ma obramowania -
       w .notch-btn potrzebne byly dwie warstwy wlasnie dla ramki */
    clip-path: polygon(
            0 0,
            calc(100% - var(--chamfer)) 0,
            100% var(--chamfer),
            100% 100%,
            0 100%
    );
}

.chms-map__card-icon {
    flex-shrink: 0;
    margin-top: 2px; /* wyrownanie ostrza kropli do pierwszej linii tekstu */
}

/* Nazwa i adres to OSOBNE pola ACF, nie jedno z <span> w srodku - inaczej
   pogrubienie zalezaloby od tego, jak redaktor zlamie tekst */
.chms-map__card-text {
    display: block;
}

.chms-map__card-name {
    display: block;
    font-weight: 700;
}

.chms-map__card-address {
    display: block;
    font-weight: 400;
}


@media screen and (max-width: 782px) {
    /* Ukladamy sie w dwa wiersze: zdjecie, pod nim mapa. Grid, a nie zwykly
       przeplyw, bo tabliczka ma NACHODZIC na granice miedzy nimi - a do tego
       musi siedziec w tej samej komorce co zdjecie. */
    .chms-map {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 12px;
    }

    .chms-map__photo {
        grid-area: 1 / 1;
        position: static;
        transform: none;
        width: 100%;
        max-width: none;
        margin-bottom: 0;
    }

    .chms-map__canvas {
        grid-area: 2 / 1;
        height: 360px;
    }

    .chms-map__place {
        right: 16px;
    }

    /* Tabliczka wraca do ukladu (position: relative, zeby z-index dzialal),
       siada w komorce zdjecia przy jego DOLNEJ krawedzi, a translateY(50%)
       przesuwa ja o polowe WLASNEJ wysokosci w dol. Dzieki temu polowa lezy na
       zdjeciu, polowa na mapie - bez zgadywania wysokosci tabliczki, ktora
       zalezy od dlugosci adresu. Transform nie wplywa na uklad, wiec mapa
       zostaje na swoim miejscu. */
    .chms-map__card {
        position: relative;
        grid-area: 1 / 1;
        align-self: end;
        right: auto;
        bottom: auto;
        transform: translateY(50%);
        margin: 0 16px;
        max-width: none;
    }
}


/* =========================================================================
 * NAGLOWEK - przyklejony, na stronie glownej przezroczysty nad hero
 *
 * Stan przewiniecia daje klasa `chms-scrolled` na <body> (js/chms-header.js).
 * Strone glowna od podstrony odroznia KLASA `home`, ktora WordPress i tak
 * dokłada - dzieki temu jest JEDEN szablon naglowka, a nie dwa. Dwa znaczylyby
 * dwie kopie menu do utrzymania, czyli to, przed czym broni zasada osadzania
 * komponentow przez referencje.
 *
 * DLACZEGO NIE STICKY ELEMENTORA: modul rejestruje kontrolki wylacznie na
 * `section`, `container` i `common` (`elementor-pro/modules/sticky/module.php`),
 * a korzen naglowka `#486` to `e-flexbox`, czyli element atomowy V4. Panel nie
 * ma tam nawet sekcji „Efekty ruchu".
 * ====================================================================== */

/* GLOBALNY ODSTEP KOTWIC. `scroll-padding-top` na kontenerze przewijania
   dziala na KAZDE przewiniecie do elementu - kotwice w tresci, spis tresci,
   przycisk hero, odnosniki `#cos` w menu - wiec jest jedno miejsce zamiast
   odstepu doklejanego osobno do kazdego celu. Wartosc podaje js/chms-header.js
   (zmierzona dolna krawedz paska); zapas 40px musi pomiescic NADTYTUL sekcji,
   ktory stoi jeszcze nad H2 - przy 24px siadal tuz pod paskiem. Awaryjne 92px to zmierzona wysokosc paska po przewinieciu,
   na wypadek gdyby skrypt nie wstal. */
html {
    scroll-padding-top: calc( var( --chms-header-h, 92px ) + 40px );
}

/* WSZEDZIE: naglowek przykleja sie u gory. `sticky`, a nie `fixed`, bo trzyma
   miejsce w ukladzie - tresc pod nim nie podskakuje przy starcie przewijania. */
.elementor-location-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Pasek administratora jest `fixed`, wiec bez tego naglowek wjezdza pod niego.
   Widzi to tylko zalogowany, czyli my - klient nie zglosi. */
body.admin-bar .elementor-location-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .elementor-location-header {
        top: 46px;
    }
}

/* Wartownik progu przewiniecia - absolutny i niewidoczny, zeby nie ruszal
   ukladu. Wysokosc = prog, po ktorym naglowek zmienia stan. */
.chms-header-sentinel {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 60px;
    visibility: hidden;
    pointer-events: none;
}

.elementor-location-header > .e-con {
    transition: padding 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

/* Wysokosc naglowka regulujemy LOGIEM, nie stala wysokoscia paska: pasek jest
   flexem, wiec sam sie do niego dopasuje, a przejscie jest plynne.
 *
 * STERUJEMY SZEROKOSCIA, NIE WYSOKOSCIA. Elementor trzyma szerokosc logo na
 * sztywno (`post-486.css`: `... .elementor-element-1fc42c9 img { width: 185px }`,
 * czyli to, co ustawione w panelu widgetu). Ta regula ma te sama specyficznosc
 * co nasza, ale arkusz wpisu laduje sie POZNIEJ, wiec wygrywa. Animowanie
 * wysokosci przy zabetonowanej szerokosci SPLASZCZALO logo - proporcje szly
 * z 3,19 na 4,21. Przy sterowaniu szerokoscia wysokosc idzie za nia sama. */
.elementor-location-header .elementor-widget-theme-site-logo img {
    height: auto;
    transition: width 0.25s ease, opacity 0.25s ease;
}

/* --- stan po przewinieciu --- */

/* CIEN JEST WSZEDZIE - nie zmienia wysokosci, a oddziela przyklejony pasek od
   przewijanej tresci, co na telefonie potrzebne jest tak samo. */
body.chms-scrolled .elementor-location-header > .e-con {
    box-shadow: 0 2px 14px rgb(30 50 64 / 10%);
}

/* NIZSZY PASEK TYLKO NA DESKTOPIE (decyzja Kamila 2026-09-25).
   Na telefonie rozwiniete menu jest przyklejone do dolnej krawedzi paska stala
   wartoscia z panelu („Distance from dropdown" = 15 px, tyle co dolne
   dopelnienie kontenera naglowka). Kontrolka nie ma jak wiedziec, ze pasek
   w trakcie przewijania chudnie, wiec po zjechaniu w dol luka wracala.
   Da sie to obejsc, ale nie warto: efekt zmniejszania jest ozdoba, ktora na
   malym ekranie i tak niewiele wnosi, a kosztuje zaleznosc miedzy wartoscia
   w panelu a regula w arkuszu - czyli dokladnie to, przed czym broni zasada
   „jedna decyzja w jednym miejscu". Pasek na telefonie ma wiec stala wysokosc. */
@media screen and (min-width: 783px) {
    body.chms-scrolled .elementor-location-header > .e-con {
        padding-block: 4px;
    }

    /* 140px to te same 44px wysokosci co wczesniej, tylko liczone z proporcji.
       Selektor jest dluzszy (0,4,2) niz regula Elementora (0,3,1), wiec wygrywa
       bez `!important` - a domyslnej szerokosci NIE ruszamy, zeby zostala tam,
       gdzie redaktor ja ustawia, czyli w panelu widgetu. */
    body.chms-scrolled .elementor-location-header .elementor-widget-theme-site-logo img {
        width: 140px;
    }
}

/* --- strona glowna: przezroczysty nad hero ---------------------------------
 *
 * Tylko od 783px. Na telefonie zostaje zwykly - makiet mobilnych jeszcze nie ma
 * (decyzja Kamila 2026-09-19), a biale menu na jasnym zdjeciu bez projektu to
 * zgadywanie.
 *
 * `fixed`, a nie `sticky`, bo naglowek ma WYJSC Z UKLADU - wtedy hero zaczyna
 * sie od samej gory i zdjecie wchodzi pod menu. Zadnych ujemnych marginesow.
 * -------------------------------------------------------------------------- */

@media screen and (min-width: 783px) {
    body.home .elementor-location-header {
        position: fixed;
        left: 0;
        right: 0;
    }

    body.home:not(.chms-scrolled) .elementor-location-header > .e-con {
        background-color: transparent;
        box-shadow: none;
    }

    /* PRZYCIEMNIENIE GORY ZDJECIA - w makiecie jest, i nie jest ozdoba: biale
       menu trafia raz na zachod slonca, raz na blekitne niebo Mirkowa, a na
       jasnym dachu napis „SKAAR" gasnie. Gradient jest WYZSZY niz pasek (220px
       wobec 118), zeby konczyl sie lagodnie, a nie widoczna krawedzia.
       Pseudoelement, a nie tlo paska, bo tlo przelacza sie na `#F4F4F4`
       po przewinieciu i nie da sie go wtedy wygasic osobno. */
    body.home .elementor-location-header::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        /* DISPLAY I SZEROKOSC JAWNIE: bez nich pseudoelement dostaje
           `display: table` i zweza sie do ZERA (zmierzone - `left: 0` i
           `right: 0` nie rozciagaja pudelka tabelarycznego, bo to shrink-to-fit,
           a tresc jest pusta). Skutek: warstwy nie widac wcale, mimo ze
           w stylach wyglada poprawnie. */
        display: block;
        width: 100%;
        height: 220px;
        background: linear-gradient(to bottom, rgb(0 0 0 / 55%), rgb(0 0 0 / 0%));
        opacity: 0;
        transition: opacity 0.25s ease;
        pointer-events: none;
    }

    body.home:not(.chms-scrolled) .elementor-location-header::before {
        opacity: 1;
    }

    /* Menu na zdjeciu musi byc biale. Kolor podajemy ZMIENNYMI, bo tak maluje
       je Elementor - regula w `widget-mega-menu.min.css` czyta
       `--n-menu-title-color-normal` i pochodne. Nadpisanie samego `color` na
       `.e-n-menu-title-text` nic nie dawalo, bo trafialo w inny element niz ten,
       ktory niesie kolor. Zmienne sa przy okazji jedynym punktem, ktory obsluzy
       naraz stan zwykly, hover i biezacy. */
    body.home:not(.chms-scrolled) .elementor-location-header .elementor-widget-n-menu {
        --n-menu-title-color-normal: #fff;
        --n-menu-title-color-hover: #fff;
        --n-menu-title-color-active: #fff;
        --n-menu-icon-color-hover: #fff;
        --n-menu-icon-color-active: #fff;
    }

    body.home:not(.chms-scrolled) .elementor-location-header .e-n-menu-dropdown-icon svg {
        fill: #fff;
    }

    /* LOGO: krzyzowe przejscie na jasna wersje.
       Jasne logo idzie jako TLO PSEUDOELEMENTU na odnosniku, a nie podmiana
       `src` - znacznik rysuje widget Elementora i nie mamy go jak zmienic bez
       JS-a. `content: url()` na <img> odpada, bo Firefox dostal je dopiero
       w 128. Obie grafiki maja 372x117, wiec naklada sie co do piksela. */
    body.home .elementor-location-header .elementor-widget-theme-site-logo a {
        position: relative;
        display: inline-block;
    }

    body.home .elementor-location-header .elementor-widget-theme-site-logo a::after {
        content: "";
        position: absolute;
        inset: 0;
        background: url("../assets/img/logo_bright.png") center / contain no-repeat;
        opacity: 0;
        transition: opacity 0.25s ease;
        pointer-events: none;
    }

    body.home:not(.chms-scrolled) .elementor-location-header .elementor-widget-theme-site-logo img {
        opacity: 0;
    }

    body.home:not(.chms-scrolled) .elementor-location-header .elementor-widget-theme-site-logo a::after {
        opacity: 1;
    }
}


/* --- przycisk historii cen w komorce z cena ------------------------------
 *
 * Sama wtyczka `chms-prices` jest celowo NEUTRALNA - nie wnosi kolorow marki,
 * bo ma dzialac takze na cudzych stronach. Wyglad na naszej stronie nadajemy
 * tutaj. Przycisk idzie POD cene, a nie obok: w waskiej kolumnie tabeli
 * doklejony obok rozpychal ja i sklejal sie z kwota.
 * ---------------------------------------------------------------------- */

.chms-units__price-history {
    display: block;
    margin-top: 4px;
}

.chms-units__price-history .chms-prices-btn {
    color: #12A579;
    font-size: 12px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.chms-units__price-history .chms-prices-btn:hover,
.chms-units__price-history .chms-prices-btn:focus-visible {
    color: #1F325D;
}


/* --- prospekt informacyjny pod planem osiedla ---------------------------- */

.chms-units__prospekt {
    margin: 28px 0 32px;
    text-align: center;
}

/* Przycisk jest firmowym `.notch-btn` - tu tylko dopasowanie do dluzszego
   napisu. Sztywne `width: 210px` z klasy bazowej ucieloby tekst, wiec
   zdejmujemy je na rzecz dopelnienia; `min-height` trzyma wysokosc 50px,
   zeby sciety rog mial te sama proporcje co w pozostalych przyciskach.
   Selektor jest zlozony, bo motyw podkresla odnosniki regula `.page-content a`. */
.chms-units__prospekt .chms-units__prospekt-link {
    /* Dlug splacony 2026-09-24: klasa bazowa miala tu `#14A76B` - zielen spoza
       palety - i dlatego ten przycisk musial ja nadpisywac. Teraz `.notch-btn`
       bierze token, wiec zostaje tylko rozny kolor NAPISU. */
    --text-color: var(--chms-blue);

    width: auto;
    height: auto;
    min-height: 50px;
    padding: 12px 32px;
    text-decoration: none;
}

.chms-units__prospekt .chms-units__prospekt-link:hover,
.chms-units__prospekt .chms-units__prospekt-link:focus-visible {
    --text-color: #12A579;
    text-decoration: none;
}

/* Rozmiar pliku pod przyciskiem, nie w nim - to informacja drugorzedna.
   Slate Gray z systemu marki. */
.chms-units__prospekt-size {
    display: block;
    margin-top: 10px;
    color: #7C8893;
    font-size: 12px;
}

@media screen and (max-width: 782px) {
    /* Na 390px napis lamal sie na dwie linie i „[PDF]" zostawalo samo
       w drugiej. Mniejsze dopelnienie i krok mniejszy krój mieszcza go
       w jednej - zmierzone: 356px przy 370px dostepnych. */
    .chms-units__prospekt .chms-units__prospekt-link {
        padding: 12px 20px;
        font-size: 14px;
    }
}


/* =========================================================================
 * Przycisk "Kontakt" w menu gornym
 *
 * ID `chms_contact_top_menu` nadaje Kamil w panelu widgetu (pozycja menu ->
 * Zaawansowane -> CSS ID), bo mega menu nie pozwala dodac klasy pojedynczej
 * pozycji. Stad selektory po ID, nie po klasie.
 *
 * KSZTALT TEN SAM CO `.notch-btn` - sciety prawy gorny rog, zmierzony
 * z makiety: krawedz schodzi od x=1227 przy y=35 do x=1253 przy y=63, czyli
 * scieciem ~26px. Tu jednak NIE uzywamy tamtej klasy: tamta rysuje obramowanie
 * i wypelnienie dwiema warstwami pseudoelementow, a tu przycisk jest jednolicie
 * zielony, wiec wystarcza pojedynczy `clip-path` (ten sam zabieg co przy
 * zielonej tabliczce mapy). Drugi powod: znacznika pozycji menu nie tworzymy
 * my, wiec nie mozemy wstawic w nia `notch-btn__label` ani `__arrow`.
 *
 * Wymiary z makiety: 210x49, tlo Green #12A579, bialy napis, biala strzalka.
 *
 * TYLKO OD 1025px: ponizej mega menu zwija sie do hamburgera
 * (`breakpoint_selector: tablet`), a tam przycisk o stalej szerokosci 210px
 * rozpychalby liste.
 * ====================================================================== */

@media screen and (min-width: 1025px) {
    /* UWAGA NA PRZYSZLOSC: po nadaniu przyciskowi szerokosci 210px pozycje
       przestaly miescic sie w kolumnie menu (570px przy 668px potrzebnych)
       i „Kontakt" spadal do drugiego rzedu, przez co pasek rosl ze 118 na
       166px. NIE NAPRAWIAMY TEGO STAD: zwijanie steruje zmienna
       `--n-menu-heading-wrap`, ktora Elementor wypisuje z USTAWIENIA WIDGETU
       do `post-486.css` z selektorem `.elementor-486 .elementor-element-1b01305`
       (0,3,0). Nadpisanie jej z arkusza wygralo by walke o specyficznosc, ale
       zostawiloby panel, ktory klamie. Wlasciwe miejsce to szerokosc kolumny
       menu w szablonie naglowka. */

    #chms_contact_top_menu .e-n-menu-title-container {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 210px;
        height: 50px;
        padding: 0 30px;
        background: #12A579;
        clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
        transition: background-color 0.2s ease;
    }

    #chms_contact_top_menu .e-n-menu-title-container:hover,
    #chms_contact_top_menu .e-n-menu-title-container:focus-visible {
        background: #0E8A65;
    }

    /* Napis MUSI byc bialy w obu stanach naglowka. Na stronie glownej nad hero
       kolory menu ida zmiennymi (`--n-menu-title-color-*`), ktore ustawiamy na
       biel; po przewinieciu wracaja do granatu - tutaj nadpisujemy je oba. */
    #chms_contact_top_menu .e-n-menu-title-text {
        color: #fff;
        font-weight: 700;
    }

    /* Strzalka jako MASKA, nie `background-image`: SVG w data URI nie dziedziczy
       `currentColor`, a maska bierze kolor z `background`. Ten sam zabieg co
       przy chevronie w mega menu. */
    #chms_contact_top_menu .e-n-menu-title-container::after {
        content: "";
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
        background: #fff;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15m0 0l-6-6m6 6l-6 6'/%3E%3C/svg%3E") center / 20px no-repeat;
                mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15m0 0l-6-6m6 6l-6 6'/%3E%3C/svg%3E") center / 20px no-repeat;
        transition: transform 0.2s ease;
    }

    #chms_contact_top_menu .e-n-menu-title-container:hover::after {
        transform: translateX(3px);
    }
}


/* =========================================================================
 * Przycisk hero (shortcode [chms_hero_cta])
 *
 * Z makiety: bialy prostokat wysrodkowany na DOLNEJ KRAWEDZI hero, zachodzacy
 * na zdjecie POLOWA WLASNEJ WYSOKOSCI.
 * ====================================================================== */

.chms-hero-cta-wrap {
    display: flex;
    justify-content: center;
    /* PULAPKA: pojemnik ma wysokosc 0, a domyslne `align-items: stretch`
       rozciagnelo by przycisk do TEJ wysokosci - przy `box-sizing: border-box`
       zostaloby samo dopelnienie, a napis wylalby sie poza obrys. */
    align-items: flex-start;
    /* ZEROWA WYSOKOSC, a nie pozycjonowanie absolutne: dzieki temu przycisk
       nie potrzebuje rodzica z `position: relative` i nie trzeba nic ustawiac
       w Elementorze. Pojemnik nie zajmuje miejsca w ukladzie, wiec nie rozpycha
       sekcji ani nie zostawia pod soba dziury, a przycisk rysuje sie poza jego
       obrysem - `overflow` jest widoczny. */
    height: 0;

    /* DRUGA PULAPKA: bez tego przycisk CHOWA SIE POD HERO. Swiper sam z siebie
       tworzy kontekst nakladania (`swiper.min.css`: `position: relative;
       z-index: 1`), a nasz przycisk jako NIEPOZYCJONOWANY maluje sie w fazie
       tresci - czyli pod wszystkim, co ma `z-index >= 0`. Pozniejsze miejsce
       w DOM nie pomaga, bo kolejnosc rozstrzyga dopiero w obrebie tej samej
       warstwy. */
    position: relative;
    z-index: 2;
}

/* Selektor jest ZLOZONY (0,2,1), bo motyw podkresla odnosniki regula
   `.page-content a` (0,1,1) i samo `.chms-hero-cta` by przegralo. Tyle
   wystarcza, zeby obyc sie bez `!important`. */
.chms-hero-cta-wrap .chms-hero-cta {
    /* POLOWA WLASNEJ WYSOKOSCI, bez zgadywania w pikselach: wysokosc zalezy od
       dlugosci napisu i od tego, czy zawinie sie na waskim ekranie. Ten sam
       zabieg co przy zielonej tabliczce mapy. `transform` nie wplywa na uklad,
       wiec sekcje pod spodem zostaja na miejscu. */
    transform: translateY(-50%);

    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 22px 36px;
    background: #fff;
    /* dark-blue z systemu marki */
    color: #1F325D;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    /* Miekki cien odrywa przycisk od zdjecia - bez niego bialy prostokat na
       jasnym niebie (slajd Mirkowa) zlewa sie z tlem. Kolor z Dark #1E3240,
       nie czarny, zeby pasowal do reszty. */
    box-shadow: 0 10px 30px rgb(30 50 64 / 18%);
}

.chms-hero-cta-wrap a.chms-hero-cta:hover,
.chms-hero-cta-wrap a.chms-hero-cta:focus-visible {
    color: #12A579;
}

.chms-hero-cta__icon {
    flex: 0 0 auto;
    /* Strzalka jest ZIELONA (Green #12A579 z systemu marki), a napis granatowy -
       tak jest w makiecie. SVG rysuje sie `currentColor`, wiec kolor nadajemy
       samej ikonie, a nie w znaczniku: dzieki temu da sie go nadpisac stylem
       bez ruszania PHP. */
    color: #12A579;
    transition: transform 0.2s ease;
}

/* Delikatne zjechanie strzalki w dol przy najechaniu - podpowiada, ze przycisk
   przewija strone, a nie otwiera nowy adres. Tylko dla strzalki w dol. */
.chms-hero-cta-wrap a.chms-hero-cta:hover .chms-hero-cta__icon {
    transform: translateY(2px);
}

@media screen and (max-width: 782px) {
    .chms-hero-cta-wrap .chms-hero-cta {
        padding: 16px 24px;
        font-size: 14px;
        /* Na waskim ekranie napis potrafi sie zawinac - przycisk nie moze
           wtedy wyjechac poza ekran */
        max-width: calc(100vw - 32px);
    }
}


/* =========================================================================
 * Hero na telefonie - TEN SAM DOM, inny uklad
 *
 * Makieta mobilna: Figma `836:864` „Landing Page v1 [iPhone X]", 375 px.
 * Wartosci sa ZMIERZONE w makiecie, nie dobrane na oko:
 *   zdjecie   375x427 (stad `aspect-ratio`)
 *   karta     344 szer. (marginesy 15/16), y=432 przy zdjeciu konczacym sie
 *             na 486 - stad zachodzenie o 54 px; padding 34 / 23 / 31
 *   przycisk  263x45, ~31 px nad dolna krawedzia karty, tlo Dark #1E3240
 *   strzalki  35x35, odstep 8, 23 px od prawej - te ustawia sie W PANELU
 *             (Elementor ma responsywne kontrolki offsetu strzalek), nie tutaj
 *
 * NIE MA TU DRUGIEGO SZABLONU ANI DRUGIEGO KOMPONENTU. Wariant urzadzenia to
 * zapytanie medialne, a nie nowy byt - inaczej niz wariant WPISU, ktory jedzie
 * atrybutami `acf:pole` z `layout-variant.php`.
 *
 * KOLEJNOSC W DOM JEST MOBILNA I TAKA ZOSTAJE: zdjecie, potem tekst. To telefon
 * ma uklad naturalny, a desktop podnosi tekst na zdjecie pozycjonowaniem.
 *
 * ZACZEPY TO ATRYBUTY, NIE KLASY: w edytorze V4 nie ma pola „CSS Classes"
 * (prop `classes` to lista identyfikatorow ze stylow, nie tekst). Wartosci sa
 * doslowne, wiec transformer z `layout-variant.php` przepuszcza je nietkniete.
 *
 * SELEKTOR POWTARZA ATRYBUT - to nie pomylka. Potrzebujemy specyficznosci
 * 0,3,0, a trzeciej jednostki nie da sie wziac z klasy Elementora, bo klasy
 * roznia sie miedzy elementami: kontener ma `.e-atomic-element`, ale samo
 * `<img>` juz NIE (ma tylko `.e-image-base`) - sprawdzone w przegladarce,
 * pierwsza wersja z `.e-atomic-element` po cichu nie lapala zdjecia.
 * Powtorzony atrybut daje te sama jednostke na kazdym elemencie i nie zalezy
 * od wewnetrznych nazw klas Elementora, ktore moga sie zmienic z wersja.
 *
 * SPECYFICZNOSC 0,3,0 NIE JEST PRZESADA - zmierzone: Elementor generuje style
 * pozycji petli jako
 * `.elementor .e-fa72ac2-ce26156` (0,2,0) do OSOBNEGO pliku
 * (`uploads/elementor/css/local-115-frontend-*.css`), ktory wchodzi PO naszym
 * arkuszu. Przy remisie decyduje kolejnosc, wiec nasze 0,2,0 przegrywalo:
 * `border` i `margin` wchodzily, a `position`, `padding` i `background` nie.
 * Trzecia jednostka zdejmuje zaleznosc od kolejnosci wczytywania.
 *
 * ARKUSZ JEST JEDYNYM ZRODLEM UKLADU MOBILNEGO (posprzatane 2026-09-23
 * skryptem `bin/hero-czysc-nadpisy-mobilne.php`). Panel mial wczesniej WLASNY
 * uklad telefonu - karta przyklejona absolutnie do dolu, tlo #1f1f1f, zdjecie
 * `object-fit: contain`, naglowek 20 px - i arkusz musial go przekrzykiwac.
 * Dziewiec nadpisow breakpointu `mobile` zdjeto; Elementor nie generuje juz
 * dla `#115` ZADNEGO pliku mobilnego. Obowiazuje zasada:
 *
 *     ELEMENTOR TRZYMA UKLAD BAZOWY (desktop), ARKUSZ NADAJE WARIANTY.
 *
 * Ta sama, ktora rzadzi wariantami per WPIS (atrybuty `acf:pole`
 * z `layout-variant.php`) - tyle ze tutaj wariantem jest urzadzenie.
 * ODWROCIC SIE TEGO NIE DA, sprawdzone w kodzie Elementora: `title_color`
 * naglowka i kolor edytora tekstu to `add_control`, a NIE
 * `add_responsive_control`, wiec koloru nie da sie ustawic osobno dla telefonu
 * (a tu jest bialy na zdjeciu i ciemny na karcie). Do tego przycisk rysuje NASZ
 * shortcode, ktorego panel nie styluje. Dawne tlo karty #1f1f1f bylo wlasnie
 * obejsciem pierwszego ograniczenia, a nie decyzja projektowa.
 *
 * DRABINA SPECYFICZNOSCI JEST NADAL POTRZEBNA - ale juz nie przeciwko
 * nadpisom mobilnym, tylko przeciwko regulom DESKTOPOWYM, ktore obowiazuja na
 * kazdej szerokosci. Zmierzone: widget klasyczny dostaje
 * `.elementor-115 .elementor-element.elementor-element-53683be
 * .elementor-heading-title` = 0,4,0, stad reguly naglowka maja dodatkowo
 * `.elementor-element` (0,5,0); reszcie wystarcza 0,3,0 / 0,4,0.
 * Uwaga na progi: Elementor liczy telefon do 767 px, my do 782 px.
 * ====================================================================== */

/* Przycisk w karcie istnieje w DOM zawsze, ale na desktopie jest schowany -
   tam pracuje ten spod karuzeli, bo ma zachodzic na dolna krawedz hero,
   a `.swiper` ma `overflow: hidden` i obcialby go w srodku slajdu. */
.elementor [data-chms-hero="karta"][data-chms-hero="karta"] .chms-hero-cta-wrap {
    display: none;
}

@media screen and (max-width: 782px) {

    /* 1. SLAJD przestaje byc plotnem o stalej wysokosci - wysokosc bierze sie
          z tresci (zdjecie + karta). Zdejmujemy tez tlo i gradient: na telefonie
          zdjecie jest DZIECKIEM, a nie tlem, wiec gradient na rodzicu tylko
          przyciemnialby biala karte. */
    .elementor [data-chms-hero="slajd"][data-chms-hero="slajd"] {
        display: block;
        min-height: 0;
        height: auto;
        padding-block: 0;
        background-image: none;
        background-color: transparent;
    }

    /* 2. ZDJECIE wraca do przeplywu. Na desktopie jest warstwa absolutna
          (`inset: 0`) pod tekstem; tutaj jest zwyklym blokiem u gory.
          Proporcja zamiast wysokosci w px, zeby kadr trzymal sie na kazdej
          szerokosci ekranu, nie tylko na 375. Atrybut siedzi na samym <img>,
          stad `object-fit` bez selektora potomka. */
    .elementor [data-chms-hero="obraz"][data-chms-hero="obraz"] {
        position: static;
        width: 100%;
        height: auto;
        aspect-ratio: 375 / 427;
        object-fit: cover;
        object-position: center center;
    }

    /* 3. GRADIENT znika. Na desktopie przyciemnia zdjecie pod jasnym tekstem;
          tutaj tekst siedzi na bialej karcie, wiec nie ma czego ratowac. */
    .elementor [data-chms-hero="gradient"][data-chms-hero="gradient"] {
        display: none;
    }

    /* 4. BLOK TEKSTU staje sie KARTA. Ujemny gorny margines wpuszcza ja na
          zdjecie o zmierzone 54 px. `position: relative` zostaje po to, zeby
          karta malowala sie NAD zdjeciem niezaleznie od kolejnosci w DOM. */
    .elementor [data-chms-hero="karta"][data-chms-hero="karta"] {
        position: relative;
        z-index: 2;
        inset: auto;
        width: auto;
        max-width: none;
        margin: -54px 15px 0;
        padding: 23px 34px 31px;
        background-color: #fff;
        background-image: none;
        /* Purple 92 z systemu marki - jedyne miejsce, w ktorym ten kolor
           wystepuje, ale to on jest w makiecie. */
        border: 1px solid #E0DEF7;
        /* Rogi sa KWADRATOWE - sprawdzone na renderze wezla `837:1944`. */
        border-radius: 0;
        /* Karta jest flexem w kolumnie z `align-items: start` (z desktopu),
           przez co przycisk kurczyl sie do szerokosci napisu - zmierzone 228 px
           zamiast 277. W makiecie przycisk ma pelna szerokosc kolumny tresci. */
        align-items: stretch;
        row-gap: 22px;
    }

    /* Kolumna tresci: panel dokłada jej na telefonie wlasny odstep dolny,
       ktory sumowalby sie z dopelnieniem karty. */
    .elementor [data-chms-hero="tresc"][data-chms-hero="tresc"] {
        width: 100%;
        padding-block-end: 0;
        row-gap: 16px;
        align-items: stretch;
    }

    /* 5. KOLORY z nakladki na zdjeciu (jasne) na karte (ciemne). */
    .elementor [data-chms-hero="karta"][data-chms-hero="karta"] .elementor-widget-heading,
    .elementor .elementor-element[data-chms-hero="karta"][data-chms-hero="karta"] .elementor-heading-title,
    .elementor [data-chms-hero="karta"][data-chms-hero="karta"] .elementor-widget-text-editor {
        color: #1E3240;
    }

    /* Nadtytul jest zielony - to on niesie nazwe inwestycji. Pierwszy
       `text-editor` w karcie, bo tak stoi w szablonie: nadtytul, H1, lead. */
    .elementor [data-chms-hero="karta"][data-chms-hero="karta"] .elementor-widget-text-editor:first-of-type {
        color: #12A579;
    }

    /* TYPOGRAFIA MOBILNA JEST TU, A NIE W PANELU - i to jest cala roznica
       miedzy „dwa zrodla" a „jedno". Wartosci sa z makiety (tokeny
       `Heading/H3` 32/1.25/-1 i `Body Medium 160%` 16/1.6), a nie przeniesione
       z dawnych nadpisow panelu (15/20/14 px), ktore opisywaly INNY uklad. */
    .elementor [data-chms-hero="karta"][data-chms-hero="karta"] .elementor-widget-text-editor {
        font-size: 16px;
        line-height: 1.6;
    }

    .elementor .elementor-element[data-chms-hero="karta"][data-chms-hero="karta"] .elementor-heading-title {
        font-size: 32px;
        line-height: 1.25;
        letter-spacing: -1px;
    }

    /* 6. PRZYCISK. Ten spod karuzeli chowamy, pokazujemy ten w karcie -
          w normalnym przeplywie, wiec bez ani jednej stalej w pikselach:
          dluzszy napis od klienta po prostu zawinie sie w karcie. */
    .chms-hero-cta-wrap {
        display: none;
    }

    .elementor [data-chms-hero="karta"][data-chms-hero="karta"] .chms-hero-cta-wrap {
        display: block;
        /* Zerowa wysokosc i `translateY` sluza wylacznie przyciskowi
           zachodzacemu na krawedz hero - w karcie trzeba je zdjac, inaczej
           przycisk wjechalby w akapit nad soba. */
        height: auto;
        /* Odstep nad przyciskiem daje `row-gap` karty - wlasny margines
           sumowalby sie z nim. */
        margin-top: 0;
    }

    .elementor [data-chms-hero="karta"][data-chms-hero="karta"] .chms-hero-cta-wrap .chms-hero-cta {
        transform: none;
        /* W makiecie przycisk jest ODWROCONY wobec desktopu: ciemne tlo,
           bialy napis, na cala szerokosc kolumny tresci i wysrodkowany. */
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 13px 20px;
        background: #1E3240;
        color: #fff;
        font-size: 16px;
        box-shadow: none;
        max-width: none;
    }

    .elementor [data-chms-hero="karta"][data-chms-hero="karta"] a.chms-hero-cta:hover,
    .elementor [data-chms-hero="karta"][data-chms-hero="karta"] a.chms-hero-cta:focus-visible {
        color: #fff;
        background: #15224F;
    }

    /* 7. STRZALKI KARUZELI. Na desktopie ustawia je PANEL (Elementor wystawia
          na nie zmienne `--arrow-*`), ale pozycja mobilna to WARIANT, wiec
          zgodnie z zasada tej sekcji nalezy do arkusza. Dodatkowy powod jest
          praktyczny: podglad edytora nie pokazuje mobilnego ukladu, wiec
          ustawianie ich tam bylo by strzelaniem na slepo.

          `:has()` zawezа regule do TEJ karuzeli - tej, ktora zawiera nasze
          slajdy hero. Bez tego zlapalaby kazda karuzele na stronie. Gdyby
          przegladarka `:has()` nie znala, strzalki po prostu zostana tam,
          gdzie sa - degradacja jest cicha i nieszkodliwa.

          Z makiety (`837:3495`): dwa kwadraty 35x35, odstep 8, prawa krawedz
          23 px od brzegu, dol 73 px nad dolna krawedzia zdjecia. Zdjecie ma
          427 px, wiec gora strzalek wypada na 427 - 73 - 35 = 319 px. */
    /* POZYCJE IDA ZMIENNYMI, nie wlasciwosciami - i to jest sedno. Elementor
       liczy je w `calc()`:
         left: calc(var(--arrow-prev-left-align) + var(--arrow-prev-left-position))
         top:  calc(var(--arrow-*-top-align) + var(--arrow-*-top-position) - ...)
       a wartosci wstawia regula widgetu (0,3,0) zapisana przez panel. Probowanie
       nadpisania samego `top`/`left` na przycisku przegrywa z ta arytmetyka;
       podmiana ZMIENNYCH wchodzi w nia od srodka i jest dokladnie tym, co robi
       panel - tyle ze dla progu, ktorego panel tu nie obsluguje.

       UWAGA NA WAGE `:has()`: liczy sie jak NAJBARDZIEJ specyficzny argument,
       wiec `:has([data-chms-hero="slajd"])` to tylko 0,1,0. Bez dodatkowego
       `.elementor-element` selektor mial 0,3,0, czyli remis z regula panelu -
       a przy remisie wygrywa ta wczytana pozniej, czyli `post-14.css`.

       Kontener strzalek zaczyna sie na gornej krawedzi zdjecia (zmierzone),
       wiec `top` liczymy wprost od niej: 427 - 73 - 35 = 319 px.
       Prev pozycjonuje sie od LEWEJ, stad 100% minus odstep i przesuniecie
       o wlasna szerokosc; next od prawej, wiec wprost 23 px. */
    .elementor .elementor-element.elementor-widget-loop-carousel:has([data-chms-hero="slajd"]) {
        --arrow-normal-color: #fff;
        --arrow-hover-color: #fff;
        --arrow-size: 18px;

        /* W formule `top` jest jeszcze `- var(--arrow-*-caption-spacing)`,
           ustawione przez panel na 15 px. Zerujemy je zamiast doliczac te
           15 px do wlasnej liczby - inaczej zmiana ustawienia w panelu po
           cichu przesunelaby strzalki. */
        --arrow-prev-caption-spacing: 0px;
        --arrow-next-caption-spacing: 0px;

        --arrow-prev-top-align: 0px;
        --arrow-prev-top-position: 319px;
        --arrow-prev-translate-y: 0%;
        --arrow-prev-left-align: 100%;
        --arrow-prev-left-position: -66px;
        --arrow-prev-translate-x: -100%;

        --arrow-next-top-align: 0px;
        --arrow-next-top-position: 319px;
        --arrow-next-translate-y: 0%;
        --arrow-next-right-align: 0%;
        --arrow-next-right-position: 23px;
        --arrow-next-translate-x: 0%;
    }

    /* Samo pudelko strzalki - tego zmienne nie obsluguja. Z makiety
       (`837:3495`): ciemny kwadrat 35x35 z biala strzalka, odstep 8 px. */
    .elementor .elementor-element.elementor-widget-loop-carousel:has([data-chms-hero="slajd"]) .elementor-swiper-button {
        width: 35px;
        height: 35px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #1E3240;
    }

    /* Strzalki w przycisku na makiecie mobilnej nie ma - jest ozdobna
       (`aria-hidden`), wiec jej zdjecie niczego nie zabiera czytnikom ekranu. */
    .elementor [data-chms-hero="karta"][data-chms-hero="karta"] .chms-hero-cta__icon {
        display: none;
    }
}


/* =========================================================================
 * Mapa prosta (shortcode [chms_simple_map])
 *
 * Sama mapa z pinezka - dla zwyklych podstron (Kontakt). Klasy sa wlasne, a nie
 * wspoldzielone z `.chms-map`, bo TAMTEN uklad jest zbudowany pod sekcje
 * "Lokalizacja": `.chms-map-wrapper` ma `min-height: 740px`, a plotno jest
 * zwezone do 1000px i doklejone do prawej, zeby z lewej zmiescilo sie zdjecie
 * lotnicze. Tutaj mapa ma po prostu wypelnic kolumne Elementora.
 * ====================================================================== */

.chms-simple-map {
    /* ten sam powod co przy `.chms-map` wyzej - warstwy Leafleta musza zostac
       wewnatrz mapy, a nie konkurowac z przyklejonym paskiem naglowka */
    isolation: isolate;
    position: relative;
    width: 100%;
    /* SZEROKOSC SAMOISTNA - bez niej mapa ZNIKA w kontenerze poziomym.
       Widget Elementora jest tam elementem flexa liczonym z zawartosci,
       a puste plotno nie wnosi nic: widget dostaje 0px, `width: 100%` liczy
       sie od zera i po mapie. Wlasny widget map Elementora nie ma tego
       problemu, bo osadza <iframe>, a ten ma szerokosc samoistna z definicji
       (`widget-google_maps.min.css` nadpisuje mu tylko wysokosc).
       280px, zeby zmiescilo sie takze na najwezszych telefonach. */
    min-width: 280px;
}

.chms-simple-map__canvas {
    width: 100%;
    /* Proporcje z makiety Kontaktu (415x375). Wysokosc, a nie aspect-ratio,
       bo Leaflet liczy kadr z WYMIARU kontenera w momencie inicjalizacji,
       a przy aspect-ratio zalezy on od szerokosci rodzica, ktorej w edytorze
       Elementora jeszcze nie ma. Nadpisuje sie atrybutem `height`. */
    height: 380px;
}

/* Ten sam lagodny, odbarwiony styl kafelkow co w sekcji "Lokalizacja" - filtr
   siedzi na WARSTWIE KAFELKOW, zeby nie odbarwil zielonej pinezki i dymka */
.chms-simple-map .leaflet-tile-pane {
    filter: grayscale(1) brightness(1.06) contrast(0.82);
}

/* Dymek pinezki - domyslny Leaflet jest bialy z szara ramka, a my chcemy
   plakietke w kolorach marki (dark-blue #1F325D). Strzalka dymka to
   pseudoelement z obramowaniem, wiec kolor podaje sie jej osobno. */
.chms-simple-map .leaflet-tooltip,
.chms-map .leaflet-tooltip {
    padding: 8px 12px;
    background: #1F325D;
    color: #fff;
    border: none;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgb(30 50 64 / 25%);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    /* Leaflet daje dymkowi `white-space: nowrap`, wiec dlugi adres wyjechalby
       poza mape. Samo `normal` to za malo - bez szerokosci dymek zwezal sie do
       jednej trzeciej i lamal krotki tekst na trzy linijki. `max-content` trzyma
       go w jednej linii, dopoki miesci sie w 260px. */
    white-space: normal;
    width: max-content;
    max-width: 260px;
}

.chms-simple-map .leaflet-tooltip-top::before,
.chms-map .leaflet-tooltip-top::before {
    border-top-color: #1F325D;
}

.chms-simple-map .leaflet-tooltip-bottom::before,
.chms-map .leaflet-tooltip-bottom::before {
    border-bottom-color: #1F325D;
}

.chms-simple-map .leaflet-tooltip-left::before,
.chms-map .leaflet-tooltip-left::before {
    border-left-color: #1F325D;
}

.chms-simple-map .leaflet-tooltip-right::before,
.chms-map .leaflet-tooltip-right::before {
    border-right-color: #1F325D;
}

@media screen and (max-width: 782px) {
    .chms-simple-map__canvas {
        height: 300px;
    }
}


/* =========================================================================
 * Komponent galeria (chms_galeria) - shortcode [chms_gallery]
 *
 * Duze zdjecie ze strzalkami plus pasek miniatur pod spodem. Swiper pochodzi
 * z Elementora (uchwyt 'swiper'), stad klasy .swiper / .swiper-wrapper /
 * .swiper-slide - to jego szkielet, nie nasz.
 * ========================================================================= */

button.chms-gallery__nav {
    display: grid;
    place-items: center;
    padding: 0;
}

button.chms-gallery__nav svg {
    display: block;
}

/* Styl dla przycisków nawigacji */
.chms-gallery__nav {
    transition: opacity 0.3s ease !important; /* Płynne przejście */
    opacity: 1;
}

/* Efekt dla hover oraz active */
.chms-gallery__nav:hover,
.chms-gallery__nav:active {
    opacity: 0.9 !important; /* Lekkie rozjaśnienie poprzez przezroczystość */
    color: rgb(18, 165, 121) !important; /* Utrzymanie bazowego koloru */
    background-color: rgb(18, 165, 121) !important; /* Jeśli tło też się zmienia */
}

/* Upewnienie się, że ikonka SVG reaguje na zmiany */
.chms-gallery__stage--main .chms-gallery__nav--next:hover,
.chms-gallery__stage--main .chms-gallery__nav--next:focus,
.chms-gallery__stage--main .chms-gallery__nav--prev:hover,
.chms-gallery__stage--main .chms-gallery__nav--prev:focus
{
    background: none !important;
}

.chms-gallery__stage--thumbs .chms-gallery__nav svg path {
    stroke: #fff !important;
}

.chms-gallery__stage--thumbs .chms-gallery__nav:focus {
    background: rgb(18, 165, 121) !important;
}

.chms-gallery-wrapper {
    max-width: var(--chms-content);
    margin: 0 auto;
    padding: 20px 0 20px 0;
}

/* Poziomy padding robi miejsce strzalkom, ktore leza POZA duzym zdjeciem.
   Bez niego wystawalyby poza kontener i zostaly przyciete. */
.chms-gallery {
    position: relative;
    padding: 0 56px;
}

.chms-gallery__header {
    text-align: center;
    margin-bottom: 70px;
}

.chms-gallery__overline {
    margin: 0 0 8px;
    color: #12A579;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.chms-gallery__heading {
    margin: 0;
    color: #1F325D;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
}

/* Strzalki leza OBOK elementu Swipera - ten ma overflow: hidden i przycialby
   te wystajace poza kadr. Odniesieniem jest opakowanie __stage. */
.chms-gallery__stage {
    position: relative;
    z-index: 1;
}

.chms-gallery__stage--thumbs {
    z-index: 2; /* pasek miniatur nachodzi na dol duzego zdjecia */
    margin-top: -60px;
}

/* Kadr z makiety: duze zdjecie i miniatury maja te same proporcje, ok. 7:5.
   NIE 16:9 - przy szerokim kadrze wizualizacje domow traca gore i dol. */

.chms-gallery__main .swiper-slide img {
    display: block;
    width: 100%;
    aspect-ratio: 7 / 5;
    object-fit: cover;
}

/* Pasek miniatur NACHODZI na dol duzego zdjecia - stad ujemny margines
   i wyzszy z-index. Wciecie z lewej robi miejsce zielonemu kwadratowi
   ze strzalka, ktory w makiecie siedzi na krawedzi paska. */
.chms-gallery__thumbs {
    position: relative;
    max-width: 900px;
}

.chms-gallery__thumbs .swiper-slide {
    width: 180px;
    height: 136px;
    cursor: pointer;
}

.chms-gallery__thumbs .swiper-slide img {
    display: block;
    width: 100%;
    aspect-ratio: 7 / 5;
    object-fit: cover;
    box-shadow: 4px 4px 4px 0px rgb(0 0 0 / 50%);
}

.chms-gallery__thumbs .swiper-slide-thumb-active img {
    border: solid 3px #12A579FF;
}

/* Wspolna baza obu strzalek - zerujemy tez styl przyciskow z motywu */
.chms-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* Strzalki duzego zdjecia leza POZA kadrem, bez tla i obwodki.
   Miejsce na nie robi poziomy padding .chms-gallery. */
.chms-gallery__stage > .chms-gallery__nav {
    width: 40px;
    height: 40px;
    color: #12A579;
    border: none;
}

.chms-gallery__stage > .chms-gallery__nav--prev {
    left: -56px;
}

.chms-gallery__stage > .chms-gallery__nav--next {
    right: -56px;
}

/* Strzalki miniatur to zielone kwadraty z biala strzalka, na koncach paska */
.chms-gallery__stage--thumbs > .chms-gallery__nav {
    width: 32px;
    height: 32px;
    background: #12A579;
    color: #ffffff;
}

.chms-gallery__stage--thumbs > .chms-gallery__nav svg {
    width: 18px;
    height: 18px;
}

.chms-gallery__stage--thumbs > .chms-gallery__nav--prev {
    left: 36px;
}

.chms-gallery__stage--thumbs > .chms-gallery__nav--next {
    right: 36px;
}

/* Swiper sam dokleda te klase, gdy nie ma juz gdzie przewijac */
.chms-gallery__nav.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

@media screen and (max-width: 782px) {
    .chms-gallery__header {
        margin-bottom: 24px;
    }

    .chms-gallery__heading {
        font-size: 30px;
    }

    /* Na waskim ekranie nie ma marginesu na strzalki obok kadru - wracaja
       do srodka zdjecia, na polprzezroczystym tle, zeby byly czytelne */
    .chms-gallery {
        padding: 0;
    }

    .chms-gallery__stage > .chms-gallery__nav {
        background: rgba(255, 255, 255, 0.85);
        border-radius: 50%;
    }

    .chms-gallery__stage > .chms-gallery__nav:focus,
    .chms-gallery__stage > .chms-gallery__nav:active{
        background: rgba(255, 255, 255, 0.85) !important;
    }

    .chms-gallery__stage > .chms-gallery__nav--prev {
        left: 12px;
    }

    .chms-gallery__stage > .chms-gallery__nav--next {
        right: 12px;
    }

    .chms-gallery__thumbs .swiper-slide {
        width: 104px;
        height: auto;
    }

    .chms-gallery__stage--thumbs{
        margin-top: 10px;
    }

    .chms-gallery__stage--thumbs .chms-gallery__nav{
        display: none;
    }
}


/* =========================================================================
 * Lightbox Elementora - obrys focusa
 *
 * Strzalki lightboxa to <div role="button" tabindex="0"> o wymiarach kolumny,
 * czyli ok. 140x1000 px. Domyslny obrys przegladarki rysuje wokol nich ramke
 * na cala wysokosc ekranu, ktora wyglada jak przypadkowe obramowanie.
 *
 * NIE gasimy obrysu bez zamiany - to zabiera osobom nawigujacym klawiatura
 * jedyna informacje o tym, gdzie sa. Przenosimy go na sama ikone strzalki.
 * ========================================================================= */

.elementor-lightbox .elementor-swiper-button:focus,
.elementor-lightbox .elementor-swiper-button:focus-visible {
    outline: none;
}

.elementor-lightbox .elementor-swiper-button:focus-visible svg {
    outline: 2px solid #ffffff;
    outline-offset: 6px;
    border-radius: 4px;
}

/* =========================================================================
   Tabela lokali - "Rzuty i ceny"

   Kolory zdjete pipeta z makiety (inwestycja-biezaca.png), nie dobrane na oko:
   naglowek #1E3240, paskowanie #FFFFFF / #F4F4F4, plakietki #FF543E / #12A579
   / #FF8D28. Motyw (Hello/Elementor) stylizuje tabele i przyciski regulami
   typu `.entry-content table td` i `.entry-content button` o specyficznosci
   0,1,2 - dlatego nasze selektory sa zlozone (0,2,0) i wygrywaja bez !important.
   ========================================================================= */

.chms-units-wrapper {
    max-width: var(--chms-content);
    margin: 0 auto;
}

.chms-units__header {
    text-align: center;
    margin-bottom: 70px;
}

.chms-units__overline {
    margin: 0 0 8px;
    color: #12A579;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.chms-units__heading {
    margin: 0;
    color: #1F325D;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
}

/* --- plan osiedla (picker) --------------------------------------------- */

/* Plan i tabela maja WLASNE kontenery przewijane. Wspolny nie wystarczy:
   powyzej 782 px tabela i tak bywa szersza od kolumny tresci i bez tego poziomy
   pasek dostawala CALA strona. */
.chms-units__plan-scroll,
.chms-units__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Odniesienie dla warstwy obrysow i etykiet.

   SZEROKOSC Z MAKIETY: plan stoi w KOLUMNIE WASKIEJ (`image 5` w Figmie:
   x=205, w=1028), a nie w pelnej kolumnie tresci. Obrysy sa procentami
   obrazka, wiec zwezenie ich nie rusza - sprawdzone pomiarem od 320 do
   1440 px, pozycja trzyma sie co do setnej procenta. */
.chms-units__plan {
    position: relative;
    line-height: 0; /* zdejmuje szparę pod obrazkiem inline */
    max-width: var(--chms-narrow);
    margin-inline: auto;
}

.chms-units__plan-image {
    width: 100%;
    height: auto;
    display: block;
}

/* viewBox 0-100 + preserveAspectRatio="none" => wspolrzedne wprost w procentach,
   a warstwa pokrywa sie z obrazkiem niezaleznie od jego proporcji */
.chms-units__plan-shapes {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* `pointer-events: all` jest KONIECZNE: domyslne visiblePainted ignoruje
   klikniecia w ksztalt bez wypelnienia, a niezaznaczona dzialka jest przezroczysta */
.chms-units__shape {
    fill: #12A579;
    fill-opacity: 0;
    pointer-events: all;
    cursor: pointer;
    transition: fill-opacity 0.15s ease;
}

.chms-units__shape--zarezerwowany { fill: #FF8D28; }
.chms-units__shape--sprzedany     { fill: #FF543E; }

.chms-units__shape:hover,
.chms-units__shape.is-selected {
    fill-opacity: 0.85;
}

/* Etykieta pojawia sie razem z obrysem - na makiecie przy niezaznaczonej
   dzialce nie ma na planie zadnych oznaczen */
.chms-units__marker {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0;
    pointer-events: none; /* etykieta nie moze przechwytywac klikniec obrysu */
    transition: opacity 0.15s ease;
    line-height: 1.2;
    white-space: nowrap;
}

.chms-units__marker.is-selected {
    opacity: 1;
}

.chms-units__marker-number {
    padding: 2px 8px;
    background: #ffffff;
    color: #1E3240;
    font-size: 14px;
    font-weight: 700;
}

/* Plakietka musi zmiescic sie w szerokosci dzialki - przy 700 px planu dzialka
   ma ok. 100 px, wiec ciasniejszy padding niz w plakietce w tabeli */
.chms-units__marker-status {
    padding: 5px 12px;
    background: #ffffff;
    border: 1px solid #12A579;
    color: #12A579;
    font-size: 12px;
    font-weight: 600;
    text-transform: lowercase;
}

.chms-units__marker-status--zarezerwowany { border-color: #FF8D28; color: #FF8D28; }
.chms-units__marker-status--sprzedany     { border-color: #FF543E; color: #FF543E; }

/* --- tabela ------------------------------------------------------------ */

.chms-units__table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 40px;
}

.chms-units__table,
.chms-units__table .chms-units__th,
.chms-units__table .chms-units__td {
    border: 0;
    background-image: none;
    text-align: center;
}

.chms-units__table .chms-units__th {
    padding: 18px 16px;
    background-color: #1E3240;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.chms-units__table .chms-units__td {
    padding: 16px;
    color: #1E3240;
    font-size: 14px;
    background-color: transparent;
}

.chms-units__td--numer {
    font-weight: 700;
}

/* Paskowanie z makiety: pierwszy wiersz bialy, drugi szary */
.chms-units__table tbody tr,
.chms-units__table tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

.chms-units__table tbody tr:nth-child(even) {
    background-color: #F4F4F4;
}

.chms-units__table tbody tr:hover,
.chms-units__table tbody tr.is-selected {
    background-color: #E8F5F0;
}

/* Plakietka statusu - slug w klasie, etykieta z terminu (redaktor ja zmienia),
   a malymi literami robi to CSS, zeby nie wymuszac zapisu w panelu */
.chms-units__status {
    display: inline-block;
    min-width: 116px;
    padding: 7px 14px;
    border-radius: 3px;
    background-color: #12A579;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-transform: lowercase;
    white-space: nowrap;
}

.chms-units__status--zarezerwowany { background-color: #FF8D28; }
.chms-units__status--sprzedany     { background-color: #FF543E; }

.chms-units__pdf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1E3240;
    font-weight: 700;
    text-decoration: none;
}

.chms-units__pdf svg {
    color: #12A579;
}

.chms-units__pdf:hover {
    color: #12A579;
}

/* Wskazniki sortowania rysujemy sami, bo arkusz DataTables jest wylaczony
   (patrz komentarz w chms_units_table_shortcode()). Biblioteka wstawia pusty
   <span class="dt-column-order"> i przelacza klasy dt-ordering-* na <th>. */
.chms-units__th.dt-orderable-asc,
.chms-units__th.dt-orderable-desc {
    cursor: pointer;
}

.chms-units__th .dt-column-order {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 12px;
    margin-left: 8px;
    vertical-align: middle;
    opacity: 0.45;
}

.chms-units__th .dt-column-order::before,
.chms-units__th .dt-column-order::after {
    content: "";
    position: absolute;
    left: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.chms-units__th .dt-column-order::before {
    top: 0;
    border-bottom: 4px solid currentColor;
}

.chms-units__th .dt-column-order::after {
    bottom: 0;
    border-top: 4px solid currentColor;
}

.chms-units__th.dt-ordering-asc .dt-column-order,
.chms-units__th.dt-ordering-desc .dt-column-order {
    opacity: 1;
}

/* Tabela nie moze sie scisnac ponizej czytelnej szerokosci - zamiast tego
   przewija sie w swoim kontenerze */
.chms-units__table {
    min-width: 720px;
}

@media (max-width: 782px) {
    /* Plan tez dostaje minimalna szerokosc. Przy 390 px ekranu rysunek mialby
       ok. 370 px, czyli dzialka wyszlaby na 50 px - dymek z numerem bylby
       wiekszy od niej samej. Obrysy sa w PROCENTACH obrazka, wiec powiekszenie
       rysunku nie rusza ich polozenia. */
    .chms-units__plan {
        min-width: 700px;
    }

    .chms-units__heading {
        font-size: 30px;
    }

    .chms-units__header {
        margin-bottom: 40px;
    }
}

/* =========================================================================
   Spis tresci sekcji - pasek nawigacji podstrony

   Kolor pasa zdjety pipeta z makiety: #F4F4F4, ten sam szary co paskowanie
   tabeli. Pojemnik jest ukryty, dopoki skrypt nie zbuduje listy - inaczej
   pusty pas mignalby przy kazdym wejsciu na strone.
   ========================================================================= */

.chms-toc:not(.is-ready) {
    display: none;
}

.chms-toc {
    background: var(--chms-stripe);

    /* SZEROKOSC Z MAKIETY: pasek stoi w PASIE SZEROKIM (`Frame 16` w Figmie:
       x=100, w=1240), a nie na cala szerokosc okna. Zmierzone przed zmiana:
       1420 px, czyli o 180 px za szeroko - kontener pod nim jest niemal
       pelnoekranowy, a szare tlo szlo za nim. */
    max-width: var(--chms-band);
    margin-inline: auto;
}

.chms-toc__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 40px;
    margin: 0;
    padding: 20px 24px;
    list-style: none;
}

.chms-toc__item {
    margin: 0;
    list-style: none;
}

.chms-toc__link {
    color: #1E3240;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.chms-toc__link:hover,
.chms-toc__link:focus-visible {
    color: #12A579;
}

/* Sekcja, w ktorej wlasnie jestesmy - podswietlenie liczy IntersectionObserver */
.chms-toc__link.is-active {
    color: #12A579;
    font-weight: 700;
}

@media (max-width: 782px) {
    .chms-toc__list {
        gap: 10px 24px;
        padding: 14px 16px;
    }

    .chms-toc__link {
        font-size: 14px;
    }
}

/* =========================================================================
   Sekcja z kafelkami - uklady

   UKLAD DEKLARUJEMY JAWNIE, polem "Liczba kolumn". Wczesniej wisial na polu
   "Rodzaj tresci", ktore mowi o TRESCI kafelka - dzialalo dopoki uklad i tresc
   przypadkiem sie pokrywaly, i zacielo sie przy trzeciej sekcji.

   Puste pole = BRAK modyfikatora `--siatka`, czyli dotychczasowy flex w rzedzie.
   Tego wariantu uzywa sekcja "O nas" na stronie glownej (szablon #396) i nie
   wolno go ruszyc.
   ========================================================================= */

/* Liczba kolumn przychodzi zmienna, wiec jedna regula obsluguje kazda wartosc -
   nie trzeba pisac osobnych pod 2, 3 czy 4 kolumny */
.about-us-features--siatka {
    display: grid;
    grid-template-columns: repeat(var(--chms-kolumny, 2), 1fr);
    align-items: start;
    gap: 48px 60px;
}

/* Stara siatka ograniczala kafelek do 185px pod uklad czterech w rzedzie */
.about-us-features--siatka .about-us-feature-item {
    max-width: none;
}

/* Ikona po LEWEJ, tresc po prawej - tak jest w makiecie w kazdym ukladzie
   siatkowym. W ukladzie rzedowym (strona glowna) ikony zostaja NAD tekstem. */
.about-us-features--siatka .about-us-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.about-us-features--siatka .about-us-feature-item__icon {
    flex: 0 0 auto;
    width: 72px;
}

.about-us-features--siatka .about-us-feature-item__icon img {
    display: block;
    width: 100%;
    height: auto;
}

/* =========================================================================
   KAFELEK OPISOWY („Twoje korzysci", „Dlaczego my") - wymiary z makiety.
   Mierzone TA SAMA METODA po obu stronach: profil tuszu w kolumnie kafelka,
   makieta Ekologia.png (1:1, 1440 px) wobec zrzutu zywej sekcji.

                        makieta   bylo u nas
     ikona                100 px      72 px
     ikona -> tresc        35 px      25 px
     wysokosc wersalika    20 px      16 px  (czyli krój 26 px wobec 20)
     krok wiersza naglowka 42 px      24 px
     naglowek -> tekst     46 px      22 px
     krok wiersza tekstu   26 px      24 px

   Wersalik przeliczamy na rozmiar kroju stosunkiem 0,75 - skalibrowanym na
   tekscie, o ktorym wiemy, ze ma 16 px (wersalik 12 px w obu zrzutach).

   NIE DOTYCZY WARIANTU `--lista` („Standard wykonania"), gdzie makieta ma
   ikony 72 px - stad `:not()`. To nie jest niekonsekwencja projektanta:
   kafelek opisowy niesie dwuwierszowy naglowek i akapit, a pozycja standardu
   sama wyliczanke, wiec ikona gra tam inna role.
   ========================================================================= */
.about-us-features--siatka:not(.about-us-features--lista) .about-us-feature-item__icon {
    width: 100px;
}

.about-us-features--siatka:not(.about-us-features--lista) .about-us-feature-item {
    gap: 35px;
}

.about-us-features--siatka:not(.about-us-features--lista) .about-us-feature-item__content h3 {
    font-size: var(--chms-text-h4);
    /* w makiecie naglowek kafelka jest PELNYM pogrubieniem; sama regula bazowa
       tego nie utrzyma, bo ma te sama wage co `.elementor-kit-7 h3` (0,1,1)
       i przegrywa kolejnoscia wczytania arkuszy */
    font-weight: 700;
    /* interlinia naglowka kafelka jest LUZNIEJSZA niz domyslne 1,3 ze stylu
       motywu - w makiecie krok wiersza to 42 px przy kroju 26 */
    line-height: 42px;
    margin-bottom: 32px;
}

.about-us-features--siatka:not(.about-us-features--lista) .about-us-feature-item__content span {
    line-height: 26px;
}

/* min-width: 0 jest KONIECZNE - bez tego dlugie pozycje listy rozpychaja
   kolumne zamiast sie zawijac (domyslne min-width: auto elementu flex) */
.about-us-features--siatka .about-us-feature-item__content {
    flex: 1 1 auto;
    min-width: 0;
}

/* --- pierwszy kafelek na cala wysokosc ("Standard wykonania") ------------ */

/* Jawne wiersze sa KONIECZNE: `-1` liczy od konca siatki JAWNEJ, wiec bez nich
   `grid-row: 1 / -1` degeneruje sie do jednego wiersza i pierwszy kafelek
   zostalby przyciety. Zapas nic nie kosztuje - puste wiersze `auto` maja zerowa
   wysokosc - a dzieki niemu regula nie zalezy od liczby kafelkow. */
.about-us-features--pierwszy-wysoki {
    grid-template-rows: repeat(10, auto);
    align-content: start;
    gap: 40px 60px;
}

.about-us-features--pierwszy-wysoki .about-us-feature-item:first-child {
    grid-column: 1;
    grid-row: 1 / -1;
}

.about-us-features--pierwszy-wysoki .about-us-feature-item:not(:first-child) {
    grid-column: 2;
}

/* --- naglowek i zdjecie w siatce ("Dlaczego my") ------------------------- */

/* Kafelki nie sa pozycjonowane - plyna automatycznie i same omijaja komorki
   zajete przez naglowek i zdjecie. To zwykly auto-placement gridu:
       wiersz 1   [naglowek]    [zdjecie
       wiersz 2   [kafelek 1]    (dalej)
       wiersz 3   [kafelek 2]    zdjecie]
       wiersz 4   [kafelek 3]   [kafelek 4]
       wiersz 5   [kafelek 5]   [kafelek 6]
   Sama siatka przychodzi z `--siatka`; ta sekcja tylko rozstawia naglowek
   i zdjecie. */
.about-us-features--naglowek-w-siatce .about-us-features__header {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
}

/* Ile wierszy zajmuje zdjecie, czyli ile kafelkow stoi obok niego. Z makiety:
   naglowek + dwa kafelki = 3 wiersze. To JEDYNA liczba zalezna od tresci. */
.about-us-features--naglowek-w-siatce .about-us-features__image {
    grid-column: 2;
    grid-row: 1 / span 3;
}

.about-us-features--naglowek-w-siatce .about-us-features__image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Lustrzane odbicie - zdjecie po lewej, naglowek po prawej */
.about-us-features--naglowek-w-siatce.about-us-features--obraz-lewo .about-us-features__image {
    grid-column: 1;
}

.about-us-features--naglowek-w-siatce.about-us-features--obraz-lewo .about-us-features__header {
    grid-column: 2;
}

.about-us-features--naglowek-w-siatce .about-us-features__heading {
    margin: 0;
    color: #1F325D;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
}

.about-us-features--naglowek-w-siatce .about-us-features__overline {
    margin: 0 0 8px;
    color: #12A579;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* --- lista wypunktowana w kafelku (tryb tresci, nie uklad) --------------- */

.about-us-features--lista .about-us-feature-item__list ul {
    margin: 0;
    padding-left: 18px;
}

.about-us-features--lista .about-us-feature-item__list li {
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.5;
}

/* --- zastrzezenie ------------------------------------------------------- */

.about-us-feature-item--note,
.about-us-features__note {
    color: #7C8893;
    font-size: 12px;
    line-height: 1.5;
}

.about-us-feature-item--note p:first-child,
.about-us-features__note p:first-child {
    margin-top: 0;
}

.about-us-feature-item--note p:last-child,
.about-us-features__note p:last-child {
    margin-bottom: 0;
}

.about-us-features__note {
    margin-top: 32px;
}

/* Notka bez ikony - wyrownujemy ja do kolumny tresci. Z ikona wciecie jest
   mniejsze, bo ikona i odstep dokladaja reszte: 44 + 28 + 24 = 96. */
.about-us-features--siatka .about-us-feature-item--note {
    padding-left: 96px;
}

.about-us-features--siatka .about-us-feature-item--note.has-icon {
    padding-left: 44px;
}

/* Ikona zastrzezenia jest mniejsza od kafelkowej - tak jest w makiecie */
.about-us-features--siatka .about-us-feature-item--note .about-us-feature-item__icon {
    width: 28px;
}

.about-us-features__note.has-icon {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.about-us-features__note .about-us-feature-item__icon {
    flex: 0 0 auto;
    width: 28px;
}

.about-us-features__note .about-us-feature-item__icon img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- waski ekran -------------------------------------------------------- */

/* Liczba kolumn NIE obowiazuje ponizej 782px - inaczej ktos wpisze piec
   i na telefonie zrobi sie nieczytelnie */
@media (max-width: 782px) {
    /* WYMIARY KAFELKA OPISOWEGO WRACAJA DO MNIEJSZYCH. Powiekszone wartosci
       (ikona 100, naglowek 26/42) pochodza z makiety DESKTOPOWEJ, a makiet
       mobilnych projektant jeszcze nie dostarczyl - ta sama zasada co przy
       naglowku strony. Zmierzone przy 375 px: bez tego Ekologia rosla
       o 1226 px, bo dwuwierszowy naglowek lamal sie na cztery wiersze. */
    .about-us-features--siatka:not(.about-us-features--lista) .about-us-feature-item__icon {
        width: 72px;
    }

    .about-us-features--siatka:not(.about-us-features--lista) .about-us-feature-item {
        gap: 24px;
    }

    .about-us-features--siatka:not(.about-us-features--lista) .about-us-feature-item__content h3 {
        font-size: 20px;
        line-height: 26px;
        margin-bottom: 16px;
    }

    .about-us-features--siatka {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 32px;
    }

    .about-us-features--pierwszy-wysoki .about-us-feature-item:first-child,
    .about-us-features--pierwszy-wysoki .about-us-feature-item:not(:first-child),
    .about-us-features--naglowek-w-siatce .about-us-features__header,
    .about-us-features--naglowek-w-siatce .about-us-features__image {
        grid-column: 1;
        grid-row: auto;
    }

    .about-us-features--naglowek-w-siatce .about-us-features__header{
        margin: auto;
    }
}

/* =========================================================================
 * Mega menu - chevron przed nazwa inwestycji
 *
 * Lista "Inwestycje zrealizowane" to widget Posts (skorka classic), ktory
 * NIE MA wlasnej ikony pozycji - w przeciwienstwie do widgetu Lista ikon,
 * gdzie ikone wybiera sie klikniecem. Stad chevron z CSS-a.
 *
 * MASKA, NIE `background-image`: SVG w data URI to osobny dokument i NIE
 * dziedziczy `currentColor`, wiec przy zmianie koloru na hoverze trzeba by
 * duplikowac caly adres. Przy masce o kolorze decyduje `background`, a SVG
 * daje tylko ksztalt - ikona chodzi za kolorem tekstu za darmo.
 *
 * Chevron jest KOMORKA FLEXA, a nie znakiem w tekscie: nazwy inwestycji lamia
 * sie na dwie linie ("Zielone Zacisze w Pruszowicach I i II") i druga linia ma
 * byc wyrownana do tekstu, a nie chowac sie pod ikone.
 * ====================================================================== */

#chms_menu_invest_complete .elementor-post__title a {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

#chms_menu_invest_complete .elementor-post__title a::before {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    /* Wysokosc jednej linii - dzieki temu ikona siada na wysokosci PIERWSZEJ
       linii tytulu, a nie na srodku calego, dwuliniowego bloku */
    height: 1.5em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/14px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* =========================================================================
   ROZWIJANE MENU „INWESTYCJE" (szablon naglowka #486)

   Kolumny maja rozkladac sie na jednej wysokosci, a zdjecia trzymac staly
   kadr. Proporcja kadru i szerokosc zdjecia siedza W PANELU - widget Wpisy ma
   na to wlasne kontrolki (`item_ratio`, `image_width`, patrz
   `bin/ustaw-zdjecia-menu.php`). Tutaj zostaja dwie rzeczy, ktorych panel
   zrobic nie moze.
   ========================================================================= */

/* 1. NAGLOWKI KOLUMN NA JEDNEJ WYSOKOSCI. „Inwestycje w przygotowaniu" lamie
      sie na dwa wiersze, a pozostale dwa naglowki mieszcza sie w jednym -
      przez to zdjecie w srodkowej kolumnie zaczynalo sie 24 px nizej niz
      w pierwszej (zmierzone y 164 wobec 140). Elementor nie ma kontrolki
      „wyrownaj do sasiedniej kolumny", bo to osobne kontenery, a wysokosc
      wiersza wyrownuje tylko siatka - kolumny sa tu flexem.
      3em to DWA wiersze (interlinia 1,5), wiec naglowek jednowierszowy
      rezerwuje miejsce na drugi. Gdyby ktorys urosl do trzech wierszy,
      kolumny rozjada sie znowu - wtedy trzeba podniesc te wartosc. */
@media (min-width: 783px) {
    .e-n-menu-content .elementor-widget-heading {
        min-height: 3em;
    }
}

/* 2. WYPELNIENIE KADRU ROBI `object-fit`, NIE SKRYPT ELEMENTORA.
      Przy wlaczonej proporcji Elementor pozycjonuje zdjecie absolutnie
      i przelacza je miedzy „na szerokosc" a „na wysokosc" KLASA
      `elementor-fit-height`, ktora dokłada JavaScript po zmierzeniu obrazka
      (`elementor-pro`, obsluga widgetu Wpisy). W rozwijanym menu obrazek jest
      przy starcie strony ukryty, wiec pomiar potrafi wypasc na zerowych
      wymiarach i klasa nie przychodzi - zmierzone: zdjecie 222x158 w kadrze
      220x165, czyli 7 px tla u dolu.
      `object-fit: cover` zalatwia to samo wlasciwoscia przegladarki, bez
      pomiaru i bez skryptu. Kadr (czyli PROPORCJA) nadal przychodzi z panelu -
      to nie jest drugie zrodlo prawdy, tylko inny sposob wypelnienia go.
      Waga 0,5,1: regula Elementora dla `.elementor-fit-height` ma 0,4,1,
      a jego arkusz wczytuje sie PO naszym, wiec przy remisie by wygral. */
.e-n-menu-content .elementor-posts-container.elementor-has-item-ratio .elementor-post__thumbnail__link .elementor-post__thumbnail img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Elementor przesuwa zdjecie o polowe wymiaru i skaluje o 1% (zaslania
       zaokraglenia sub-pikselowe); przy `inset: 0` to tylko by je zsunelo. */
    transform: none;
}

/* =========================================================================
   WIDOCZNY FOKUS - SIATKA BEZPIECZENSTWA (2026-09-25)

   Zmierzone obchodem klawiatury: z 61 przystankow klawisza Tab na podstronie
   inwestycji DWANASCIE nie mialo ani obrysu, ani cienia - przycisk rozwijania
   menu, „Historia cen", oba pola zgody i „Wyślij". Czesc regul w tym arkuszu
   sygnalizuje fokus SAMYM KOLOREM (np. `.chms-prices-btn:focus-visible`
   zmienia barwe napisu), a to wedlug WCAG 2.4.7 nie wystarcza - zmiana koloru
   nie jest widoczna dla osoby, ktora go nie rozroznia.

   Regula jest DOMYSLNA, nie nadrzedna: `:focus-visible` bez `!important`
   przegrywa z kazdym wlasnym obrysem ustawionym dalej w arkuszu, wiec
   dotychczasowe sygnalizacje (galeria, przycisk hero, prospekt) zostaja
   nietkniete, a puste miejsca sie wypelniaja.

   `:focus-visible`, a nie `:focus` - obrys pokazuje sie przy nawigacji
   klawiatura, a nie po kliknieciu myszka.

   Kolor obrysu to Dark z palety. To nie jest zmiana projektu - fokus nie ma
   w makiecie zadnego stanu, wiec nie ma czego naruszyc; paleta zostaje
   nietknieta (decyzja Kamila 2026-09-25).
   ========================================================================= */

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--chms-dark, #1E3240);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Na ciemnych tlach ciemny obrys znika. Stopka jest jedyna taka powierzchnia
   w serwisie (#1F325D), a naglowek bywa nia tylko na stronie glownej nad hero,
   zanim sie przewinie. */
.elementor-location-footer a:focus-visible,
.elementor-location-footer button:focus-visible,
.elementor-location-footer input:focus-visible,
.elementor-location-footer select:focus-visible,
.elementor-location-footer textarea:focus-visible,
body.home:not(.chms-scrolled) .elementor-location-header a:focus-visible,
body.home:not(.chms-scrolled) .elementor-location-header button:focus-visible {
    outline-color: #FFFFFF;
}

/* =========================================================================
   IMAGE BOX: POZYCJA OBRAZKA DZIALA TAKZE NA TELEFONIE (2026-09-25)

   OBJAW: w karcie inwestycji na stronie glownej pinezka stala w osobnym
   wierszu NAD adresem, zamiast obok niego - tylko na waskim ekranie.

   PRZYCZYNA JEST W ELEMENTORZE, NIE W USTAWIENIU. Widget ma w panelu
   „Pozycja obrazka" z osobna wartoscia dla telefonu i ta wartosc JEST
   ustawiona na „lewo" (`position_mobile` w danych szablonu #324). Elementor
   zapisuje ja do danych, ale nie ma dla niej reguly - uklad w rzedzie wypisuje
   WYLACZNIE od 768 px w gore:

     @media (min-width:768px){
       .elementor-widget-image-box.elementor-position-left
       .elementor-image-box-wrapper{display:flex}
     }
     (elementor/assets/css/widget-image-box.min.css)

   Ponizej tego progu opakowanie zostaje zwyklym blokiem, wiec obrazek laduje
   sie nad tekstem niezaleznie od tego, co wybrano w panelu. Zmierzone:
   przy 1440 px `display: flex`, przy 375 px `display: block` - ta sama regula,
   ten sam element.

   Dlatego powtarzamy regule Elementora ponizej jego progu - czyli honorujemy
   ustawienie z panelu, a nie narzucamy wlasnego ukladu. Widget z pozycja „gora"
   nadal stoi w pionie, bo nie ma wtedy klasy `--position-left`.
   ========================================================================= */

@media (max-width: 767px) {
    .elementor-widget-image-box.elementor-position-left .elementor-image-box-wrapper,
    .elementor-widget-image-box.elementor-position-right .elementor-image-box-wrapper {
        display: flex;
        align-items: center;
        /* ODSTEP MUSI BYC TUTAJ, a nie w panelu. Kontrolka „Odstep obrazka"
           mapuje sie na telefonie na ODSTEP PIONOWY, bo Elementor zaklada
           obrazek nad tekstem:
             '(mobile){{WRAPPER}} .elementor-image-box-img' => 'margin-bottom'
             (elementor/includes/widgets/image-box.php:318)
           Wpisanie tam 5 px dalo by 5 px POD ikona, a nie obok niej. Wartosc
           odpowiada tej, ktora widget ma na desktopie - powielenie swiadome,
           bo panel nie ma czym tego ustawic. */
        gap: 5px;
    }

    .elementor-widget-image-box.elementor-position-left .elementor-image-box-wrapper {
        flex-direction: row;
        text-align: start;
    }

    .elementor-widget-image-box.elementor-position-right .elementor-image-box-wrapper {
        flex-direction: row-reverse;
        text-align: end;
    }

    /* Elementor centruje obrazek na telefonie wlasna regula z `!important`
       (`margin-inline: auto`) - w ukladzie w rzedzie zepchnelaby tekst. */
    .elementor-widget-image-box.elementor-position-left .elementor-image-box-img,
    .elementor-widget-image-box.elementor-position-right .elementor-image-box-img {
        margin-inline: 0 !important;
        margin-bottom: 0;
        flex: 0 0 auto;
    }
}

/* Obrys dzialki jest przyciskiem (patrz `chms_units_plan`), wiec musi
   pokazywac fokus. Sam `outline` na elemencie SVG bywa rysowany po prostokacie
   opisanym na ksztalcie, a nie po jego krawedzi - przy dzialkach ustawionych
   pod katem wyglada to jak zaznaczenie sasiada. Dlatego sygnalem jest
   OBRAMOWANIE SAMEGO OBRYSU, a `outline` wylaczamy.
   `vector-effect` trzyma stala grubosc kreski niezaleznie od
   `preserveAspectRatio="none"`, ktore inaczej rozciagnelo by ja razem z planem. */
/* OBRYS PRZEGLADARKI GASIMY W STANIE `:focus`, NIE `:focus-visible`.
   Pierwsza wersja gasila go tylko przy `:focus-visible` i na TELEFONIE
   zostawal - zmierzone na emulacji dotyku: po tapnieciu obrys ma `:focus`,
   ale `:focus-visible` jest FALSZEM, wiec regula nie dzialala, a przegladarka
   rysowala swoj domyslny ring (`outline: auto 5px`). Na zdjeciu ekranu
   wygladalo to jak gruba biala ramka wokol dzialki.
   Nie jest to utrata sygnalu dostepnosci: wlasny wskaznik (kreska ponizej)
   wchodzi przy `:focus-visible`, czyli dokladnie wtedy, gdy uzytkownik
   nawiguje klawiatura. Przy dotyku i myszy zaznaczenie widac po wypelnieniu
   i po plakietce z numerem. */
.chms-units__shape:focus {
    outline: none;
}

.chms-units__shape:focus-visible {
    stroke: var(--chms-dark, #1E3240);
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
}

/* Odnosnik do polityki prywatnosci obok copyrightu (`[copyright_year]`).
   Bez separatora oba napisy czytaly sie jako jedno zdanie - zmierzone: 3 px
   przerwy. Kropka wisi na ODNOSNIKU, a nie na copyrighcie, bo shortcode
   wypisuje link tylko wtedy, gdy strona polityki jest opublikowana; separator
   na copyrighcie zostalby wiszac, gdyby linku zabraklo.
   `nowrap` trzyma nazwe w calosci - przy 375 px lamala sie na „Polityka /
   prywatności". */
/* Odnosnik ma wygladac jak czesc linii copyrightu, a nie jak odnosnik z tresci:
   ta sama wielkosc (12 px) i ta sama barwa (#1F325D) co napis obok. Zmierzone
   przed zmiana: 16 px i zielen #0E8A65 - roznil sie na oba sposoby naraz.
   Ze jest klikalny, mowi podkreslenie przy najechaniu i fokusie; przy 12 px
   na bialym pasku barwa marki dawalaby 4,34 kontrastu, a Blue daje 12,56.

   WAGA 0,2,1 JEST KONIECZNA: kolor odnosnikow ustawia `.elementor-kit-7 a`
   (0,2,0) w arkuszu zestawu, ktory wczytuje sie PO naszym - sama klasa
   `.chms-cp-policy` (0,1,0) przegrywala i napis zostawal zielony. */
.chms-cp-policy {
    white-space: nowrap;
    font-size: var(--chms-text-xs, 12px);
}

.elementor-location-footer a.chms-cp-policy {
    color: var(--chms-blue, #1F325D);
    text-decoration: none;
}

.elementor-location-footer a.chms-cp-policy:hover,
.elementor-location-footer a.chms-cp-policy:focus-visible {
    color: var(--chms-blue, #1F325D);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.chms-cp-policy::before {
    content: "·";
    display: inline-block;
    margin-inline: 6px 8px;
}

/* Na waskim ekranie napisy i tak sie nie mieszcza w jednym wierszu, wiec
   separator zaczynalby wiersz od kropki. Odnosnik idzie wtedy swoim wierszem. */
@media (max-width: 782px) {
    .chms-cp-policy {
        display: block;
    }

    .chms-cp-policy::before {
        content: none;
    }
}