/* bottom-2.css */

/* Ogólne style dla modułu */
.wzk-bottom2-module {
    background-color: #1a2a44; /* Tło jak na zdjęciu */
    padding: 20px 0;
    width: 100%;
    box-sizing: border-box;
}

/* Kontener główny */
.wzk-bottom2-container {
    width: 100%; /* Rozciągnięcie na całą szerokość strony */
    margin: 0 auto;
    padding: 0 15px; /* Padding, aby zawartość nie przylegała do krawędzi */
}

/* Wiersz z kolumnami */
.wzk-bottom2-row {
    display: flex;
    flex-wrap: wrap; /* Domyślnie wrap dla mniejszych ekranów */
    justify-content: center;
    align-items: center;
    gap: 20px; /* Odstęp między kolumnami */
}

/* Kolumny */
.wzk-bottom2-column {
    flex: 1 1 33.33%; /* Trzy kolumny po 33.33% */
    min-width: 300px; /* Minimalna szerokość dla responsywności */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Wrapper dla obrazów */
.wzk-bottom2-image-wrapper {
    margin-bottom: 20px;
    width: 100%;
}

/* Obrazy */
.wzk-bottom2-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Specjalne style dla obrazków w środkowej kolumnie (Wesele z klasą i Opinie Google) */
.wzk-bottom2-column:nth-child(2) .wzk-bottom2-image {
    width: 90%; /* Zajmują 90% szerokości dostępnej przestrzeni w kolumnie */
    max-width: none; /* Usunięcie ograniczenia max-width */
}

/* Nagłówek w środkowej kolumnie */
.wzk-bottom2-heading {
    color: #ffffff;
    font-size: 1.8em;
    font-weight: 500;
    line-height: 150%;
    margin: 0 0 30px 0;
    max-width: 100%; /* Zapobiega wychodzeniu poza granice kolumny */
    box-sizing: border-box;
    padding: 0 10px; /* Dodatkowy padding, aby tekst nie przylegał do krawędzi */
}

/* Stylizacja dla większych ekranów (1200px i więcej) */
@media (min-width: 1200px) {
    .wzk-bottom2-row {
        flex-wrap: nowrap; /* Zapobiega zawijaniu kolumn na większych ekranach */
    }

    .wzk-bottom2-column {
        flex: 1 1 33.33%; /* Równa szerokość dla każdej kolumny */
        min-width: 0; /* Usunięcie minimalnej szerokości, aby kolumny się zmieściły */
    }

    /* Zwiększenie certyfikatów na większych ekranach */
    .wzk-bottom2-column:first-child .wzk-bottom2-image,
    .wzk-bottom2-column:last-child .wzk-bottom2-image {
        max-width: 400px; /* Zwiększenie certyfikatów do 400px */
    }

    .wzk-bottom2-heading {
        font-size: 1.5em; /* Rozmiar nagłówka na większych ekranach */
    }
}

/* Pośredni punkt przełamania (między 1024px a 1199.98px) */
@media (max-width: 1199.98px) and (min-width: 1024px) {
    .wzk-bottom2-row {
        flex-wrap: nowrap; /* Kolumny nadal w jednym wierszu */
    }

    .wzk-bottom2-column {
        flex: 1 1 33.33%;
        min-width: 0;
    }

    /* Zmniejszenie certyfikatów w tym zakresie */
    .wzk-bottom2-column:first-child .wzk-bottom2-image,
    .wzk-bottom2-column:last-child .wzk-bottom2-image {
        max-width: 350px; /* Lekkie zmniejszenie certyfikatów */
    }

    .wzk-bottom2-heading {
        font-size: 1.3em; /* Mniejszy nagłówek, aby zapobiec nachodzeniu */
    }
}

/* Responsywność dla mniejszych ekranów (poniżej 1024px) */
@media (max-width: 1023.98px) {
    .wzk-bottom2-column {
        flex: 1 1 100%; /* Na mniejszych ekranach kolumny zajmują 100% */
    }

    /* Zmniejszenie certyfikatów w widoku mobilnym */
    .wzk-bottom2-column:first-child .wzk-bottom2-image,
    .wzk-bottom2-column:last-child .wzk-bottom2-image {
        max-width: 350px; /* Zmniejszenie certyfikatów do 350px w widoku mobilnym */
    }

    .wzk-bottom2-heading {
        font-size: 1.5em; /* Mniejszy nagłówek na mniejszych ekranach */
    }
}

@media (max-width: 767.98px) {
    .wzk-bottom2-heading {
        font-size: 1.3em;
    }

    /* Jeszcze mniejsze certyfikaty na bardzo małych ekranach */
    .wzk-bottom2-column:first-child .wzk-bottom2-image,
    .wzk-bottom2-column:last-child .wzk-bottom2-image {
        max-width: 300px; /* Dodatkowe zmniejszenie na ekranach poniżej 768px */
    }

    .wzk-bottom2-image-wrapper {
        margin-bottom: 15px;
    }
}

@media (max-width: 575.98px) {
    .wzk-bottom2-heading {
        font-size: 1.1em;
    }

    .wzk-bottom2-container {
        padding: 0 10px; /* Mniejszy padding na bardzo małych ekranach */
    }

    /* Jeszcze mniejsze certyfikaty na bardzo małych ekranach */
    .wzk-bottom2-column:first-child .wzk-bottom2-image,
    .wzk-bottom2-column:last-child .wzk-bottom2-image {
        max-width: 250px; /* Najmniejszy rozmiar na ekranach poniżej 576px */
    }
}