/* =================================================
   FOTOPASJE.COM — event.css
   Style tylko dla stron eventów (galeria zdjęć)
   ================================================= */

/* ─── HERO (event) ─── */

.hero {
    height: 65vh;
    min-height: 400px;
}

.hero-img {
    opacity: .6;
}

/* ─── GALERIA ─── */

.gallery-section {
    padding: 30px 0 100px;
}

.gallery {
    width: min(1700px, 92%);
    margin: auto;
    columns: 3 320px;
    column-gap: 15px;
}

.gallery-item {
    display: block;
    margin-bottom: 14px;
    border-radius: 10px;
    overflow: hidden;
    break-inside: avoid;
    background: var(--surface);
    cursor: pointer;

    /* stan początkowy animacji reveal */
    opacity: 0;
    transform: translateY(22px);
    filter: blur(8px);
    transition: opacity .7s ease, transform .7s ease, filter .7s ease;
}

.gallery-item.show {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.gallery-item img {
    width: 100%; height: auto; display: block;
    transition: transform 1.4s cubic-bezier(.25,.46,.45,.94);
}

.gallery-item:hover img { transform: scale(1.04); }

/* ─── RESPONSIVE ─── */

@media (max-width: 1000px) {
    .gallery { columns: 2 250px; }
}

@media (max-width: 600px) {
    .hero-content { padding: 0 24px 52px; }
    .gallery { columns: 1; }
}



/* ─── JUSTIFIED GALLERY ─── */
.jg-group { margin-bottom: 6px; }

.justified-gallery > a {
    border-radius: 8px;
    overflow: hidden;
}
.justified-gallery > a > img {
    border-radius: 8px;
    transition: transform 1.4s cubic-bezier(.25,.46,.45,.94),
    filter .4s ease !important;
}
.justified-gallery > a:hover > img {
    transform: scale(1.05);
    filter: brightness(1.08);
}
.jg-caption {
    font-size: .6rem !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    border-radius: 0 0 8px 8px !important;
}