/* ==========================================================================
   photo.css — strony zdjęć (photo.php, photo_art.php).
   Wymaga components.css (.section, .section__panel, .section__all,
   .testy-card, .carcard, [data-tip], .breadcrumbs). Mobile-first.
   ========================================================================== */

.photo-page{ padding-bottom: 8px; }

/* ---------- Przeglądarka ----------
   Ciemny panel: nagłówek (main-color) -> scena (prawie czarna, zdjęcie
   object-fit: contain) -> pasek miniatur (main-color-dark) -> podpis (biały). */

.photo-viewer{
  margin-top: 12px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--main-color-dark);
  box-shadow: 0 10px 28px rgba(20,24,31,.18);
}

.photo-viewer__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--main-color);
}
.photo-viewer__titles{ min-width: 0; }
.photo-viewer__title{
  margin: 0;
  color: #fff;
  font-size: 20px;
  line-height: 1.2;
}
.photo-viewer__meta{
  margin: 4px 0 0;
  font-size: 13px;
  color: #cdd8e4;
}

/* Scena: rezerwuje 3:2 zanim zdjęcie się wczyta (CLS 0); na niskich ekranach
   przycinana wysokością — zdjęcie i tak mieści się dzięki contain */
.photo-stage{ margin: 0; }
.photo-stage__frame{
  position: relative;
  aspect-ratio: 3 / 2;
  max-height: calc(100vh - 170px);
  max-height: calc(100svh - 170px);
  min-height: 220px;
  background: #0f1217;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
}
.photo-stage__frame img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Strzałki: duże pole kliknięcia (pas przy krawędzi), mały widoczny przycisk */
.photo-stage__nav{
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 22%;
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: #fff;
}
.photo-stage__nav--prev{ left: 0; justify-content: flex-start; }
.photo-stage__nav--next{ right: 0; justify-content: flex-end; }
.photo-stage__nav--prev svg{ transform: scaleX(-1); }

.photo-stage__btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(15,18,23,.55);
  transition: background-color .15s ease, transform .15s ease, opacity .15s ease;
}
.photo-stage__btn svg{ width: 20px; height: 20px; }
.photo-stage__nav:hover .photo-stage__btn{ background: var(--accent); transform: scale(1.06); }
.photo-stage__nav:focus-visible{ outline: none; }
.photo-stage__nav:focus-visible .photo-stage__btn{ outline: 3px solid #fff; outline-offset: 2px; }

.photo-stage__count{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  pointer-events: none;
}

/* ---------- Pasek miniatur ---------- */

.photo-strip{ padding: 10px 0; }
.photo-strip__list{
  position: relative;          /* offsetLeft miniatur liczony od listy (photo.js) */
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 2px 12px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.25) transparent;
}
.photo-strip__list li{ flex: 0 0 auto; scroll-snap-align: center; }
.photo-strip__item{
  display: block;
  width: 84px;
  aspect-ratio: 3 / 2;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  opacity: .55;
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: opacity .15s ease, outline-color .15s ease;
}
.photo-strip__item img{ width: 100%; height: 100%; object-fit: cover; }
.photo-strip__item:hover{ opacity: 1; }
.photo-strip__item:focus-visible{ opacity: 1; outline-color: #fff; }
.photo-strip__item[aria-current="page"]{ opacity: 1; outline-color: var(--accent); }

/* ---------- Podpis zdjęcia ---------- */

.photo-stage__caption{
  padding: 14px 16px 16px;
  background: var(--card);
  font-size: 15px;
  line-height: 1.6;
}
.photo-caption__title{
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  color: var(--main-color);
}
.photo-caption__title + .photo-caption__text{ margin-top: 8px; }
.photo-caption__text p{ margin: 0 0 10px; }
.photo-caption__text p:last-child{ margin-bottom: 0; }
.photo-stage__caption a{ color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; }
.photo-stage__caption a:hover{ color: var(--main-color); }

/* ---------- Panel informacyjny ---------- */

.photo-info{ padding: 18px 20px 20px; }
.photo-info__lead{ margin: 0 0 16px; font-size: 15px; line-height: 1.6; }

.photo-facts{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 18px;
}
.photo-facts__item{
  background: var(--paper);
  border-radius: 8px;
  padding: 8px 10px;
  min-width: 0;
}
.photo-facts__item dt{
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ink-soft);
}
.photo-facts__item dd{
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.photo-facts__item--price dd{
  font-family: var(--font-heading);
  font-size: 18px;
  color: var(--accent-dark);
}
.photo-facts__item--price.is-na dd{
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.photo-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  transition: background-color .15s ease;
}
.photo-btn:hover{ background: var(--accent-dark); color: #fff; }
.photo-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

.photo-page .testy-card__desc{ margin: 0; }

.photo-404{ padding: 20px; }
.photo-404 p{ margin: 0 0 14px; }

/* ==========================================================================
   >= 600px
   ========================================================================== */
@media (min-width: 600px){
  .photo-facts{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .photo-strip__item{ width: 108px; }
}

/* ==========================================================================
   >= 900px
   ========================================================================== */
@media (min-width: 900px){
  .photo-viewer{ margin-top: 16px; }
  .photo-viewer__head{ padding: 18px 24px; }
  .photo-viewer__title{ font-size: 28px; }

  .photo-stage__nav{ padding: 0 18px; }
  .photo-stage__btn{ width: 52px; height: 52px; }
  .photo-stage__btn svg{ width: 24px; height: 24px; }
  /* na desktopie strzałki wyraźne dopiero przy najechaniu na zdjęcie */
  .photo-stage__btn{ opacity: .7; }
  .photo-stage__frame:hover .photo-stage__btn,
  .photo-stage__nav:focus-visible .photo-stage__btn{ opacity: 1; }

  .photo-strip{ padding: 12px 0; }
  .photo-strip__list{ padding: 2px 24px; gap: 8px; }
  .photo-strip__item{ width: 120px; }

  .photo-stage__caption{ padding: 18px 24px 20px; }
  .photo-caption__title{ font-size: 21px; }

  .photo-info{ padding: 22px 26px 24px; }
  .photo-info__lead{ font-size: 16px; max-width: 80ch; }
  .photo-facts{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce){
  .photo-stage__btn,
  .photo-strip__item{ transition: none; }
}