/* Dziubak Realizacje: siatka + lightbox */
.dzrg { --dzrg-ink-0: #1B1C1F; --dzrg-ink-1: #242528; --dzrg-red: #E23A25; --dzrg-border: #E4E4E1; }
.dzrg, .dzrg *, .dzrg *::before, .dzrg *::after { box-sizing: border-box; }

.dzrg__intro { max-width: 760px; margin: 0 0 1.75rem; }
.dzrg__intro p { font-size: 0.9375rem; line-height: 1.75; color: #45484F; margin: 0 0 1em; }
.dzrg__intro p:last-child { margin-bottom: 0; }
.dzrg__intro strong { color: #1B1C1F; }
.dzrg__intro a { color: #E23A25; text-decoration: underline; text-underline-offset: 2px; }

.dzrg__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 150px;
    grid-auto-flow: dense;
    gap: 0.625rem;
}
.dzrg__tile { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--dzrg-border); background: var(--dzrg-ink-1); grid-row: span 1; }
.dzrg__tile--big { grid-column: span 2; grid-row: span 2; }
.dzrg__tile--tall { grid-row: span 2; }

.dzrg__open {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    cursor: zoom-in;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}
.dzrg__open:focus-visible { outline: 2px solid var(--dzrg-red); outline-offset: 2px; }
.dzrg__open:hover, .dzrg__open:focus { background: transparent; }

.dzrg__img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.dzrg__tile:hover .dzrg__img { transform: scale(1.05); }
.dzrg__open::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(27,28,31,0) 60%, rgba(27,28,31,0.7) 100%);
    pointer-events: none;
}
.dzrg__cap {
    position: absolute;
    left: 0;
    bottom: 0.75rem;
    z-index: 1;
    display: inline-block;
    max-width: calc(100% - 1rem);
    padding: 0.3125rem 0.875rem 0.3125rem 0.75rem;
    background: var(--dzrg-ink-0);
    border-left: 3px solid var(--dzrg-red);
    clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    font-family: 'Barlow Condensed', 'Archivo', system-ui, sans-serif;
    font-size: 0.78125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.35;
    color: #FFFFFF;
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.dzrg__tile:hover .dzrg__cap { background: var(--dzrg-red); border-left-color: var(--dzrg-ink-0); }

/* === Lightbox === */
.dzrg-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(20, 21, 24, 0.94);
}
.dzrg-lightbox[hidden] { display: none; }
.dzrg-lightbox__figure { margin: 0; max-width: min(1200px, 92vw); max-height: 86vh; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.dzrg-lightbox__img { display: block; max-width: 100%; max-height: 78vh; width: auto; height: auto; border: 1px solid rgba(255,255,255,0.12); }
.dzrg-lightbox__cap {
    display: inline-block;
    padding: 0.3125rem 0.875rem 0.3125rem 0.75rem;
    background: #1B1C1F;
    border-left: 3px solid #E23A25;
    clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    font-family: 'Barlow Condensed', 'Archivo', system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #FFFFFF;
}
.dzrg-lightbox__cap:empty { display: none; }
.dzrg-lightbox__close, .dzrg-lightbox__nav {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 0;
    background: rgba(27,28,31,0.85);
    box-shadow: none;
    color: #FFFFFF;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.dzrg-lightbox__close:hover, .dzrg-lightbox__nav:hover,
.dzrg-lightbox__close:focus, .dzrg-lightbox__nav:focus { background: #E23A25; color: #FFFFFF; border-color: #E23A25; }
.dzrg-lightbox__close:focus-visible, .dzrg-lightbox__nav:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.dzrg-lightbox__close { top: max(0.75rem, env(safe-area-inset-top)); right: max(0.75rem, env(safe-area-inset-right)); }
.dzrg-lightbox__nav--prev { left: max(0.5rem, env(safe-area-inset-left)); top: 50%; transform: translateY(-50%); }
.dzrg-lightbox__nav--next { right: max(0.5rem, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); }

/* === Responsive === */
@media (min-width: 640px) {
    .dzrg__grid { grid-auto-rows: 180px; gap: 0.875rem; }
}
@media (min-width: 1024px) {
    .dzrg__grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 1.125rem; }
    .dzrg__intro { margin-bottom: 2.25rem; }
    .dzrg__intro p { font-size: 1rem; }
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
    .dzrg *, .dzrg *::before, .dzrg *::after,
    .dzrg-lightbox *, .dzrg-lightbox *::before, .dzrg-lightbox *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
    .dzrg__tile:hover .dzrg__img { transform: none; }
}