/* Galeria: pasek tagów, siatka miniatur, podgląd pracy (w oknie i na stronie pracy). Wartości z tokens.css. */

/* === Pasek tagów === */

.gallery-filter {
  max-width: var(--gallery-filter-width);
  margin: 0 auto;
  padding: 0 var(--space-6) var(--space-6);
}

.gallery-filter-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--space-1);
  list-style: none;
}

/* Cel dotyku ma pełne 44 px wysokości, a obwódka zaznaczenia jest niższa — nie przytłacza paska tagów */
.gallery-filter-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  padding: 0 var(--space-3);
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}

.gallery-filter-link::after {
  content: '';
  position: absolute;
  inset: var(--space-2) 0;
  border: var(--line-width) solid transparent;
  transition: border-color var(--dur-fast) ease;
}

.gallery-filter-link:hover { color: var(--color-ink); }

.gallery-filter-link:hover::after { border-color: var(--color-ink-faint); }

.gallery-filter-link[aria-current] { color: var(--color-accent); }

.gallery-filter-link[aria-current]::after { border-color: currentColor; }

/* === Siatka miniatur === */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--gallery-cell), 100%), 1fr));
  gap: var(--space-4);
  max-width: var(--width-wide);
  margin: 0 auto;
  padding: 0 var(--space-6) var(--space-9);
  list-style: none;
}

.gallery-work {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
}

.gallery-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-more {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding-top: var(--space-8);
}

.gallery-empty {
  padding: var(--space-9) var(--space-6);
  text-align: center;
  color: var(--color-ink-soft);
}

@media (prefers-reduced-motion: no-preference) {
  .gallery-item { animation: fade-in var(--dur-medium) ease-out both; }

  .gallery-thumb { transition: transform var(--dur-medium) ease; }

  .gallery-work:hover .gallery-thumb { transform: scale(1.03); }
}

/* === Podgląd pracy: okno na cały ekran nad galerią === */

/* Strona pod otwartym oknem nie przewija się kółkiem ani palcem */
/* Własne okno zamiast karty .dialog: podgląd zajmuje cały ekran na ciemnym tle, bez papierowej karty;
   z klocków okna wspólne są przycisk zamknięcia i zachowanie „dialog” */
.photo-viewer {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--space-8) var(--space-10);
  color: var(--color-night-ink);
  background: transparent;
  border: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Układ tylko przy [open] — zamknięty <dialog> ukrywa przeglądarka przez display: none */
.photo-viewer[open] { display: flex; }

/* Adres pracy wpisany wprost, bez skryptu: okno z pracą leży nad galerią samo (ze skryptem otwiera
   je skrypt jako zwykłe okno i zdejmuje data-open) */
.photo-viewer[data-open] {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  display: flex;
  background: var(--color-backdrop-deep);
}

.photo-viewer::backdrop {
  background: var(--color-backdrop-deep);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.photo-viewer .dialog-close {
  top: var(--space-4);
  right: var(--space-4);
}

/* Kontener, który htmx podmienia przy każdej pracy, nie wpływa na układ — praca w środku jest
   bezpośrednim elementem okna */
.photo-viewer-body { display: contents; }

/* Automatyczny margines zamiast centrowania flexem: wysoka praca z długim opisem przewija się od góry */
.photo-viewer .photo-view { margin: auto; }

@media (prefers-reduced-motion: no-preference) {
  .photo-viewer[open] { animation: fade-in var(--dur-medium) ease-out both; }
}

/* === Praca w podglądzie: passe-partout, ramka tuszem, opis i tagi, strzałki === */

.photo-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.photo-mat {
  padding: var(--photo-mat);
  background: var(--color-paper);
}

.photo-frame { padding: var(--photo-mat); }

/* Proporcje (--photo-ratio) skrypt bierze z atrybutów width/height: zdjęcie mieści się na ekranie
   w obu kierunkach, zanim się wczyta, więc ramka od razu ma swój rozmiar. Bez skryptu — naturalny
   rozmiar zdjęcia, nie szerszy niż --photo-max-width. */
.photo-image {
  display: block;
  width: min(var(--photo-max-width), var(--photo-max-height) * var(--photo-ratio));
  max-width: var(--photo-max-width);
  height: auto;
}

.photo-caption {
  max-width: var(--width-text);
  text-align: center;
}

.photo-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--space-3);
  margin-top: var(--space-2);
  list-style: none;
}

.photo-tag { color: var(--color-night-soft); }

.photo-step {
  position: absolute;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target);
  height: var(--space-9);
  color: var(--color-night-soft);
  transform: translateY(-50%);
  transition: color var(--dur-fast) ease;
}

.photo-step:hover { color: var(--color-paper); }

.photo-step--previous { left: var(--space-4); }

.photo-step--next { right: var(--space-4); }

.photo-step svg {
  width: var(--space-6);
  height: var(--space-6);
  stroke: currentColor;
}

@media (max-width: 40rem) {
  .gallery-filter { padding: 0 var(--space-3) var(--space-5); }

  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(var(--gallery-cell-phone), 100%), 1fr));
    gap: var(--space-3);
    padding: 0 var(--space-3) var(--space-8);
  }

  /* Górny margines okna zostawia miejsce na przycisk zamknięcia */
  .photo-viewer { padding: var(--space-9) var(--space-3) var(--space-4); }

  /* Strzałki w wierszu pod opisem — przy krawędziach ekranu zasłaniałyby pracę */
  .photo-view {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    row-gap: var(--space-2);
  }

  .photo-figure {
    grid-column: 1 / -1;
    gap: var(--space-4);
  }

  .photo-mat { padding: 0; }

  .photo-image {
    width: min(var(--photo-max-width-phone), var(--photo-max-height-phone) * var(--photo-ratio));
    max-width: var(--photo-max-width-phone);
  }

  .photo-step {
    position: static;
    height: var(--touch-target);
    transform: none;
  }

  .photo-step--next { justify-self: end; }
}