@font-face{font-family:"Kalam";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/kalam-latin-ext-400-normal.woff2") format("woff2")}
@font-face{font-family:"Kalam";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/kalam-latin-ext-700-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/montserrat-latin-ext-400-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/montserrat-latin-ext-500-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/montserrat-latin-ext-600-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/montserrat-latin-ext-700-normal.woff2") format("woff2")}

:root { --ks-nav-height:82px; --ks-pad:clamp(20px,3vw,56px); }
html { max-width:100%; overflow-x:hidden; scroll-behavior:smooth; }
body.ks-portfolio-active {
    margin:0!important;
    overflow-x:hidden;
    background:#08080c;
}
body.ks-portfolio-active .site-header,
body.ks-portfolio-active .site-footer,
body.ks-portfolio-active .wp-site-blocks > header,
body.ks-portfolio-active .wp-site-blocks > footer,
body.ks-portfolio-active header.wp-block-template-part,
body.ks-portfolio-active footer.wp-block-template-part { display:none!important; }
body.ks-portfolio-active .site,
body.ks-portfolio-active .site-content,
body.ks-portfolio-active .content-area,
body.ks-portfolio-active .site-main,
body.ks-portfolio-active .entry-content,
body.ks-portfolio-active .wp-site-blocks,
body.ks-portfolio-active .wp-block-post-content,
body.ks-portfolio-active main { width:100%!important; max-width:none!important; margin:0!important; padding:0!important; }
body.ks-portfolio-active .entry-header,
body.ks-portfolio-active .wp-block-post-title { display:none!important; }
body.ks-portfolio-active .wp-block-shortcode {
    position:relative!important;
    left:0!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
}
body.ks-portfolio-active .entry-content,
body.ks-portfolio-active .wp-block-post-content,
body.ks-portfolio-active .wp-block-shortcode,
body.ks-portfolio-active main { overflow:visible!important; }
body.admin-bar.ks-portfolio-active .ks-nav { top:32px; }

.ks-portfolio-page,.ks-portfolio-page *,.ks-portfolio-page *::before,.ks-portfolio-page *::after { box-sizing:border-box; }
.ks-portfolio-page { position:relative; width:100%; max-width:100%!important; min-height:100vh; margin:0; overflow-x:clip; color:#fff; background:#08080c; font-family:"Montserrat",Arial,sans-serif; }
.ks-portfolio-page a { color:inherit; text-decoration:none; }
.ks-nav { position:fixed; z-index:1000; top:0; left:0; display:flex; width:100%; min-height:var(--ks-nav-height); padding:14px var(--ks-pad); align-items:center; justify-content:space-between; gap:28px; background:linear-gradient(to bottom,rgba(0,0,0,.78),rgba(0,0,0,.18) 72%,transparent); pointer-events:none; }
.ks-logo,.ks-menu { pointer-events:auto; }
.ks-logo { font-family:"Kalam","Segoe Print",cursive; font-size:clamp(19px,2vw,31px); font-weight:700; line-height:1; white-space:nowrap; text-shadow:0 2px 14px rgba(0,0,0,.82); }
.ks-menu { display:flex; align-items:center; justify-content:flex-end; gap:clamp(20px,2.6vw,42px); margin:0; padding:0; list-style:none; }
.ks-menu a { position:relative; padding:8px 0; font-family:"Kalam","Segoe Print",cursive; font-size:clamp(18px,1.65vw,28px); font-weight:700; line-height:1; text-shadow:0 2px 12px rgba(0,0,0,.9); }
.ks-menu a::after { content:""; position:absolute; right:0; bottom:2px; left:0; height:2px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform 180ms ease; }
.ks-menu a:hover::after,.ks-menu a:focus-visible::after,.ks-menu a[aria-current="page"]::after { transform:scaleX(1); transform-origin:left; }

.ks-portfolio-hero { position:relative; display:grid; min-height:min(72svh,760px); padding:calc(var(--ks-nav-height) + 70px) var(--ks-pad) 80px; place-items:end start; overflow:hidden; background:#080808; isolation:isolate; }
.ks-portfolio-hero::before { content:""; position:absolute; z-index:-2; inset:-5%; background-image:var(--ks-hero-image); background-size:cover; background-position:center; transform:scale(1.08); }
.ks-portfolio-hero::after {
    content:"";
    position:absolute;
    z-index:-1;
    right:0;
    bottom:0;
    left:0;
    height:clamp(130px,20svh,230px);
    pointer-events:none;
    background:linear-gradient(
        180deg,
        rgba(8,8,11,0) 0%,
        rgba(8,8,11,.08) 24%,
        rgba(8,8,11,.34) 50%,
        rgba(8,8,11,.76) 78%,
        #08080b 100%
    );
}
.ks-portfolio-hero-inner { width:min(960px,100%); padding-bottom:clamp(4px,1vw,14px); }
.ks-eyebrow { display:inline-block; margin-bottom:14px; color:rgba(255,255,255,.64); font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.ks-portfolio-hero h1 { margin:0; font-family:"Kalam","Segoe Print",cursive; font-size:clamp(78px,12vw,184px); font-weight:700; line-height:.78; letter-spacing:-.055em; text-shadow:0 3px 8px rgba(0,0,0,.95),0 8px 30px rgba(0,0,0,.78); }

.ks-portfolio-main {
    --ks-hero-overlap:88px;
    --ks-filter-inset:14px;
    position:relative;
    isolation:isolate;
    /* overflow:hidden tworzył kontener przewijania i blokował sticky. Clip
       usuwa poziomy wyciek bez odbierania paskowi możliwości podążania za stroną. */
    overflow-x:clip;
    overflow-y:visible;
    margin-top:calc(-1 * var(--ks-hero-overlap));
    padding-top:var(--ks-filter-inset);
    padding-bottom:110px;
    background:transparent;
}
.ks-portfolio-main::before {
    content:"";
    position:absolute;
    z-index:0;
    top:var(--ks-hero-overlap);
    right:0;
    bottom:0;
    left:0;
    pointer-events:none;
    background:
        /* Zdjęcie hero kończy się na #08080b. Ta warstwa utrzymuje ten sam
           kolor na początku galerii i dopiero niżej płynnie odsłania fiolet,
           dzięki czemu nie powstaje ostre czarno-fioletowe odcięcie. */
        linear-gradient(180deg,#08080b 0%,rgba(8,8,11,.98) 18%,rgba(8,8,11,.9) 36%,rgba(8,8,11,.62) 58%,rgba(8,8,11,.24) 80%,rgba(8,8,11,0) 100%),
        linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
        radial-gradient(ellipse 72% 42% at 8% 4%,rgba(125,72,170,.32) 0%,rgba(74,42,103,.17) 36%,transparent 70%),
        radial-gradient(ellipse 66% 48% at 94% 34%,rgba(34,111,145,.25) 0%,rgba(21,64,83,.13) 40%,transparent 72%),
        radial-gradient(ellipse 54% 38% at 58% 88%,rgba(104,55,116,.15) 0%,transparent 70%),
        linear-gradient(180deg,#08080b 0%,#111018 38%,#0b0d13 72%,#070709 100%);
    background-size:100% clamp(220px,24vw,360px),84px 84px,84px 84px,auto,auto,auto,auto;
    background-repeat:no-repeat,repeat,repeat,no-repeat,no-repeat,no-repeat,no-repeat;
}
.ks-portfolio-main::after {
    content:"";
    position:absolute;
    z-index:0;
    width:min(760px,70vw);
    aspect-ratio:1;
    right:-22%;
    bottom:8%;
    border-radius:50%;
    background:radial-gradient(circle,rgba(71,92,168,.12) 0%,transparent 68%);
    filter:blur(12px);
    pointer-events:none;
}

.ks-anchor {
    position:absolute;
    top:0;
    scroll-margin-top:calc(var(--ks-sticky-top, var(--ks-nav-height)) + 86px);
}

/* Punkt pomiarowy pozwala JS wykryć moment przyklejenia filtrów bez szarpania layoutu. */
.ks-filter-sentinel {
    position:absolute;
    z-index:-1;
    top:var(--ks-filter-inset);
    left:0;
    width:1px;
    height:1px;
    pointer-events:none;
}

.ks-filter-placeholder {
    display:block;
    width:100%;
    height:0;
    pointer-events:none;
}

.ks-filter-shell {
    position:relative;
    z-index:900;
    padding:4px var(--ks-pad) 0;
    background:transparent;
    pointer-events:none;
    transition:top 260ms cubic-bezier(.16,1,.3,1);
}

.ks-filter-shell.is-stuck {
    position:fixed;
    top:var(--ks-sticky-top, var(--ks-nav-height));
    right:0;
    left:0;
    width:100%;
}

.ks-filter-bar {
    position:relative;
    display:flex;
    width:max-content;
    max-width:min(1120px,calc(100vw - (2 * var(--ks-pad))));
    margin:0 auto;
    padding:7px;
    align-items:center;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    border:1px solid rgba(255,255,255,.11);
    border-radius:999px;
    background:rgba(11,11,14,.78);
    box-shadow:0 10px 34px rgba(0,0,0,.22);
    -webkit-backdrop-filter:blur(18px) saturate(1.08);
    backdrop-filter:blur(18px) saturate(1.08);
    scrollbar-width:none;
    pointer-events:auto;
    transition:
        background-color 260ms ease,
        border-color 260ms ease,
        box-shadow 260ms ease,
        transform 380ms cubic-bezier(.16,1,.3,1);
}
.ks-filter-bar.is-sticky-flip {
    transition:none!important;
}
.ks-filter-bar::-webkit-scrollbar { display:none; }

/* Po przyklejeniu nie zmieniamy wymiarów kontenera. Zmiana paddingu powodowała
   widoczny skok w chwili przejścia paska w tryb sticky. */
.ks-filter-shell.is-stuck {
    padding-top:4px;
}
.ks-filter-shell.is-stuck .ks-filter-bar {
    background:rgba(9,9,12,.94);
    border-color:rgba(255,255,255,.16);
    box-shadow:0 16px 44px rgba(0,0,0,.42),0 1px 0 rgba(255,255,255,.035) inset;
}

.ks-filter-indicator {
    position:absolute;
    z-index:0;
    top:7px;
    bottom:7px;
    left:7px;
    width:0;
    border-radius:999px;
    background:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.82);
    transform:translate3d(0,0,0);
    transition:transform 520ms cubic-bezier(.16,1,.3,1),width 420ms cubic-bezier(.16,1,.3,1);
    pointer-events:none;
}
.ks-filter-indicator.is-instant { transition:none!important; }

.ks-filter {
    position:relative;
    z-index:1;
    display:inline-flex;
    min-height:46px;
    padding:0 18px;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex:0 0 auto;
    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;
    color:rgba(255,255,255,.72);
    background:rgba(255,255,255,.018);
    font:600 12px/1 "Montserrat",Arial,sans-serif;
    letter-spacing:.07em;
    text-transform:uppercase;
    cursor:pointer;
    transition:
        color 260ms ease,
        border-color 260ms ease,
        background-color 260ms ease,
        box-shadow 260ms ease,
        transform 260ms cubic-bezier(.16,1,.3,1);
}
.ks-filter span,.ks-filter small { position:relative; z-index:1; }
.ks-filter small {
    display:grid;
    min-width:22px;
    height:22px;
    place-items:center;
    border-radius:999px;
    color:rgba(255,255,255,.72);
    background:rgba(255,255,255,.1);
    font-size:10px;
    transition:color 260ms ease,background-color 260ms ease,transform 360ms cubic-bezier(.16,1,.3,1);
}
/* Bez podnoszenia do góry — poprzedni efekt był przycinany przez poziomy scroll. */
.ks-filter:hover:not(.is-active) {
    transform:scale(1.015);
    border-color:rgba(255,255,255,.38);
    color:#fff;
    background:rgba(255,255,255,.055);
    box-shadow:0 7px 22px rgba(0,0,0,.2);
}
.ks-filter.is-active { color:#080808; border-color:transparent; background:transparent; }
.ks-filter.is-active small { color:#fff; background:#111; transform:scale(1.04); }
.ks-filter:focus-visible { outline:2px solid #fff; outline-offset:3px; }

.ks-gallery-section {
    position:relative;
    z-index:1;
    width:min(1500px,100%);
    margin:0 auto;
    padding:clamp(42px,5vw,74px) var(--ks-pad) 0;
}
.ks-gallery-stage { min-height:320px; transform-origin:center top; }
.ks-gallery-grid { columns:3 340px; column-gap:clamp(12px,1.5vw,22px); }
.ks-shot { position:relative; display:inline-block; vertical-align:top; width:100%; margin:0 0 clamp(12px,1.5vw,22px); padding:0; -webkit-column-break-inside:avoid; page-break-inside:avoid; break-inside:avoid; overflow:hidden; border:1px solid rgba(255,255,255,.045); border-radius:4px; color:#fff; background:#111; box-shadow:0 18px 46px rgba(0,0,0,.28); cursor:zoom-in; text-align:left; }
.ks-shot[hidden] { display:none!important; }
.ks-shot img { display:block; width:100%; height:auto; transition:transform 700ms cubic-bezier(.2,.7,.2,1),filter 320ms ease; }
.ks-shot-overlay { position:absolute; inset:0; display:flex; padding:20px; flex-direction:column; align-items:flex-start; justify-content:flex-end; opacity:0; background:none; transition:opacity 260ms ease; }
.ks-shot-overlay span { margin-bottom:6px; color:rgba(255,255,255,.82); font-size:10px; font-weight:700; letter-spacing:.15em; text-shadow:0 1px 3px #000,0 0 12px #000; text-transform:uppercase; }
.ks-shot-overlay strong { font-size:13px; letter-spacing:.04em; text-shadow:0 1px 3px #000,0 0 16px #000; }
.ks-shot:hover img,.ks-shot:focus-visible img { transform:scale(1.025); filter:saturate(1.07); }
.ks-shot:hover .ks-shot-overlay,.ks-shot:focus-visible .ks-shot-overlay { opacity:1; }
.ks-gallery-empty { padding:70px 20px; border:1px dashed rgba(255,255,255,.2); color:rgba(255,255,255,.58); text-align:center; }

.ks-portfolio-footer { display:flex; padding:34px var(--ks-pad); align-items:center; justify-content:space-between; gap:20px; border-top:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.48); background:#050505; font-size:10px; letter-spacing:.09em; text-transform:uppercase; }
.ks-portfolio-footer a { color:#fff; font-weight:700; }

.ks-lightbox { width:100vw; max-width:none; height:100svh; max-height:none; margin:0; padding:0; border:0; color:#fff; background:rgba(0,0,0,.94); }
.ks-lightbox::backdrop { background:rgba(0,0,0,.92); }
.ks-lightbox[open] { display:grid; place-items:center; animation:ksLightboxIn 180ms ease both; }
.ks-lightbox figure { display:grid; width:min(92vw,1500px); height:min(88svh,980px); margin:0; place-items:center; }
.ks-lightbox img { display:block; max-width:100%; max-height:calc(88svh - 54px); object-fit:contain; }
.ks-lightbox figcaption { min-height:34px; padding-top:14px; color:rgba(255,255,255,.58); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.ks-lightbox-close,.ks-lightbox-nav { position:fixed; z-index:2; display:grid; width:48px; height:48px; padding:0; place-items:center; border:1px solid rgba(255,255,255,.22); border-radius:999px; color:#fff; background:rgba(0,0,0,.42); backdrop-filter:blur(10px); cursor:pointer; }
.ks-lightbox-close { top:22px; right:22px; font-size:30px; }
.ks-lightbox-nav { top:50%; transform:translateY(-50%); font-size:25px; }
.ks-lightbox-prev { left:22px; }.ks-lightbox-next { right:22px; }
@keyframes ksLightboxIn { from{opacity:0} to{opacity:1} }

@media screen and (max-width:782px){body.admin-bar.ks-portfolio-active .ks-nav{top:46px}}
@media(max-width:900px){
    :root{--ks-nav-height:68px;--ks-pad:22px}
    .ks-nav{padding-top:10px;padding-bottom:10px;background:rgba(0,0,0,.67);backdrop-filter:blur(12px)}
    .ks-logo{max-width:49vw;white-space:normal;font-size:clamp(16px,4vw,22px)}
    .ks-menu{gap:13px}.ks-menu a{font-family:"Montserrat",Arial,sans-serif;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
    .ks-portfolio-hero{min-height:66svh;padding-top:calc(var(--ks-nav-height) + 65px)}
    .ks-portfolio-hero h1{font-size:clamp(72px,22vw,125px)}
    .ks-filter-shell{padding-right:12px;padding-left:12px}.ks-filter-bar{max-width:calc(100vw - 24px);margin-left:auto;margin-right:auto}
    .ks-gallery-grid{columns:2 250px}
    .ks-lightbox-nav{top:auto;bottom:18px;transform:none}.ks-lightbox-prev{left:calc(50% - 58px)}.ks-lightbox-next{right:calc(50% - 58px)}
}
@media(max-width:560px){
    .ks-nav{gap:12px;padding-right:14px;padding-left:14px}
    .ks-logo{max-width:34vw;font-size:13px;line-height:1.12}.ks-menu{gap:9px;flex:0 0 auto}.ks-menu a{font-size:8px;letter-spacing:.025em}
    .ks-portfolio-hero{min-height:74svh;padding-bottom:60px}
    .ks-portfolio-hero::before{inset:0;background-position:center 42%;transform:none}
    .ks-portfolio-hero::after{height:clamp(150px,24svh,230px)}
    .ks-portfolio-main{--ks-hero-overlap:78px;--ks-filter-inset:10px}
    .ks-filter-shell{padding-top:3px}.ks-filter-shell.is-stuck{top:var(--ks-sticky-top,var(--ks-nav-height))}.ks-filter-bar{padding:6px;gap:6px}.ks-filter-indicator{top:6px;bottom:6px;left:6px}.ks-filter{min-height:42px;padding:0 14px;font-size:10px}
    .ks-gallery-section{padding-top:52px}
    .ks-gallery-grid{columns:1}.ks-shot-overlay{opacity:1;background:none}
    .ks-portfolio-footer{align-items:flex-start;flex-direction:column}
    .ks-lightbox-close,.ks-lightbox-nav{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
    .ks-lightbox-media{touch-action:pan-y pinch-zoom}
}


/* =========================================================
   ZMIANA KATEGORII — WYRAŹNA, CLEAN ANIMACJA
   ========================================================= */
.ks-portfolio-page { --ks-direction:1; }
.ks-portfolio-page.is-filter-switching .ks-filter { pointer-events:none; }
.ks-gallery-stage { position:relative; transform-origin:center top; }
.ks-gallery-stage.is-stage-leaving {
    will-change:opacity,transform;
    animation:ksStageLeave 270ms cubic-bezier(.55,.06,.68,.19) both;
}
.ks-gallery-stage.is-stage-entering {
    will-change:opacity,transform;
    animation:ksStageEnter 720ms cubic-bezier(.16,1,.3,1) both;
}
.ks-shot.is-card-leaving {
    will-change:opacity,transform,filter;
    animation:ksCardLeave 240ms cubic-bezier(.55,.06,.68,.19) both;
    animation-delay:calc(var(--ks-stagger,0) * 10ms);
}
.ks-shot.is-card-entering {
    will-change:opacity,transform,filter;
    animation:ksCardEnter 720ms cubic-bezier(.16,1,.3,1) both;
    animation-delay:calc(var(--ks-stagger,0) * 42ms);
}
.ks-category-transition {
    position:absolute;
    z-index:95;
    top:0;
    right:0;
    left:0;
    height:3px;
    overflow:hidden;
    pointer-events:none;
}
.ks-category-transition span {
    position:absolute;
    inset:0;
    opacity:0;
    background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.22) 28%,#fff 50%,rgba(255,255,255,.22) 72%,transparent 100%);
    transform:translate3d(calc(var(--ks-direction) * -110%),0,0) scaleX(.55);
    filter:blur(.2px);
}
.ks-category-transition.is-running span {
    animation:ksCategorySweep 680ms cubic-bezier(.16,1,.3,1) both;
}
.ks-filter.is-click-pulse { animation:ksFilterPulse 420ms cubic-bezier(.16,1,.3,1); }

@keyframes ksCardLeave {
    from { opacity:1; transform:translate3d(0,0,0) scale(1); filter:blur(0); }
    to { opacity:0; transform:translate3d(calc(var(--ks-direction) * -34px),-8px,0) scale(.975); filter:blur(5px); }
}
@keyframes ksCardEnter {
    0% { opacity:0; transform:translate3d(calc(var(--ks-direction) * 54px),30px,0) scale(.96); filter:blur(8px); }
    58% { opacity:1; filter:blur(0); }
    100% { opacity:1; transform:translate3d(0,0,0) scale(1); filter:blur(0); }
}
@keyframes ksStageLeave {
    from { opacity:1; transform:translate3d(0,0,0); }
    to { opacity:.15; transform:translate3d(calc(var(--ks-direction) * -18px),-6px,0); }
}
@keyframes ksStageEnter {
    0% { opacity:0; transform:translate3d(calc(var(--ks-direction) * 22px),16px,0); }
    100% { opacity:1; transform:translate3d(0,0,0); }
}
@keyframes ksCategorySweep {
    0% { opacity:0; transform:translate3d(calc(var(--ks-direction) * -110%),0,0) scaleX(.5); }
    18% { opacity:1; }
    72% { opacity:.9; }
    100% { opacity:0; transform:translate3d(calc(var(--ks-direction) * 110%),0,0) scaleX(.75); }
}
@keyframes ksFilterPulse {
    0% { transform:scale(1); }
    45% { transform:scale(.96); }
    100% { transform:scale(1); }
}

@media(max-width:560px){
    .ks-shot.is-card-entering{animation-delay:calc(var(--ks-stagger,0) * 28ms)}
}


/* =========================================================
   SAFARI / WEBKIT — STABILNY TRYB RENDEROWANIA
   Safari potrafi gubić warstwy elementów animowanych wewnątrz CSS columns.
   W trybie zgodności zachowujemy płynne przejście, ale bez transformacji
   i filtrów na kartach oraz bez backdrop-filter na sticky toolbarze.
   ========================================================= */
.ks-portfolio-page.is-safari .ks-gallery-stage,
.ks-portfolio-page.is-safari .ks-shot,
.ks-portfolio-page.is-safari .ks-shot img {
    will-change:auto !important;
    -webkit-transform:none !important;
    transform:none !important;
    -webkit-filter:none !important;
    filter:none !important;
    -webkit-backface-visibility:visible;
    backface-visibility:visible;
}
.ks-portfolio-page.is-safari .ks-filter-bar,
.ks-portfolio-page.is-safari .ks-nav {
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
}
.ks-portfolio-page.is-safari .ks-filter-bar {
    background:rgba(10,10,14,.97);
}
.ks-portfolio-page.is-safari .ks-portfolio-main::before {
    -webkit-mask-image:none;
    mask-image:none;
    opacity:.12;
}
.ks-portfolio-page.is-safari .ks-portfolio-main::after {
    -webkit-filter:none;
    filter:none;
    opacity:.65;
}
.ks-portfolio-page.is-safari .ks-gallery-stage.is-stage-leaving {
    animation:ksSafariStageLeave 210ms ease both;
}
.ks-portfolio-page.is-safari .ks-gallery-stage.is-stage-entering {
    animation:ksSafariStageEnter 460ms cubic-bezier(.16,1,.3,1) both;
}
.ks-portfolio-page.is-safari .ks-shot.is-card-leaving {
    animation:ksSafariCardLeave 180ms ease both;
    animation-delay:calc(var(--ks-stagger,0) * 6ms);
}
.ks-portfolio-page.is-safari .ks-shot.is-card-entering {
    animation:ksSafariCardEnter 430ms cubic-bezier(.16,1,.3,1) both;
    animation-delay:calc(var(--ks-stagger,0) * 22ms);
}
.ks-portfolio-page.is-safari .ks-shot:hover img,
.ks-portfolio-page.is-safari .ks-shot:focus-visible img {
    -webkit-transform:none !important;
    transform:none !important;
    -webkit-filter:none !important;
    filter:none !important;
}
@keyframes ksSafariCardLeave {
    from { opacity:1; }
    to { opacity:0; }
}
@keyframes ksSafariCardEnter {
    from { opacity:0; }
    to { opacity:1; }
}
@keyframes ksSafariStageLeave {
    from { opacity:1; }
    to { opacity:.18; }
}
@keyframes ksSafariStageEnter {
    from { opacity:0; }
    to { opacity:1; }
}

/* =========================================================
   OPISY ZDJĘĆ W LIGHTBOXIE — 1.2.0
   ========================================================= */
.ks-lightbox figcaption {
    display:block;
    width:min(92vw,900px);
    min-height:34px;
    padding:14px 20px 0;
    text-align:center;
}
.ks-lightbox-label {
    display:block;
    color:rgba(255,255,255,.56);
    font-size:10px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}
.ks-lightbox-description {
    max-width:760px;
    margin:8px auto 0;
    color:rgba(255,255,255,.86);
    font-size:clamp(13px,1.1vw,16px);
    font-weight:400;
    line-height:1.55;
    letter-spacing:0;
    text-transform:none;
    white-space:pre-line;
}
.ks-lightbox-description[hidden] { display:none; }
.ks-lightbox figure { grid-template-rows:minmax(0,1fr) auto; }
.ks-lightbox img { max-height:100%; }

/* =========================================================
   KRÓTKIE OPISY W SIATCE — 1.3.0
   ========================================================= */
.ks-shot-overlay {
    pointer-events:none;
}
.ks-shot.has-short-description .ks-shot-overlay {
    opacity:1;
    background:none;
}
.ks-shot-label {
    display:block;
}
.ks-shot-short-description {
    display:-webkit-box;
    max-width:95%;
    overflow:hidden;
    color:#fff;
    font-size:clamp(13px,1vw,16px);
    font-weight:600;
    line-height:1.35;
    letter-spacing:0;
    text-transform:none;
    text-shadow:0 2px 14px rgba(0,0,0,.75);
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}
.ks-shot-open-label {
    font-size:13px;
    letter-spacing:.04em;
}
.ks-shot.has-short-description:hover .ks-shot-overlay,
.ks-shot.has-short-description:focus-visible .ks-shot-overlay {
    background:none;
}

/* =========================================================
   LIGHTBOX — NOWE STEROWANIE I ANIMACJE 1.3.1
   ========================================================= */
.ks-lightbox {
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 50%,rgba(31,31,38,.42),transparent 56%),
        rgba(2,2,3,.965);
}
.ks-lightbox[open] {
    grid-template-columns:1fr;
}
.ks-lightbox figure {
    width:min(92vw,1600px);
    height:min(92svh,1040px);
    padding:28px 74px 22px;
    grid-template-rows:minmax(0,1fr) auto;
}
.ks-lightbox-media {
    position:relative;
    display:grid;
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    max-width:100%;
    max-height:100%;
    place-items:center;
    overflow:hidden;
    isolation:isolate;
    contain:layout paint;
    transform-origin:center;
}
.ks-lightbox-media img {
    display:block;
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    object-position:center center;
    -webkit-user-drag:none;
    -webkit-user-select:none;
    user-select:none;
}
.ks-lightbox-media.is-lightbox-loading::after {
    content:"";
    position:absolute;
    right:18px;
    bottom:18px;
    width:24px;
    height:24px;
    border:2px solid rgba(255,255,255,.22);
    border-top-color:#fff;
    border-radius:999px;
    animation:ksLightboxSpin .75s linear infinite;
}
.ks-lightbox figcaption {
    position:relative;
    width:min(92vw,900px);
    min-height:64px;
    padding:16px 64px 0;
}
.ks-lightbox-short-description {
    display:block;
    max-width:760px;
    margin:7px auto 0;
    color:#fff;
    font-size:clamp(15px,1.25vw,19px);
    font-weight:600;
    line-height:1.35;
    letter-spacing:0;
    text-transform:none;
}
.ks-lightbox-short-description[hidden] {
    display:none;
}
.ks-lightbox-description {
    margin-top:9px;
}
.ks-lightbox-counter {
    position:absolute;
    top:17px;
    right:0;
    color:rgba(255,255,255,.52);
    font-size:10px;
    font-weight:700;
    letter-spacing:.12em;
}
.ks-lightbox-close,
.ks-lightbox-nav {
    width:58px;
    height:58px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(13,13,17,.66);
    box-shadow:0 12px 34px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.08);
    -webkit-backdrop-filter:blur(16px) saturate(1.08);
    backdrop-filter:blur(16px) saturate(1.08);
    transition:
        transform 220ms cubic-bezier(.16,1,.3,1),
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 220ms ease;
}
.ks-lightbox-close svg,
.ks-lightbox-nav svg {
    width:25px;
    height:25px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.ks-lightbox-close {
    top:24px;
    right:24px;
}
.ks-lightbox-close:hover,
.ks-lightbox-close:focus-visible {
    transform:rotate(4deg) scale(1.06);
    border-color:rgba(255,255,255,.46);
    background:rgba(35,35,42,.78);
}
.ks-lightbox-nav {
    top:50%;
    transform:translateY(-50%);
}
.ks-lightbox-prev {
    left:26px;
}
.ks-lightbox-next {
    right:26px;
}
.ks-lightbox-prev:hover,
.ks-lightbox-prev:focus-visible {
    transform:translateY(-50%) translateX(-4px) scale(1.055);
}
.ks-lightbox-next:hover,
.ks-lightbox-next:focus-visible {
    transform:translateY(-50%) translateX(4px) scale(1.055);
}
.ks-lightbox-close:focus-visible,
.ks-lightbox-nav:focus-visible {
    outline:2px solid #fff;
    outline-offset:4px;
}
.ks-lightbox-nav[hidden] {
    display:none!important;
}

.ks-lightbox-media.is-lightbox-leaving-forward {
    animation:ksLightboxLeaveForward 190ms cubic-bezier(.55,.06,.68,.19) both;
}
.ks-lightbox-media.is-lightbox-leaving-backward {
    animation:ksLightboxLeaveBackward 190ms cubic-bezier(.55,.06,.68,.19) both;
}
.ks-lightbox-media.is-lightbox-entering-forward {
    animation:ksLightboxEnterForward 420ms cubic-bezier(.16,1,.3,1) both;
}
.ks-lightbox-media.is-lightbox-entering-backward {
    animation:ksLightboxEnterBackward 420ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes ksLightboxLeaveForward {
    from { opacity:1; transform:translate3d(0,0,0) scale(1); }
    to { opacity:0; transform:translate3d(-38px,0,0) scale(.985); }
}
@keyframes ksLightboxLeaveBackward {
    from { opacity:1; transform:translate3d(0,0,0) scale(1); }
    to { opacity:0; transform:translate3d(38px,0,0) scale(.985); }
}
@keyframes ksLightboxEnterForward {
    from { opacity:0; transform:translate3d(46px,0,0) scale(.985); }
    to { opacity:1; transform:translate3d(0,0,0) scale(1); }
}
@keyframes ksLightboxEnterBackward {
    from { opacity:0; transform:translate3d(-46px,0,0) scale(.985); }
    to { opacity:1; transform:translate3d(0,0,0) scale(1); }
}
@keyframes ksLightboxSpin {
    to { transform:rotate(360deg); }
}

/* 1.3.1 — niezawodne przejścia lightboxa i pełne kadrowanie pionowych zdjęć. */
.ks-lightbox-media.is-lightbox-opening {
    animation:ksLightboxOpenMedia 420ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes ksLightboxOpenMedia {
    from { opacity:0; transform:translateY(10px) scale(.975); }
    to { opacity:1; transform:none; }
}
.ks-portfolio-page.is-safari .ks-lightbox-media.is-lightbox-opening {
    animation:ksSafariLightboxEnter 300ms ease both;
}

/* Safari: bez filtrów i bez trwałych warstw GPU. Animacja lightboxa to stabilny fade. */
.ks-portfolio-page.is-safari .ks-lightbox-close,
.ks-portfolio-page.is-safari .ks-lightbox-nav {
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    background:rgba(16,16,20,.96);
}
.ks-portfolio-page.is-safari .ks-lightbox-media,
.ks-portfolio-page.is-safari .ks-lightbox-media img {
    will-change:auto!important;
    -webkit-filter:none!important;
    filter:none!important;
    -webkit-backface-visibility:visible;
    backface-visibility:visible;
}
.ks-portfolio-page.is-safari .ks-lightbox-media.is-lightbox-leaving-forward,
.ks-portfolio-page.is-safari .ks-lightbox-media.is-lightbox-leaving-backward {
    animation:ksSafariLightboxLeave 150ms ease both;
}
.ks-portfolio-page.is-safari .ks-lightbox-media.is-lightbox-entering-forward,
.ks-portfolio-page.is-safari .ks-lightbox-media.is-lightbox-entering-backward {
    animation:ksSafariLightboxEnter 250ms ease both;
}
@keyframes ksSafariLightboxLeave {
    from { opacity:1; }
    to { opacity:0; }
}
@keyframes ksSafariLightboxEnter {
    from { opacity:0; }
    to { opacity:1; }
}

@media(max-width:900px) {
    .ks-lightbox figure {
        width:100vw;
        height:100svh;
        padding:70px 18px 102px;
    }
    .ks-lightbox figcaption {
        width:min(100%,760px);
        padding:14px 44px 0;
    }
    .ks-lightbox-close {
        top:14px;
        right:14px;
        width:50px;
        height:50px;
    }
    .ks-lightbox-nav {
        top:auto;
        bottom:20px;
        width:54px;
        height:54px;
        transform:none;
    }
    .ks-lightbox-prev {
        left:calc(50% - 66px);
    }
    .ks-lightbox-next {
        right:calc(50% - 66px);
    }
    .ks-lightbox-prev:hover,
    .ks-lightbox-prev:focus-visible {
        transform:translateX(-3px) scale(1.04);
    }
    .ks-lightbox-next:hover,
    .ks-lightbox-next:focus-visible {
        transform:translateX(3px) scale(1.04);
    }
    .ks-lightbox-counter {
        position:static;
        display:block;
        margin-top:11px;
        text-align:center;
    }
}

@media(max-width:560px) {
    .ks-shot-overlay {
        padding:18px;
    }
    .ks-shot-short-description {
        font-size:14px;
    }
    .ks-lightbox figure {
        padding:68px 12px 96px;
    }
    .ks-lightbox figcaption {
        padding-right:10px;
        padding-left:10px;
    }
    .ks-lightbox-description {
        font-size:13px;
        line-height:1.48;
    }
}

@media(prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    .ks-portfolio-page *,
    .ks-portfolio-page *::before,
    .ks-portfolio-page *::after {
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
        scroll-behavior:auto!important;
    }
    .ks-lightbox-media,
    .ks-lightbox-close,
    .ks-lightbox-nav {
        animation:none!important;
        transition:none!important;
    }
}

/* =========================================================
   1.3.2 — widoczne, dwuwarstwowe animacje lightboxa
   ========================================================= */
.ks-lightbox-media.is-lightbox-animating {
    isolation:isolate;
}
.ks-lightbox-transition-image {
    display:block;
    -webkit-user-drag:none;
    -webkit-user-select:none;
    user-select:none;
}
/* Safari dostaje tylko opacity: bez filtrów i bez wymuszania stałej warstwy GPU. */
.ks-portfolio-page.is-safari .ks-lightbox-transition-image {
    -webkit-filter:none!important;
    filter:none!important;
    -webkit-backface-visibility:visible;
    backface-visibility:visible;
}


/* =========================================================
   1.3.3 — niezawodna animacja strzałek w lightboxie
   ========================================================= */
.ks-lightbox-media.is-lightbox-animating {
    isolation:isolate;
}
.ks-lightbox-media > .ks-lightbox-transition-image {
    position:absolute!important;
    inset:0!important;
    z-index:3;
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
    pointer-events:none!important;
    -webkit-user-drag:none;
    -webkit-user-select:none;
    user-select:none;
}
.ks-lightbox-media > .ks-lightbox-transition-image--outgoing { z-index:2; }
.ks-lightbox-media > .ks-lightbox-transition-image--incoming { z-index:3; }

/* Ustawienie systemowe "ogranicz ruch" nie wyłącza całkowicie zmiany zdjęcia.
   Zostaje krótki fade bez przesuwania. */
@media(prefers-reduced-motion:reduce) {
    .ks-lightbox-transition-image {
        transition:none!important;
    }
}


/* =========================================================
   1.3.4 — czyste przejście bez podwójnej ekspozycji
   ========================================================= */
.ks-lightbox-media.is-lightbox-animating > [data-lightbox-image] {
    position:relative;
    z-index:3;
}
.ks-lightbox-media.is-lightbox-animating > .ks-lightbox-transition-image {
    display:none!important;
}


/* =========================================================
   1.3.5 — stabilny slide karuzeli w lightboxie
   ========================================================= */
.ks-lightbox-media.is-lightbox-sliding {
    overflow:hidden;
    isolation:isolate;
}
.ks-lightbox-slide-track {
    position:absolute;
    z-index:6;
    inset:0;
    display:flex;
    width:200%;
    height:100%;
    min-width:200%;
    max-width:none;
    pointer-events:none;
    transform:translate3d(0,0,0);
    will-change:transform;
    backface-visibility:hidden;
}
.ks-lightbox-slide {
    position:relative;
    display:grid;
    flex:0 0 50%;
    width:50%;
    min-width:50%;
    height:100%;
    min-height:0;
    place-items:center;
    overflow:hidden;
    background:transparent;
}
.ks-lightbox-slide-image {
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    pointer-events:none!important;
    -webkit-user-drag:none;
    -webkit-user-select:none;
    user-select:none;
}
.ks-lightbox-media.is-lightbox-sliding > [data-lightbox-image] {
    visibility:hidden;
}

/* Safari/iOS: tymczasowa warstwa GPU istnieje wyłącznie podczas slide'a
   i jest natychmiast usuwana po zakończeniu przejścia. */
.ks-portfolio-page.is-safari .ks-lightbox-slide-track {
    will-change:transform;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}
.ks-portfolio-page.is-safari .ks-lightbox-slide-image {
    -webkit-transform:none!important;
    transform:none!important;
    -webkit-filter:none!important;
    filter:none!important;
}

@media(max-width:560px) {
    .ks-lightbox-slide-track {
        /* Krótszy czas jest ustawiany w JS; geometria zostaje identyczna,
           dzięki czemu nie pojawia się zmiana kadrowania na telefonach. */
        touch-action:none;
    }
}

/* =========================================================
   1.3.6 — spokojny micro-slide w lightboxie
   ========================================================= */
.ks-lightbox-media.is-lightbox-micro-slide {
    overflow:hidden;
    isolation:isolate;
}
.ks-lightbox-media.is-lightbox-micro-slide > [data-lightbox-image] {
    position:relative;
    z-index:2;
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
    -webkit-user-drag:none;
    user-select:none;
}
.ks-portfolio-page.is-safari .ks-lightbox-media.is-lightbox-micro-slide,
.ks-portfolio-page.is-safari .ks-lightbox-media.is-lightbox-micro-slide > [data-lightbox-image] {
    will-change:auto!important;
    -webkit-filter:none!important;
    filter:none!important;
    -webkit-backface-visibility:visible;
    backface-visibility:visible;
}


/* =========================================================
   1.3.7 — widoczny, ale spokojny micro-slide
   ========================================================= */
.ks-lightbox-media.is-lightbox-cross-slide {
    position:relative;
    overflow:hidden;
    isolation:isolate;
}
.ks-lightbox-media.is-lightbox-cross-slide > [data-lightbox-image] {
    visibility:hidden!important;
}
.ks-lightbox-media.is-lightbox-cross-slide > .ks-lightbox-transition-image {
    display:block!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
    pointer-events:none!important;
    -webkit-user-drag:none;
    user-select:none;
    filter:none!important;
}
.ks-lightbox-media.is-lightbox-cross-slide > .ks-lightbox-transition-image--outgoing {
    z-index:2;
}
.ks-lightbox-media.is-lightbox-cross-slide > .ks-lightbox-transition-image--incoming {
    z-index:3;
}
.ks-portfolio-page.is-safari .ks-lightbox-media.is-lightbox-cross-slide > .ks-lightbox-transition-image {
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    will-change:auto!important;
}


/* =========================================================
   1.3.8 — micro-slide bez czarnego błysku
   ========================================================= */
.ks-lightbox-media.is-lightbox-cross-slide > .ks-lightbox-transition-image--incoming {
    z-index:2;
}
.ks-lightbox-media.is-lightbox-cross-slide > .ks-lightbox-transition-image--outgoing {
    z-index:3;
}
/* Tymczasowe warstwy są tworzone tylko na czas 170–240 ms. */
.ks-lightbox-media.is-lightbox-cross-slide > .ks-lightbox-transition-image {
    will-change:transform,opacity;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    transform-origin:center center;
}
.ks-portfolio-page.is-safari .ks-lightbox-media.is-lightbox-cross-slide > .ks-lightbox-transition-image {
    will-change:transform,opacity!important;
    -webkit-transform:translateZ(0);
}


/* =========================================================
   1.4.0 — czysta zmiana orientacji pozioma/pionowa
   ========================================================= */
.ks-lightbox-media.is-lightbox-orientation-swap {
    overflow:hidden;
    isolation:isolate;
}
.ks-lightbox-media.is-lightbox-orientation-swap > [data-lightbox-image] {
    will-change:opacity,transform;
}
.ks-portfolio-page.is-safari .ks-lightbox-media.is-lightbox-orientation-swap > [data-lightbox-image] {
    will-change:auto!important;
    -webkit-filter:none!important;
    filter:none!important;
}

@media(prefers-reduced-motion:reduce) {
    .ks-lightbox-media.is-lightbox-orientation-swap > [data-lightbox-image] {
        transition:none!important;
        animation:none!important;
    }
}