/* ============================================================
   Galeria: siatka albumow, zdjecia albumu, lightbox z nawigacja.
   Ladowane tylko na stronie Galeria i jej albumach (inc/galeria.php).
   Plik reczny, NIE jest nadpisywany przez scripts/wp-theme-build.py.
   ============================================================ */

/* ---- siatka albumow (shortcode [stow_albumy]) ---- */
.albums {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-12) var(--s-6);
}
@media (max-width: 900px) { .albums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-10) var(--s-5); } }
@media (max-width: 560px) { .albums { grid-template-columns: 1fr; gap: var(--s-8); } }

.album {
  display: flex; flex-direction: column;
  color: var(--ink-900);
  text-decoration: none;
}
.album__cover { display: block; }
.album__cover img { transition: transform var(--dur-slow) var(--ease); }
.album:hover .album__cover img { transform: scale(1.04); }
.album__title {
  margin-top: var(--s-4);
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: var(--ls-h3);
  text-wrap: balance;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-hover) var(--ease);
}
.album:hover .album__title { text-decoration-color: var(--ink-900); }
.album__meta {
  margin-top: var(--s-1);
  font-size: var(--fs-xs);
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}
.album:focus-visible { outline: none; }
.album:focus-visible .album__cover { outline: 2px solid var(--ink-900); outline-offset: 3px; }

/* ---- zdjecia albumu: blok galerii rdzenia z klasa album-photos ---- */
.wp-block-gallery.has-nested-images.album-photos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  margin: 0;
}
@media (max-width: 1000px) { .wp-block-gallery.has-nested-images.album-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .wp-block-gallery.has-nested-images.album-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); } }

.wp-block-gallery.has-nested-images.album-photos figure.wp-block-image:not(#individual-image) {
  display: block;
  width: auto;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.wp-block-gallery.has-nested-images.album-photos figure.wp-block-image a {
  display: block; width: 100%; height: 100%;
  cursor: zoom-in;
}
.wp-block-gallery.has-nested-images.album-photos figure.wp-block-image img {
  display: block;
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.wp-block-gallery.has-nested-images.album-photos figure.wp-block-image a:hover img { transform: scale(1.04); }
.wp-block-gallery.has-nested-images.album-photos figure.wp-block-image a:focus-visible { outline: 2px solid var(--ink-900); outline-offset: -2px; }

/* ---- nawigacja miedzy albumami (shortcode [stow_album_nav]) ---- */
.albumnav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-6);
  margin-top: var(--s-12);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.albumnav__link { display: grid; gap: var(--s-1); text-decoration: none; color: var(--ink-900); }
.albumnav__link--next { text-align: right; }
.albumnav__label { font-size: var(--fs-xs); color: var(--ink-500); }
.albumnav__title { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: 1.0625rem; line-height: 1.25; }
.albumnav__link:hover .albumnav__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.albumnav__all {
  font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--ink-900);
  text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px;
}
.albumnav__all:hover { text-decoration-color: var(--ink-900); }
@media (max-width: 640px) {
  .albumnav { grid-template-columns: 1fr 1fr; }
  .albumnav__all { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}

/* wybrane zdjecia na stronie Galeria: figury z data-lightbox sa klikalne z klawiatury */
.gallery [data-lightbox]:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; }

/* ---- lightbox z nawigacja (galeria.js) ---- */
.lightbox--album { padding: 0; }
.lightbox--album .lightbox__figure {
  margin: 0;
  display: grid; place-items: center; gap: var(--s-3);
  max-width: 100%;
}
.lightbox--album img {
  max-width: min(1600px, calc(100vw - 9rem));
  max-height: calc(100vh - 7rem);
  max-height: calc(100dvh - 7rem);
  width: auto; height: auto;
  object-fit: contain;
  transition: opacity 200ms var(--ease);
}
.lightbox--album.is-loading img { opacity: .35; }
.lightbox__count {
  font-size: var(--fs-xs);
  color: var(--on-dark-2);
  font-variant-numeric: tabular-nums;
}
.lightbox__nav {
  position: absolute; top: 50%;
  width: 48px; height: 48px; margin-top: -24px;
  display: grid; place-items: center;
  background: rgba(var(--scrim-rgb), .55); border: 1px solid var(--line-dark); border-radius: var(--r-sm);
  color: #fff; cursor: pointer;
}
.lightbox__nav:hover { background: rgba(255,255,255,.1); }
.lightbox__nav:disabled { opacity: .3; cursor: default; }
.lightbox__nav .ikn { width: 22px; height: 22px; }
.lightbox__nav--prev { left: var(--gutter); }
.lightbox__nav--prev .ikn { transform: scaleX(-1); }
.lightbox__nav--next { right: var(--gutter); }
.lightbox--album .lightbox__close { z-index: 1; background: rgba(var(--scrim-rgb), .55); }
.lightbox button:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

@media (max-width: 700px) {
  .lightbox--album img { max-width: 100vw; max-height: calc(100dvh - 9rem); border-radius: 0; }
  .lightbox__nav { top: auto; bottom: var(--s-4); margin-top: 0; }
  .lightbox__nav--prev { left: var(--s-4); }
  .lightbox__nav--next { right: var(--s-4); }
  .lightbox--album .lightbox__close { top: var(--s-4); right: var(--s-4); }
}
@media (prefers-reduced-motion: reduce) {
  .album__cover img, .wp-block-gallery.has-nested-images.album-photos img { transition: none; }
}