/* Blok „Slider” – sześć trybów. Zmienne motywu: --ink, --ink-2, --line, --cream, --cream-dim, --gold, --yellow, --crimson, --paper, --r */
.blk-slider{--sl-gap:clamp(12px,2vw,22px);--sl-acc:var(--gold);--sl-ease:cubic-bezier(.22,.8,.2,1)}
.blk-slider.sl-bg-ink2{background:var(--ink-2)}
.blk-slider.sl-bg-paper{background:var(--paper);color:var(--paper-ink)}
.blk-slider.sl-bg-paper .lead,.blk-slider.sl-bg-paper .sl-counter{color:color-mix(in srgb,var(--paper-ink) 70%,transparent)}
.blk-slider.sl-bg-paper h2 .it{color:color-mix(in srgb,var(--gold) 70%,#000)}
.sl-head{margin-bottom:clamp(28px,4vw,48px)}
.sl-head .lead{margin-top:18px;color:var(--cream-dim)}

.sl{position:relative}
.sl [hidden]{display:none!important}
.sl-viewport{position:relative}
.sl-track{list-style:none;margin:0;padding:0}
.sl-slide{position:relative;min-width:0}
.sl-acc-yellow{--sl-acc:var(--yellow)}
.sl-acc-crimson{--sl-acc:var(--crimson)}
.sl-acc-cream{--sl-acc:var(--cream)}

/* ---------- karta: przód, tył, obrót ---------- */
.sl-card{position:relative;width:100%;aspect-ratio:var(--sl-aspect);transform-style:preserve-3d;transition:transform .8s var(--sl-ease)}
.sl-slide.is-flipped .sl-card{transform:rotateY(180deg)}
.sl-face{position:absolute;inset:0;border-radius:var(--r);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--ink-2)}
.sl-back{transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:center;gap:12px;padding:clamp(18px,4%,34px);
  background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--sl-acc) 26%,transparent),transparent 60%),var(--ink-2);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--sl-acc) 55%,transparent)}
.sl-media,.sl-img{position:absolute;inset:0;width:100%;height:100%}
.sl-img{object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.sl-noimg{background:radial-gradient(90% 70% at 30% 20%,color-mix(in srgb,var(--sl-acc) 35%,transparent),transparent 70%),var(--ink-2)}

/* podpis na zdjęciu */
.sl-cap{position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:clamp(16px,6%,30px);color:#fff;z-index:1}
.sl-cap-overlay .sl-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,6,5,calc(var(--sl-overlay) + .25)) 0%,rgba(8,6,5,var(--sl-overlay)) 38%,transparent 72%);pointer-events:none}
.sl-align-center .sl-cap,.sl-align-center .sl-back{align-items:center;text-align:center}
.sl-eyebrow{font-family:var(--body);font-weight:700;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sl-acc)}
.sl-title{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.3vw,30px);line-height:1.02;letter-spacing:-.02em;margin:0;text-wrap:balance}
.sl-title .it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;color:var(--sl-acc);font-size:1.08em}
.sl-text{margin:0;font-size:clamp(14px,1.2vw,16px);line-height:1.45;color:rgba(255,255,255,.86);max-width:38ch}
.sl-back .sl-text{color:var(--cream-dim)}
.sl-back .sl-title{color:var(--cream)}
.sl-btn{margin-top:4px;padding:10px 18px;font-size:14px}

/* podpis pod zdjęciem */
.sl-cap-below .sl-card{aspect-ratio:auto}
.sl-cap-below .sl-front{position:relative;overflow:visible;background:none;border-radius:0}
.sl-cap-below .sl-media{position:relative;aspect-ratio:var(--sl-aspect);border-radius:var(--r);overflow:hidden}
.sl-cap-below .sl-cap{position:static;padding:16px 2px 0;color:inherit}
.sl-cap-below .sl-text{color:var(--cream-dim)}
.sl-cap-below .sl-back{border-radius:var(--r);bottom:auto;aspect-ratio:var(--sl-aspect)}

/* przycisk odwrócenia */
.sl-flip{position:absolute;top:12px;right:12px;z-index:3;width:40px;height:40px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;
  color:#17110F;background:var(--sl-acc);box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .3s var(--sl-ease)}
.sl-flip svg{width:18px;height:18px}
.sl-flip:hover{transform:rotate(-30deg) scale(1.06)}
.sl-flip:focus-visible,.sl-arrow:focus-visible,.sl-dot:focus-visible,.sl-pause:focus-visible,.sl-viewport:focus-visible{outline:2px solid var(--sl-acc);outline-offset:3px}
.sl-flip-back{background:rgba(255,255,255,.12);color:var(--cream)}
.has-back .sl-front{cursor:pointer}

/* ---------- sterowanie ---------- */
.sl-ui{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:clamp(18px,3vw,28px)}
.sl-arrow,.sl-pause{width:46px;height:46px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;color:var(--cream);background:transparent;box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow .2s,color .2s,transform .2s}
.sl-arrow svg,.sl-pause svg{width:20px;height:20px}
.sl-arrow:hover,.sl-pause:hover{box-shadow:inset 0 0 0 1.5px var(--gold);color:var(--gold)}
.sl-arrow:active{transform:scale(.94)}
.sl-arrow:disabled{opacity:.3;cursor:default;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--cream)}
.sl-pause .i-play{display:none}
.sl-pause[aria-pressed="true"] .i-play{display:block}
.sl-pause[aria-pressed="true"] .i-pause{display:none}
.sl-dots{display:flex;align-items:center}
.sl-dot{width:22px;height:30px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.sl-dot i{display:block;width:8px;height:8px;border-radius:99px;background:var(--line);transition:width .35s var(--sl-ease),background .35s}
.sl-dot.is-active{width:38px}
.sl-dot.is-active i{width:28px;background:var(--gold)}
.sl-counter{font-family:var(--display);font-size:15px;letter-spacing:.06em;color:var(--cream-dim);font-variant-numeric:tabular-nums;min-width:62px;text-align:center}
.sl-counter b{color:var(--cream);font-weight:800}
.sl-bg-paper .sl-arrow,.sl-bg-paper .sl-pause{color:var(--paper-ink);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--paper-ink) 25%,transparent)}
.sl-bg-paper .sl-counter b{color:var(--paper-ink)}
.sl-progress{height:3px;margin:14px auto 0;max-width:260px;border-radius:3px;background:var(--line);overflow:hidden}
.sl-progress i{display:block;height:100%;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:0 50%}
.sl.is-running .sl-progress i{animation:slProgress var(--sl-interval) linear forwards}
.sl.is-paused .sl-progress i{animation-play-state:paused}
@keyframes slProgress{to{transform:scaleX(1)}}

/* ---------- 1. KARUZELA ---------- */
.sl--carousel .sl-viewport{margin-inline:calc(var(--sl-gap) * -.5)}
.sl--carousel .sl-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding-block:12px 40px;margin-block:-12px -40px}
.sl--carousel .sl-track::-webkit-scrollbar{display:none}
.sl--carousel .sl-slide{flex:0 0 calc(100% / var(--sl-per));padding-inline:calc(var(--sl-gap) * .5);scroll-snap-align:start}
.sl--carousel .sl-card{transition:transform .8s var(--sl-ease),box-shadow .4s}
.sl--carousel .sl-slide:not(.is-flipped):hover .sl-card{transform:translateY(-6px)}
.sl--carousel .sl-face{box-shadow:0 14px 30px rgba(0,0,0,.32)}
.sl--carousel .sl-track.is-dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}
.sl--carousel .sl-track.is-dragging .sl-slide{pointer-events:none}
@media (hover:hover) and (pointer:fine){ .sl--carousel .sl-track{cursor:grab} .sl--carousel .sl-track a,.sl--carousel .sl-track button{cursor:pointer} }
.sl--carousel .sl-ui[hidden]{display:none}
.blk-slider.is-bleed .sl--carousel .sl-track{padding-inline:max(20px,calc((100vw - 1080px) / 2));scroll-padding-inline:max(20px,calc((100vw - 1080px) / 2))}

/* ---------- 2. COVERFLOW ---------- */
.sl--coverflow{--sl-w:min(360px,62vw)}
.sl--coverflow .sl-viewport{perspective:1400px;height:calc(var(--sl-w) / (var(--sl-aspect)) + 40px);max-height:78vh;touch-action:pan-y}
.sl--coverflow .sl-track{position:relative;height:100%;transform-style:preserve-3d}
.sl--coverflow .sl-slide{position:absolute;left:50%;top:20px;width:var(--sl-w);max-height:calc(78vh - 40px);
  transform:translateX(-50%) translateX(calc(var(--o,0) * 58%)) translateZ(calc(var(--ao,0) * -220px)) rotateY(calc(var(--o,0) * -32deg));
  transition:transform .75s var(--sl-ease),opacity .6s,filter .6s;z-index:calc(10 - var(--ao,0));opacity:calc(1 - (var(--ao,0) - 2) * 1);filter:brightness(calc(1 - var(--ao,0) * .2))}
.sl--coverflow .sl-slide[data-far]{opacity:0;pointer-events:none}
.sl--coverflow .sl-slide:not(.is-active) .sl-cap{opacity:0;transform:translateY(12px)}
.sl--coverflow .sl-cap{transition:opacity .5s .2s,transform .5s .2s}
.sl--coverflow .sl-face{box-shadow:0 30px 70px rgba(0,0,0,.5)}
.sl--coverflow .sl-slide::after{content:"";position:absolute;left:6%;right:6%;top:calc(100% + 6px);height:30px;border-radius:50%;background:radial-gradient(rgba(0,0,0,.45),transparent 70%);filter:blur(6px);pointer-events:none}
.sl--coverflow:not(.is-ready) .sl-slide:not(:first-child){opacity:0}

/* ---------- 3. STOS KART ---------- */
.sl--stack{--sl-w:min(380px,72vw)}
.sl--stack .sl-viewport{height:calc(var(--sl-w) / (var(--sl-aspect)) + 60px);max-height:80vh;touch-action:pan-y}
.sl--stack .sl-track{position:relative;height:100%}
.sl--stack .sl-slide{position:absolute;left:50%;top:10px;width:var(--sl-w);max-height:calc(80vh - 60px);
  transform:translateX(-50%) translate(calc(var(--p,0) * 18px),calc(var(--p,0) * 16px)) rotate(calc(var(--p,0) * 3.5deg)) scale(calc(1 - var(--p,0) * .05));
  transition:transform .6s var(--sl-ease),filter .6s,opacity .5s;z-index:calc(20 - var(--p,0));filter:brightness(calc(1 - var(--p,0) * .14))}
.sl--stack .sl-slide[data-p="hidden"]{opacity:0;pointer-events:none}
.sl--stack .sl-slide:not(.is-active) .sl-cap,.sl--stack .sl-slide:not(.is-active) .sl-flip{opacity:0}
.sl--stack .sl-face{box-shadow:0 26px 60px rgba(0,0,0,.45)}
.sl--stack .sl-slide.is-leaving{animation:slToBack .8s var(--sl-ease) both;z-index:30}
.sl--stack .sl-slide.is-returning{animation:slFromBack .8s var(--sl-ease) both;z-index:30}
@keyframes slToBack{
  0%{transform:translateX(-50%)}
  45%{transform:translateX(calc(-50% - 95%)) rotate(-14deg) translateY(-4%)}
  100%{transform:translateX(-50%) translate(calc(var(--p,2) * 18px),calc(var(--p,2) * 16px)) rotate(calc(var(--p,2) * 3.5deg)) scale(calc(1 - var(--p,2) * .05))}
}
@keyframes slFromBack{
  0%{transform:translateX(-50%) translate(36px,32px) rotate(7deg) scale(.9)}
  50%{transform:translateX(calc(-50% + 95%)) rotate(14deg) translateY(-4%)}
  100%{transform:translateX(-50%)}
}

/* ---------- 4. WACHLARZ ---------- */
.sl--fan{--sl-w:min(300px,46vw)}
.sl--fan .sl-viewport{height:calc(var(--sl-w) / (var(--sl-aspect)) + 90px);max-height:80vh}
.sl--fan .sl-track{position:relative;height:100%}
.sl--fan .sl-slide{position:absolute;left:50%;top:40px;width:var(--sl-w);max-height:calc(80vh - 90px);transform-origin:50% 115%;
  transform:translateX(-50%) translateX(calc(var(--f,0) * min(62%, 34vw / max(var(--sl-n) - 1, 1)))) rotate(calc(var(--f,0) * 7deg)) translateY(calc(var(--af,0) * 5%));
  transition:transform .6s var(--sl-ease),filter .4s;z-index:calc(10 - var(--af,0))}
.sl--fan .sl-slide:hover,.sl--fan .sl-slide.is-active{z-index:40}
.sl--fan .sl-slide:hover{transform:translateX(-50%) translateX(calc(var(--f,0) * min(62%, 34vw / max(var(--sl-n) - 1, 1)))) rotate(calc(var(--f,0) * 5deg)) translateY(-7%)}
.sl--fan .sl-slide.is-active{transform:translateX(-50%) translateX(calc(var(--f,0) * min(62%, 34vw / max(var(--sl-n) - 1, 1)) * .4)) rotate(0deg) translateY(-6%) scale(1.06)}
.sl--fan .sl-face{box-shadow:0 22px 55px rgba(0,0,0,.5);border:3px solid color-mix(in srgb,var(--cream) 85%,transparent)}
.sl--fan .sl-slide:not(.is-active) .sl-text,.sl--fan .sl-slide:not(.is-active) .sl-btn{display:none}
.sl--fan .sl-title{font-size:clamp(17px,1.9vw,24px)}

/* ---------- 5. PRZENIKANIE (pełny ekran) ---------- */
.sl--fade .sl-viewport{aspect-ratio:var(--sl-aspect);max-height:86vh;border-radius:var(--r);overflow:hidden;background:#000;touch-action:pan-y}
.sl--fade.sl-screen .sl-viewport{aspect-ratio:auto;height:min(86vh,900px);min-height:420px}
.blk-slider.is-bleed .sl--fade .sl-viewport{border-radius:0}
.sl--fade .sl-track{position:absolute;inset:0}
.sl--fade .sl-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.1s ease,visibility 0s 1.1s}
.sl--fade .sl-slide.is-active{opacity:1;visibility:visible;transition:opacity 1.1s ease,visibility 0s}
.sl--fade .sl-card{height:100%;aspect-ratio:auto}
.sl--fade .sl-face{border-radius:0}
.sl--fade .sl-cap{padding:clamp(22px,6vw,72px);gap:14px}
.sl--fade .sl-title{font-size:clamp(30px,5.4vw,72px);max-width:16ch}
.sl--fade .sl-text{font-size:clamp(15px,1.6vw,20px);max-width:48ch}
.sl--fade .sl-slide .sl-cap > *{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .8s var(--sl-ease)}
.sl--fade .sl-slide.is-active .sl-cap > *{opacity:1;transform:none}
.sl--fade .sl-slide.is-active .sl-cap > :nth-child(2){transition-delay:.12s}
.sl--fade .sl-slide.is-active .sl-cap > :nth-child(3){transition-delay:.24s}
.sl--fade .sl-slide.is-active .sl-cap > :nth-child(4){transition-delay:.36s}
.sl--fade .sl-ui{position:absolute;right:clamp(14px,3vw,34px);bottom:clamp(14px,3vw,30px);margin:0;z-index:5;background:rgba(10,8,7,.45);backdrop-filter:blur(8px);border-radius:99px;padding:4px 6px}
.sl--fade .sl-arrow,.sl--fade .sl-pause{color:#fff;box-shadow:none;width:40px;height:40px}
.sl--fade .sl-dot i{background:rgba(255,255,255,.35)}
.sl--fade .sl-counter{color:rgba(255,255,255,.7)}
.sl--fade .sl-counter b{color:#fff}
.sl--fade .sl-progress{position:absolute;left:0;right:0;bottom:0;margin:0;max-width:none;border-radius:0;height:4px;background:rgba(255,255,255,.15);z-index:6}
.sl--fade.sl-align-center .sl-cap{inset:0;justify-content:center}
@media (min-width:861px){ .sl--fade .sl-cap{padding-bottom:clamp(80px,9vw,110px)} }
.sl-kb.sl--fade .sl-slide.is-active .sl-img{animation:slKenBurns calc(var(--sl-interval) + 3s) ease-out both}
.sl-kb.sl--fade .sl-slide:nth-child(even).is-active .sl-img{animation-name:slKenBurns2}
@keyframes slKenBurns{from{transform:scale(1.18) translate(2%,1%)}to{transform:scale(1.02) translate(0,0)}}
@keyframes slKenBurns2{from{transform:scale(1.02) translate(-1%,0)}to{transform:scale(1.16) translate(2%,-1.5%)}}
.sl-kb.sl--coverflow .sl-slide.is-active .sl-img,.sl-kb.sl--carousel .sl-slide:hover .sl-img{transform:scale(1.07);transition:transform 6s ease-out}
.sl-kb .sl-img{transition:transform 1.2s ease-out}

/* ---------- 6. SIATKA KART ---------- */
.sl--grid .sl-track{display:grid;grid-template-columns:repeat(var(--sl-per),minmax(0,1fr));gap:var(--sl-gap)}
.sl--grid .sl-face{box-shadow:0 14px 40px rgba(0,0,0,.3)}
.sl--grid .sl-slide:not(.is-flipped):hover .sl-card{transform:translateY(-6px) rotateY(-4deg)}

/* ---------- telefon ---------- */
@media (max-width:860px){
  .sl--carousel .sl-slide{flex-basis:84%}
  .sl--grid .sl-track{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sl--grid .sl-title{font-size:18px}
  .sl--grid .sl-text{display:none}
  .sl--fade .sl-ui{left:50%;right:auto;transform:translateX(-50%)}
  .sl--fade .sl-cap{padding-bottom:80px}
  .sl--fan{--sl-w:min(250px,52vw)}
  .sl-arrow{width:42px;height:42px}
}
@media (max-width:520px){
  .sl--grid .sl-track{grid-template-columns:1fr 1fr;gap:10px}
  .sl--grid .sl-cap{padding:12px}
  .sl--fan{--sl-w:52vw}
}

@media (prefers-reduced-motion: reduce){
  .sl-card,.sl-slide,.sl-img,.sl-cap > *{transition:none!important;animation:none!important}
  .sl-slide.is-flipped .sl-card{transform:none}
  .sl-slide.is-flipped .sl-front{visibility:hidden}
  .sl-back{transform:none;visibility:hidden}
  .sl-slide.is-flipped .sl-back{visibility:visible}
  .sl--carousel .sl-track{scroll-behavior:auto}
}
@media (max-width:520px){
  .sl--fade .sl-counter{display:none}
  .sl-dot{width:16px}
  .sl-dot.is-active{width:30px}
  .sl-dot.is-active i{width:20px}
  .sl--fade .sl-ui{gap:4px;padding:2px 4px;max-width:calc(100% - 20px)}
  .sl--fade .sl-arrow,.sl--fade .sl-pause{width:36px;height:36px}
}