/* Galeria Marcina — frontend styles (v1.0)
 * Server-rendered tiles, CSS-only layout dla grid/masonry. JS dokłada
 * justified (rzędy) i scattered (prześwity) oraz lightbox. */

.mzg-gallery-root { background: transparent; }

.mzg-gallery {
  --mzg-cols: 5;
  --mzg-gap: 18px;
  --mzg-radius: 0px;
  --mzg-ratio: 1 / 1;
  --mzg-rowh: 260;
  box-sizing: border-box;
  width: 100%;
}

.mzg-tile {
  display: block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.mzg-tile img {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

/* ── GRID — równe kafle ──────────────────────────────────────────────────── */
.mzg-mode-grid {
  display: grid;
  grid-template-columns: repeat(var(--mzg-cols), 1fr);
  gap: var(--mzg-gap);
}
.mzg-mode-grid .mzg-tile { aspect-ratio: var(--mzg-ratio); }
.mzg-mode-grid .mzg-tile img { object-fit: cover; }

/* ── MASONRY + SCATTERED — kolumny CSS ───────────────────────────────────── */
.mzg-mode-masonry,
.mzg-mode-scattered {
  column-count: var(--mzg-cols);
  column-gap: var(--mzg-gap);
}
.mzg-mode-masonry .mzg-tile,
.mzg-mode-scattered .mzg-tile {
  break-inside: avoid;
  margin-bottom: var(--mzg-gap);
  width: 100%;
}
.mzg-mode-masonry .mzg-tile img,
.mzg-mode-scattered .mzg-tile img { height: auto; }

/* ── JUSTIFIED — rzędy równej wysokości (rozmiary ustawia JS) ────────────── */
.mzg-mode-justified {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mzg-gap);
}
.mzg-mode-justified .mzg-tile { flex: 0 0 auto; }
.mzg-mode-justified .mzg-tile img { object-fit: cover; }

/* ── LIGHTBOX (white box) ────────────────────────────────────────────────── */
.mzg-lb {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility 0s linear .28s;
  font-family: Helvetica, Arial, sans-serif;
  touch-action: none;                 /* blokuje pinch-zoom i scroll w obrębie lightbox; swipe obsługuje JS */
  -ms-touch-action: none;
  -webkit-user-select: none; user-select: none;
}
.mzg-lb.is-open { opacity: 1; visibility: visible; transition: opacity .28s ease; }
.mzg-lb-stage {
  touch-action: none;                  /* gesty na zdjęciu obsługuje JS (swipe), brak zoomu */
  flex: 1 1 auto; position: relative; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: clamp(16px, 4vw, 56px);
}
.mzg-lb-imgbox { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; }
.mzg-lb-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; opacity: 0; will-change: opacity;
}
.mzg-lb-cap {
  flex: 0 0 auto; text-align: center; line-height: 1.3;
  letter-spacing: .04em; max-width: 80vw; opacity: .85;
}
.mzg-lb-counter {
  position: absolute; top: 0; left: 0; padding: 22px 26px;
  font: 500 13px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .08em; opacity: .65;
}
.mzg-lb-close {
  position: absolute; top: 12px; right: 12px;
  width: 44px; height: 44px; cursor: pointer; z-index: 10;
  display: flex; align-items: center; justify-content: center; opacity: .65; transition: opacity .15s ease;
  -webkit-appearance: none; appearance: none;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; margin: 0; border-radius: 0 !important; outline: none;
}
.mzg-lb-close:hover { opacity: 1; background: transparent !important; }
.mzg-lb-close svg { width: 20px; height: 20px; }
.mzg-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; opacity: .55; transition: opacity .15s ease; z-index: 2;
  -webkit-appearance: none; appearance: none;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; margin: 0; border-radius: 0 !important; outline: none;
}
.mzg-lb-nav:hover { opacity: 1; background: transparent !important; }
.mzg-lb-nav svg { width: 26px; height: 26px; }
.mzg-lb-prev { left: 4px; }
.mzg-lb-next { right: 4px; }
.mzg-lb-thumbs {
  flex: 0 0 auto; display: flex; gap: 8px; padding: 14px clamp(16px,4vw,56px) 20px;
  overflow-x: auto; overflow-y: hidden; justify-content: center; scrollbar-width: thin;
}
.mzg-lb-thumb {
  flex: 0 0 auto; width: 58px; height: 44px; padding: 0; border: 0; cursor: pointer;
  background-size: cover; background-position: center; opacity: .4; transition: opacity .2s ease;
}
.mzg-lb-thumb.is-active { opacity: 1; }
.mzg-lb-thumb:hover { opacity: .8; }
.mzg-lb-thumbs { touch-action: pan-x; }   /* miniatury: tylko poziomy scroll */
.mzg-lb-no-scroll { overflow: hidden !important; }

@media (max-width: 640px) {
  .mzg-lb-nav { width: 44px; height: 44px; }
  .mzg-lb-thumb { width: 46px; height: 36px; }
  /* większy, pewny obszar dotyku dla × */
  .mzg-lb-close { top: 6px; right: 6px; width: 52px; height: 52px; }
  .mzg-lb-close svg { width: 24px; height: 24px; }
}