/* ==========================================================================
   WYPSTRYKANY.PL — fixes.css (ładowany po style.css / responsive.css)
   1. Podgląd albumu publicznego bez ciemnych pasów wokół zdjęć
   2. Stany ładowania w panelu (wysyłka zdjęć strony)
   3. Panel — Diagnostyka
   4. Ładowanie zdjęć albumów (3.3): płynne pojawianie się, bez pustych ramek
   5. Technikalia (3.3): równa siatka — 2 wiersze po 3 karty
   6. Przejścia między zdjęciami bez „mrugnięcia” (3.5)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PODGLĄD ALBUMU PUBLICZNEGO
   -------------------------------------------------------------------------- */
.album-stage {
  display: grid;
  justify-items: center;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
.album-stage__frame {
  position: relative;
  width: min(100%, calc(min(74vh, 820px) * var(--ratio, 1.5)));
  height: auto;
  min-height: 0;
  aspect-ratio: var(--ratio, 1.5);
  max-height: min(74vh, 820px);
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: var(--image-bg);
  box-shadow: var(--shadow-lift);
  transition: width 0.45s var(--ease-out), aspect-ratio 0.45s var(--ease-out);
}
.album-stage__image { display: block; }
.album-stage__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.album-stage__caption {
  justify-self: stretch;
  min-height: 3rem;
  padding: 0.9rem 0.15rem 0;
  color: var(--text-muted);
  background: transparent;
}
.album-stage__counter { color: var(--accent-ink); }

.album-stage__nav {
  top: calc(50% - 1.5rem - 23px);
  color: var(--text);
  background: var(--bg);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
  z-index: 3;
}
.album-stage__nav:hover { color: var(--bg); background: var(--text); border-color: var(--text); }
.album-stage__nav:focus-visible { outline-color: var(--accent); }
.album-stage__nav--prev { left: 0.5rem; }
.album-stage__nav--next { right: 0.5rem; }

@media (max-width: 899px) {
  .album-stage__frame { width: min(100%, calc(70vh * var(--ratio, 1.5))); max-height: 70vh; }
  .album-stage { grid-template-columns: auto 1fr auto; column-gap: 0.5rem; }
  .album-stage__frame { grid-column: 1 / -1; }
  .album-stage__nav { position: static; grid-row: 2; margin-top: 0.75rem; }
  .album-stage__nav--prev { grid-column: 1; }
  .album-stage__nav--next { grid-column: 3; }
  .album-stage__caption { grid-row: 2; grid-column: 2; align-self: center; padding-top: 0.75rem; text-align: center; flex-direction: column; gap: 0.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .album-stage__frame { transition: none; }
}

/* --------------------------------------------------------------------------
   2. PANEL — wysyłka zdjęć strony
   -------------------------------------------------------------------------- */
.img-card.is-busy { opacity: 0.6; pointer-events: none; }
.file-pick__btn .btn__spinner { width: 14px; height: 14px; }
.admin.is-busy, .admin.is-busy * { cursor: progress; }

/* --------------------------------------------------------------------------
   3. PANEL — Diagnostyka
   -------------------------------------------------------------------------- */
.check-list--wide li { padding: 0.35rem 0; border-bottom: 1px solid var(--line); word-break: break-word; }
.check-list--wide li:last-child { border-bottom: 0; }
.diag-thumb { width: 96px; height: 54px; object-fit: cover; border-radius: var(--radius-xs); background: var(--image-bg); }
.diag-details summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; }
.diag-log { max-height: 360px; overflow: auto; margin: 0; padding: 0.85rem 1rem; font-size: 0.75rem; line-height: 1.5; white-space: pre-wrap; word-break: break-all; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }

/* --------------------------------------------------------------------------
   4. ŁADOWANIE ZDJĘĆ ALBUMÓW
   -------------------------------------------------------------------------- */
img[data-src] { visibility: hidden; }
img.is-loaded { animation: wypImgIn 0.5s var(--ease-out) both; }
@keyframes wypImgIn { from { opacity: 0; } to { opacity: 1; } }

.album-card__frames,
.pa-item,
.pa-hero__media,
.album-thumb {
  background-color: var(--image-bg);
}
.album-card__frames:has(img[data-src][data-lazy]),
.pa-item:has(img[data-src]),
.album-thumb:has(img[data-src]) {
  animation: wypPulse 1.6s ease-in-out infinite;
}
@keyframes wypPulse { 50% { background-color: color-mix(in srgb, var(--image-bg) 70%, var(--bg)); } }

.pa-item:has(img.is-failed)::after,
.album-card__frames:has(.is-active img.is-failed)::after {
  content: '↻';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  color: var(--text-muted);
  pointer-events: none;
}

.album-stage__frame.is-loading::after,
.lightbox__stage.is-loading::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 2px solid var(--gold);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  img.is-loaded { animation: none; }
  .album-card__frames, .pa-item, .album-thumb { animation: none !important; }
}

/* --------------------------------------------------------------------------
   5. TECHNIKALIA — równa siatka (3 × 2, tablet 2, telefon 1)
   -------------------------------------------------------------------------- */
.gear .gear__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  align-items: stretch;
}
.gear .gear__list > .gear-card {
  grid-column: auto;
  grid-row: auto;
  margin-top: 0;
  min-width: 0;
}
.gear .gear-card .gear-card__inner {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  height: 100%;
  grid-template-columns: none;
}
.gear .gear-card .gear-card__media img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.gear .gear-card .gear-card__body { flex: 1 1 auto; }

@media (min-width: 600px) {
  .gear .gear__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .gear .gear__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 3rem; }
}

/* --------------------------------------------------------------------------
   6. PRZEJŚCIA BEZ „MRUGNIĘCIA”
   Wcześniej stare zdjęcie gasło, a nowe pojawiało się jednocześnie — w połowie
   przejścia obie warstwy były półprzezroczyste i prześwitywało tło.
   Teraz: nowe zdjęcie wjeżdża NAD stare, które do końca zostaje w pełni widoczne.
   -------------------------------------------------------------------------- */
.album-stage__image,
.lightbox__image { will-change: opacity; }

.album-stage__image.is-entering,
.lightbox__image.is-entering { z-index: 1; }

.album-stage__image.is-under,
.lightbox__image.is-under {
  z-index: 0;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.album-stage__image { transition: opacity 0.45s var(--ease-out); }
.lightbox__image { transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-out); }

/* Miniatury albumów (przenikanie na kartach) */
.album-card__frame.is-active { z-index: 1; }
.album-card__frame.is-active.is-under,
.album-card__frame.is-under {
  z-index: 0;
  opacity: 1;
  transition: none;
}