/* =====================================================================
   KATALOG ZDJĘĆ — Dominik Kownacki
   Zasada „passe-partout”: interfejs monochromatyczny (świat strony głównej:
   szkło + latarka + systemowa typografia), a kolor pochodzi WYŁĄCZNIE ze zdjęć.
   Tokeny 1:1 ze styles/main.css strony głównej.
   ===================================================================== */

/* ---------- Zmienne motywów ---------- */
:root {
  --radius: 22px;
  --radius-ph: 14px; /* promień kafli zdjęć — mniejszy niż kart UI */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --glass-blur: 18px;
  --torch-size: 320px;

  /* Skala odstępów (4pt) */
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;

  color-scheme: light;
}

:root[data-theme="light"] {
  --text: #2a3441;
  --text-2: #51606f;
  /* 0.78 zamiast 0.6 — teksty pomocnicze na jasnym szkle spełniają WCAG AA (≥4.5:1) */
  --text-soft: rgba(42, 52, 65, 0.78);
  --accent: #46566a;

  --glass-bg: rgba(255, 255, 255, 0.5);
  --glass-border: rgba(255, 255, 255, 0.72);
  --glass-shadow: 0 14px 44px rgba(40, 55, 80, 0.14);
  --glass-hover-shadow: 0 22px 60px rgba(40, 55, 80, 0.2);

  --hairline: rgba(30, 40, 55, 0.1);
  --footer-bg: rgba(255, 255, 255, 0.45);

  --torch-color: rgba(74, 116, 188, 0.65);
  --torch-glow: rgba(90, 130, 200, 0.12);

  --chip-bg: rgba(255, 255, 255, 0.42);
  --chip-active-bg: #46566a;
  --chip-active-text: #f4f6f9;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --text: #ecebe8;
  --text-2: #b4afa8;
  --text-soft: rgba(236, 235, 232, 0.6);
  --accent: #b9b2a8;

  --glass-bg: rgba(44, 42, 39, 0.46);
  --glass-border: rgba(196, 188, 176, 0.18);
  --glass-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  --glass-hover-shadow: 0 26px 66px rgba(0, 0, 0, 0.72);

  --hairline: rgba(200, 192, 182, 0.14);
  --footer-bg: rgba(18, 17, 16, 0.5);

  --torch-color: rgba(224, 214, 198, 0.6);
  --torch-glow: rgba(214, 204, 188, 0.02);

  --chip-bg: rgba(44, 42, 39, 0.4);
  --chip-active-bg: #d4cdc4;
  --chip-active-text: #1c1a18;

  color-scheme: dark;
}

/* ---------- Reset / podstawy ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  min-height: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  overflow-x: hidden;
  transition: color 0.6s var(--ease);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Warstwy tła (jak na stronie głównej, bez rybek) ---------- */
.bg-layer {
  position: fixed;
  inset: 0;
  z-index: -2;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}

.bg-layer--light {
  background:
    radial-gradient(1100px 700px at 80% -10%, rgba(150, 168, 196, 0.22), transparent 60%),
    radial-gradient(950px 650px at 8% 112%, rgba(158, 176, 200, 0.2), transparent 60%),
    linear-gradient(160deg, #eef1f6 0%, #f7f9fc 50%, #edf0f5 100%);
}

.bg-layer--dark {
  background:
    radial-gradient(1100px 720px at 82% -10%, rgba(58, 54, 50, 0.4), transparent 60%),
    radial-gradient(950px 680px at 6% 112%, rgba(44, 41, 38, 0.4), transparent 60%),
    linear-gradient(160deg, #1a1918 0%, #151414 52%, #0f0e0e 100%);
}

:root[data-theme="light"] .bg-layer--light,
:root[data-theme="dark"] .bg-layer--dark { opacity: 1; }

/* ---------- Skip-link ---------- */
.skip-link {
  position: fixed;
  top: 12px;
  left: 50%;
  translate: -50% -220%;
  z-index: 100;
  padding: 0.6em 1.2em;
  border-radius: 999px;
  background: var(--chip-active-bg);
  color: var(--chip-active-text);
  font-weight: 700;
  text-decoration: none;
  transition: translate 0.25s var(--ease);
}
.skip-link:focus-visible { translate: -50% 0; }

/* ---------- Efekt matowego szkła + latarka (jak na stronie głównej) ---------- */
.glass {
  position: relative;
  isolation: isolate;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius);
  transition: background 0.6s var(--ease), border-color 0.6s var(--ease),
    box-shadow 0.45s var(--ease), transform 0.45s var(--ease);
}

.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.6px;
  background: radial-gradient(
    var(--torch-size) circle at var(--mx, -300px) var(--my, -300px),
    var(--torch-color) 0%,
    transparent 55%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: var(--torch-opacity, 0);
  transition: opacity 0.25s var(--ease);
  pointer-events: none;
}

.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    var(--torch-size) circle at var(--mx, -300px) var(--my, -300px),
    var(--torch-glow) 0%,
    transparent 60%
  );
  opacity: var(--torch-opacity, 0);
  transition: opacity 0.25s var(--ease);
  pointer-events: none;
}

/* ---------- Powrót + przełącznik motywu (stałe rogi) ---------- */
.back-link {
  position: fixed;
  top: clamp(16px, 2.5vw, 28px);
  left: max(clamp(16px, 2.5vw, 28px), env(safe-area-inset-left));
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding-inline: 18px;
  border-radius: 999px;
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}

/* Unoszenie przy najechaniu zarezerwowane dla zdjęć — UI reaguje cieniem/tłem */
.back-link:hover { box-shadow: var(--glass-hover-shadow); }
.back-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.theme-toggle {
  position: fixed;
  top: clamp(16px, 2.5vw, 28px);
  right: max(clamp(16px, 2.5vw, 28px), env(safe-area-inset-right));
  z-index: 50;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  color: var(--text);
  border-radius: 50%;
}

.theme-toggle:hover { box-shadow: var(--glass-hover-shadow); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.theme-toggle .icon { position: absolute; transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); }

:root[data-theme="light"] .icon--moon,
:root[data-theme="dark"] .icon--sun { opacity: 0; transform: rotate(-90deg) scale(0.4); }

:root[data-theme="light"] .icon--sun,
:root[data-theme="dark"] .icon--moon { opacity: 1; transform: rotate(0) scale(1); }

/* Powrót na górę — kółeczko w prawym dolnym rogu, tylko na telefonie.
   Domyślnie ukryte; JS dodaje .is-visible po zejściu niżej. */
.to-top {
  position: fixed;
  right: max(clamp(16px, 2.5vw, 28px), env(safe-area-inset-right));
  bottom: max(clamp(16px, 2.5vw, 28px), env(safe-area-inset-bottom));
  z-index: 50;
  width: 52px;
  height: 52px;
  display: none;                 /* na desktopie w ogóle się nie pojawia */
  place-items: center;
  padding: 0;
  cursor: pointer;
  color: var(--text);
  border-radius: 50%;
  opacity: 0;                    /* stan wyjściowy — wysuwa się z dołu-prawej */
  transform: translateY(16px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { box-shadow: var(--glass-hover-shadow); }
.to-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 640px) {
  .to-top { display: grid; }     /* obecny na telefonie; widoczność steruje .is-visible */
}

/* ---------- Układ strony ---------- */
.page {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 32px);
  padding: clamp(88px, 12vh, 130px) clamp(16px, 4vw, 48px) clamp(48px, 7vh, 72px);
  width: min(1280px, 100%);
  margin-inline: auto;
}

/* ---------- Nagłówek ---------- */
.hero {
  text-align: center;
  padding: clamp(24px, 4vw, 40px) clamp(24px, 5vw, 64px);
  animation: rise 0.9s var(--ease) both;
}

.hero__crumb {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.hero__crumb a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
.hero__crumb a:hover { color: var(--text); }
.hero__crumb a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.hero__name {
  margin: 0;
  font-size: clamp(2rem, 5.4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  /* Zapas na ogonki „j/ę” — przy background-clip: text znaki wybiegające
     poza obszar tła stają się przezroczyste (ucięte litery). */
  padding-bottom: 0.14em;
  margin-bottom: -0.08em;
  background: linear-gradient(135deg, var(--text) 0%, var(--text-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__meta {
  margin: 0.6rem 0 0;
  font-size: 0.95rem;
  color: var(--text-soft);
}

/* ---------- Nawigacja po kolekcjach ---------- */
.catalog {
  padding: clamp(18px, 2.6vw, 26px) clamp(18px, 3vw, 30px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  animation: rise 0.9s var(--ease) 0.08s both;
}

.catalog__group { display: flex; flex-direction: column; gap: var(--sp-3); }

.catalog__label {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.catalog__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
  background: var(--chip-bg);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease),
    color 0.3s var(--ease), border-color 0.3s var(--ease), opacity 0.3s var(--ease);
}

.chip__count {
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
  transition: color 0.3s var(--ease);
}

.chip:hover { border-color: var(--accent); background: var(--glass-bg); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.chip[aria-pressed="true"] {
  background: var(--chip-active-bg);
  border-color: var(--chip-active-bg);
  color: var(--chip-active-text);
}
.chip[aria-pressed="true"] .chip__count { color: var(--chip-active-text); opacity: 0.75; }

/* Kolekcje bez zdjęć — przygaszone, ale klikalne (pokazują pusty stan) */
.chip.is-empty { opacity: 0.55; }
.chip.is-empty:hover { opacity: 0.8; }

/* ---------- Galeria ---------- */
.gallery {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  animation: rise 0.9s var(--ease) 0.16s both;
}

.gallery__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-inline: 6px;
}

.gallery__title {
  margin: 0;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.gallery__count {
  margin: 0;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
}

/* Masonry przez kolumny CSS — zachowuje proporcje zdjęć (bez kadrowania) */
.masonry {
  columns: 17rem;
  column-gap: var(--sp-3);
  /* Przeglądanie ≠ zaznaczanie: przypadkowe zaznaczenie zasłaniało zdjęcia */
  -webkit-user-select: none;
  user-select: none;
}

.masonry img,
.lightbox__fig img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  /* Utrudnienie pobierania: zdjęcie nie jest celem kliknięć — prawy klik
     trafia w kafel/figurę, więc menu „Zapisz grafikę…” się nie pojawia.
     Kliknięcia obsługuje kafel-przycisk, więc nawigacja działa bez zmian. */
  pointer-events: none;
  -webkit-touch-callout: none; /* iOS: bez dymka „Zapisz” przy przytrzymaniu */
}

.ph {
  display: block;
  width: 100%;
  margin: 0 0 var(--sp-3);
  padding: 0;
  border: 0;
  background: none;
  break-inside: avoid;
  border-radius: var(--radius-ph);
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
  box-shadow: var(--glass-shadow);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.ph:hover { transform: translateY(-3px); box-shadow: var(--glass-hover-shadow); }
.ph:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.ph img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
  /* delikatne tło zanim zdjęcie się wczyta */
  background: var(--glass-bg);
  min-height: 72px;
}

.ph img.is-loaded { opacity: 1; transform: scale(1); }

/* Podpis pojawia się na zdjęciu przy najechaniu / focusie */
.ph figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 26px 12px 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  text-align: left;
  background: linear-gradient(180deg, transparent 0%, rgba(10, 12, 16, 0.72) 100%);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}

.ph:hover figcaption,
.ph:focus-visible figcaption { opacity: 1; }

/* ---------- Informacja przy wyłączonym JavaScripcie ---------- */
.noscript {
  margin: 0;
  padding: clamp(20px, 3vw, 28px);
  text-align: center;
  color: var(--text);
  font-weight: 600;
}

/* ---------- Pusty stan kolekcji ---------- */
.empty {
  align-self: center;
  width: min(460px, 100%);
  margin-block: clamp(24px, 6vh, 64px);
  padding: clamp(32px, 5vw, 48px);
  text-align: center;
  color: var(--text-soft);
  border-style: dashed;
  border-color: var(--hairline);
}

.empty__title {
  margin: 14px 0 4px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}

.empty__note { margin: 0; font-size: 0.92rem; }

/* ---------- Stopka ---------- */
.site-footer {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  border-top: 1px solid var(--hairline);
  background: var(--footer-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  transition: background 0.6s var(--ease), border-color 0.6s var(--ease);
}

.site-footer__inner {
  width: min(1280px, 100%);
  margin-inline: auto;
  padding: 18px clamp(20px, 5vw, 48px);
  padding-bottom: max(18px, env(safe-area-inset-bottom));
  /* © po lewej · nota wyśrodkowana · kontakt po prawej — wszystko w jednym rzędzie */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px 24px;
  color: var(--text-soft);
  font-size: 0.85rem;
}

.site-footer__brand { justify-self: start; font-weight: 600; color: var(--text); }

.site-footer__contact {
  justify-self: end;
  color: var(--text-soft);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}

/* Dyskretna nota o prawach autorskich — wyśrodkowana w środkowej kolumnie */
.site-footer__legal {
  justify-self: center;
  max-width: 60ch;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-soft);
  text-align: center;
}

/* Na wąskich ekranach stopka układa się w jedną wyśrodkowaną kolumnę */
@media (max-width: 900px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 8px;
  }
  .site-footer__brand,
  .site-footer__contact { justify-self: center; }
}
.site-footer__contact:hover { color: var(--text); }
.site-footer__contact:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- Lightbox ---------- */
.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  width: min(96vw, 1480px);
  max-height: 94vh;
  overflow: visible;
}

.lightbox::backdrop {
  background: rgba(8, 9, 12, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Sterowanie NIGDY nie zasłania zdjęcia: „X” nad nim, strzałki obok
   (na wąskich ekranach — pod zdjęciem, w pasku podpisu). */
.lightbox__fig {
  margin: 0;
  display: grid;
  grid-template-areas:
    "close close close"
    "prev  img   next"
    "bar   bar   bar";
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px 14px;
}

.lightbox__fig img {
  grid-area: img;
  justify-self: center;
  display: block;
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-ph);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}

.lightbox__bar {
  grid-area: bar;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.92rem;
  font-weight: 600;
  padding-inline: 6px;
}

.lightbox__counter {
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.6);
}

.lightbox__btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(20, 22, 28, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}

.lightbox__btn:hover { background: rgba(40, 44, 54, 0.75); border-color: rgba(255, 255, 255, 0.45); }
.lightbox__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.lightbox__btn--close { grid-area: close; justify-self: end; }
.lightbox__btn--prev { grid-area: prev; }
.lightbox__btn--next { grid-area: next; }

@media (max-width: 640px) {
  .lightbox__fig {
    grid-template-areas:
      "close close close"
      "img   img   img"
      "prev  bar   next";
  }
  .lightbox__fig img { max-height: 70vh; }
}

/* ---------- Animacje ---------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Mobile / dotyk ---------- */
@media (max-width: 640px) {
  .back-link span { display: none; }        /* zostaje sama strzałka */
  .back-link { width: 52px; justify-content: center; padding-inline: 0; }
  .gallery__head { padding-inline: 2px; }
  .masonry { columns: 2; }
}

@media (max-width: 420px) {
  .masonry { columns: 1; }
}

@media (pointer: coarse) {
  .chip { min-height: 44px; padding-inline: 16px; }
  .lightbox__btn { width: 50px; height: 50px; }
  /* na dotyku podpis zdjęcia jest zawsze delikatnie widoczny */
  .ph figcaption { opacity: 1; }
  /* Efekt „latarki" wyłączony na dotyku — bez kursora nie działa dobrze */
  .glass::before,
  .glass::after { display: none; }
}

/* ---------- Dostępność: ograniczony ruch ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.08s !important;
  }
  .ph img { transform: none; }
}