/* ——————————————————————————————————————————
   Galeria — „stos odbitek na ladzie” (wybrana 24.09.2026) + przeglądarka zdjęć + modal.
   Ładowana w <head> na /about, a na innych stronach dociągana przez js/gallery.js
   dopiero przy otwarciu modala.
   Animowane są WYŁĄCZNIE transform i opacity — clip-path przy starej galerii był
   głównym podejrzanym o zacinanie.
   —————————————————————————————————————————— */

html.g-lock { overflow: hidden; }

/* ——— sekcja na /about ——— */
.gallery { background: var(--cream-hi); }
.gallery__head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.gallery__head h2 { margin: 0; }
.gallery__note { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--ink-soft); max-width: 34ch; margin: 0; }
.gallery .eyebrow { color: var(--rose); }
.gallery__anchor { display: block; height: 0; scroll-margin-top: 96px; }

/* bez JS-a: zwykła siatka odnośników — każde zdjęcie raz.
   Z JS-em siatka jest schowana od pierwszej klatki (display: none = jej leniwe
   miniatury się nie pobierają), a miejsce trzyma min-height do zamontowania wariantu. */
html.js [data-gallery]:not(.is-mounted) { min-height: 560px; }
html.js [data-gallery] .gbase { display: none; }
.gbase h3 { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; margin: var(--space-3) 0 var(--space-1); }
.gbase ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.gbase figure { margin: 0; }
.gbase a { display: block; border: 2px solid var(--ink); }
.gbase img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

/* ————————————————————————————————————————————————
   PRZEGLĄDARKA PEŁNOEKRANOWA
   ———————————————————————————————————————————————— */
/* PEŁNY EKRAN = ta sama karta co na stosie, na tym samym blacie (decyzja Macieja, 24.09.2026) */
dialog.gv {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--cream);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden;
}
/* Blat na ::backdrop — pełne krycie; --gv-dim ustawia gest „w dół” (backdrop dziedziczy po dialogu). */
dialog.gv::backdrop {
  background-color: var(--ink);
  background-image:
    repeating-linear-gradient(94deg, rgba(255, 237, 203, 0.035) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(88deg, rgba(0, 0, 0, 0.18) 0 2px, transparent 2px 23px);
  opacity: var(--gv-dim, 1);
}
dialog.gv.is-closing::backdrop { transition: opacity 0.32s ease; opacity: 0; }
.gv__bar {
  display: flex; align-items: center; gap: 16px; padding: 10px 12px 10px 18px;
  font: 500 0.74rem/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase;
}
.gv__brand { font-family: var(--font-display); font-weight: 900; font-size: 0.9rem; letter-spacing: 0.02em; }
.gv__count { margin-left: auto; color: var(--amber); }
.gv__close, .gm__close {
  width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.1rem; cursor: pointer;
  color: var(--ink); background: var(--cream); border: 2px solid var(--cream); box-shadow: 3px 3px 0 var(--amber);
}
.gv__stage { position: relative; overflow: hidden; touch-action: none; cursor: grab; display: grid; place-items: center; }
dialog.gv.is-zoomed .gv__stage { cursor: move; }
.gv__card {
  grid-area: 1 / 1; position: relative; margin: 0; padding: 14px 14px 44px;
  background: var(--cream-hi); color: var(--ink); border: 2px solid var(--ink);
  box-shadow: 8px 10px 0 rgba(0, 0, 0, 0.45); will-change: transform;
}
.gv__zoom { transform-origin: 50% 50%; will-change: transform; }
.gv__zoom img {
  display: block; width: var(--iw); height: var(--ih); object-fit: cover; background: #e8d9b8;
  user-select: none; -webkit-user-drag: none; pointer-events: none;
}
.gv__lip { position: absolute; left: 16px; bottom: 15px; font: 500 0.76rem/1 var(--font-mono); letter-spacing: 0.16em; color: var(--ink-soft); }
.gv__nav { display: flex; justify-content: center; gap: 14px; padding: 8px 12px 18px; }
.gv__ctl {
  min-width: 56px; min-height: 52px; padding: 0 16px; cursor: pointer;
  font: 900 1.4rem/1 var(--font-display); color: var(--ink); background: var(--cream-hi);
  border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--amber);
}
.gv__ctl:disabled { opacity: 0.4; cursor: default; }
.gv button:focus-visible, .gm button:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
@media (hover: hover) { .gv__ctl:not(:disabled):hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--amber); } }

/* ————————————————————————————————————————————————
   MODAL GALERII
   ———————————————————————————————————————————————— */
dialog.gm {
  width: min(1240px, 94vw); height: 94dvh; max-width: none; max-height: none; margin: auto; padding: 0;
  border: 3px solid var(--ink); background: var(--cream); color: var(--ink);
  box-shadow: 12px 12px 0 var(--amber); display: flex; flex-direction: column; overflow: hidden;
}
dialog.gm::backdrop { background: rgba(28, 20, 4, 0.82); }
.gm__bar { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 20px; background: var(--ink); color: var(--cream); flex: none; }
.gm__title { margin: 0; font-size: var(--step-1); text-transform: uppercase; }
.gm__close { margin-left: auto; }
.gm__body { flex: 1; min-height: 0; overflow: auto; position: relative; overscroll-behavior: contain; display: flex; flex-direction: column; }
.gm__scene { flex: 1 0 auto; }
@media (max-width: 700px) {
  dialog.gm { width: 100vw; height: 100dvh; border: 0; box-shadow: none; }
}

/* ————————————————————————————————————————————————
   K3 · STOS ODBITEK
   ———————————————————————————————————————————————— */
.k3 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, 0.62fr); gap: var(--space-4); align-items: center; }
.k3 [hidden] { display: none !important; }
/* --band: pas na dole blatu zarezerwowany na przyciski. Stos stoi na środku reszty blatu,
   a przyciski w połowie drogi między stosem a dolną krawędzią (liczy to js). */
.k3__table {
  --band: 110px;
  position: relative; min-height: clamp(540px, 76vh, 720px);
  background-color: var(--ink);
  /* słoje blatu: dwie przesunięte warstwy pasów o bardzo niskim kontraście */
  background-image:
    repeating-linear-gradient(94deg, rgba(255, 237, 203, 0.035) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(88deg, rgba(0, 0, 0, 0.18) 0 2px, transparent 2px 23px);
  border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--amber);
}
.k3__pile { position: absolute; inset: 0 0 var(--band) 0; display: grid; place-items: center; touch-action: pan-y; outline: none; }
.k3__pile:focus-visible { outline: 3px solid var(--amber); outline-offset: -8px; }
.k3__print {
  grid-area: 1 / 1; position: relative; display: block; padding: 11px 11px 32px; margin: 0;
  background: var(--cream-hi); border: 2px solid var(--ink); color: var(--ink);
  box-shadow: 5px 6px 0 rgba(0, 0, 0, 0.45); cursor: pointer; will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.k3__print.is-top { cursor: grab; }
.k3__print.is-top:active { cursor: grabbing; }
.k3__print img { display: block; width: var(--pw); height: var(--ph); object-fit: cover; pointer-events: none; background: #e8d9b8; }
.k3__lip { position: absolute; left: 13px; bottom: 9px; font: 500 0.66rem/1 var(--font-mono); letter-spacing: 0.16em; color: var(--ink-soft); }
.k3__print:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; }

.k3__grid {
  position: relative; list-style: none; margin: 0; padding: var(--space-4) var(--space-3);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 26px 20px; align-items: start;
}
.k3__print--grid { width: 100%; padding: 8px 8px 24px; cursor: zoom-in; }
.k3__print--grid img { width: 100%; height: auto; }
.k3__print--grid .k3__lip { bottom: 7px; left: 9px; font-size: 0.6rem; }
.k3.is-spread .k3__table { min-height: 0; padding-bottom: var(--band); }
/* po rozłożeniu siatka jest wysoka — kupki kategorii jadą przy górnej krawędzi ekranu */
.k3.is-spread { align-items: start; }
.k3.is-spread .k3__side { position: sticky; top: 110px; }

/* ——— trzy przyciski pod stosem (szkice Macieja, 24.09.2026) ———
   Na blacie, w połowie drogi między odbitkami a dolną krawędzią. Pozycję pionową
   (top) liczy js/gallery-stack.js; bez niej przyciski stoją w pasie --band. */
.k3__controls {
  position: absolute; left: 50%; bottom: calc(var(--band) / 2); z-index: 6; transform: translate(-50%, 50%);
  display: flex; gap: 12px; align-items: stretch;
}
.k3__ctl {
  min-width: 56px; min-height: 52px; padding: 0 16px; cursor: pointer;
  font: 900 1.4rem/1 var(--font-display); color: var(--ink); background: var(--cream-hi);
  border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
}
.k3__ctl--spread {
  font: 500 0.78rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  color: var(--cream); background: var(--ink); border-color: var(--cream-hi); box-shadow: 4px 4px 0 var(--amber);
}
.k3__ctl:disabled { opacity: 0.4; cursor: default; }
.k3__ctl:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
@media (hover: hover) {
  .k3__ctl:not(:disabled):hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
  .k3__ctl--spread:not(:disabled):hover { box-shadow: 6px 6px 0 var(--amber); }
}
/* rozłożone odbitki nie mają „następnej” — strzałki znikają, ale trzymają miejsce */
.k3.is-spread .k3__ctl:not(.k3__ctl--spread) { visibility: hidden; }
/* pozycja policzona w JS (is-placed); po rozłożeniu przyciski wracają do pasa na dole blatu */
.k3__controls.is-placed { bottom: auto; transform: translate(-50%, -50%); }

.k3__side { display: grid; gap: var(--space-3); align-content: center; }
.k3__hint { margin: 0; font-size: 0.95rem; color: var(--ink-soft); max-width: 32ch; }
.k3__hint b { color: var(--ink); }
.k3__piles { display: grid; gap: 12px; }
.k3__catpile {
  display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px;
  min-height: 52px; padding: 8px 14px 8px 10px; text-align: left; cursor: pointer;
  background: var(--cream-hi); color: var(--ink); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
}
.k3__catpile[aria-selected="true"] { background: var(--amber); }
.k3__catpile:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
@media (hover: hover) { .k3__catpile:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); } }
.k3__spines { position: relative; width: 38px; height: 28px; }
.k3__spines i { position: absolute; inset: 0; background: var(--cream); border: 2px solid var(--ink); }
.k3__spines i:nth-child(2) { transform: translate(3px, -3px) rotate(4deg); }
.k3__spines i:nth-child(3) { transform: translate(6px, -6px) rotate(-3deg); }
.k3__spines i:nth-child(4) { transform: translate(9px, -9px) rotate(2deg); }
.k3__catname { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 1.02rem; }
.k3__catn { font: 500 0.74rem/1 var(--font-mono); letter-spacing: 0.1em; }

/* w modalu blat kończy się nad dolną krawędzią okna z zapasem na wiszące przyciski */
.k3--modal { padding: var(--space-3); min-height: 100%; }
.k3--modal .k3__table { min-height: calc(94dvh - 72px - 2 * var(--space-3)); }   /* 72 = pasek tytułu + ramka okna */

@media (max-width: 860px) {
  .k3 { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .k3__table { min-height: 540px; --band: 96px; }
  /* Na telefonie kupki to siatka „trzy i dwa” (prośba Macieja 24.09.2026), nie przewijany pasek:
     sześć kolumn, każda kupka zajmuje dwie, a dwie ostatnie po trzy. Wszystkie widać naraz. */
  .k3__piles { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 10px; padding-right: 4px; }
  .k3__catpile { grid-column: span 2; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 6px 8px; padding: 10px 10px 10px 10px; align-items: center; }
  .k3__catpile:nth-last-child(-n + 2):nth-child(n + 4) { grid-column: span 3; }
  .k3__catname { grid-column: 1 / -1; grid-row: 2; font-size: 0.86rem; overflow-wrap: anywhere; }
  .k3__catn { justify-self: end; }
  .k3__spines { width: 28px; height: 22px; }
  .k3__side { order: 2; min-width: 0; }
  .k3.is-spread .k3__side { position: static; }
  .k3__ctl { min-width: 52px; min-height: 48px; }
  .k3__ctl--spread { padding: 0 12px; font-size: 0.72rem; }
  .k3__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-3) 14px; gap: 18px 14px; }
  .k3--modal { padding: 12px; }
  .k3--modal .k3__table { min-height: calc(100dvh - 210px); }
}