.nl-realizacje-grid-widget {
    width: 100%;
    padding-top: clamp(24px, 4vw, 48px);
    padding-bottom: clamp(48px, 8vw, 96px);
}

/* ------------------------------------------------------------------
   Mały nagłówek (opcjonalny, wyłączony domyślnie) - ta sama, subtelna
   stylistyka co przy widgecie "Siatka kolekcji".
   ------------------------------------------------------------------ */
.nl-realizacje-kicker {
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    color: color-mix(in srgb, var(--ast-global-color-6, #111111) 70%, transparent);
    margin: 0 0 32px;
}

/* ------------------------------------------------------------------
   Siatka - domyślnie 3 w rzędzie (sterowane ustawieniem widgetu
   "Zdjęć w rzędzie" przez zmienną --nrg-columns).
   ------------------------------------------------------------------ */
.nl-realizacje-grid {
    display: grid;
    grid-template-columns: repeat(var(--nrg-columns, 3), 1fr);
    gap: 24px;
}

.nl-realizacje-item {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    cursor: pointer;
    overflow: hidden;
    border-radius: 4px;
    -webkit-tap-highlight-color: transparent;
}

.nl-realizacje-item-image {
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--ast-global-color-5, #F0F5FA);
}

.nl-realizacje-item-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center;
    display: block;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease;
}

/* Delikatna zmiana zdjęcia po najechaniu - lekkie powiększenie + przyciemnienie,
   żeby biały/jasny tekst opisu był czytelny na dowolnym zdjęciu. */
.nl-realizacje-item:hover .nl-realizacje-item-image img,
.nl-realizacje-item:focus-visible .nl-realizacje-item-image img {
    transform: scale(1.06);
    filter: brightness(0.72);
}

.nl-realizacje-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px 18px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 65%);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.nl-realizacje-item:hover .nl-realizacje-caption,
.nl-realizacje-item:focus-visible .nl-realizacje-caption {
    opacity: 1;
    transform: translateY(0);
}

.nl-realizacje-item:focus-visible {
    outline: 2px solid #D3C6BE;
    outline-offset: 2px;
}

.nl-realizacje-empty {
    text-align: center;
    font-weight: 300;
    color: color-mix(in srgb, var(--ast-global-color-6, #111111) 65%, transparent);
}

/* ------------------------------------------------------------------
   Lightbox (pełnoekranowa galeria) - ukryty domyślnie, JS dodaje klasę
   "is-open" po kliknięciu w kafelek.
   ------------------------------------------------------------------ */
.nl-realizacje-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    /* To samo przyciemnienie (0.94), co w galerii zdjęć produktu/kolekcji
       (PhotoSwipe - "bgOpacity: 0.94" w single-lampa.js) - żeby wszystkie
       galerie na stronie były tak samo ciemne. */
    background: rgba(10, 10, 10, 0.94);
    padding: 24px;
}

.nl-realizacje-lightbox.is-open {
    display: flex;
}

body.nl-realizacje-lightbox-open {
    overflow: hidden;
}

/* Kontener galerii dostaje fokus zaraz po otwarciu (patrz open() w
   custom-realizacje-grid.js) zamiast przycisku X - bez tego przeglądarka
   rysowałaby tu domyślną, grubą obwódkę fokusu dookoła całego,
   pełnoekranowego elementu, co wyglądałoby jeszcze gorzej. */
.nl-realizacje-lightbox:focus {
    outline: none;
}

/* Półprzezroczyste tło (powyżej) w połączeniu z lepkim nagłówkiem strony
   ("position: sticky" w custom-header-menu.css) i paskiem administratora
   WordPressa ("position: fixed", widoczny tylko zalogowanemu adminowi) to
   sprawdzony na żywo błąd kompozycji warstw w przeglądarce: mimo naszego
   wyższego z-index (100000), te elementy potrafią "przebić się" na wierzch
   jako twarde, kanciaste kształty (np. czarny prostokąt paska admina, albo
   przycisk menu mobilnego) dokładnie w miejscu naszych przycisków. Zamiast
   robić całą galerię w pełni nieprzezroczystą (co zmieniłoby wygląd, którego
   nie chcemy - ma zostać tak samo przyciemniona, jak w produkcie/kolekcji),
   po prostu chowamy oba te elementy na czas otwarcia galerii - i tak są
   całkowicie zasłonięte przez nasze tło, więc nic nie traci się z widoku. */
body.nl-realizacje-lightbox-open #wpadminbar,
body.nl-realizacje-lightbox-open #masthead.site-header {
    visibility: hidden;
}

.nl-realizacje-lightbox-figure {
    margin: 0;
    max-width: min(92vw, 1200px);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nl-realizacje-lightbox-image {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 2px;
    animation: nl-realizacje-lightbox-fade 0.25s ease;
}

@keyframes nl-realizacje-lightbox-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.nl-realizacje-lightbox-caption {
    margin-top: 16px;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 300;
    text-align: center;
    max-width: 640px;
    min-height: 1.4em;
}

/* Przyciski zamknięcia/strzałek - wygląd 1:1 skopiowany z domyślnego
   wyglądu PhotoSwipe (biblioteka użyta w galerii zdjęć produktu/lampy,
   patrz nesslighting_lampa_gallery() w single-lampa.php): brak tła/kółka,
   sama ikona (SVG - patrz render_lightbox() w custom-realizacje-grid-widget.php)
   w kolorze białym z cienkim, ciemnym obrysem "cienia" pod spodem, w
   spoczynku lekko przezroczysta (0.85), w pełni widoczna na hover/focus.
   Rozmiary/pozycje ("hit area" 50x60 dla X, 75x100 dla strzałek, ikona
   32x32 / 60x60) to dokładnie te same liczby, co w oficjalnym CSS
   PhotoSwipe (photoswipe.css - ".pswp__button"/".pswp__button--arrow"),
   żeby obie galerie na stronie wyglądały identycznie. */
.nl-realizacje-lightbox-close,
.nl-realizacje-lightbox-prev,
.nl-realizacje-lightbox-next {
    /* "appearance: none" (+ prefiksy) - bez tego Safari (i część starszych
       przeglądarek) nakłada pod spodem WŁASNY, natywny wygląd przycisku,
       mimo "background: none"/"border: 0" ustawionych niżej - stąd brzydki,
       kanciasty "kwadrat" zamiast zwykłego, przezroczystego przycisku. */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: absolute;
    display: block;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    box-shadow: none;
    color: #ffffff;
    cursor: pointer;
    opacity: 0.85;
    transition: none;
    -webkit-tap-highlight-color: transparent;
}

.nl-realizacje-lightbox-close:hover,
.nl-realizacje-lightbox-prev:hover,
.nl-realizacje-lightbox-next:hover,
.nl-realizacje-lightbox-close:focus-visible,
.nl-realizacje-lightbox-prev:focus-visible,
.nl-realizacje-lightbox-next:focus-visible {
    background: none;
    opacity: 1;
}

.nl-realizacje-lightbox-close:focus-visible,
.nl-realizacje-lightbox-prev:focus-visible,
.nl-realizacje-lightbox-next:focus-visible {
    outline: 2px solid #b8974f;
    outline-offset: 2px;
}

.nl-realizacje-lightbox-close {
    /* "top: 0" + "right: 6px" - dokładnie tak, jak w PhotoSwipe: tam przycisk
       X siedzi wewnątrz pełnej szerokości paska górnego (".pswp__top-bar",
       wysokość 60px, przyklejony do samej góry ekranu), wypchnięty do prawej
       krawędzi tego paska z marginesem 6px (".pswp__button--close { margin-right: 6px; }").
       Wcześniejsze "top: 16px; right: 22px" dawało X-owi dodatkowy odstęp,
       którego oryginał nie ma - stąd widoczna różnica. */
    top: 0;
    right: 6px;
    width: 50px;
    height: 60px;
}

.nl-realizacje-lightbox-prev,
.nl-realizacje-lightbox-next {
    top: 50%;
    margin-top: -50px;
    width: 75px;
    height: 100px;
}

.nl-realizacje-lightbox-prev {
    left: 0;
}

.nl-realizacje-lightbox-next {
    right: 0;
}

/* Sama ikona (SVG) - wyśrodkowana w przycisku, tak jak ".pswp__icn". */
.nl-realizacje-icn {
    position: absolute;
    top: 14px;
    left: 9px;
    width: 32px;
    height: 32px;
    pointer-events: none;
}

.nl-realizacje-lightbox-prev .nl-realizacje-icn,
.nl-realizacje-lightbox-next .nl-realizacje-icn {
    top: 50%;
    left: 50%;
    margin-top: -30px;
    margin-left: -30px;
    width: 60px;
    height: 60px;
}

/* Ikona "dalej" to ta sama strzałka co "wstecz", tylko odbita poziomo -
   dokładnie tak, jak robi to PhotoSwipe (".pswp__button--arrow--next .pswp__icn"). */
.nl-realizacje-lightbox-next .nl-realizacje-icn {
    transform: scale(-1, 1);
}

/* "Cień" pod ikoną - sam obrys (bez wypełnienia), w ciemnym kolorze,
   narysowany DOKŁADNIE pod białą ikoną na wierzchu - dzięki temu ikona
   zostaje czytelna na każdym, nawet bardzo jasnym zdjęciu w tle (ten sam
   trik co ".pswp__icn-shadow" w PhotoSwipe). */
.nl-icn-shadow {
    fill: none;
    stroke: #4f4f4f;
    stroke-width: 2px;
}

.nl-icn-fill {
    fill: #ffffff;
}

/* Strzałki wstecz/dalej ukryte na urządzeniach dotykowych (telefon/tablet
   bez myszki) - dokładnie ten sam wybór, co w PhotoSwipe (patrz
   ".pswp--touch .pswp__button--arrow"/".pswp--has_mouse .pswp__button--arrow"
   w bibliotece): tam nawigacja na dotyku odbywa się przesunięciem palca
   (swipe), a strzałki wracają dopiero po wykryciu myszki. Nasz lightbox
   robi to samo - obsługę przesunięcia palca patrz custom-realizacje-grid.js
   (nasłuch "touchstart"/"touchend"). "hover: none" (a nie sama szerokość
   ekranu) wybiera realnie urządzenia dotykowe, więc np. tablet w trybie
   landscape czy duży telefon też są objęte - w przeciwieństwie do
   "@media (max-width: ...)" niżej, które steruje tylko układem siatki. */
@media (hover: none) and (pointer: coarse) {
    .nl-realizacje-lightbox-prev,
    .nl-realizacje-lightbox-next {
        display: none;
    }
}

/* ------------------------------------------------------------------
   Responsywność - telefony/tablety
   ------------------------------------------------------------------ */
@media (max-width: 991px) {
    /* ".nl-realizacje-grid-widget.cet-wrapper" (obie klasy naraz) - z tego
       samego powodu, co w custom-kolekcje-grid.css: element ma też klasę
       "cet-wrapper" (animacja przy scrollu), która ma własną regułę
       "padding: ... 0px" ładującą się PO naszym pliku - dokładamy tę samą
       specyficzność plus jedną klasę więcej, żeby wygrać bez "!important". */
    .nl-realizacje-grid-widget.cet-wrapper {
        /* Tak samo jak w widgecie "Siatka kolekcji" - bez tego siatka
           zdjęć sięgała od krawędzi do krawędzi ekranu na telefonie/
           tablecie. */
        padding-left: 28px;
        padding-right: 28px;
    }

    .nl-realizacje-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}

@media (max-width: 600px) {
    .nl-realizacje-grid-widget.cet-wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }

    .nl-realizacje-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Na telefonie nie ma "najechania" myszką - opis od razu widoczny,
       delikatnie, żeby wiadomo było, że tam jest. */
    .nl-realizacje-caption {
        opacity: 1;
        transform: translateY(0);
        background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 75%);
    }

    /* Mniejsze przyciski/ikony na telefonie - te same proporcje, tylko
       w mniejszej skali (ok. 65% oryginału). */
    .nl-realizacje-lightbox-close {
        width: 40px;
        height: 44px;
        right: 4px;
    }

    .nl-realizacje-lightbox-prev,
    .nl-realizacje-lightbox-next {
        width: 52px;
        height: 70px;
        margin-top: -35px;
    }

    .nl-realizacje-lightbox-close .nl-realizacje-icn {
        top: 8px;
        left: 4px;
        width: 24px;
        height: 24px;
    }

    .nl-realizacje-lightbox-prev .nl-realizacje-icn,
    .nl-realizacje-lightbox-next .nl-realizacje-icn {
        margin-top: -21px;
        margin-left: -21px;
        width: 42px;
        height: 42px;
    }
}