/* DamTorty v2: strona torty.html (galeria, SPEC 5). Ładowany po tokens.css i site.css, których nie zmienia.
   Port galerii v1 (archiwum/layout-v1) do szaty v2 z 2026-09-26: nagłówek w Różu pastelowym jak hero formularza,
   pasek filtrów jako biała ramka Levain (1 px Kakao, promień 24), chipy i karty tortów z site.css.
   gallery.js bez zmian: haki id i data-* jak w v1. Zero literałów kolorów: wszystko z tokenów.
   Punkty: sm 480, md 768, lg 1024. */

/* ==========================================================================
   1. Nagłówek galerii: Róż pastelowy, bez ruchu na wejściu (wzór: .form-hero w page-form.css)
   ========================================================================== */

.gallery-hero {
  --link: var(--c-accent-deep);
  --script: var(--c-accent-deep);
  --focus: var(--c-ink);
  position: relative;
  overflow-x: clip;
  background: var(--c-pink);
}

/* Nagłówek galerii wchodzi pod pasek na każdej szerokości (nagłówek Bernice, SPEC-v2-naglowek 6.1) */
main > .gallery-hero { margin-top: calc(-1 * (var(--header-h) + var(--header-offset))); }
.gallery-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-block: calc(var(--header-h) + var(--header-offset) + 24px) 40px;
}

.gallery-hero h1 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 800;
  font-stretch: 80%;
  letter-spacing: var(--tr-h2);
  text-transform: uppercase;
}

.gallery-hero__lead { margin-top: var(--s-4); }

.gallery-hero__script {
  width: fit-content;
  max-width: none;
  margin-top: var(--s-5);
  font-family: var(--ff-script);
  font-size: var(--fs-script);
  line-height: 1;
  font-weight: 700;
  color: var(--script);
  transform: rotate(-2deg);
  transform-origin: left bottom;
}

/* Skróty do Smaków i Cennika pod galerią: pigułki jak kategorie w Realizacjach (wersaliki Apfel, obrys 2 px Kakao) */
.gallery-hero__jump { gap: var(--s-3); margin-top: var(--s-6); }
.gallery-hero__jump .chip {
  min-height: 48px;
  padding: 0 var(--s-5);
  border: 2px solid var(--c-ink);
  background: transparent;
  color: var(--c-ink);
  font-family: var(--ff-nav);
  font-size: var(--fs-nav);
  font-weight: 600;
  text-transform: uppercase;
}
@media (hover: hover) {
  .gallery-hero__jump .chip:hover { background: var(--c-ink); color: var(--c-white); }
}

/* Dekoracja: doodle tortu na kole w Różu pastelowym głębokim, malina od lg */
.gallery-hero__deco { display: none; }

@media (min-width: 1024px) {
  .gallery-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    column-gap: var(--s-7);
    padding-block: calc(var(--header-h) + var(--header-offset) + 40px) 56px;
  }
  .gallery-hero__text { padding-top: var(--s-4); }
  .gallery-hero__deco {
    position: relative;
    display: grid;
    place-items: center;
    width: 240px;
    height: 240px;
    margin: 0 var(--s-7) 0 auto;
  }
  .gallery-hero__deco::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--c-pink-deep);
  }
  .gallery-hero__cake {
    position: relative;
    --dd-size: 140px;
    --dd-sw: 1.3;
    --dd-rot: -6deg;
  }
  .gallery-hero__berry {
    top: 0;
    right: -4px;
    --dd-size: 48px;
    --dd-sw: 4;
    --dd-rot: 14deg;
  }
}

/* ==========================================================================
   2. Pasek filtrów (5.1)
   Telefon: <details> zwinięty do „Filtry (2)”, chipy zawijane, licznik zawsze widoczny.
   Desktop: biała ramka przyklejona pod pływającym paskiem nawigacji, etykiety wierszy w lewej kolumnie,
   licznik po prawej w wierszu kształtu; po przewinięciu w głąb siatki zwinięta do jednego wiersza.
   ========================================================================== */

.gallery { padding-block: var(--s-6) var(--section-y); }
/* Smaki i Cennik niewidoczne, dopóki gallery.js nie wstawi kart (.gallery.is-ready): siatka rośnie wtedy o kilka
   tysięcy pikseli, a przesunięcie widocznych sekcji pod nią liczy się jako CLS (wejście z torty.html#cennik dawało ok. 1).
   Niewidoczne pudełka mają układ, więc kotwica trafia, a przesunięcia się nie liczą. Zapas: po 3 s widoczne i bez JS z galerii */
html.js .gallery:not(.is-ready) ~ section {
  visibility: hidden;
  animation: gallery-zapas 0s 3s forwards;
}
@keyframes gallery-zapas { to { visibility: visible; } }

.filters {
  display: grid;
  gap: var(--s-3);
}

.filters__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: 52px;
  padding: 0 var(--s-5);
  border: var(--bw-btn) solid var(--c-ink);
  border-radius: var(--r-pill);
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--ff-display);
  font-size: var(--fs-btn);
  font-weight: 700;
  letter-spacing: var(--tr-btn);
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.filters__toggle::-webkit-details-marker { display: none; }
.filters__details[open] > .filters__toggle { margin-bottom: var(--s-4); }

@media (hover: hover) {
  .filters__toggle:hover { background: var(--c-tint); }
}

.gallery-filters__rows {
  display: grid;
  gap: var(--s-5);
}

.filters__row {
  display: grid;
  gap: var(--s-2);
  min-width: 0;
}

.chips__label {
  max-width: none;
  font-family: var(--ff-display);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-ink);
}

.gallery-filters__active { font-variant-numeric: tabular-nums; }

.gallery-filters__caret { transition: transform var(--dur-1) var(--ease); }
.filters__details[open] .gallery-filters__caret { transform: rotate(180deg); }

/* Kształt: pigułka jak chip, strzałka Kakao z tokenu */
.gallery-filters__select {
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0 44px 0 18px;
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: var(--r-pill);
  background: var(--c-white) var(--i-caret) no-repeat right 16px center / 16px;
  color: var(--c-ink);
  font-family: var(--ff-display);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--dur-1) var(--ease);
}
.gallery-filters__select option { color: var(--c-ink); }

@media (hover: hover) {
  .gallery-filters__select:hover { background-color: var(--c-tint); }
}

.filters__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  min-height: 44px;
}
.filters__count {
  max-width: none;
  font-family: var(--ff-display);
  font-size: var(--fs-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.gallery-filters__clear { padding-inline: var(--s-1); font-size: var(--fs-label); }

/* JS wyłączony: filtry i „Pokaż więcej” nie mają sensu, zostaje komunikat z <noscript> */
html:not(.js) .gallery-filters,
html:not(.js) .gallery-more { display: none; }

@media (min-width: 480px) and (max-width: 1023px) {
  .gallery-filters__select { width: auto; min-width: 240px; }
  .gallery-filters__apply { justify-self: start; width: auto; min-width: 240px; }
}

@media (min-width: 1024px) {
  .gallery-filters {
    position: sticky;
    top: calc(var(--header-h) + var(--header-offset) + var(--s-3));
    z-index: calc(var(--z-header) - 1);
    gap: 0;
    padding: var(--s-4) var(--s-5);
    border: var(--bw-hair) solid var(--c-ink);
    border-radius: var(--r-lg);
    background: var(--c-white);
    box-shadow: var(--sh-lift);
  }
  .filters__toggle { display: none; }
  .filters__details > .filters__toggle { margin-bottom: 0; }
  .gallery-filters__rows { gap: 8px; }
  .gallery-filters .filters__row {
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    column-gap: var(--s-3);
  }
  .gallery-filters .chips { gap: 6px; }
  /* 38 px wizualnie, 44 px celu (pseudo-element), żeby dwa rzędy chipów nie zajmowały pół ekranu */
  .gallery-filters .chip {
    min-height: 38px;
    padding: 0 14px;
    font-stretch: 96%;
  }
  .gallery-filters .chip::after {
    content: "";
    position: absolute;
    inset: -3px 0;
  }
  .gallery-filters__shape { justify-items: start; }
  .gallery-filters__select { width: auto; min-width: 200px; min-height: 40px; }
  /* Licznik i „Wyczyść filtry” w wierszu kształtu, po prawej */
  .gallery-filters .filters__meta {
    position: absolute;
    right: var(--s-5);
    bottom: var(--s-4);
    min-height: 40px;
    justify-content: flex-end;
    gap: var(--s-4);
  }
}

/* Pasek zwinięty po przewinięciu w głąb siatki (gallery.js, .is-compact): jeden wiersz
   „Filtry (2)” po lewej, licznik i „Wyczyść filtry” po prawej */
.gallery-filters__expand svg { transition: transform var(--dur-1) var(--ease); }
@media (min-width: 1024px) {
  .gallery-filters.is-compact { padding-block: var(--s-3); }
  .gallery-filters.is-compact .filters__details { display: none; }
  .gallery-filters.is-compact .gallery-filters__expand { justify-self: start; }
  .gallery-filters.is-compact .filters__meta { bottom: 50%; transform: translateY(50%); }
}

/* Niski ekran laptopa: pasek nie przykleja się, żeby nie zasłaniał połowy siatki */
@media (min-width: 1024px) and (max-height: 699px) {
  .gallery-filters { position: relative; top: auto; }
}

/* Fokus i przewijanie nie chowają kart pod przyklejonym paskiem (--filters-h ustawia gallery.js) */
@media (min-width: 1024px) and (min-height: 700px) {
  html { scroll-padding-top: calc(var(--header-h) + var(--header-offset) + var(--filters-h, 150px) + var(--s-6)); }
}

/* ==========================================================================
   3. Siatka kart (SPEC 5.2): karta tortu z site.css, zdjęcie jako przycisk podglądu
   ========================================================================== */

.gallery-grid { margin-top: var(--s-5); }

@media (min-width: 768px) {
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
}
@media (min-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: var(--s-6);
    margin-top: var(--s-6);
  }
}

/* gallery.js: figure.photo > button.card-cake__media > img + lupa (figure nie może leżeć w przycisku) */
.card-cake__photo { --photo-r: var(--r-sm); }
button.card-cake__media {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: inherit;
  cursor: zoom-in;
}
.card-cake__media:focus-visible { outline-offset: 3px; }

.gallery-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--s-2);
  max-width: none;
}
.gallery-kicker__occasion {
  font-family: var(--ff-display);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-muted);
}

.gallery-grid .card-cake__body { gap: 4px; }

/* ==========================================================================
   4. „Pokaż więcej” i licznik pod siatką
   ========================================================================== */

.gallery-more {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  margin-top: var(--s-7);
  text-align: center;
}
.gallery-more__count {
  max-width: none;
  font-family: var(--ff-display);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.gallery-more__bar {
  width: min(240px, 60%);
  height: 8px;
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: var(--r-pill);
  background: var(--c-white);
  overflow: hidden;
}
.gallery-more__bar > span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--c-brand);
  transition: width var(--dur-2) var(--ease);
}
.gallery-more__btn { min-width: 240px; margin-top: var(--s-2); }

@media (max-width: 767px) {
  .gallery-more__btn { width: 100%; }
}

/* ==========================================================================
   5. Pusty stan i komunikat bez JS
   ========================================================================== */

.gallery-empty {
  --link: var(--c-accent-deep);
  --focus: var(--c-ink);
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding: var(--s-7) var(--s-5);
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: var(--r-lg);
  background: var(--c-pink);
  text-align: center;
}
.gallery-empty h3 { max-width: 24ch; }
.gallery-empty :where(p) { margin-inline: auto; }
.gallery-empty__art { width: 96px; height: 96px; color: var(--c-ink); }
.gallery-empty__fill { fill: var(--c-white); }
.gallery-empty__fill--top { fill: var(--c-tint); }
.gallery-empty__cherry { fill: var(--c-brand); }
.gallery-empty__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-2);
}

.gallery-noscript {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  max-width: none;
  margin-top: var(--s-5);
  padding: 14px 16px;
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: var(--r-sm);
  background: var(--c-butter);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}
.gallery-noscript > svg { margin-top: 1px; }

/* ==========================================================================
   6. Lightbox (5.3): ramka zdjęcia liczona od wysokości okna, bez kadrowania
   ========================================================================== */

.lightbox {
  width: min(100% - 32px, 1080px);
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: var(--s-4);
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: var(--r-lg);
  background: var(--c-bg);
  color: var(--c-ink);
  box-shadow: var(--sh-lift);
  overflow: auto;
  overscroll-behavior: contain;
}
.lightbox::backdrop { background: var(--c-backdrop); }
html:has(.lightbox[open]) { overflow: hidden; }

.lightbox__inner { display: grid; gap: var(--s-4); }
.lightbox__figure {
  --photo-r: var(--r-md);
  width: min(100%, calc(80vh * .75));
  margin: 0 auto;
}
.lightbox__figure img.lightbox__img { aspect-ratio: 3 / 4; }

.lightbox__close { position: absolute; top: var(--s-3); right: var(--s-3); z-index: 4; }

.lightbox__caption { display: grid; gap: var(--s-3); align-content: start; }
.lightbox__kicker { justify-content: flex-start; }
.lightbox__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 800;
  font-stretch: 90%;
  letter-spacing: 0;
  text-transform: none;
  padding-right: 52px;
}
.lightbox__meta { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--c-muted); }
.lightbox__desc { font-size: var(--fs-small); line-height: var(--lh-small); }
.lightbox__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-1); }
.lightbox__actions .btn { flex: 1 1 auto; }

.lightbox__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
.lightbox__pos {
  font-family: var(--ff-display);
  font-size: var(--fs-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-muted);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .lightbox {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
  }
  .lightbox__figure { width: min(100%, calc(52vh * .75)); }
  .lightbox__title { padding-right: 0; }
  .lightbox__step { flex: 1 1 0; }
}

@media (min-width: 1024px) {
  .lightbox { padding: var(--s-6); }
  .lightbox__inner {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: center;
    gap: var(--s-6);
  }
  .lightbox__caption { padding-top: var(--s-6); }
}

/* ==========================================================================
   7. Ruch ograniczony, wysoki kontrast, wydruk
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .gallery-filters__caret,
  .gallery-filters__expand svg,
  .gallery-more__bar > span { transition: none; }
}

@media (forced-colors: active) {
  .gallery-filters__select { background-image: none; -webkit-appearance: menulist; appearance: auto; }
  .gallery-more__bar > span { background: CanvasText; }
}

@media print {
  .gallery-hero__deco,
  .gallery-filters,
  .gallery-more,
  .gallery-filters__expand,
  .card-cake__zoom,
  .card-cake__cta { display: none !important; }
}