/* WEYWOT GALLERY SYSTEM v9.0 (MASONRY + SLIDER + RWD) */

.weywot-gallery-system {
    margin: 40px 0;
    position: relative;
    width: 100%;
}

/* --- STYL 1: GRID (Siatka) --- */
.weywot-gallery-system.style-grid .wg-container {
    display: grid;
    /* Automatycznie dopasuj kolumny, min 250px szerokości */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.weywot-gallery-system.style-grid .wg-thumb {
    height: 250px; /* Równe kwadraty */
    background-size: cover;
    background-position: center;
}

/* --- STYL 2: MASONRY (Cegiełki) --- */
.weywot-gallery-system.style-masonry .wg-container {
    column-count: 3; /* 3 kolumny na desktopie */
    column-gap: 20px;
}

.weywot-gallery-system.style-masonry .wg-item {
    break-inside: avoid; /* Nie łam zdjęcia w połowie */
    margin-bottom: 20px;
    display: inline-block; /* Ważne dla masonry */
    width: 100%;
}

.weywot-gallery-system.style-masonry .wg-thumb {
    height: auto;
    min-height: 200px;
    background-size: cover;
    background-position: center;
    padding-bottom: 75%; /* Domyślna proporcja */
}

/* --- STYL 3: SLIDER (Poziomy) --- */
.weywot-gallery-system.style-slider .wg-container {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--w-col-accent) var(--w-col-panel);
}

.weywot-gallery-system.style-slider .wg-item {
    flex: 0 0 80%; /* Na mobile widać kawałek następnego */
    scroll-snap-align: center;
    max-width: 400px;
}

.weywot-gallery-system.style-slider .wg-thumb {
    height: 400px;
    background-size: cover;
}

/* --- KARTA ZDJĘCIA --- */
.wg-card {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border: 1px solid var(--w-col-border, #333);
    background: var(--w-col-panel, #222);
    transition: 0.3s;
}

.wg-card:hover {
    transform: translateY(-5px);
    border-color: var(--w-col-accent, #81d742);
}

.wg-card:hover .wg-thumb { transform: scale(1.05); transition: 0.5s; }

.wg-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: 0.3s;
}
.wg-card:hover .wg-overlay { opacity: 1; }
.wg-icon { font-size: 32px; color: var(--w-col-accent); }

/* --- RWD (TELEFON) --- */
@media (max-width: 900px) {
    .weywot-gallery-system.style-masonry .wg-container { column-count: 2; }
}

@media (max-width: 600px) {
    .weywot-gallery-system.style-grid .wg-container { grid-template-columns: 1fr; }
    .weywot-gallery-system.style-masonry .wg-container { column-count: 1; }
    .wg-thumb { height: 220px; }
}

/* --- LIGHTBOX --- */
#wg-lightbox {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.95); z-index: 99999;
    display: none; flex-direction: column; justify-content: center; align-items: center;
}
#wg-lightbox.active { display: flex; }
#wg-img { max-width: 100%; max-height: 80vh; border: 2px solid var(--w-col-accent); }
.wg-lb-toolbar { position: absolute; top: 20px; width: 90%; display: flex; justify-content: space-between; color: #fff; }
.wg-lb-footer { position: absolute; bottom: 20px; text-align: center; color: #ccc; }
.wg-social-share a { color: #fff; margin: 0 10px; font-size: 20px; text-decoration: none; }
.wg-social-share a:hover { color: var(--w-col-accent); }
.wg-nav { background: none; border: none; color: #fff; font-size: 3rem; cursor: pointer; padding: 0 20px; }