/* Podstrony kategorii — dokłada się do style.css (tokeny, pasek, karty, pytania, stopka, lightbox).
   Nić: jeden sznurek na pranie przeciągnięty wężykiem przez klamerki wszystkich rzędów (js/podstrona.js). */

.podstrona main{padding-top:64px}
.pasek__nav{display:flex;align-items:center;gap:clamp(12px,3vw,28px)}
.pasek__link{display:inline-flex;align-items:center;min-height:44px;color:var(--braz);font-weight:500;font-size:.95rem;text-decoration:none;border-bottom:1px solid rgba(var(--braz-rgb),.3)}
.pasek__link:hover{border-color:var(--braz)}
@media (max-width:400px){.pasek__link{display:none}}

/* ---------- Nagłówek kategorii ---------- */
.kat-hero{position:relative;max-width:var(--max);margin:0 auto;padding:clamp(22px,4vw,48px) var(--pad) clamp(30px,5vw,60px)}
.okruszki ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0 .5em;margin:0 0 clamp(18px,4vw,40px);padding:0;font-size:.92rem;color:var(--braz-jasny)}
.okruszki li+li::before{content:"/";margin-right:.5em;opacity:.55}
.okruszki a{display:inline-flex;align-items:center;min-height:44px;color:var(--braz-jasny);text-decoration:none}
.okruszki a:hover{color:var(--braz);text-decoration:underline}
.kat-hero__siatka{display:grid;gap:clamp(44px,6vw,80px);align-items:center}
.kat-hero__tekst p{font-size:clamp(1.08rem,2vw,1.3rem)}
.kat-hero__tekst h1{margin-bottom:.35em}
.kat-hero__akcje{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:1.3em}
.kat-hero__cena{color:var(--braz-jasny);font-size:.95rem}
@media (min-width:900px){
  .kat-hero__siatka{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}

/* ---------- Karta: zdjęcie na klamerce z podpisem ---------- */
.karta{
  position:relative;margin:0;
  padding:20px 7px 10px;background:var(--krem);
  box-shadow:0 1px 0 var(--len-ciemny), 0 18px 32px -22px rgba(var(--braz-rgb),.55);
  transform:rotate(var(--kat));transform-origin:50% -6px;
  cursor:zoom-in;transition:transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.karta::after{content:"";position:absolute;inset:4px;border:1px dashed rgba(var(--braz-rgb),.22);pointer-events:none}
.karta img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;background:var(--len-ciemny)}
.karta figcaption{
  padding:8px 4px 0;font-size:.82rem;line-height:1.35;color:var(--braz-jasny);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.karta:hover,.karta:focus-visible{transform:rotate(calc(var(--kat) * .25)) translateY(3px);box-shadow:0 1px 0 var(--len-ciemny), 0 26px 40px -24px rgba(var(--braz-rgb),.6)}
.karta:focus-visible{outline:3px solid var(--szalwia);outline-offset:4px}
.karta--duza{width:min(100%,420px);justify-self:center;padding:24px 9px 12px}
.karta--duza .klamerka{top:-18px;width:17px;height:42px;margin-left:-8.5px}

/* ---------- Galeria ---------- */
.kat-galeria{max-width:var(--max);margin:0 auto;padding:clamp(40px,6vw,70px) var(--pad) clamp(40px,6vw,80px)}
.tablica{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(14px,3vw,40px);row-gap:clamp(58px,7vw,96px)}
.tablica .karta:nth-child(3n+2){margin-top:14px}
.tablica .karta:nth-child(3n){margin-top:6px}
@media (min-width:700px){.tablica{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.tablica{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1900px){.kat-galeria,.kat-hero{max-width:1760px}.tablica{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* Zawieszanie: karta pojawia się, gdy nić dojdzie do jej klamerki (klasa z JS). Bez JS / mniej ruchu — widać od razu. */
.js .tablica .karta:not(.zawieszona){opacity:0}
.karta.zawieszona{animation:zawies 1s cubic-bezier(.3,.7,.3,1) both}
@keyframes zawies{
  0%{opacity:0;transform:translateY(-16px) rotate(calc(var(--kat) * -2.5))}
  35%{opacity:1;transform:translateY(0) rotate(calc(var(--kat) * 2.4))}
  65%{transform:rotate(calc(var(--kat) * .3))}
  85%{transform:rotate(calc(var(--kat) * 1.2))}
  100%{opacity:1;transform:rotate(var(--kat))}
}

/* ---------- Jak zamówić (krótko) ---------- */
.kat-zamow{max-width:none;text-align:center}
.kat-zamow::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--krem)}
.kat-zamow h2{margin-bottom:.6em}
.kat-zamow__kroki{list-style:none;counter-reset:k;display:flex;flex-wrap:wrap;justify-content:center;gap:16px 36px;max-width:980px;margin:0 auto clamp(28px,4vw,40px);padding:0}
.kat-zamow__kroki li{counter-increment:k;display:flex;align-items:center;gap:12px;font-size:1.05rem;text-align:left}
.kat-zamow__kroki li::before{
  content:counter(k);flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  font-family:var(--display);font-size:1.45rem;background:var(--len);border:1px solid var(--len-ciemny);
}
.kat-zamow__kroki strong{font-weight:600}

/* ---------- Zobacz też: papierowe metki ---------- */
.kat-inne h2{margin-bottom:.9em}
.metki{list-style:none;margin:0;padding:18px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 16px}
@media (min-width:700px){.metki{grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 24px}}
@media (min-width:1300px){.metki{grid-template-columns:repeat(8,minmax(0,1fr))}}
.metka{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;
  padding:28px 10px 14px;background:var(--krem);color:var(--braz);text-decoration:none;border-radius:3px;
  box-shadow:0 1px 0 var(--len-ciemny), 0 14px 26px -20px rgba(var(--braz-rgb),.45);
  transform:rotate(-1.4deg);transform-origin:50% 0;transition:transform .45s cubic-bezier(.34,1.56,.64,1);
}
.metki li:nth-child(even) .metka{transform:rotate(1.2deg)}
.metka::before{content:"";position:absolute;top:9px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--len);box-shadow:inset 0 0 0 1.5px var(--len-ciemny)}
.metka:hover,.metka:focus-visible,.metki li:nth-child(even) .metka:hover{transform:rotate(0) translateY(3px)}
.metka:focus-visible{outline:3px solid var(--szalwia);outline-offset:3px}
.metka__foto img{width:100%;max-width:130px;aspect-ratio:3/4;object-fit:cover;background:var(--len-ciemny)}
.metka__nazwa{font-family:var(--display);font-size:1.3rem;line-height:1.1;text-align:center}

/* ---------- Lightbox: strzałki ---------- */
.lightbox__strzalka{
  position:absolute;top:40%;z-index:2;width:48px;height:48px;border-radius:50%;border:0;
  background:rgba(251,244,232,.92);color:var(--braz);font-size:34px;line-height:1;cursor:pointer;
  box-shadow:0 4px 12px -4px rgba(var(--braz-rgb),.4);
}
.lightbox__strzalka--wstecz{left:8px}
.lightbox__strzalka--dalej{right:8px}
.lightbox__strzalka:focus-visible,.lightbox__zamknij:focus-visible{outline:3px solid var(--szalwia)}

@media (prefers-reduced-motion:reduce){
  .js .tablica .karta:not(.zawieszona){opacity:1}
  .karta,.metka{transition:none}
  .karta.zawieszona{animation:none}
}