/* ============================================================
   GALERIA – układy Ścianka / Mozaika / Kolaż (2026-10-20)
   Szablon: Partials/ContentElements/Media/SzlakbrdyGallery.html
   Wybór w backendzie: Galeria → Obrazy → „Układ galerii”.
   Każdy kafel dostaje proporcje zdjęcia w --w/--h, więc miejsce
   jest zarezerwowane zanim zdjęcie się wczyta (brak skakania).
   ============================================================ */

.sz-gallery-wrap {
    container-type: inline-size;
}

.sz-gallery {
    --sz-gap: 8px;
    --sz-radius: var(--bs-border-radius, .375rem);
    --sz-placeholder: rgba(3, 37, 42, .07);
    margin: 0 0 1rem;
}

.sz-gallery__item {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--sz-radius);
    background-color: var(--sz-placeholder);
    box-shadow: 0 1px 3px rgba(3, 37, 42, .12);
    transition: box-shadow .3s ease;
}

.sz-gallery__item:hover {
    box-shadow: 0 6px 22px rgba(3, 37, 42, .3);
}

.sz-gallery__link {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

.sz-gallery__link[href]:not(.lightbox) {
    cursor: pointer;
}

.sz-gallery__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .3s ease;
}

.sz-gallery__item:hover img {
    transform: scale(1.06);
    filter: saturate(1.08);
}

/* przyciemnienie od dołu na hover - pod podpisem i jako sygnał „klikalne” */
.sz-gallery__item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 45%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.sz-gallery__item:hover::after,
.sz-gallery__item:focus-within::after {
    opacity: 1;
}

.sz-gallery__link:focus-visible {
    outline: 3px solid var(--bs-primary, #1E5631);
    outline-offset: -3px;
}

.sz-gallery__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: .5rem .75rem;
    color: #fff;
    font-size: .875rem;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    transform: translateY(100%);
    transition: transform .3s ease;
    pointer-events: none;
}

.sz-gallery__item:hover .sz-gallery__caption,
.sz-gallery__item:focus-within .sz-gallery__caption {
    transform: translateY(0);
}

/* ekrany dotykowe - brak hover, podpis widoczny zawsze */
@media (hover: none) {
    .sz-gallery__item::after { opacity: 1; }
    .sz-gallery__caption { transform: none; }
    .sz-gallery__item:not(:has(.sz-gallery__caption))::after { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sz-gallery__item img,
    .sz-gallery__caption { transition: none; }
    .sz-gallery__item:hover img { transform: none; }
}

/* ---------- Ścianka (justified) ----------
   Każdy kafel rośnie proporcjonalnie do swoich proporcji (flex-grow = w/h),
   więc zdjęcia w rzędzie mają równą wysokość i wypełniają całą szerokość
   bez przycinania. Wysokość rzędu = szerokość galerii / („Liczba kolumn” × 1,1)
   (jednostki cqw), czyli „Liczba kolumn” ≈ ile zdjęć mieści się w rzędzie.
   ::after zjada wolne miejsce w ostatnim rzędzie, żeby się nie rozciągał. */
.sz-gallery--justified {
    --sz-row: clamp(110px, 100cqw / (var(--sz-cols) * 1.1), 420px);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sz-gap);
}

.sz-gallery--justified::after {
    content: "";
    flex-grow: 1000000;
}

.sz-gallery--justified .sz-gallery__item {
    flex-grow: calc(var(--w) / var(--h));
    flex-basis: calc(var(--sz-row) * var(--w) / var(--h));
    aspect-ratio: var(--w) / var(--h);
    max-width: 100%;
}


/* ---------- Mozaika (masonry) ----------
   Bez JS: zwykła siatka zdjęć w naturalnych proporcjach.
   Z JS (gallery.js): wiersze siatki po 2px, kafel zajmuje tyle wierszy,
   ile wynika z jego wysokości - kolejność zostaje wierszami (jak lightbox). */
.sz-gallery--masonry,
.sz-gallery--bento {
    display: grid;
    gap: var(--sz-gap);
    grid-template-columns: repeat(var(--sz-c, 2), minmax(0, 1fr));
}

.sz-gallery--masonry .sz-gallery__item {
    aspect-ratio: var(--w) / var(--h);
    align-self: start;
}

.sz-gallery--masonry.is-ready {
    grid-auto-rows: 2px;
    row-gap: 0;
}

.sz-gallery--masonry.is-ready .sz-gallery__item {
    margin-bottom: var(--sz-gap);
}

/* ---------- Kolaż (bento) ----------
   Kwadratowe pola (wysokość wiersza = szerokość kolumny, z jednostek cqw),
   pionowe zdjęcia na 2 wiersze, panoramy na 2 kolumny, a co kilka zdjęć
   jedno wyróżnione 2x2. dense = dziury wypełniane kolejnymi zdjęciami. */
.sz-gallery--bento {
    grid-auto-flow: dense;
    grid-auto-rows: calc((100cqw - (var(--sz-c, 2) - 1) * var(--sz-gap)) / var(--sz-c, 2));
}

.sz-gallery--bento:not(.sz-cols-1) .sz-gallery__item--portrait {
    grid-row: span 2;
}

.sz-gallery--bento:not(.sz-cols-1) .sz-gallery__item--panorama {
    grid-column: span 2;
}

.sz-gallery--bento:not(.sz-cols-1):not(.sz-cols-2) .sz-gallery__item:nth-child(9n + 1),
.sz-gallery--bento:not(.sz-cols-1):not(.sz-cols-2) .sz-gallery__item:nth-child(9n + 6) {
    grid-column: span 2;
    grid-row: span 2;
}

/* liczba kolumn wg szerokości ekranu: telefon ≤ 2, tablet ≤ 3, desktop = ustawienie */
.sz-cols-1 { --sz-c: 1; }
.sz-cols-2 { --sz-c: 2; }
.sz-cols-3 { --sz-c: 2; }
.sz-cols-4 { --sz-c: 2; }
.sz-cols-5 { --sz-c: 2; }
.sz-cols-6 { --sz-c: 2; }
.sz-cols-7 { --sz-c: 2; }
.sz-cols-8 { --sz-c: 2; }
@media (min-width: 768px) {
    .sz-cols-3 { --sz-c: 3; }
    .sz-cols-4 { --sz-c: 3; }
    .sz-cols-5 { --sz-c: 3; }
    .sz-cols-6 { --sz-c: 3; }
    .sz-cols-7 { --sz-c: 3; }
    .sz-cols-8 { --sz-c: 3; }
}
@media (min-width: 992px) {
    .sz-cols-4 { --sz-c: 4; }
    .sz-cols-5 { --sz-c: 5; }
    .sz-cols-6 { --sz-c: 6; }
    .sz-cols-7 { --sz-c: 7; }
    .sz-cols-8 { --sz-c: 8; }
}