/*
 * VB — styl własny frontu
 *
 * Plik zebrany ze snippetów 39, 16 i 48. Kod CSS jest przeniesiony
 * DOSŁOWNIE, bez zmian w regułach — zmieniło się tylko to, że zamiast być
 * wstrzykiwany PHP-em do każdej strony, jest normalnym, cache'owanym plikiem.
 *
 * Wczytywany przez mu-plugins/vb-front.php
 * NIE EDYTUJ w katalogu motywu — ten plik żyje w mu-plugins, żeby przetrwać
 * ponowny eksport motywu z Webflow.
 */


/* =========================================================================
   Snippet 39 — ukrycie kropek nawigacyjnych rekomendacji na telefonach

   Oryginał miał warunek is_front_page(). Pominięty świadomie: selektor
   #testimonial-nav występuje w motywie wyłącznie w front-page.php (sprawdzone),
   więc reguła bez warunku daje identyczny efekt i nie zależy od klas body.
   ========================================================================= */

@media (max-width: 768px) {
            #testimonial-nav {
                display: none !important;
            }
        }


/* =========================================================================
   Snippet 16 — animacja nakładki na kafelkach partnerów

   Oryginał nie miał żadnego warunku strony. Towarzyszący JS jest w
   vb-assets/js/vb-partners-grid.js
   ========================================================================= */

.partners_grid-image-wrapper {
        position: relative;
        overflow: hidden;
    }
    
    .partners_grid-info-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 2rem;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease-in-out;
        z-index: 2;
    }
    
    .partners_grid-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }
    
    .partners_grid-content {
        position: relative;
        z-index: 3;
        color: #fff;
    }
    
    .partners_grid-item:hover .partners_grid-info-content {
        opacity: 1;
        visibility: visible;
    }
    
    .partners_grid-item:hover .partners_grid-overlay {
        opacity: 1;
    }

    @media screen and (max-width: 767px) {
        .partners_grid-info-content {
            position: relative;
            height: auto;
            opacity: 1;
            visibility: visible;
            padding: 1rem;
            background: rgb(17, 17, 17);
            color: #fff;
        }
        
        .partners_grid-overlay {
            display: none;
        }
        
        .partners_grid-content {
            color: #fff;
        }
    }


/* =========================================================================
   Snippet 48 — ikony social media w stopce (wytyczne marki YouTube)

   Reguły zależą od atrybutów data-vb-social-bg i data-vb-platform,
   które nadaje vb-assets/js/vb-social-icons.js — te dwa pliki idą w parze.
   ========================================================================= */

:root {
            /*
             * YouTube - nie ruszać.
             * Te wartości dają widoczny path powyżej 20 px wysokości
             * oraz zostawiają bezpieczną przestrzeń wokół ikony.
             */
            --vb-youtube-svg-width: 52px;
            --vb-youtube-svg-height: 36px;

            /*
             * Pozostałe ikony.
             */
            --vb-other-link-size: 36px;
            --vb-other-icon-size: 27px;

            /*
             * X/Twitter jest minimalnie mniejszy, bo optycznie jest masywniejszy.
             */
            --vb-x-icon-size: 26px;

            /*
             * Odstępy.
             * Standardowy odstęp działa między zwykłymi ikonami.
             * Przy YouTube odstęp ustawiamy na 0, bo jego box zawiera już
             * wewnętrzną bezpieczną przestrzeń.
             */
            --vb-social-gap: 6px;

            --vb-social-light: #212121;
            --vb-social-dark: #ffffff;
            --vb-social-hover-opacity: 0.58;
        }

        .footer3_social-list,
        .w-layout-grid.footer3_social-list {
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: flex-start !important;
            gap: 0 !important;
            column-gap: 0 !important;
            row-gap: 0 !important;
            grid-column-gap: 0 !important;
            grid-row-gap: 0 !important;
        }

        a.footer3_social-link {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: var(--vb-other-link-size) !important;
            height: var(--vb-other-link-size) !important;
            min-width: var(--vb-other-link-size) !important;
            min-height: var(--vb-other-link-size) !important;
            max-width: var(--vb-other-link-size) !important;
            max-height: var(--vb-other-link-size) !important;
            margin: 0 !important;
            padding: 0 !important;
            line-height: 0 !important;
            text-decoration: none !important;
            opacity: 1 !important;
            filter: none !important;
            transform: none !important;
            overflow: visible !important;
            color: var(--vb-social-light) !important;
            transition: opacity 180ms ease, filter 180ms ease !important;
        }

        a.footer3_social-link + a.footer3_social-link {
            margin-left: var(--vb-social-gap) !important;
        }

        /*
         * YouTube ma własny większy box z bezpieczną przestrzenią,
         * dlatego nie dodajemy dodatkowego odstępu przed nim ani po nim.
         * Nie zmieniamy rozmiaru YouTube.
         */
        a.footer3_social-link[href*="youtube.com"],
        a.footer3_social-link[href*="youtu.be"] {
            margin-left: 0 !important;
        }

        a.footer3_social-link[href*="youtube.com"] + a.footer3_social-link,
        a.footer3_social-link[href*="youtu.be"] + a.footer3_social-link {
            margin-left: 0 !important;
        }

        a.footer3_social-link:first-child {
            margin-left: 0 !important;
        }

        a.footer3_social-link[data-vb-social-bg="light"] {
            color: var(--vb-social-light) !important;
        }

        a.footer3_social-link[data-vb-social-bg="dark"] {
            color: var(--vb-social-dark) !important;
        }

        a.footer3_social-link:hover,
        a.footer3_social-link:focus {
            opacity: var(--vb-social-hover-opacity) !important;
            filter: none !important;
            transform: none !important;
        }

        a.footer3_social-link:active {
            opacity: 0.42 !important;
            filter: none !important;
            transform: none !important;
        }

        a.footer3_social-link .icon-embed-xsmall,
        a.footer3_social-link .icon-1x1-xsmall {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: var(--vb-other-icon-size) !important;
            height: var(--vb-other-icon-size) !important;
            min-width: var(--vb-other-icon-size) !important;
            min-height: var(--vb-other-icon-size) !important;
            max-width: var(--vb-other-icon-size) !important;
            max-height: var(--vb-other-icon-size) !important;
            margin: 0 !important;
            padding: 0 !important;
            line-height: 0 !important;
            color: inherit !important;
            opacity: 1 !important;
            filter: none !important;
            transform: none !important;
            overflow: visible !important;
        }

        a.footer3_social-link svg {
            display: block !important;
            width: var(--vb-other-icon-size) !important;
            height: var(--vb-other-icon-size) !important;
            min-width: var(--vb-other-icon-size) !important;
            min-height: var(--vb-other-icon-size) !important;
            max-width: var(--vb-other-icon-size) !important;
            max-height: var(--vb-other-icon-size) !important;
            margin: 0 !important;
            padding: 0 !important;
            color: inherit !important;
            fill: currentColor !important;
            opacity: 1 !important;
            filter: none !important;
            transform: none !important;
            overflow: visible !important;
        }

        a.footer3_social-link svg path,
        a.footer3_social-link svg polygon,
        a.footer3_social-link svg rect,
        a.footer3_social-link svg circle {
            fill: currentColor !important;
        }

        a.footer3_social-link img {
            display: block !important;
            width: var(--vb-other-icon-size) !important;
            height: var(--vb-other-icon-size) !important;
            min-width: var(--vb-other-icon-size) !important;
            min-height: var(--vb-other-icon-size) !important;
            max-width: var(--vb-other-icon-size) !important;
            max-height: var(--vb-other-icon-size) !important;
            margin: 0 !important;
            padding: 0 !important;
            object-fit: contain !important;
            opacity: 1 !important;
            transform: none !important;
        }

        a.footer3_social-link[data-vb-social-bg="light"] img {
            filter: brightness(0) saturate(100%) !important;
        }

        a.footer3_social-link[data-vb-social-bg="dark"] img {
            filter: brightness(0) invert(1) !important;
        }

        /*
         * X/Twitter - ostre SVG, bez filtrowania obrazka.
         */
        a.footer3_social-link[data-vb-platform="x"] img,
        a.footer3_social-link[data-vb-platform="x"] .icon-1x1-xsmall,
        a.footer3_social-link[data-vb-platform="x"] .icon-embed-xsmall {
            filter: none !important;
        }

        a.footer3_social-link[data-vb-platform="x"] svg.vb-x-official-icon {
            display: block !important;
            width: var(--vb-x-icon-size) !important;
            height: var(--vb-x-icon-size) !important;
            min-width: var(--vb-x-icon-size) !important;
            min-height: var(--vb-x-icon-size) !important;
            max-width: var(--vb-x-icon-size) !important;
            max-height: var(--vb-x-icon-size) !important;
            color: inherit !important;
            fill: currentColor !important;
            opacity: 1 !important;
            filter: none !important;
            transform: none !important;
            shape-rendering: geometricPrecision !important;
            text-rendering: geometricPrecision !important;
        }

        a.footer3_social-link[data-vb-platform="x"] svg.vb-x-official-icon path {
            fill: currentColor !important;
        }

        /*
         * YouTube - rozmiar zostaje bez zmian.
         * Nie ruszać: wymagane minimum 20 px path musi zostać spełnione.
         */
        a.footer3_social-link[href*="youtube.com"],
        a.footer3_social-link[href*="youtu.be"] {
            width: var(--vb-youtube-svg-width) !important;
            height: var(--vb-youtube-svg-height) !important;
            min-width: var(--vb-youtube-svg-width) !important;
            min-height: var(--vb-youtube-svg-height) !important;
            max-width: var(--vb-youtube-svg-width) !important;
            max-height: var(--vb-youtube-svg-height) !important;
        }

        a.footer3_social-link[href*="youtube.com"] .icon-embed-xsmall,
        a.footer3_social-link[href*="youtu.be"] .icon-embed-xsmall,
        a.footer3_social-link[href*="youtube.com"] .icon-1x1-xsmall,
        a.footer3_social-link[href*="youtu.be"] .icon-1x1-xsmall {
            width: var(--vb-youtube-svg-width) !important;
            height: var(--vb-youtube-svg-height) !important;
            min-width: var(--vb-youtube-svg-width) !important;
            min-height: var(--vb-youtube-svg-height) !important;
            max-width: var(--vb-youtube-svg-width) !important;
            max-height: var(--vb-youtube-svg-height) !important;
        }

        a.footer3_social-link[href*="youtube.com"] svg,
        a.footer3_social-link[href*="youtu.be"] svg {
            width: var(--vb-youtube-svg-width) !important;
            height: var(--vb-youtube-svg-height) !important;
            min-width: var(--vb-youtube-svg-width) !important;
            min-height: var(--vb-youtube-svg-height) !important;
            max-width: var(--vb-youtube-svg-width) !important;
            max-height: var(--vb-youtube-svg-height) !important;
        }

        a.footer3_social-link[href*="youtube.com"] img,
        a.footer3_social-link[href*="youtu.be"] img {
            width: 29px !important;
            height: 20px !important;
            min-width: 29px !important;
            min-height: 20px !important;
            max-width: 29px !important;
            max-height: 20px !important;
            object-fit: contain !important;
        }