/* ============================================================
   SIATKA PORTFOLIO — style zamknięte w tym bloku
   ------------------------------------------------------------
   Wyjątek od zasady "kolory w blokach, efekty w Additional CSS".
   To nie jest treść do klikania, tylko działający mechanizm —
   trzymanie go w jednym kawałku znaczy jedno wklejenie zamiast
   dwóch i brak ryzyka, że ktoś rozjedzie połowę.
   ============================================================ */
.cnv-pf { --rozowy:#FF00C8; --kreska:rgba(255,255,255,0.08); --szary:#9a9a9a;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif; }

/* Na bardzo dużych ekranach (telewizor, duży monitor) zdjęcia mają się
   powiększać, a nie dokładać kolejnych kolumn. WordPress usztywnia
   szerokość kontenera do rozmiaru sekcji (contentSize) — zdejmujemy
   to ograniczenie tylko dla tego jednego kontenera. Podwójna klasa
   podnosi specyficzność, żeby na pewno wygrać z regułą WordPressa. */
.cnv-pf.cnv-pf { max-width:none !important; width:100% !important;
  margin-left:0 !important; margin-right:0 !important; }

/* ===== PASEK FILTRÓW ===== */
.cnv-pf__filtry { border-top:1px solid var(--kreska); border-bottom:1px solid var(--kreska);
  padding:22px 0 20px; margin-bottom:34px; }
.cnv-pf__filtry-naglowek { display:flex; align-items:baseline; gap:14px; margin-bottom:16px; }
.cnv-pf__etykieta { font-family:Arial,Helvetica,sans-serif; font-size:9px; letter-spacing:4px;
  text-transform:uppercase; color:var(--rozowy); }
.cnv-pf__licznik { font-size:12px; color:#6a6a6a; }

/* ===== MENU ROZWIJANE Z FILTRAMI ===== */
/* Rząd luźnych kafelków zajmuje pół ekranu i rozjeżdża się przy dłuższej
   liście kategorii. Jedno menu zajmuje jedną linijkę i zachowuje się jak
   filtry na porządnym sklepie. */
.cnv-pf__drop { position:relative; display:inline-block; max-width:100%; }

.cnv-pf__drop-trigger { display:inline-flex; align-items:center; gap:12px;
  min-width:260px; max-width:100%; border:1px solid rgba(255,255,255,0.14);
  border-radius:4px; background:rgba(255,255,255,0.03); padding:12px 16px;
  font-family:inherit; font-size:13px; color:#fff; cursor:pointer; text-align:left;
  transition:border-color .25s, background .25s; }
.cnv-pf__drop-trigger:hover { border-color:rgba(255,0,200,0.45); }
.cnv-pf__drop.jest-otwarty .cnv-pf__drop-trigger { border-color:var(--rozowy); }
.cnv-pf__drop.ma-wybor .cnv-pf__drop-trigger { border-color:var(--rozowy); background:rgba(255,0,200,0.07); }

.cnv-pf__drop-wybor { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cnv-pf__drop:not(.ma-wybor) .cnv-pf__drop-wybor { color:#8a8a8a; }

.cnv-pf__drop-strzalka { width:7px; height:7px; flex-shrink:0; border-right:1.5px solid #8a8a8a;
  border-bottom:1.5px solid #8a8a8a; transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .25s ease; }
.cnv-pf__drop.jest-otwarty .cnv-pf__drop-strzalka { transform:rotate(225deg) translate(-3px,-3px); }

.cnv-pf__drop-panel { position:absolute; z-index:60; top:calc(100% + 6px); left:0;
  min-width:100%; width:300px; max-width:calc(100vw - 40px);
  background:#111; border:1px solid rgba(255,255,255,0.12); border-radius:4px;
  box-shadow:0 24px 60px rgba(0,0,0,0.7); }
.cnv-pf__drop-panel[hidden] { display:none; }

.cnv-pf__drop-lista { max-height:300px; overflow-y:auto; padding:6px; }

/* cały wiersz jest etykietą, żeby klikało się w każdy piksel,
   nie tylko w kwadracik */
.cnv-pf__opcja { display:flex; align-items:center; gap:11px; padding:10px 12px;
  border-radius:3px; font-size:13px; color:#b8b8b8; cursor:pointer; user-select:none;
  position:relative; transition:background .2s, color .2s; }
.cnv-pf__opcja:hover { background:rgba(255,255,255,0.06); color:#fff; }
.cnv-pf__opcja input { position:absolute; opacity:0; pointer-events:none; }
.cnv-pf__opcja::before { content:''; width:14px; height:14px; flex-shrink:0; border-radius:3px;
  border:1px solid rgba(255,255,255,0.25); transition:background .2s, border-color .2s; }
.cnv-pf__opcja.jest-zaznaczona { color:#fff; }
.cnv-pf__opcja.jest-zaznaczona::before { background:var(--rozowy); border-color:var(--rozowy); }
.cnv-pf__opcja-nazwa { flex:1; }
.cnv-pf__opcja-ile { font-size:11px; color:#6a6a6a; }

.cnv-pf__drop-stopka { display:flex; gap:8px; padding:10px; border-top:1px solid rgba(255,255,255,0.1); }

.cnv-pf__btn { flex:1; background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.22);
  border-radius:4px; padding:12px 14px; font-family:Arial,Helvetica,sans-serif; font-size:9px;
  letter-spacing:2.5px; text-transform:uppercase; cursor:pointer;
  transition:opacity .25s, border-color .25s; }
.cnv-pf__btn:hover { border-color:#fff; }
.cnv-pf__btn--glowny { background:var(--rozowy); color:#000; border-color:var(--rozowy); }
.cnv-pf__btn--glowny:hover { opacity:.85; border-color:var(--rozowy); }

/* ===== STANY ===== */
.cnv-pf__stan, .cnv-pf__pusto { padding:60px 0; text-align:center; color:#6a6a6a; font-size:14px; }

/* ===== SIATKA — wiersze justowane ===== */
/* Każdy wiersz wypełnia całą szerokość, zdjęcia zachowują swoje
   proporcje. Nic nie jest przycinane — kadr jest Twój, nie mój. */
.cnv-pf__wiersz { display:flex; gap:10px; margin-bottom:10px; }
/* telefon: dwie kolumny o nierównej wysokości */
.cnv-pf__kolumny { display:flex; align-items:flex-start; }
.cnv-pf__kolumna { flex:1 1 0; min-width:0; display:flex; flex-direction:column; }
.cnv-pf__kafelek { position:relative; display:block; overflow:hidden; cursor:zoom-in;
  /* Tło siedzi na samym obrazku, nie na kafelku. Dzięki temu pasek EXIF
     zdjęcia bez danych jest niewidoczny zamiast świecić pustą płytką,
     a wysokość i tak zostaje zarezerwowana i rzędy się nie rozjeżdżają. */
  background:transparent;
  /* kafelek jest odnośnikiem — motyw domyślnie podkreśla odnośniki
     i podkreślenie wchodziło na pasek EXIF */
  text-decoration:none; color:inherit; }
.cnv-pf__kafelek:hover, .cnv-pf__kafelek:focus { text-decoration:none; }
/* ramka przycina powiększenie zdjęcia */
.cnv-pf__ramka { position:relative; width:100%; overflow:hidden; }
.cnv-pf__kafelek img { display:block; width:100%; height:100%; object-fit:cover;
  background:rgba(255,255,255,0.03);
  transition:opacity .5s, transform .6s ease, filter .4s ease; opacity:0; }
.cnv-pf__kafelek img.jest-wczytane { opacity:1; }
/* obraz, który się nie wczytał */
.cnv-pf__kafelek img.ma-blad { background:rgba(255,255,255,0.06); object-fit:contain; }
.cnv-pf__kafelek:hover img { transform:scale(1.05); filter:brightness(1.05); }

/* pasek EXIF pod zdjęciem — wyśrodkowany, bez separatorów */
/* plakietka pod zdjęciem — zawsze, także gdy brak danych */
.cnv-pf__exif { position:relative; display:flex; align-items:center; justify-content:center;
  gap:14px; font-family:Arial,Helvetica,sans-serif; font-size:11.5px; font-weight:700;
  letter-spacing:1.4px; color:#8a8a8a; padding:0 10px; white-space:nowrap;
  overflow:hidden; background:#1c1c1c;
  transition:color .25s, background .25s; }
.cnv-pf__kafelek:hover .cnv-pf__exif { color:#fff; background:#242424; }
.cnv-pf__exif > span { position:relative; z-index:2; }
/* zdjęcie bez wpisanego EXIF-u */
.cnv-pf__brak-danych { color:#5c5c5c; font-weight:400; letter-spacing:2px; }
.cnv-pf__kafelek:hover .cnv-pf__brak-danych { color:#8a8a8a; }

/* przebłysk — pasmo światła w barwach marki przelatujące po plakietce */
.cnv-pf__exif::before {
  content:''; position:absolute; z-index:1; top:0; bottom:0; left:0; width:45%;
  background:linear-gradient(100deg, transparent 0%, rgba(255,0,200,.5) 38%,
    rgba(6,147,227,.5) 66%, transparent 100%);
  transform:translateX(-160%); opacity:0; pointer-events:none;
  filter:blur(6px); }
.cnv-pf__kafelek:hover .cnv-pf__exif::before {
  animation:cnvPrzeblysk 1.05s cubic-bezier(.25,.6,.3,1) forwards; }

@keyframes cnvPrzeblysk {
  0%   { transform:translateX(-160%); opacity:0; }
  15%  { opacity:1; }
  85%  { opacity:1; }
  100% { transform:translateX(320%); opacity:0; }
}

/* kreska marki rozjeżdżająca się na górnej krawędzi plakietki */
.cnv-pf__exif::after {
  content:''; position:absolute; z-index:3; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, #ff00c8 0%, #0693e3 100%);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .45s cubic-bezier(.22,.61,.36,1); }
.cnv-pf__kafelek:hover .cnv-pf__exif::after { transform:scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .cnv-pf__kafelek:hover .cnv-pf__exif::before { animation:none; }
  .cnv-pf__exif::after { transition:none; }
}

/* w wąskim kafelku odstępy się zbijają zamiast urywać treść */
.cnv-pf__exif--ciasny { gap:8px; font-size:10.5px; letter-spacing:.8px; }

.cnv-pf__wiecej { display:block; margin:34px auto 0; }

/* wewnętrzne odstępy liczone w szerokości — bez tego panel z historią
   wychodzi poza lewą krawędź ekranu o wartość swojego paddingu */
.cnv-pf, .cnv-pf *, .cnv-pf *::before, .cnv-pf *::after,
.cnv-lb, .cnv-lb *, .cnv-lb *::before, .cnv-lb *::after { box-sizing: border-box; }

/* ===== POWIĘKSZENIE ===== */
.cnv-lb { position:fixed; inset:0; z-index:9999; background:#060606;
  display:flex; flex-direction:column; }
.cnv-lb[hidden] { display:none; }
.cnv-lb__scena { flex:1; min-height:0; display:flex; align-items:center; justify-content:center;
  padding:56px 72px 8px; transition:padding-right .35s ease; }
/* panel z opisem wysuwa się z prawej, a zdjęcie usuwa mu się z drogi —
   nie chowa się pod spodem */
.cnv-lb.jest-panel .cnv-lb__scena { padding-right:calc(min(420px, 88vw) + 32px); }
/* strzałka „dalej" i krzyżyk odsuwają się razem ze zdjęciem,
   żeby nie zniknęły pod panelem */
.cnv-lb.jest-panel .cnv-lb__nawigacja--dalej { right:calc(min(420px, 88vw) + 8px); }
.cnv-lb.jest-panel .cnv-lb__zamknij { right:calc(min(420px, 88vw) + 22px); }
.cnv-lb__foto { max-width:100%; max-height:100%; object-fit:contain; display:block; }

.cnv-lb__zamknij, .cnv-lb__nawigacja, .cnv-lb__panel-zamknij {
  position:absolute; background:transparent; border:none; color:rgba(255,255,255,0.5);
  cursor:pointer; line-height:1; transition:color .25s; z-index:2; }
.cnv-lb__zamknij:hover, .cnv-lb__nawigacja:hover, .cnv-lb__panel-zamknij:hover { color:#fff; }
.cnv-lb__zamknij { top:18px; right:22px; font-size:22px; padding:10px; transition:right .35s ease, color .25s; }
.cnv-lb__nawigacja { top:50%; transform:translateY(-50%); font-size:44px; padding:10px 18px;
  transition:right .35s ease; }
.cnv-lb__nawigacja--wstecz { left:8px; }
.cnv-lb__nawigacja--dalej { right:8px; }

.cnv-lb__pasek { flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:14px 24px 20px; }
.cnv-lb__exif { display:flex; flex-wrap:wrap; align-items:center; gap:20px;
  font-family:Arial,Helvetica,sans-serif; font-size:12.5px; font-weight:700;
  letter-spacing:1.6px; color:#c4c4c4; }
.cnv-lb__kredyty { font-size:12.5px; color:#6f6f6f; margin-top:5px; }
.cnv-lb__kredyty a { color:#9a9a9a; text-decoration:none; border-bottom:1px solid rgba(255,0,200,0.35); }
.cnv-lb__kredyty a:hover { color:var(--rozowy,#FF00C8); }

.cnv-lb__historia-btn { flex-shrink:0; background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,0.22); border-radius:4px; padding:12px 22px;
  font-family:Arial,Helvetica,sans-serif; font-size:9px; letter-spacing:3px;
  text-transform:uppercase; cursor:pointer; transition:border-color .25s; }
.cnv-lb__historia-btn:hover { border-color:#FF00C8; }
.cnv-lb__historia-btn[hidden] { display:none; }

/* panel z opisem — wysuwa się z prawej, zdjęcie zostaje pod spodem */
.cnv-lb__panel { position:absolute; top:0; right:0; bottom:0; width:min(420px,88vw);
  background:#0c0c0c; border-left:1px solid rgba(255,255,255,0.08);
  padding:60px 34px 40px; overflow-y:auto; z-index:3;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif; }
.cnv-lb__panel[hidden] { display:none; }
.cnv-lb__panel-zamknij { top:16px; right:18px; font-size:17px; padding:8px; }
.cnv-lb__panel-tytul { font-family:'Libre Baskerville',Georgia,serif; font-size:19px; line-height:1.35;
  color:#fff; margin:0 0 18px; font-weight:700; }
.cnv-lb__panel-tresc { font-size:14px; line-height:1.9; color:#a8a8a8; }
.cnv-lb__panel-tresc p { margin:0 0 14px; }
.cnv-lb__panel-klient { margin-top:24px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.08);
  font-size:13px; color:#6f6f6f; line-height:1.8; }
.cnv-lb__panel-klient a { color:#fff; text-decoration:none;
  border-bottom:1px solid rgba(255,0,200,0.35); }
.cnv-lb__panel-klient a:hover { color:#FF00C8; }

/* ========== MOBILE ========== */
@media (max-width:781px) {
  .cnv-pf__filtry { padding:18px 0 16px; margin-bottom:26px; }
  .cnv-pf__drop, .cnv-pf__drop-trigger { width:100%; }
  .cnv-pf__drop-panel { width:100%; }

  .cnv-pf__wiersz { gap:8px; margin-bottom:8px; }
  /* pełna szerokość okna z 4 px marginesem — zmierzone ze Squarespace */
  .cnv-pf__siatka { margin-inline: calc(50% - 50vw); padding-inline: 4px; }
  .cnv-pf__exif { font-size:8.5px; gap:7px; letter-spacing:.2px; padding:0 6px; }
  .cnv-pf__exif--ciasny { font-size:8.5px; gap:6px; letter-spacing:.2px; }

  .cnv-lb__scena { padding:50px 12px 4px; }
  .cnv-lb__nawigacja { font-size:34px; padding:8px 10px; }
  .cnv-lb__pasek { flex-direction:column; align-items:flex-start; gap:12px; padding:12px 16px 18px; }
  .cnv-lb__exif { gap:12px; font-size:11.5px; letter-spacing:1px; }
  .cnv-lb__historia-btn { width:100%; }
  .cnv-lb__panel { width:100%; border-left:none; padding:56px 22px 32px; }
  /* na telefonie panel zajmuje cały ekran, więc nie ma czego przesuwać */
  .cnv-lb.jest-panel .cnv-lb__scena { padding-right:12px; }
  .cnv-lb.jest-panel .cnv-lb__nawigacja--dalej { right:8px; }
  .cnv-lb.jest-panel .cnv-lb__zamknij { right:22px; }
}