/* ════════════════════════════════════════════════
   MOCNApracownia — galeria portfolio
   (rozszerza site/styles.css)
   ════════════════════════════════════════════════ */

/* ── scroll progress ── */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 1010;
  pointer-events: none;
}
.scroll-progress i {
  display: block; height: 100%;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
}

/* ── hero ── */
.ph {
  position: relative;
  padding: 170px 8vw 3.5rem;
  /* tylko poziom przycinamy (blob wystaje za prawą krawędź — inaczej poziomy scroll);
     pion zostaje widoczny, żeby plama (blob) była CAŁA widoczna i schodziła pod
     przezroczysty pasek filtra zamiast być ścinana płaską linią na dole nagłówka. */
  overflow-x: clip;
  overflow-y: visible;
}
.ph .hero-blob {
  width: 38vw; height: 38vw;
  left: auto; right: -10vw; top: -8vh;
}
.ph-title {
  font-family: var(--ff-head);
  font-size: clamp(3rem, 7.5vw, 6.4rem);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.02em;
  position: relative; z-index: 1;
}
.ph-title em { font-style: italic; color: var(--accent); }
.ph-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2.5rem; flex-wrap: wrap;
  position: relative; z-index: 1;
}
.ph-sub {
  color: var(--ink-soft); max-width: 44ch;
  font-size: 0.98rem; line-height: 1.8;
  margin-top: 1.6rem;
}
.ph-count {
  font-family: var(--ff-head); font-style: italic;
  font-size: 1.1rem; color: var(--ink-soft);
  white-space: nowrap; padding-bottom: 0.3rem;
}
.ph-count b {
  font-style: normal; font-weight: 400;
  color: var(--accent); font-size: 2.2rem;
  display: inline-block; min-width: 2ch; text-align: right;
}

/* ── karta „tafla" (jak #onas/#realizacje na stronie głównej) ──
   bg-soft + zaokrąglone rogi + boczne marginesy; obejmuje pasek filtra i całą
   galerię. z-index:1 stawia ją NAD blobem (z-index:0), który z nagłówka schodzi
   pod kartę. Bez overflow:hidden — to psułoby sticky paska filtra; kafelki są
   wcięte (gwrap 6vw), więc nie dotykają zaokrąglonych rogów. */
.gboard {
  position: relative;
  z-index: 1;
  margin: 0 1.2rem clamp(2.6rem, 5vw, 4.8rem);
  background: var(--bg-soft);
  border-radius: var(--r-lg);
}

/* ── filter bar ── */
.gfilter {
  position: sticky; top: 65px; z-index: 900;
  /* filtry ZAWIJAJĄ się do szerokości karty (zamiast uciekać w poziomy scroll,
     który na wąskim ekranie chował część przycisków); gap działa też jako
     odstęp między zawiniętymi wierszami. */
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem;
  padding: 1rem 8vw;
  /* domyślnie PRZEZROCZYSTY (przy górze strony) — blob jest wtedy w całości
     widoczny pod paskiem; tło/blur/linie dochodzą dopiero po przyklejeniu
     (.stuck, dodaje JS), żeby przy scrollu nad galerią napisy były czytelne. */
  background: transparent;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), backdrop-filter 0.3s;
}
.gfilter.stuck {
  background: rgba(var(--bg-rgb), 0.86);
  backdrop-filter: blur(16px);
  border-top-color: var(--line);
  border-bottom-color: var(--line);
}
.gfilter::-webkit-scrollbar { display: none; }
.gfilter-label {
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-faint); margin-right: 0.6rem; white-space: nowrap;
}
.fbtn {
  font-family: var(--ff-body); font-size: 0.7rem; letter-spacing: 0.11em;
  text-transform: uppercase; cursor: pointer;
  padding: 0.58rem 1.25rem; border-radius: 100px;
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--line);
  transition: border-color 0.25s, color 0.25s, background-color 0.3s, transform 0.2s var(--ease-out);
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
}
.fbtn:hover { border-color: var(--accent); color: var(--ink); transform: translateY(-1px); }
.fbtn.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.fbtn .n {
  font-size: 0.58rem; color: var(--accent); margin-left: 0.35rem;
  font-family: var(--ff-head); font-style: italic;
}
.fbtn.active .n { color: var(--accent); }

/* ── masonry ── */
.gwrap { padding: 3rem 6vw 7rem; }
.masonry {
  columns: 3 320px;
  column-gap: 1.5rem;
}
/* szeroki / panoramiczny monitor — 4 kolumny */
@media (min-width: 1700px) {
  .masonry { columns: 4 320px; }
}
.g-item {
  break-inside: avoid;
  margin-bottom: 1.5rem;
  position: relative;
  border-radius: var(--r-md);
  cursor: pointer;
  display: block;
  background: var(--bg-soft);
  /* entrance */
  opacity: 0; transform: translateY(42px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--d, 0s);
}
/* wewnętrzna maska — jednym overflow:hidden + border-radius obejmuje zdjęcie +
   overlay + podpis; cień (box-shadow) siedzi na .g-item (poza maską, nie ucięty).
   UWAGA: NIE używać tu clip-path/translateZ/will-change — wewnątrz CSS columns
   (masonry) wymuszona warstwa GPU psuje renderowanie wielokolumnowe (kafelki
   migają i znikają przy 3 kolumnach). overflow:hidden warstwy GPU nie wymusza. */
.g-mask {
  position: relative;
  width: 100%;
  /* overflow:clip przycina też skompozytowaną, powiększoną (scale na hover)
     warstwę zdjęcia — BEZ tworzenia warstwy GPU. Wcześniej był tu
     transform:translateZ(0): wymuszał warstwę GPU, która w SAFARI migała
     wewnątrz CSS columns przy 3-4 kolumnach (znikający „cień"/przerysowanie
     kafelka na hover; Chrome/Chromium tego nie miały). overflow:hidden zostaje
     jako fallback dla starszych przeglądarek bez wsparcia overflow:clip. */
  overflow: hidden;
  overflow: clip;
  border-radius: var(--r-md);
  /* USUNIĘTO -webkit-mask/mask-image (próba fixa hovera z ?v=20260617b):
     maska tworzy warstwę kompozytową na każdym .g-mask WEWNĄTRZ CSS columns →
     w Safari/Chrome zostawiała CZARNE PASKI (ślady repaintu) na kafelkach po
     repaincie (zamknięcie menu / scroll). Reguła „zero warstw GPU w columns"
     (patrz komentarz wyżej) dotyczy też masek. Zostaje samo overflow:clip
     (nie tworzy warstwy GPU). Drobna niedoróbka hovera w Safari < czarne paski. */
}
.g-item.arch .g-mask {
  border-radius: 999px 999px var(--r-md) var(--r-md);
}
.g-item.round .g-mask {
  position: absolute; inset: 0;
  border-radius: 50%;
}
.g-item.in { opacity: 1; transform: none; }
.g-item.arch { border-radius: 999px 999px var(--r-md) var(--r-md); }
.g-item.round { border-radius: 50%; aspect-ratio: 1/1; }
.g-item[data-hidden="true"] { display: none; }
/* znaczek filmu na kafelku projektu z linkiem YouTube */
.g-item.has-video::before {
  content: '▶'; position: absolute; right: 1rem; top: 1rem; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--dark-rgb), 0.55); backdrop-filter: blur(8px);
  color: #fff; font-size: 0.72rem; padding-left: 3px;
  pointer-events: none;
}
.g-item.round.has-video::before { right: 50%; top: 1.6rem; transform: translateX(50%); }

.g-item img {
  width: 100%; display: block;
  transition: transform 0.85s var(--ease-out);
  pointer-events: none;
}
/* okrągła maska — zdjęcie wypełnia kwadrat */
.g-item.round img { height: 100%; object-fit: cover; }
.g-item:hover img { transform: scale(1.06); }

.g-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(var(--dark-rgb), 0.72) 0%, rgba(var(--dark-rgb), 0.05) 45%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
  display: flex; align-items: flex-end;
  padding: 1.4rem 1.5rem;
}
.g-item:hover .g-overlay { opacity: 1; }
/* na okrągłej masce podpis wycentrowany i podniesiony — róg koła by go uciął */
.g-item.round .g-overlay {
  justify-content: center; text-align: center;
  padding: 1.4rem 2.4rem 2.6rem;
  background: linear-gradient(to top, rgba(var(--dark-rgb), 0.8) 0%, rgba(var(--dark-rgb), 0.15) 52%, transparent 68%);
}
.g-item.round .g-idx { right: 50%; transform: translateX(50%); }
.g-cat {
  font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); display: block; margin-bottom: 0.3rem;
  transform: translateY(10px); transition: transform 0.45s var(--ease-out) 0.05s;
}
.g-title {
  color: #fff;
  font-family: var(--ff-head);
  font-size: 1.25rem; font-weight: 300; line-height: 1.3;
  transform: translateY(10px); transition: transform 0.45s var(--ease-out);
}
.g-item:hover .g-cat, .g-item:hover .g-title { transform: none; }
.g-idx {
  position: absolute; top: 1rem; right: 1.2rem;
  font-family: var(--ff-head); font-style: italic;
  font-size: 1rem; color: rgba(255, 255, 255, 0.75);
  opacity: 0; transition: opacity 0.4s 0.1s;
}
.g-item:hover .g-idx { opacity: 1; }

.empty-msg {
  text-align: center; padding: 5rem 2rem;
  font-family: var(--ff-head); font-size: 1.4rem;
  color: var(--ink-soft); font-weight: 300; font-style: italic;
  display: none;
}

/* ── back strip ── */
.back-strip {
  display: flex; align-items: center; justify-content: center;
  padding: 0 8vw 6rem;
}

@media (max-width: 860px) {
  .ph { padding: 130px 6vw 2.5rem; }
  .gfilter {
    gap: 0.45rem;
    padding: 0.8rem 6vw;
  }
  .gfilter-label {
    font-size: 0.56rem;
    letter-spacing: 0.16em;
    margin-right: 0.3rem;
  }
  .fbtn {
    font-size: 0.64rem;
    letter-spacing: 0.09em;
    padding: 0.48rem 1rem;
  }
  .gwrap { padding: 2rem 5vw 5rem; }
  .masonry { columns: 2 220px; column-gap: 1rem; }
  .g-item { margin-bottom: 1rem; }
}
@media (max-width: 640px) {
  .gfilter {
    padding: 0.72rem 5vw;
    gap: 0.42rem;
  }
  .fbtn {
    font-size: 0.58rem;
    letter-spacing: 0.075em;
    padding: 0.42rem 0.76rem;
  }
  .fbtn .n {
    font-size: 0.5rem;
    margin-left: 0.22rem;
  }
}
@media (max-width: 560px) {
  .gfilter {
    padding: 0.72rem 7vw;
    gap: 0.42rem;
  }
  .gfilter-label {
    grid-column: 1 / -1;
    margin: 0 0 0.08rem;
    line-height: 1;
  }
  .fbtn {
    width: auto;
    flex: 0 0 auto;
    max-width: 100%;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.36rem 0.54rem;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .masonry { columns: 1; }
}
@media (max-width: 429px) {
  .gfilter {
    padding-inline: 6vw;
    gap: 0.34rem;
  }
  .fbtn {
    min-height: 30px;
    font-size: 0.52rem;
    letter-spacing: 0.045em;
    padding: 0.28rem 0.48rem;
  }
}