/* Główne style sekcji */
.swietlica-sekcja {
    background-color: #F8F8F8; /* Jasne tło */
    padding: 60px 40px; /* Odstępy wewnętrzne */
    text-align: center; /* Wyśrodkowanie nagłówka */
    max-width: 1200px; /* Maksymalna szerokość sekcji */
    margin: 0 auto; /* Wyśrodkowanie sekcji na stronie */
}

/* Style nagłówka */
.swietlica-naglowek h2 {
    font-size: 2.5em; /* Duży rozmiar czcionki */
    color: #2C3E50; /* Ciemny granat */
    margin-bottom: 40px; /* Odstęp pod nagłówkiem */
    font-family: 'Arial', sans-serif; /* Przykładowa czcionka */
}

/* Kontener dla opisu i galerii (układ dwukolumnowy) */
.swietlica-kontener-tresci {
    display: flex; /* Użyj flexboxa do układu kolumn */
    flex-wrap: wrap; /* Pozwól na zawijanie elementów na mniejszych ekranach */
    gap: 40px; /* Odstęp między kolumnami */
    align-items: flex-start; /* Wyrównaj elementy do góry */
    text-align: left; /* Tekst w kolumnach wyrównaj do lewej */
}

/* Kolumna z opisem */
.swietlica-opis {
    flex: 1; /* Zajmuje dostępną przestrzeń */
    min-width: 300px; /* Minimalna szerokość kolumny z opisem */
    padding-right: 20px; /* Odstęp od zdjęć */
}

.swietlica-opis p {
    font-size: 1.1em; /* Rozmiar tekstu opisu */
    line-height: 1.8; /* Wysokość linii dla lepszej czytelności */
    color: #333333; /* Kolor tekstu */
    margin-bottom: 15px; /* Odstęp między akapitami */
    font-family: 'Verdana', sans-serif; /* Przykładowa czcionka */
}

.swietlica-opis strong {
    color: #ADD8E6; /* Kolor akcentu dla pogrubionego tekstu */
}

/* Kolumna z galerią */
.swietlica-galeria {
    flex: 1; /* Zajmuje dostępną przestrzeń */
    display: grid; /* Użyj gridu do układu zdjęć */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Responsywna siatka zdjęć */
    gap: 15px; /* Odstęp między zdjęciami */
    min-width: 300px; /* Minimalna szerokość kolumny z galerią */
}

.swietlica-zdjecie {
    width: 100%; /* Zdjęcia wypełniają dostępną przestrzeń w kolumnie */
    height: auto; /* Zachowaj proporcje */
    border-radius: 8px; /* Lekko zaokrąglone rogi zdjęć */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Delikatny cień */
    transition: transform 0.3s ease; /* Płynne przejście przy najechaniu */
}

.swietlica-zdjecie:hover {
    transform: scale(1.03); /* Lekkie powiększenie zdjęcia przy najechaniu */
}

/* Styl przycisku CTA (jeśli używasz) */
.swietlica-przycisk {
    display: inline-block;
    background-color: #ADD8E6; /* Kolor przycisku */
    color: #2C3E50; /* Kolor tekstu na przycisku */
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 25px;
    transition: background-color 0.3s ease;
}

.swietlica-przycisk:hover {
    background-color: #8FD1E6; /* Ciemniejszy odcień przy najechaniu */
}

/* Responsywność dla małych ekranów (poniżej 768px) */
@media (max-width: 768px) {
    .swietlica-kontener-tresci {
        flex-direction: column; /* Kolumny układają się jedna pod drugą */
    }

    .swietlica-opis,
    .swietlica-galeria {
        padding-right: 0; /* Usuń marginesy prawe/lewe na małych ekranach */
        min-width: unset; /* Zresetuj minimalną szerokość */
    }

    .swietlica-naglowek h2 {
        font-size: 2em; /* Mniejszy nagłówek na urządzeniach mobilnych */
    }

    .swietlica-sekcja {
        padding: 40px 20px; /* Mniejsze odstępy na mobilnych */
    }
}