/*Short kody do galerii i odstępu start*/

/* ==========================================================================
   ZMIENNE GLOBALNE (design tokens)
   Jedno miejsce do zmiany np. promienia zaokrąglenia albo cienia
   we wszystkich układach naraz, zamiast szukania po całym pliku.
   ========================================================================== */
:root {
    --g-radius: 2px;
    --g-shadow: 0 4px 15px rgba(0,0,0,0.06);
    --g-shadow-pop: 0 25px 45px rgba(0,0,0,0.22), 0 8px 16px rgba(0,0,0,0.14); /* efekt "wychodzenia z przodu" — środek galeria5 */
    --g-gap: 15px;
    --g-gap-lg: 30px;             /* duży odstęp — galeria4, galeria6 */
    --g-gap-8: 30px;              /* odstęp w galeria5 — osobny, bo tam liczy się jeszcze cień "wychodzącego" zdjęcia */
    --g-gap-mini: 8px;            /* mniejszy odstęp dla drobnych kafli — miniaturki, grid */
    --g-offset-shift: clamp(40px, 10vw, 100px); /* płynne przesunięcie pionowe w galeria4 — bez skoków */
    --g-margin-wide: 40px;     /* odstęp góra/dół — większość układów (galeria1,2,3,7,8,9,10,11,12,13,14) */
    --g-margin-featured: 50px; /* odstęp góra/dół — galeria4, galeria5 (bardziej złożone kompozycje) */
    --g-podpis-gap: 10px;      /* odstęp między galerią a podpisem pod nią */
    --g-text-width: 750px;       /* szerokość kolumny tekstu — używane przez separatory */
    --g-separator-margin: 40px;  /* odstęp góra/dół dla separatorów */
}

/* 1. BEZPIECZNE JUSTOWANIE TEKSTU */
.moje-justowanie {
    text-align: justify !important;
}

/* ==========================================================================
   WSPÓLNY WRAPPER "g-blok" — obejmuje siatkę zdjęć + opcjonalny podpis.
   To on trzyma odstęp góra/dół (przeniesiony tu z poszczególnych układów),
   dzięki czemu dodanie podpisu nie psuje istniejących odstępów: bez
   podpisu wygląda dokładnie tak samo jak wcześniej, z podpisem — duży
   odstęp zostaje na zewnątrz całości, a między siatką a podpisem jest
   tylko mały, osobny odstęp (--g-podpis-gap).
   ========================================================================== */
.g-blok-galeria1,
.g-blok-galeria2,
.g-blok-galeria3,
.g-blok-galeria7,
.g-blok-galeria8,
.g-blok-galeria9,
.g-blok-galeria10,
.g-blok-galeria11,
.g-blok-galeria12,
.g-blok-galeria13,
.g-blok-galeria14 {
    margin-top: var(--g-margin-wide);
    margin-bottom: var(--g-margin-wide);
}

.g-blok-galeria4,
.g-blok-galeria5 {
    margin-top: var(--g-margin-featured);
    margin-bottom: var(--g-margin-featured);
}

.g-podpis {
    margin: var(--g-podpis-gap) 0 0 !important;
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-style: italic !important;
    color: #6b6b6b !important;
}

/* Zabezpieczenie: zerujemy margines na elementach poprzedzających podpis
   (siatka zdjęć, niewidoczny "clear div"), żeby żaden domyślny odstęp
   z motywu nie doczepiał się po cichu do --g-podpis-gap */
.g-blok > div {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   MECHANIZM SZEROKOŚCI — WSPÓLNY DLA WSZYSTKICH 14 UKŁADÓW (klasa .g-w-auto,
   dodawana przez PHP do każdego wrappera galerii niezależnie od układu).
   Każda instancja galerii dostaje z PHP inline zmienną --g-w (z atrybutu
   szerokosc="" w shortcodzie, albo z domyślnej wartości 940 gdy atrybut
   nie jest podany). Ta sama metoda centrowania (position:relative + left:50%
   + transform) działa dla dowolnej szerokości: gdy --g-w jest mniejsze niż
   kolumna tekstu, po prostu centruje się w jej obrębie; gdy większe —
   „wychodzi” poza nią.

   Szerokość skaluje się w sposób CIĄGŁY (bez skoków na sztywne piksele):
   `width: max(100%, min(var(--g-w), var(--g-safe-w, 100vw)))`.
   - `100%` liczy się względem realnego, aktualnie wyrenderowanego kontenera
     (kolumny tekstu) — więc galeria NIGDY nie robi się węższa od tekstu,
     niezależnie od tego, jaką szerokość ma akurat kolumna na danym motywie
     i przy danej szerokości okna.
   - `--g-safe-w` to NIE zgadywana wartość na podstawie stałego marginesu,
     tylko realnie ZMIERZONA przestrzeń wokół tej konkretnej galerii w danym
     momencie (patrz galerie_shortcody_viewport_script w PHP: JS idzie w
     górę drzewa DOM i zapamiętuje ostatniego przodka węższego niż okno,
     tuż przed tym, jak trafi na przodka o pełnej szerokości okna — to on
     jest realną widoczną granicą, np. wyśrodkowaną „kartą” motywu na
     layoutach typu „box”, a nie sama krawędź okna przeglądarki, która nic
     nie mówi o tym, gdzie faktycznie kończy się karta). Fallback na 100vw
     (mniej dokładny, ale bezpieczny) zostaje na wypadek, gdyby JS się
     jeszcze nie wykonał.
   - Efekt: przy zwężaniu okna galeria płynnie „dogania” szerokość tekstu
     i zostaje z nią zrównana, nigdy nie wystając poza dostępną przestrzeń
     — bez progu, na którym nagle robi się węższa lub szersza niż powinna.
   ========================================================================== */
.g-w-auto {
    max-width: max(100%, min(var(--g-w), var(--g-safe-w, 100vw)));
    width: max(100%, min(var(--g-w), var(--g-safe-w, 100vw))) !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
}

/* Uwaga: nie ma tu już osobnej reguły dla wąskich ekranów (dawniej ≤800px) —
   powodowała błąd: width:100% (dobrze, zrównanie z tekstem) + padding:0 15px
   z box-sizing:border-box razem zjadały 30px w środku, więc same zdjęcia
   wychodziły węższe od tekstu. Reguła bazowa wyżej (max(100%, min(...)))
   poprawnie skaluje się do każdej szerokości ekranu bez tego triku. */


/* ==========================================================================
   PODSTAWOWY RESET OBRAZU DLA GALERIA 1
   <img> jest domyślnie elementem inline, więc bez display:block potrafi
   złapać niewidzialny odstęp wynikający z line-height czcionki motywu —
   różny na różnych stronach/motywach.
   ========================================================================== */
.g-uklad-2 img {
    display: block !important;
    margin: 0 !important;
    vertical-align: top !important;
}

/* ==========================================================================
   WSPÓLNY RESET ZDJĘĆ
   ========================================================================== */
.g-uklad-7 img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: var(--g-radius);
    box-shadow: var(--g-shadow);
    object-fit: cover !important;
    object-position: center !important;
    margin-top: 0 !important;
    vertical-align: top !important;
    aspect-ratio: 1.213;
}

.g-uklad-8 img,
.g-uklad-9 img {
    width: 100% !important;
    display: block !important;
    border-radius: var(--g-radius);
    box-shadow: var(--g-shadow);
    object-fit: cover !important;
    object-position: center !important;
    margin-top: 0 !important;
    vertical-align: top !important;
}
/* Uwaga: galeria6 celowo nie ma tu już własnego, delikatniejszego cienia —
   korzysta ze wspólnej zmiennej --g-shadow (ustawianej w panelu Ustawienia),
   bo poprzednia wersja (0.05 przezroczystości) była praktycznie niewidoczna. */

/* 2. GALERIA 1: DWA OBRAZY OBOK SIEBIE (domyślnie 940px, sterowane przez --g-w) */
.g-uklad-2 {
    display: flex;
    gap: var(--g-gap);
}
.g-uklad-2 .g-foto-polowa {
    flex: 1;
}
.g-uklad-2 img {
    width: 100% !important;
    aspect-ratio: 37 / 32; /* Stała proporcja = stałe kadrowanie na każdej szerokości ekranu */
    height: auto !important;
    border-radius: var(--g-radius);
    box-shadow: var(--g-shadow);
    object-fit: cover !important; /* Ładne kadrowanie bez rozciągania obrazu */
    object-position: center !important; /* Środkowanie kadru zdjęcia */
}

/* ==========================================================================
   WSPÓLNE ELEMENTY: DUŻE ZDJĘCIE + RZĄD MNIEJSZYCH
   .g-solo — pojedyncze duże zdjęcie na górze (używane przez galeria9,
   patrz galerie_shortcody_galeria9 w PHP).
   .g-row2-940, .g-row3-940 — sztywne klasy rzędu 2 i 3 zdjęć, używane przez
   galeria10 — tam rząd ma zawsze stałą liczbę zdjęć (3 na górze, 2 na dole),
   więc nie potrzebuje dynamicznego mechanizmu poniżej.
   ========================================================================== */
.g-solo {
    width: 100%;
    margin-bottom: var(--g-gap);
}
.g-solo img {
    width: 100% !important;
    height: auto !important; /* Duże zdjęcie zachowuje naturalne proporcje */
    display: block !important;
    border-radius: var(--g-radius);
    box-shadow: var(--g-shadow);
    margin: 0 !important;
    vertical-align: top !important;
}

/* ==========================================================================
   RZĄD O ZMIENNEJ LICZBIE ZDJĘĆ (2-4) — galeria9. Liczba zdjęć (--g-row-n)
   i proporcja kadru (--g-row-ratio) są ustawiane inline przez PHP w
   zależności od tego, ile zdjęć wkleisz pod dużym zdjęciem.
   ========================================================================== */
.g-solo-row {
    display: flex !important;
    gap: var(--g-gap);
    margin-bottom: var(--g-gap);
}
.g-solo-row-item {
    flex: 1;
    width: calc( 100% / var(--g-row-n) );
}
.g-solo-row-item img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: var(--g-radius);
    box-shadow: var(--g-shadow);
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
    vertical-align: top !important;
    aspect-ratio: var(--g-row-ratio);
}

.g-row2-940,
.g-row3-940 {
    display: flex !important;
    gap: var(--g-gap);
    margin-bottom: var(--g-gap);
}

.g-row2-940-item {
    flex: 1;
    width: 50%;
}
.g-row3-940-item {
    flex: 1;
    width: 33.33%;
}

.g-row2-940-item img,
.g-row3-940-item img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: var(--g-radius);
    box-shadow: var(--g-shadow);
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
    vertical-align: top !important;
}

/* Proporcje wyliczone z tej samej szerokości kolumny co galeria2 (row2-940)
   i galeria10 (row3-940) — spójny wygląd. */
.g-row2-940-item img { aspect-ratio: 1.4; }
.g-row3-940-item img { aspect-ratio: 1.213; }

/* Wrapper galeria10 (g-uklad-16) nie potrzebuje nic dodatkowego —
   pozycjonowanie i szerokość (--g-w) dziedziczy ze wspólnego mechanizmu na
   górze pliku. Wrapper galeria9 to osobna klasa .g-uklad-solo-row, patrz ta
   sama sekcja na górze pliku. */

/* 5. GALERIA 4: DWA PIONOWE PRZESUNIĘTE W PIONIE */
.g-uklad-3 {
    display: flex !important;
    gap: var(--g-gap-lg);
    align-items: flex-start;
}

.g-uklad-3 img {
    width: 100% !important;
    aspect-ratio: 9 / 16; /* Smuklejsza proporcja = mniej kadrowania dla typowych pionowych zdjęć */
    height: auto !important;
    display: block !important;
    border-radius: var(--g-radius);
    box-shadow: var(--g-shadow);
    object-fit: cover !important; /* Ładne kadrowanie bez rozciągania obrazu */
    object-position: top !important; /* Kadrowanie od góry, żeby nie ucinać tytułu/twarzy */
}

/* PŁYNNE PRZESUNIĘCIE: LEWE WYŻEJ, PRAWE NIŻEJ — skaluje się z szerokością ekranu */
.g-uklad-3 .g-pion-lewy {
    flex: 1;
    margin-top: 0;
    margin-bottom: var(--g-offset-shift); /* Przestrzeń pod lewym zdjęciem wyrównująca dół */
}

.g-uklad-3 .g-pion-prawy {
    flex: 1;
    margin-top: var(--g-offset-shift);    /* Fizycznie spycha prawe zdjęcie w dół */
    margin-bottom: 0;
}

/* RESPONSYWNOŚĆ DLA GALERIA 4 (SKALOWANIE DO SAMEGO KOŃCA) */
@media (max-width: 800px) {
    /* Na mniejszych ekranach zdjęcia skalują się dalej obok siebie.
       Wysokość i przesunięcie skalują się już same (aspect-ratio i clamp()),
       a odstęp zostaje stały — mniejszy margines teraz na zewnętrznym
       wrapperze .g-blok-galeria4 */
    .g-blok-galeria4 {
        margin-top: 30px;
        margin-bottom: 30px;
    }
}

/* Uwaga: galeria4 nie potrzebuje już osobnego bloku na 480px — wysokość
   i kadrowanie skalują się same przez aspect-ratio ustawione wyżej. */

/* ========================================================
   GALERIA 2: TRZY ZDJĘCIA POSZERZONE
   ======================================================== */
/* Wrapper .g-uklad-4 nie potrzebuje już własnych właściwości —
   pozycjonowanie (940px) dziedziczy ze wspólnej bazy, a odstęp
   góra/dół jest teraz na zewnętrznym .g-blok-galeria2 */

/* Likwidacja domyślnych przesunięć przeglądarki dla zdjęć */
.g-uklad-4 img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: var(--g-radius);
    box-shadow: var(--g-shadow);
    margin-top: 0 !important; /* Blokada przed jakimkolwiek przesunięciem w dół */
    vertical-align: top !important; /* Wymuszenie trzymania górnej krawędzi */
}

.g-uklad-4 .g-rzad-gora {
    display: flex !important;
    gap: var(--g-gap);
    margin-bottom: var(--g-gap);
    align-items: stretch !important; /* Zmusza kontenery boczne do identycznego rozmiaru */
}

.g-uklad-4 .g-foto {
    flex: 1;
    width: 50%;
    margin: 0 !important;
    padding: 0 !important;
}

/* Wymuszenie równej wysokości i idealnego docięcia dla obu górnych zdjęć */
.g-uklad-4 .g-rzad-gora img {
    aspect-ratio: 1.4; /* Stała proporcja = stałe kadrowanie na każdej szerokości ekranu */
    height: auto !important;
    object-fit: cover !important;
    object-position: center !important;
}

.g-uklad-4 .g-rzad-dol {
    width: 100%;
}

/* ========================================================
   GALERIA 3: TRZY ZDJĘCIA OBOK SIEBIE POSZERZONE
   ======================================================== */
.g-uklad-7 {
    display: flex !important;
    gap: var(--g-gap) !important;
    align-items: flex-start !important; /* Idealne wyrównanie od samej góry */
}

.g-uklad-7 .g-foto-trzy-szerokie {
    flex: 1 !important;
    width: 33.33% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important; /* Zapobiega wstrzykiwaniu białych znaków przez WP */
}

/* Uwaga: galeria3 nie ma już osobnego skoku odstępu na 800px — gap zostaje
   stały, sterowany wyłącznie z panelu Ustawienia. */

/* ==========================================================================
   GALERIA 5: ASYMETRYCZNY TRYPTYK Z DOMINANTĄ NA ŚRODKU
   ========================================================================== */
.g-uklad-8 {
    display: flex !important;
    gap: var(--g-gap-8) !important; /* Zwiększony bezpieczny odstęp między zdjęciami (osobny od galeria4/6) */
    align-items: center !important; /* Centrowanie w pionie daje naturalne wysunięcie góry i dołu */
}

/* Boczne zdjęcia */
.g-uklad-8 .g-foto-boczne {
    flex: 1 !important;
    display: flex !important;
}
.g-uklad-8 .g-foto-boczne img {
    aspect-ratio: 0.772; /* Stała proporcja = stałe kadrowanie na każdej szerokości ekranu */
    height: auto !important;
}

/* Środkowe zdjęcie - fizycznie wyższe i szersze, "wychodzi z przodu" */
.g-uklad-8 .g-foto-srodkowe {
    flex: 1.8 !important;
    display: flex !important;
    position: relative !important;
    z-index: 2 !important; /* nachodzi wizualnie na sąsiednie zdjęcia */
}
.g-uklad-8 .g-foto-srodkowe img {
    aspect-ratio: 1.097; /* Stała proporcja = stałe kadrowanie na każdej szerokości ekranu */
    height: auto !important;
    box-shadow: var(--g-shadow-pop) !important; /* Głęboki, dwuwarstwowy cień dający efekt uniesienia */
    transform: scale(1.04); /* Delikatne powiększenie wzmacnia wrażenie, że zdjęcie "wychodzi" do przodu */
}

/* RESPONSYWNOŚĆ DLA UKŁADU 8 (SKALOWANIE DO KOŃCA) */
@media (max-width: 800px) {
    .g-uklad-8 {
        gap: var(--g-gap) !important;
    }
}

@media (max-width: 480px) {
    .g-uklad-8 {
        gap: 10px !important;
    }
}

/* ==========================================================================
   GALERIA 6: PANORAMICZNY PRZEPLATANIEC TEKSTOWY
   ========================================================================== */
.g-uklad-9 {
    margin-top: 50px;
    margin-bottom: 50px;
    display: flex !important;
    gap: var(--g-gap-lg) !important;
    align-items: stretch !important; /* Idealne wyrównanie wysokości lewej i prawej strony */
}

/* Lewa strona - potężny pionowy kadr */
.g-uklad-9 .g-9-lewa {
    flex: 1.2 !important;
    display: flex !important;
}
.g-uklad-9 .g-9-lewa img {
    height: 600px !important; /* Sztywna baza wysokości na komputerach */
}

/* Prawa strona - kolumna z automatycznym rozciąganiem */
.g-uklad-9 .g-9-prawe {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 600px !important;
}

.g-uklad-9 .g-9-foto-box {
    flex: 1 !important; 
    display: flex !important;
    max-height: 195px;
}
.g-uklad-9 .g-9-foto-box img {
    height: 100% !important;
}

/* Box z eleganckim tekstem/cytatem */
.g-uklad-9 .g-9-tekst-box {
    flex: 0 1 auto !important;
    padding: 10px 20px;
    font-size: 20px;
    line-height: 1.5;
    font-style: italic;
    color: #2c3e50;
    font-family: "Georgia", serif;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.g-uklad-9 .g-9-cudzyslow {
    display: block;
    font-size: 55px;
    line-height: 20px;
    height: 20px;
    color: #bdc3c7;
    font-family: "Georgia", serif;
    margin-bottom: 10px;
    text-align: center;
}

/* RESPONSYWNOŚĆ (PŁYNNE SKALOWANIE DO SAMEGO KOŃCA) */
@media (max-width: 980px) {
    /* Przy zwężaniu przeglądarki na desktopie, układ trzyma sztywną szerokość tekstu */
    .g-uklad-9 {
        gap: 20px !important;
    }
    .g-uklad-9 .g-9-lewa img, .g-uklad-9 .g-9-prawe { 
        height: 500px !important; /* Zmniejszamy wysokość proporcjonalnie do szerokości */
    }
    .g-uklad-9 .g-9-foto-box { 
        max-height: 160px; 
    }
    .g-uklad-9 .g-9-tekst-box { 
        font-size: 17px; 
        padding: 5px 10px;
    }
}

@media (max-width: 768px) {
    /* Na tabletach układ nadal trzyma się obok siebie, dopasowując wymiary pod mniejszy ekran.
       Szerokość (bez zwężania względem tekstu) dziedziczy z uniwersalnego mechanizmu wyżej —
       nie ma tu już width:100%+padding, bo ten duet zwężał zdjęcia o 30px względem tekstu. */
    .g-uklad-9 {
        gap: 15px !important;
    }
    .g-uklad-9 .g-9-lewa img, .g-uklad-9 .g-9-prawe { 
        height: 420px !important; 
    }
    .g-uklad-9 .g-9-foto-box { 
        max-height: 130px; 
    }
    .g-uklad-9 .g-9-tekst-box { 
        font-size: 15px;
        line-height: 1.4;
    }
    .g-uklad-9 .g-9-cudzyslow {
        font-size: 40px;
        margin-bottom: 5px;
    }
}

@media (max-width: 550px) {
    /* Dopiero na małych ekranach smartfonów układ przechodzi w pionową taśmę */
    .g-uklad-9 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 20px !important;
    }
    .g-uklad-9 .g-9-lewa img, .g-uklad-9 .g-9-prawe {
        height: auto !important;
    }
    .g-uklad-9 .g-9-foto-box {
        max-height: none !important;
    }
    .g-uklad-9 .g-9-lewa img, .g-uklad-9 .g-9-foto-box img {
        height: 250px !important; /* Równa, czytelna wysokość zdjęć na telefonie */
    }
    .g-uklad-9 .g-9-tekst-box {
        padding: 15px 0;
        font-size: 17px;
    }
}

/* ==========================================================================
   GALERIA 7: POJEDYNCZY OBRAZ POSZERZONY
   ========================================================================== */
/* Wrapper .g-uklad-10 nie potrzebuje już własnych właściwości —
   odstęp góra/dół jest teraz na zewnętrznym .g-blok-galeria7 */

.g-uklad-10 img {
    width: 100% !important;
    height: auto !important; /* Zdjęcie zachowuje swoje naturalne, oryginalne proporcje */
    display: block !important;
    border-radius: var(--g-radius);
    box-shadow: var(--g-shadow);
}

/* RESPONSYWNOŚĆ DLA UKŁADU 10 (SKALOWANIE DO SAMEGO KOŃCA) */
@media (max-width: 800px) {
    /* Na tabletach i mniejszych ekranach dodajemy bezpieczny margines boczny */
    .g-uklad-10 {
        box-sizing: border-box;
    }
}

/* ==========================================================================
   GALERIA 8: MOZAIKA BENTO — duże zdjęcie z lewej, dwa mniejsze
   ułożone jedno nad drugim z prawej. Zdjęcia stykają się krawędziami
   (bez odstępów) dla nowoczesnego, "magazynowego" efektu.
   ========================================================================== */
.g-uklad-11 {
    display: grid !important;
    grid-template-columns: 1.6fr 1fr;
    grid-template-rows: 1fr;
    gap: var(--g-gap) !important; /* delikatny, realny odstęp między kafelkami */
    height: 620px;
}

.g-uklad-11 img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important; /* zdjęcie wypełnia cały kafelek, bez marginesów */
    object-position: center !important;
    margin: 0 !important;
    vertical-align: top !important;
    border-radius: var(--g-radius); /* każdy kafelek zaokrąglony osobno */
    box-shadow: var(--g-shadow); /* każdy kafelek ma własny cień, spójnie z resztą galerii */
}

.g-uklad-11 .g-bento-lewe,
.g-uklad-11 .g-bento-gorne,
.g-uklad-11 .g-bento-dolne {
    display: flex !important;
    min-width: 0;  /* zapobiega rozjeżdżaniu kolumn siatki przez szerokie zdjęcia */
    min-height: 0; /* zapobiega rozjeżdżaniu wierszy siatki przez wysokie zdjęcia */
}

.g-uklad-11 .g-bento-lewe {
    height: 100%;
}

.g-uklad-11 .g-bento-prawe {
    display: grid !important;
    grid-template-rows: 1fr 1fr;
    gap: var(--g-gap) !important;
    height: 100%;
    min-height: 0;
}

/* RESPONSYWNOŚĆ DLA UKŁADU 11 (SKALOWANIE DO SAMEGO KOŃCA) */
@media (max-width: 980px) {
    .g-uklad-11 {
        height: 500px;
    }
}

@media (max-width: 800px) {
    .g-uklad-11 {
        height: 420px;
    }
}

@media (max-width: 550px) {
    /* Na wąskich telefonach mozaika przechodzi w pionową taśmę trzech zdjęć */
    .g-uklad-11 {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        height: auto;
    }
    .g-uklad-11 .g-bento-lewe img {
        height: 280px !important;
    }
    .g-uklad-11 .g-bento-prawe {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        height: 180px;
    }
}

/* ==========================================================================
   GALERIA 12: ODWROTNOŚĆ GALERII 10 — 2 zdjęcia na górze + 3 na dole.
   Reużywa dokładnie tych samych klas rzędu (.g-row2-940 / .g-row3-940),
   których używa galeria10 — różni je tylko kolejność, więc nie potrzeba
   żadnego nowego CSS dla samych rzędów, tylko wrapper.
   ========================================================================== */
.g-galeria12 {
    display: block;
}

/* ==========================================================================
   GALERIA 13: THUMBNAILS VERTICAL — 1 duże zdjęcie z lewej + kolumna
   4 kwadratowych miniaturek z prawej. Ta sama filozofia co bento (galeria8):
   stała wysokość całości, object-fit:cover wypełnia każdy kafelek.
   ========================================================================== */
.g-uklad-22 {
    display: grid !important;
    grid-template-columns: 2.8fr 1fr;
    grid-template-rows: 1fr;
    gap: var(--g-gap-mini) !important;
    height: 700px;
}

.g-uklad-22 img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
    vertical-align: top !important;
    border-radius: var(--g-radius);
    box-shadow: var(--g-shadow);
}

.g-thumbv-glowne,
.g-thumbv-kolumna,
.g-thumbv-mini {
    display: flex !important;
    min-width: 0;  /* zapobiega rozjeżdżaniu kolumn siatki */
    min-height: 0; /* zapobiega rozjeżdżaniu wierszy siatki */
}
.g-thumbv-glowne { height: 100%; }
.g-thumbv-kolumna {
    display: grid !important;
    grid-template-rows: repeat(4, 1fr);
    gap: var(--g-gap-mini) !important;
    height: 100%;
}

/* RESPONSYWNOŚĆ DLA GALERIA 13 */
@media (max-width: 980px) {
    .g-uklad-22 { height: 560px; }
}
@media (max-width: 800px) {
    .g-uklad-22 { height: 460px; }
}
@media (max-width: 550px) {
    /* Na wąskich telefonach kolumna miniaturek przechodzi pod główne zdjęcie w rząd */
    .g-uklad-22 {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        height: auto;
    }
    .g-uklad-22 .g-thumbv-glowne img {
        height: 280px !important;
    }
    .g-uklad-22 .g-thumbv-kolumna {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr;
        height: 110px;
    }
}

/* ==========================================================================
   GALERIA 14: GRID — elastyczna siatka kwadratowych kafli, 6 do 12 zdjęć.
   Liczba wierszy dopasowuje się sama do liczby wstawionych zdjęć, a
   LICZBA KOLUMN dopasowuje się sama do szerokości (--g-w) przez auto-fill.
   ========================================================================== */
.g-uklad-24 {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--g-gap-mini) !important;
}

.g-grid-item {
    min-width: 0;
    min-height: 0;
}

.g-uklad-24 .g-grid-item img {
    width: 100% !important;
    aspect-ratio: 1;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: var(--g-radius);
    box-shadow: var(--g-shadow);
    margin: 0 !important;
    vertical-align: top !important;
}

/* RESPONSYWNOŚĆ: na wąskich ekranach 3-4 kolumny robią się za ciasne */
@media (max-width: 600px) {
    .g-uklad-24 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ==========================================================================
   GALERIA 11: METRO — siatka 4x4, dwa duże zdjęcia (lewy górny +
   prawy dolny róg, każde 2x2 komórki) i osiem małych wypełniających
   pozostałe rogi. Każde z 10 zdjęć ma jawnie przypisaną komórkę przez
   grid-area — dlatego, w odróżnieniu od reszty galerii, każdy slot ma
   tu unikalną klasę zamiast reużywanej klasy "rzędu".
   Proporcja całości to aspect-ratio:1 (kwadrat), więc wysokość skaluje
   się sama z szerokością — nie trzeba osobno dostrajać jej na mobile.
   ========================================================================== */
.g-uklad-18 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas:
        "a a b c"
        "a a d e"
        "f g h h"
        "i j h h";
    gap: var(--g-gap-mini) !important;
    aspect-ratio: 1;
}

.g-metro-1  { grid-area: a; } /* duże, lewy górny róg */
.g-metro-2  { grid-area: h; } /* duże, prawy dolny róg */
.g-metro-3  { grid-area: b; }
.g-metro-4  { grid-area: c; }
.g-metro-5  { grid-area: d; }
.g-metro-6  { grid-area: e; }
.g-metro-7  { grid-area: f; }
.g-metro-8  { grid-area: g; }
.g-metro-9  { grid-area: i; }
.g-metro-10 { grid-area: j; }

.g-metro-1, .g-metro-2, .g-metro-3, .g-metro-4, .g-metro-5,
.g-metro-6, .g-metro-7, .g-metro-8, .g-metro-9, .g-metro-10 {
    display: flex !important;
    min-width: 0;  /* zapobiega rozjeżdżaniu kolumn siatki */
    min-height: 0; /* zapobiega rozjeżdżaniu wierszy siatki */
}

.g-metro-1 img, .g-metro-2 img, .g-metro-3 img, .g-metro-4 img, .g-metro-5 img,
.g-metro-6 img, .g-metro-7 img, .g-metro-8 img, .g-metro-9 img, .g-metro-10 img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
    vertical-align: top !important;
    border-radius: var(--g-radius);
    box-shadow: var(--g-shadow);
}

/* (Dawny osobny blok responsywny dla galeria1/galeria4 usunięty — od wersji 2.0
   wszystkie 25 układów dzielą jedną uniwersalną regułę responsywną, patrz
   sekcja "MECHANIZM SZEROKOŚCI (v2)" na górze pliku.) */

/* ==========================================================================
   SEPARATORY — proste linie/ozdobniki rozdzielające sekcje tekstu.
   W odróżnieniu od galerii, ZAWSZE trzymają się dokładnie szerokości kolumny
   tekstu i nigdy z niej nie wychodzą — stąd zwykłe max-width+auto, bez
   mechanizmu --g-w/JS używanego przez galerie (który jest tylko po to, żeby
   umożliwić wyjście POZA kolumnę tekstu).
   ========================================================================== */
.g-separator {
    display: block;
    width: 100%;
    max-width: var(--g-text-width);
    margin: var(--g-separator-margin) auto;
}

/* Separator 1 — cienka linia z gradientem od koloru do przezroczystości */
.g-separator-1 {
    height: 1px;
    background: linear-gradient(to right, rgba(128,0,0,1.0), rgba(246,221,204,1.0));
}

/* Separator 2 — gradient od ciemnego na środku do jaśniejszego (przezroczystego)
   na obu krawędziach. Szerokość (domyślnie 750px, pełna kolumna tekstu) ustawia
   PHP inline przez max-width — .g-separator wyżej odpowiada za width:100%+auto,
   więc na wąskich ekranach nadal poprawnie się zmniejsza. */
.g-separator-2 {
    height: 1px;
    background: linear-gradient(
        to right,
        rgba(128,0,0,0) 0%,
        rgba(128,0,0,1) 50%,
        rgba(128,0,0,0) 100%
    );
}

/*Short kody do galerii i odstępu end*/