/* =========================================================================
   GALERIA ZDJĘĆ MASONRY (Plener / photo-gallery) - DARK PREMIUM
   ========================================================================= */

.photo-gallery-wrapper {
    background-color: #0d0e12; /* Wymuszona czerń premium MATARI Studio */
    padding: 60px 0 40px; /* Zwiększony oddech z góry */
    width: 100%;
    font-family: 'Inter', 'Roboto', 'Arial', sans-serif;
    border-top: 1px solid rgba(212, 175, 55, 0.1); /* Złota, subtelna linia oddzielająca */
}

.photo-gallery-header {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px 40px; /* Więcej miejsca pod tekstem */
    text-align: center;
    color: #ffffff;
}

.photo-gallery-header h2 {
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 15px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.photo-gallery-header p {
    font-size: 1.1rem;
    margin: 0;
    color: #b2b5be; /* Kinowy, szary kolor opisów */
}

/* Układ Masonry (Cegiełki) */
.photo-gallery {
    column-count: 3;
    column-gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px 20px;
}

/* Pojedynczy kafelek ze zdjęciem */
.photo-gallery__item {
    break-inside: avoid; /* Kluczowe: nie ucina zdjęć na końcu kolumny */
    margin-bottom: 20px;
    position: relative;
    border-radius: 8px; /* Nowoczesne, lekkie zaokrąglenie */
    overflow: hidden; /* Trzyma zdjęcie w ryzach podczas powiększania */
    border: 1px solid rgba(40, 44, 58, 0.8);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); /* Głęboki kinowy cień */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Samo zdjęcie */
.photo-gallery__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px; /* Dopasowane do kontenera */
    filter: brightness(0.9); /* Subtelne przyciemnienie w spoczynku */
    transition: filter 0.4s ease, transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* =========================================================================
   EFEKTY HOVER (Najechanie kursorem)
   ========================================================================= */

/* Subtelny lifting całego kafelka w górę + złota poświata */
.photo-gallery__item:hover {
    transform: translateY(-5px); /* Eleganckie podniesienie, bez nachalnego powiększania na sąsiadów */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.15); 
    border-color: rgba(212, 175, 55, 0.4);
    z-index: 10;
}

/* Delikatne powiększenie zdjęcia wewnątrz ramki (bez wchodzenia na inne) i rozjaśnienie */
.photo-gallery__item:hover .photo-gallery__image {
    transform: scale(1.05);
    filter: brightness(1.05); /* Żywe kolory */
}

/* =========================================================================
   RESPONSYWNOŚĆ
   ========================================================================= */

@media (max-width: 1400px) {
    .photo-gallery {
        padding: 0 15px 15px;
    }
}

@media (max-width: 900px) {
    .photo-gallery {
        column-count: 2; /* Na tabletach 2 kolumny */
    }
}

@media (max-width: 600px) {
    .photo-gallery {
        column-count: 1; /* Na telefonach 1 kolumna (duże zdjęcia do pionowego scrollowania) */
        padding: 0 15px 15px;
    }
    .photo-gallery-header h2 {
        font-size: 2rem;
    }
}