/* Galeria karty produktu — arkusz partu `produkt-galeria.php` (fala 1).
 *
 * ŹRÓDŁA: `canvas:Karta Produktu Finalna` — desktop l. 360–377, jeden kadr
 * (klatka `1b`) l. 630–636, mobile (klatka `1i`) l. 906–917, lightbox l. 571–578.
 *
 * ⚠︎ PRZYKLEJONA JEST GALERIA, NIE PANEL (poprawka r1 pkt 16). Wcześniej
 * przyklejony był panel, a że galeria kończy się dużo wyżej, „przyklejenie
 * nie robiło nic poza zostawieniem kilkusetpikselowej dziury" nad tabami.
 * Teraz czytający panel ma zdjęcie przed oczami.
 */

.szewko-galeria {
  display: flex;
  gap: var(--space-md);
  min-width: 0;

  /* 96 px = wysokość paska nawigacji plus 6 px prześwitu. Liczba NIE jest
     wpisana: `114px` z canvasów okazało się trzema różnymi wynikami tego
     samego działania, przepisanymi jako stałe (patrz `NOTES.md`). */
  position: sticky;
  top: calc(var(--szewko-pasek-wysokosc) + 6px);

  /* Poniżej 900 px panel schodzi pod galerię, a przyklejenie w kolumnie
     jednoelementowej przykleiłoby galerię do całej reszty strony. */
  @media (max-width: 900px) {
    position: static;
    flex-direction: column;
    gap: 2px;
  }
}

/* ─── PAS MINIATUR / RZĄD KROPEK ────────────────────────────────────────── */

.szewko-galeria__miniatury {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 72px;
  margin: 0;
  padding: 0;
  list-style: none;

  /* Na wąskim ekranie ten sam rząd jest nawigacją kropkową POD kadrem. */
  @media (max-width: 900px) {
    order: 2;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
  }
}

.szewko-galeria__miniatura {
  display: block;
  width: 72px;
  height: 72px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-sand-gold);
  border-radius: var(--radius-sm);
  background: var(--color-bleached-linen);
  cursor: pointer;

  &[aria-pressed="true"] {
    border: 2px solid var(--color-brass-lantern);
  }

  & img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Kropka na 390 px. Rysunek ma 8 px, ale POLE TRAFIENIA jest pełne 44 × 44
     — sztuczka „rysunek 28 px, pole 44 px" z §2d, tu przez wyściółkę zamiast
     pseudoelementu, bo przycisk i tak nie ma innej treści. */
  @media (max-width: 900px) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 0;
    background: transparent;

    &[aria-pressed="true"] {
      border: none;
    }

    & img {
      display: none;
    }

    &::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: var(--radius-full);
      background: color-mix(in srgb, var(--color-camel-brown) 40%, transparent);
      transition: width var(--duration-fast) var(--ease-sand);
    }

    /* Aktywna kropka rozciąga się w kreskę — canvas l. 914 („22px"). */
    &[aria-pressed="true"]::before {
      width: 22px;
      border-radius: 4px;
      background: var(--color-brass-lantern);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .szewko-galeria__miniatura::before {
    transition: none;
  }
}

/* ─── DUŻY KADR ─────────────────────────────────────────────────────────── */

.szewko-galeria__scena {
  flex: 1;
  min-width: 0;

  @media (max-width: 900px) {
    order: 1;
  }
}

.szewko-galeria__tor {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;

  /* Pasek przewijania znika, bo pozycję pokazują miniatury i kropki —
     dwa wskaźniki tego samego byłyby szumem. Sam mechanizm zostaje
     natywny: bez JS-u tor nadal się przewija. */
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }

  /* Na 390 px kadr ma 330 px i zostawia skrawek następnego — kontrakt gestu
     z §3 („podgląd ≥ 40 % kolejnej karty" tam, tu skrawek jak na canvasie
     l. 908). Na desktopie kadr wypełnia scenę, a przewijaniem steruje
     wyłącznie klik w miniaturę. */
  @media (max-width: 900px) {
    gap: 12px;
  }
}

.szewko-galeria__kadr {
  flex: 0 0 100%;
  scroll-snap-align: start;

  @media (max-width: 900px) {
    flex: 0 0 min(330px, 85%);
  }
}

.szewko-galeria__powieksz {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-brass-lantern);
  border-radius: var(--radius-sm);
  background: var(--color-bleached-linen);
  cursor: zoom-in;

  /* ⚠︎ Obrys ogniskowej wchodzi DO ŚRODKA — poprawka z 12.08.2026 (K9).
     Ten przycisk to całe zdjęcie i wypełnia tor co do piksela (zmierzony zapas
     0 px ze WSZYSTKICH czterech stron), a tor ma `overflow: auto`, bo przewija
     się poziomo ze `scroll-snap`. Obrys narysowany na zewnątrz nie ma się więc
     gdzie zmieścić z definicji — i nie da się tego naprawić na kontenerze,
     bo `clip` odebrałby galerii przewijanie.

     Ten sam wzorzec, co przy polach formularza: ujemne odsunięcie plus pierścień
     `inset`. Ciemna obwódka i tak jest tu potrzebna bardziej niż gdzie indziej,
     bo pod spodem leży zdjęcie o nieznanej jasności — sam Sand Gold na jasnym
     kadrze dawał 1,87:1. */
  &:focus-visible {
    outline: 2px solid var(--color-sand-gold);
    outline-offset: -5px;
    box-shadow: inset 0 0 0 10px var(--color-smoked-tent);
  }

  & img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
  }
}

/* Podpowiedź „Kliknij, aby powiększyć" — zatwierdzona w r1 (sekcja F).
   Canvas pokazuje ją na `hover`; w motywie stoi STALE, bo „hover nie istnieje
   dla dotyku" (ta sama reguła, którą pasek ogłoszeń okupił podkreśleniem CTA). */
.szewko-galeria__podpowiedz {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-smoked-tent) 78%, transparent);
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--color-parchment);

  @media (max-width: 640px) {
    right: var(--space-sm);
    bottom: var(--space-sm);
    padding: 5px var(--space-sm);

    /* ⚠︎ Kurczenie z 12 px na 11 px zdjęte, nie podniesione: 11 px to
       ekwiwalent 11,2, czyli poniżej podłogi (`docs/TYPOGRAFIA.md` §4),
       a podpowiedź stoi na zdjęciu i jest jedyną informacją, że kadr się
       powiększa. Węższy `padding` sam odzyskuje szerokość, której to
       kurczenie szukało. */
  }
}

/* Wariant z jednym zdjęciem: pas miniatur znika w całości (klatka `1b`,
   zatwierdzone w r1 sekcja F). Znacznik go wtedy nie wypisuje — ta reguła
   pilnuje tylko, żeby scena zajęła całą szerokość. */
.szewko-galeria--jeden .szewko-galeria__scena {
  flex: 1 1 100%;
}

/* ─── ZASTĘPNIK: PRODUKT BEZ ANI JEDNEGO ZDJĘCIA ────────────────────────── */

/* ⚠︎ Wartości są PRZEPISANE z zastępnika kafla (`content-product.css:318`),
   a nie współdzielone — i to jest świadome. Reguła „jeden arkusz na part"
   znaczy, że `produkt-galeria.css` nie ma prawa zależeć od arkusza siatki:
   ten drugi nie jest na karcie produktu w ogóle kolejkowany, więc sięgnięcie
   po `.szewko-karta__zastepnik` dałoby kadr bez ramki i bez koloru.
   ⚠︎ Kreskowana ramka i ikona ogniwa mają się w obu miejscach ruszać razem —
   jeżeli zmienia się jedno, sprawdź drugie.

   Proporcja 1 : 1 jest ta sama, co u obrazu w `.szewko-galeria__powieksz`,
   żeby brak zdjęcia zajmował dokładnie tyle miejsca, co zdjęcie. */
.szewko-galeria__zastepnik {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px dashed color-mix(in srgb, var(--color-sand-gold) 75%, transparent);
  border-radius: var(--radius-sm);
  background: var(--color-bleached-linen);
  color: var(--color-camel-brown);
}

/* ─── LIGHTBOX ──────────────────────────────────────────────────────────── */

.szewko-lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;

  &[hidden] {
    display: none;
  }
}

.szewko-lightbox__tlo {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  cursor: zoom-out;
  background: color-mix(in srgb, var(--color-smoked-tent) 92%, transparent);
}

.szewko-lightbox__panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.szewko-lightbox__kadry {
  margin: 0;
  padding: 0;
  list-style: none;

  & img {
    display: block;

    /* 72 % / 82 % z canvasu (l. 573). `contain`, nie `cover`: w powiększeniu
       kadr ma pokazać całe zdjęcie, a nie wypełnić prostokąt. */
    width: auto;
    height: auto;
    max-width: 72vw;
    max-height: 82vh;
    object-fit: contain;
  }

  & [hidden] {
    display: none;
  }
}

.szewko-lightbox__krzyzyk,
.szewko-lightbox__strzalka {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--color-sand-gold) 50%, transparent);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  color: var(--color-parchment);

  &:hover {
    border-color: var(--color-brass-lantern);
    color: var(--color-brass-lantern);
  }
}

.szewko-lightbox__krzyzyk {
  top: 20px;
  right: 20px;
}

.szewko-lightbox__strzalka--wstecz {
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
}

.szewko-lightbox__strzalka--dalej {
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 640px) {
  .szewko-lightbox__kadry img {
    max-width: 92vw;
  }

  /* Strzałki schodzą na dół i rozjeżdżają się na boki: przy 390 px stoją
     inaczej niż na desktopie, bo przy krawędziach zasłaniałyby zdjęcie. */
  .szewko-lightbox__strzalka {
    top: auto;
    bottom: var(--space-lg);
    transform: none;
  }

  .szewko-lightbox__strzalka--wstecz {
    left: var(--space-lg);
  }

  .szewko-lightbox__strzalka--dalej {
    right: var(--space-lg);
  }
}