/* ===================================================================== M16 — most między siatką Elementora a siatką motywu scubo (bootstrap 4). Sekcje powstałe z konwersji widgetów scubo_* noszą klasy m16-*, a ten plik nadaje im zachowanie .container / .row / .col-* motywu. Dzięki temu żadne mapowanie nie musi już wstrzykiwać własnego CSS do _elementor_data. Ładowany PO style.css motywu (patrz m16-scubo-bridge.php). ===================================================================== */ /* --- 1. zerowanie globalnego odstępu widgetów ------------------------- Elementor 4 dokłada do KAŻDEGO widgetu calc(var(--kit-widget-spacing) + X). Widgety scubo tego nie miały, więc w konwertowanych sekcjach zerujemy. UWAGA: zerujemy TYLKO zmienną. Dopisanie tu margin-bottom: 0 kasowało odstępy ustawione na samych widgetach (_margin), bo ta reguła ma tę samą specyficzność co CSS widgetu, a ładuje się później — i wygrywała. */ .m16-sec .elementor-widget:not(:last-child), .m16-container .elementor-widget:not(:last-child), .m16-row .elementor-widget:not(:last-child), .m16-plain .elementor-widget:not(:last-child) { --kit-widget-spacing: 0px; } /* --- 2. .m16-container = .container motywu --------------------------- Elementor boxed ma na sztywno 1140 px; motyw nadpisuje bootstrapa na 1200. */ .m16-container.elementor-section > .elementor-container { width: 100%; max-width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .m16-container.elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap { padding: 0; } @media (min-width: 576px) { .m16-container.elementor-section > .elementor-container { max-width: 540px; } } @media (min-width: 768px) { .m16-container.elementor-section > .elementor-container { max-width: 720px; } } @media (min-width: 992px) { .m16-container.elementor-section > .elementor-container { max-width: 960px; } } @media (min-width: 1200px) { .m16-container.elementor-section > .elementor-container { max-width: 1200px; } } /* --- 3. .m16-row = .container + .row w jednym -------------------------- padding kontenera znoszą ujemne marginesy .row, więc poziomy padding schodzi do zera, a paddingi wrapperów kolumn (15 px) zostają — to w nich siedzą karty. */ .m16-row.elementor-section > .elementor-container { width: 100%; max-width: 100%; padding-right: 0; padding-left: 0; margin-right: auto; margin-left: auto; /* .row bootstrapa ZAWSZE zawija; .elementor-container ma flex-wrap: nowrap, więc kolumny .col-*-N (100% poniżej swojego progu) ściskały się obok siebie zamiast łamać na kolejny wiersz — patrz scubo_contact przy 1100 px. */ flex-wrap: wrap; } @media (min-width: 576px) { .m16-row.elementor-section > .elementor-container { max-width: 540px; } } @media (min-width: 768px) { .m16-row.elementor-section > .elementor-container { max-width: 720px; } } @media (min-width: 992px) { .m16-row.elementor-section > .elementor-container { max-width: 960px; } } @media (min-width: 1200px) { .m16-row.elementor-section > .elementor-container { max-width: 1200px; } } .m16-row.elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap { padding: 0 15px; } /* --- 4. .m16-plain = wrapper Elementora całkiem przezroczysty ---------- Do sekcji, w których markup motywu przenosimy w całości (karuzele, stopka). Po tym zabiegu
motywu leży dokładnie tam, gdzie leżał. */ .m16-plain.elementor-section { padding: 0; margin: 0; } .m16-plain.elementor-section > .elementor-container { width: 100%; max-width: none; margin: 0; padding: 0; } .m16-plain.elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap { padding: 0; } .m16-plain .elementor-widget-container { margin: 0; } /* --- 5. kolumny: kotwica dla dekoracji absolutnych --------------------- Kolumna i .elementor-widget-wrap mają position: relative — przez to „wstążki" i „rybki" motywu kotwiczyłyby się do kolumny zamiast do sekcji. */ .m16-static > .elementor-widget-wrap, .m16-static.elementor-column { position: static; } /* --- 6. .block-title w wydaniu Elementora ----------------------------- Obrazek kreski siedzi w .elementor-widget-container, więc traci wyśrodkowanie. */ .block-title .elementor-widget-image img { display: block; } .block-title.text-center .elementor-widget-image img { margin-left: auto; margin-right: auto; } @media (max-width: 375px) { .block-title .elementor-heading-title { font-size: 45px; } } /* --- 7. tryb „przezroczysty" ------------------------------------------ Najtańszy sposób na wierność 1:1: sekcje Elementora dostają ORYGINALNE klasy motywu (.cta-two, .container, .block-title …), a strukturalne wrappery Elementora znikają z układu (display: contents). Drzewo renderowania staje się wtedy takie samo jak to, które generował widget scubo, więc cały style.css motywu działa bez jednej linijki przepisywania. Treść zostaje w natywnych widgetach Elementora, czyli nadal edytowalna. */ .m16-thm.elementor-section > .elementor-container { display: contents; } .m16-vanish.elementor-column { display: contents; } .m16-vanish.elementor-column > .elementor-widget-wrap { display: contents; } .m16-raw.elementor-widget, .m16-raw > .elementor-widget-container { display: contents; } /* widget `shortcode` dokłada jeszcze JEDEN wrapper — .elementor-shortcode — który przy .m16-raw też musi zniknąć. Inaczej siatka liczy się od niego: wiersz kart dostawał 1140 px zamiast 1170 i każda karta była węższa o 15 px. */ .m16-raw .elementor-shortcode { display: contents; } /* --- 8. nagłówki: oddaj pole motywowi --------------------------------- Elementor wymusza `.elementor-heading-title { line-height: 1 }` (0,1,0). W motywie nagłówek bierze line-height albo od bootstrapa (h1-h6 { line-height: 1.2 }), albo z własnej reguły motywu (np. .team-single-area .team-member-content-box h3 { 30px }). Dlatego selektor klas sekcji owijamy w :where() — nie podbija specyficzności, więc: - 0,1,1 bije regułę Elementora (0,1,0) i bootstrapa (0,0,1), - a KAŻDA reguła motywu z dwiema klasami (0,2,1) wygrywa z nami sama z siebie. Wcześniejszy wariant `.m16-thm .elementor-heading-title:not(.m16-lh)` miał 0,3,0 i przykrywał motyw, a furtka .m16-lh i tak nie działała: Elementor wpisuje klasy z `_css_classes` na WRAPPER widgetu, nie na sam

. */ :where(.m16-thm, .m16-sec, .m16-container, .m16-row, .m16-plain) h1.elementor-heading-title, :where(.m16-thm, .m16-sec, .m16-container, .m16-row, .m16-plain) h2.elementor-heading-title, :where(.m16-thm, .m16-sec, .m16-container, .m16-row, .m16-plain) h3.elementor-heading-title, :where(.m16-thm, .m16-sec, .m16-container, .m16-row, .m16-plain) h4.elementor-heading-title, :where(.m16-thm, .m16-sec, .m16-container, .m16-row, .m16-plain) h5.elementor-heading-title, :where(.m16-thm, .m16-sec, .m16-container, .m16-row, .m16-plain) h6.elementor-heading-title { line-height: 1.2; } /* nagłówki renderowane jako div/span/p line-height dziedziczą (bootstrapowa reguła h1-h6 ich nie dotyczy) */ :where(.m16-thm, .m16-sec, .m16-container, .m16-row, .m16-plain) .elementor-heading-title { line-height: inherit; } /* --- 9. znikanie SAMEGO .elementor-widget-wrap ------------------------ .m16-vanish chowa kolumnę RAZEM z jej wrapperem. Bywa jednak, że kolumna ma odegrać rolę konkretnego diva motywu (np. .col-lg-6 albo .row), a zniknąć ma tylko wrapper widgetów w środku. Wtedy .m16-wrap-vanish. */ .m16-wrap-vanish.elementor-column > .elementor-widget-wrap { display: contents; } /* .elementor-column jest FLEXEM W RZĘDZIE — dopóki siedzi w niej jeden .elementor-widget-wrap, nie widać tego. Po jego zniknięciu dzieci wchodzą do tego flexa wprost i ustawiają się obok siebie (a pojedyncze dziecko kurczy się do treści zamiast wziąć pełną szerokość). Kolumna gra tu rolę zwykłego diva motywu, więc wracamy do układu blokowego. Gdy ma być flexem, mapowanie daje jej klasę .d-flex motywu (display: flex !important). */ .m16-wrap-vanish.elementor-column { display: block; } /* --- 10. .m16-unbox = zdejmij .elementor-widget-container z drzewa ------ Motyw często stylizuje diva przez selektor dziecka (np. .feature-two__image > img). Widget Elementora wkłada między nie .elementor-widget-container, przez co taki selektor przestaje łapać. Ta klasa usuwa ten kontener z układu — treść widgetu staje się bezpośrednim dzieckiem .elementor-widget, który niesie klasę motywu. */ .m16-unbox > .elementor-widget-container { display: contents; } /* --- 11. kolumny z klasami siatki motywu ------------------------------ Gdy kolumna Elementora niesie klasę bootstrapa (.col-lg-4, .col-xl-8 …), o jej szerokości ma decydować motyw, a nie Elementor. Elementor wpisuje szerokość selektorem .elementor-NNN .elementor-element.elementor-element-XXX (0,3,0) — mocniejszym niż cokolwiek, co da się tu napisać bez !important — i robi to na sztywno, bez breakpointów, więc wariant xl obowiązywałby też poniżej 1200 px. Bazowa reguła bootstrapa to width: 100% dla KAŻDEJ kolumny; węższe warianty wchodzą dopiero w swoich media queries przez flex-basis, który i tak wygrywa z width. */ .elementor-column[class*="col-xl-"], .elementor-column[class*="col-lg-"], .elementor-column[class*="col-md-"], .elementor-column[class*="col-sm-"] { width: 100% !important; } /* --- 12. sekcja w roli .row motywu ------------------------------------ `.elementor-section` ma width: 100%, więc gdy sekcja niesie klasę .row, jej ujemne marginesy (-15 px) tylko ją PRZESUWAJĄ, zamiast poszerzyć do krawędzi paddingu rodzica. Wiersz robił się przez to o 30 px węższy i każda karta traciła 15 px. Zwykły
motywu ma width: auto — i o to tu chodzi. */ .elementor-section.row { width: auto; } /* --- 13. odstęp po widgecie, w miejsce którego weszła sekcja ----------- Elementor dokłada KAŻDEMU widgetowi w kolumnie margines --kit-widget-spacing (20 px), ale sekcji już nie. Dopóki widget scubo był widgetem, ten odstęp był częścią układu strony — po konwersji znikał i kolejny blok wjeżdżał o 20 px wyżej. Margines należy się tylko wtedy, gdy sekcja ma następnika — stąd :not(:last-child). */ .elementor-widget-wrap > .m16-odstep:not(:last-child) { margin-bottom: 20px; }