/**
 * Strona portfolio (archive-realizacja.php) - PRZYPIETY, pelnoekranowy widok.
 *
 * Cztery rzeczy z briefu Lukasza:
 *   1. wyglada jak karuzela z glownej (rzad zrzutow, przewijany w bok),
 *   2. lewa i prawa krawedz przyciemniona - karty "wychodza z nicosci",
 *   3. strona NIE przewija sie w pionie,
 *   4. filtry kategorii na gorze, w jezyku przyciskow marki.
 */

/* Blokada pionowego przewijania. Klasa na <body> (dodaje ja portfolio-page.js
   dopiero gdy strona faktycznie ma ten layout), zeby nie ruszac globalnego
   <html> i nie psuc reszty serwisu. */
/* Pionowe przewijanie jest TERAZ NAPEDEM karuzeli (patrz portfolio-page.js),
   wiec nie wolno go blokowac. Poprzednia wersja dodawala overflow:hidden na
   <body> i przechwytywala kolko - to byl zrodlowy problem: gdy kursor byl
   poza obszarem sekcji, nie dzialalo nic, bo strona nie mogla sie przewijac
   ani zdarzenie nie trafialo do skryptu. */

.portfolio-page {
    /* SZEROKOSC KARTY deklarowana TUTAJ, nie na .portfolio-card.
       Pasek tez jej potrzebuje (liczy z niej zapas z prawej, zeby ostatnia
       karta mogla dojechac do lewej krawedzi), a zmienna ustawiona na karcie
       jest dla niego niewidoczna - czytal fallback 380px. Na mobile, gdzie
       karta ma 265px, dawalo to 85px za maly zapas i ostatnia karta
       zatrzymywala sie w polowie drogi (zmierzone).

       Drugi czlon min() ogranicza szerokosc przez dostepna WYSOKOSC: karta
       ma proporcje 285:402, wiec na niskim ekranie musi sie zmniejszyc,
       zamiast byc przycieta. */
    --card-w: min(
        clamp(230px, 26vw, 380px),
        calc((100svh - var(--nav-height, 72px) - 330px) * 285 / 402)
    );
    position: relative;
    /* Wysokosc ustawia portfolio-page.js z dlugosci paska (100svh + budzet
       przewijania). Tutaj tylko wartosc startowa na wypadek braku JS. */
    min-height: 100svh;
}

/* PRZYPIETY WIDOK - trzyma sie ekranu przez cale przewijanie sekcji.
   svh, nie vh: inaczej pasek przegladarki na telefonie zjada dol (ta sama
   pulapka co przy HUD-zie w hero). */
.portfolio-page__pin {
    position: sticky;
    top: 0;
    height: 100svh;
    padding-top: var(--nav-height, 72px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── TLO: GLEBIA ZAMIAST PLASKIEJ CZERNI ────────────────────────
   Trzy warstwy, kazda robi co innego:
     1. .portfolio-page       - gwiazdy (statyczne kropki w tle sekcji),
     2. .portfolio-page__glow - dwie duze poswiaty marki, plynace przeciwnie,
     3. ::after na glow       - winieta, zeby krawedzie kadru siadaly w cien.
   Wszystko czystym CSS, animowane wylacznie transformem i opacity - zero
   pracy dla ukladu strony, wiec nie rusza plynnosci karuzeli. */

/* Gwiazdy - ta sama technika co w niebie stopki: jedna warstwa malych
   radialnych kropek zamiast setek elementow w drzewie. */
.portfolio-page {
    background-color: #01030a;
    background-image:
        radial-gradient(1.6px 1.6px at 12% 18%, rgba(255, 255, 255, .5), transparent 60%),
        radial-gradient(1.3px 1.3px at 28% 9%, rgba(255, 255, 255, .36), transparent 60%),
        radial-gradient(1.8px 1.8px at 41% 26%, rgba(255, 255, 255, .45), transparent 60%),
        radial-gradient(1.2px 1.2px at 57% 12%, rgba(255, 255, 255, .34), transparent 60%),
        radial-gradient(1.7px 1.7px at 69% 30%, rgba(255, 255, 255, .42), transparent 60%),
        radial-gradient(1.3px 1.3px at 81% 15%, rgba(255, 255, 255, .32), transparent 60%),
        radial-gradient(1.5px 1.5px at 92% 33%, rgba(255, 255, 255, .4), transparent 60%),
        radial-gradient(1.2px 1.2px at 19% 44%, rgba(255, 255, 255, .26), transparent 60%),
        radial-gradient(1.4px 1.4px at 47% 52%, rgba(255, 255, 255, .24), transparent 60%),
        radial-gradient(1.3px 1.3px at 74% 62%, rgba(255, 255, 255, .22), transparent 60%),
        radial-gradient(1.5px 1.5px at 8% 72%, rgba(255, 255, 255, .28), transparent 60%),
        radial-gradient(1.2px 1.2px at 63% 84%, rgba(255, 255, 255, .2), transparent 60%);
}

/* fixed, nie absolute: sekcja jest teraz kilka tysiecy pikseli wysoka, wiec
   poswiata rozciagnieta na cala jej wysokosc bylaby niewidoczna. */
.portfolio-page__glow {
    position: fixed;
    /* JEDNA warstwa zamiast trzech. Pomiar na stagingu, warstwa po warstwie:
       kazdy dodatkowy pelnoekranowy gradient kosztowal ~10 ms na klatke -
       mglawica + druga mglawica + winieta na trzech elementach zbijaly
       strone do 34 FPS, mimo ze kazda z tych rzeczy osobno chodzi w 60.
       Tutaj wszystko (dwie mglawice, dwa akcenty i winieta) siedzi w JEDNYM
       tle, wiec przegladarka maluje to raz i sklada jako pojedyncza teksture. */
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        /* winieta - krawedzie kadru siadaja w cien, srodek zostaje otwarty */
        radial-gradient(ellipse 64% 60% at 50% 46%, transparent 42%, rgba(0, 2, 8, .6) 100%),
        /* akcenty - male, jasniejsze punkty swiatla */
        radial-gradient(ellipse 30% 26% at 66% 12%, rgba(232, 121, 249, .16), transparent 70%),
        radial-gradient(ellipse 28% 24% at 12% 84%, rgba(76, 29, 158, .3), transparent 70%),
        /* mglawice - duze i miekkie, czytaja sie jako swiatlo, nie jako plama */
        radial-gradient(ellipse 48% 42% at 20% 22%, rgba(204, 0, 166, .26), transparent 68%),
        radial-gradient(ellipse 44% 40% at 82% 72%, rgba(115, 56, 234, .28), transparent 68%);
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-card__scroll { animation: none; }
}

/* ── Naglowek + filtry ──────────────────────────────────────── */

.portfolio-page__head {
    position: relative;
    z-index: 2;
    flex: none;
    text-align: center;
    padding: clamp(16px, 3vh, 34px) clamp(16px, 4vw, 56px) clamp(12px, 2vh, 22px);
}

.portfolio-page__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 clamp(8px, 1.4vh, 14px);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
}

.portfolio-page__eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #35f0a0;
    box-shadow: 0 0 9px 2px rgba(53, 240, 160, .6);
    animation: hero-hint-blink 1.6s ease-in-out infinite;
}

.portfolio-page__title {
    margin: 0 0 clamp(14px, 2.4vh, 26px);
    font-family: var(--font-heading, 'Poppins'), sans-serif;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.05;
    font-size: clamp(1.9rem, 4.4vw, 3.4rem);
    color: #fff;
}

.portfolio-page__title-accent {
    background: linear-gradient(100deg, #cc00a6 0%, #a01580 35%, #7338ea 70%, #4c1d9e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.portfolio-page__filters {
    /* Poziome gesty obsluguje ten pasek, pionowe oddajemy STRONIE.
       UWAGA: musza byc wymienione OBIE osie. Samo `pan-x` znaczy dla
       przegladarki "na tym elemencie wolno przesuwac WYLACZNIE w poziomie",
       czyli dokladnie odwrotnie niz mowil ten komentarz - swipe w gore/dol
       byl ignorowany i strona stala w miejscu, gdy palec trafil w pasek
       (zmierzone 2026-09-22 na emulowanym S22: 70 machniec przesunelo
       strone o 529 px). Przy obu osiach przegladarka sama wybiera kierunek
       po pierwszym ruchu palca: w bok jedzie karuzela, w dol strona. */
    touch-action: pan-x pan-y pinch-zoom;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Pigulka filtra - sciety rog i monospace wersalikami jak .btn-cyber, tylko
   mniejsza i bez neonowej poswiaty (kilkanascie swiecacych przyciskow obok
   siebie zabiloby czytelnosc). Aktywna dostaje pelny gradient marki. */
.portfolio-chip {
    --chip-cut: 7px;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: .62rem 1.15rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .14);
    clip-path: polygon(
        var(--chip-cut) 0, 100% 0, 100% calc(100% - var(--chip-cut)),
        calc(100% - var(--chip-cut)) 100%, 0 100%, 0 var(--chip-cut)
    );
    cursor: pointer;
    transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}

.portfolio-chip.is-active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(100deg, #cc00a6 0%, #a01580 35%, #7338ea 70%, #4c1d9e 100%);
    box-shadow: 0 0 20px rgba(204, 0, 166, .32);
}

@media (hover: hover) and (pointer: fine) {
    .portfolio-chip:hover:not(.is-active) {
        color: #fff;
        border-color: rgba(204, 0, 166, .55);
        background: rgba(204, 0, 166, .1);
        transform: translateY(-2px);
    }
}

/* ── Scena z kartami ────────────────────────────────────────── */

.portfolio-page__stage {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
}

/* KARTY WYCHODZACE Z NICOSCI.
   Dwie warstwy gradientu przy krawedziach: od pelnej czerni tla do
   przezroczystosci. Karta wjezdzajaca w kadr nie pojawia sie zza ostrej
   krawedzi ekranu, tylko wynurza sie z ciemnosci. Celowo ::before/::after
   z gradientem, a NIE mask-image na pasku: maska tnie tez cienie kart i na
   Safari potrafi wylaczyc akceleracje sprzetowa przy przewijaniu. */
.portfolio-page__stage::before,
.portfolio-page__stage::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(70px, 16vw, 260px);
    z-index: 3;
    pointer-events: none;
}

/* Z lewej cien jest WEZSZY niz z prawej: pierwsza karta stoi przy tej
   krawedzi, wiec szeroka winieta zjadalaby jej poczatek. Z prawej karty
   dopiero wjezdzaja, tam pelna szerokosc ma sens. */
.portfolio-page__stage::before {
    left: 0;
    width: clamp(24px, 4vw, 70px);
    background: linear-gradient(90deg,
        #01030a 0%,
        rgba(1, 3, 10, .9) 28%,
        rgba(1, 3, 10, .5) 62%,
        rgba(1, 3, 10, 0) 100%);
}

.portfolio-page__stage::after {
    right: 0;
    background: linear-gradient(270deg,
        #01030a 0%,
        rgba(1, 3, 10, .9) 28%,
        rgba(1, 3, 10, .5) 62%,
        rgba(1, 3, 10, 0) 100%);
}

.portfolio-page__strip {
    /* Poziome gesty obsluguje ten pasek, pionowe oddajemy STRONIE.
       UWAGA: musza byc wymienione OBIE osie. Samo `pan-x` znaczy dla
       przegladarki "na tym elemencie wolno przesuwac WYLACZNIE w poziomie",
       czyli dokladnie odwrotnie niz mowil ten komentarz - swipe w gore/dol
       byl ignorowany i strona stala w miejscu, gdy palec trafil w pasek
       (zmierzone 2026-09-22 na emulowanym S22: 70 machniec przesunelo
       strone o 529 px). Przy obu osiach przegladarka sama wybiera kierunek
       po pierwszym ruchu palca: w bok jedzie karuzela, w dol strona. */
    touch-action: pan-x pan-y pinch-zoom;
    display: flex;
    align-items: center;
    /* "safe center": gdy przefiltrowany zestaw MIESCI SIE w kadrze, karty
       stoja na srodku zamiast lepic sie do lewej z pustka obok. Gdy nie
       miesci sie i pas trzeba przewijac, slowo "safe" cofa wyrownanie do
       poczatku - bez tego pierwsza karta wyjechalaby poza lewa krawedz
       i nie dalo by sie do niej dojechac. */
    justify-content: safe center;
    gap: clamp(16px, 2vw, 32px);
    width: 100%;
    height: 100%;
    /* hidden, nie auto: pasek przewija SKRYPT (scrollLeft z postepu
       przypiecia). Uzytkownik przewija strone pionowo, wiec wlasny scroll
       poziomy paska tylko by z tym walczyl. */
    overflow: hidden;
    /* START OD LEWEJ KRAWEDZI (prosba usera: "nie chce, zeby z lewej strony
       bylo puste - pierwszy ma byc przy krawedzi").
       Poprzednio wciecie bylo liczone jako pol ekranu minus pol karty, zeby
       pierwsza karta mogla stanac na SRODKU - stad pusty pas z lewej na
       starcie. Teraz z lewej jest zwykly margines tresci, a karty przyciagaja
       sie lewa krawedzia (scroll-snap-align: start nizej).
       Oba wciecia sa TAKIE SAME. */
    padding-left: clamp(20px, 5vw, 80px);
    /* Bylo tu "calc(100% - szerokosc karty)", czyli zapas na caly kadr minus
       jedna karta - po to, zeby OSTATNIA karta mogla dojechac do lewej
       krawedzi. Skutek uboczny byl gorszy niz zysk: na koncu przejazdu
       zostawala jedna karta z lewej i pusty ekran obok (zmierzone: 1039 px
       pustki przy kadrze 1265 px). Przy filtrze na kilka kart przewijalo sie
       glownie przez ten padding.
       Teraz pas konczy sie ostatnia karta przy prawej krawedzi i pustka nie
       ma sie skad wziac. Dodatkowo, gdy przefiltrowany zestaw miesci sie w
       kadrze, przejazd wychodzi zerowy i sekcja przestaje sie przypinac. */
    padding-right: clamp(20px, 5vw, 80px);
    scrollbar-width: none;
}

.portfolio-page__strip::-webkit-scrollbar { display: none; }



.portfolio-card {
    position: relative;
    flex: none;
    width: var(--card-w);
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1), opacity .3s ease;
}

.portfolio-card[hidden] { display: none; }

.portfolio-card__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 285 / 402;
    overflow: hidden;
    border-radius: 14px;
    background: #0d0d14;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}

/* ZRZUT PRZESUWA SIE SAM, we wszystkich kartach naraz.
   Ten sam mechanizm co w karuzeli na stronie glownej: obraz jest w kolumnie
   DWA razy, a animacja przesuwa kolumne o -50%. Dzieki temu po dojechaniu do
   stopki strony petla wraca na jej gore bez widocznego skoku i bez odbijania
   gora-dol. Tu (inaczej niz na glownej) animacja chodzi od razu w kazdej
   karcie - to jest wystawa, ma zyc sama z siebie. */
.portfolio-card__scroll {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* 18s. Bylo 52s (prawie minuta na obejrzenie calej strony klienta), potem
       26s - nadal za wolno. Ponizej ~15s tekst na zrzucie zaczyna sie zlewac
       przy czytaniu, wiec 18s to dolna granica, przy ktorej da sie jeszcze
       cokolwiek wylapac w locie. */
    animation: portfolio-page-pan 18s linear infinite;
    /* PAUZA DOMYSLNIE.
       Na myszce zrzut rusza dopiero PO NAJECHANIU na karte (prosba usera:
       "nie chce, zeby kazda strona sie ruszala") - tak samo jak w karuzeli
       na stronie glownej. Przy okazji znika caly koszt: 32 animowane,
       bardzo wysokie obrazy naraz zbijaly klatke do 28,5 ms (35 FPS),
       teraz pracuje najwyzej jeden.

       Na dotyku hovera nie ma, wiec tam jedzie zrzut wylacznie w karcie
       AKTYWNEJ - tej wysrodkowanej, ktora liczy tez licznik "03 / 12"
       (klase .jest-aktywna dokłada portfolio-page.js). Wczesniej jezdzily
       wszystkie karty widoczne naraz w kadrze (.is-live, rootMargin 200px) -
       user: "nie chce, zeby sie wszystkie automatycznie przesuwaly". */
    animation-play-state: paused;
    will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
    .portfolio-card:hover .portfolio-card__scroll {
        animation-play-state: running;
    }
}

@media (hover: none), (pointer: coarse) {
    .portfolio-card.jest-aktywna .portfolio-card__scroll {
        animation-play-state: running;
    }
}

@keyframes portfolio-page-pan {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}

.portfolio-card__scroll img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 100%;
    object-fit: cover;
    object-position: 50% 0%;
}

/* Podpis DOPIERO NA HOVER (prosba usera) - lezy na zrzucie, na gradiencie,
   zeby nie zjadal wysokosci karty. */
.portfolio-card__caption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: .15em;
    padding: 1.7rem 1.1rem .95rem;
    text-align: left;
    background: linear-gradient(0deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .48) 55%, transparent 100%);
    pointer-events: none;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .35s ease, transform .35s ease;
}

.portfolio-card__title {
    font-family: var(--font-heading, 'Poppins'), sans-serif;
    font-size: clamp(.95rem, 1.2vw, 1.12rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
}

.portfolio-card__tag {
    font-size: .8rem;
    font-weight: 600;
    background: linear-gradient(100deg, #cc00a6 0%, #7338ea 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@media (hover: hover) and (pointer: fine) {
    .portfolio-card:hover { transform: translateY(-8px); }
    .portfolio-card:hover .portfolio-card__media {
        box-shadow: 0 26px 60px rgba(204, 0, 166, .28), 0 0 0 1px rgba(204, 0, 166, .4);
    }
    .portfolio-card:hover .portfolio-card__caption {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Na dotyku nie ma hovera - podpis widoczny na stale, inaczej nie dalo by
   sie sprawdzic czyja to realizacja. */
@media (hover: none), (pointer: coarse) {
    .portfolio-card__caption {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-card__scroll { animation: none; }
}

/* ── STRZALKA W ROGU KARTY ──────────────────────────────────────
   Pojawia sie razem z podpisem, po najechaniu myszka. Mowi "kliknij, tu
   jest wiecej" - karta prowadzi do naszego case study, nie na strone
   klienta, wiec strzalka jest PROSTA (w prawo), nie ukosna. Ukosna czyta
   sie jako "wychodzisz z serwisu".
   Pseudoelement na karcie zamiast dodatkowego <span> w markupie: 32 karty
   razy jeden element mniej w drzewie. */
.portfolio-card::after {
    content: "";
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='m12.5 6 6 6-6 6'/%3E%3C/svg%3E") no-repeat center / 18px 18px,
        linear-gradient(135deg, #cc00a6 0%, #7338ea 100%);
    box-shadow: 0 6px 20px rgba(204, 0, 166, .45);
    opacity: 0;
    transform: translateY(-6px) scale(.85);
    transition: opacity .3s ease, transform .3s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .portfolio-card:hover::after {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Na dotyku nie ma hovera - strzalka widoczna na stale, przygaszona, zeby
   nie konkurowala ze zrzutem. */
@media (hover: none), (pointer: coarse) {
    .portfolio-card::after {
        opacity: .85;
        transform: none;
        width: 34px;
        height: 34px;
        background-size: 16px 16px, auto;
    }
}

/* ── Strzalki ───────────────────────────────────────────────── */

.portfolio-page__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(204, 0, 166, .55);
    background: linear-gradient(135deg, rgba(204, 0, 166, .22), rgba(115, 56, 234, .22));
    backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, opacity .25s ease;
}

.portfolio-page__arrow svg { width: 22px; height: 22px; }
.portfolio-page__arrow--prev { left: clamp(10px, 2vw, 28px); }
.portfolio-page__arrow--next { right: clamp(10px, 2vw, 28px); }

.portfolio-page__arrow[disabled] {
    opacity: .28;
    cursor: default;
}

@media (hover: hover) and (pointer: fine) {
    .portfolio-page__arrow:not([disabled]):hover {
        background: linear-gradient(135deg, rgba(204, 0, 166, .45), rgba(115, 56, 234, .45));
        border-color: rgba(204, 0, 166, .9);
    }
}

/* ── Stopka widoku ──────────────────────────────────────────── */

.portfolio-page__foot {
    position: relative;
    z-index: 2;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: clamp(10px, 2vh, 20px) clamp(16px, 4vw, 56px) clamp(14px, 2.6vh, 26px);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .38);
}

.portfolio-page__counter { color: rgba(255, 255, 255, .72); font-weight: 700; }

.portfolio-page__empty {
    position: absolute;
    inset-inline: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    margin: 0;
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

/* ── Mobile ─────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .portfolio-page__head {
        padding-top: clamp(12px, 2vh, 20px);
    }

    /* Filtry w jednej linii przewijanej w bok - przy siedmiu kategoriach
       zawijanie zjadloby pol ekranu, ktorego tu nie ma (widok jest przypiety
       do jednego ekranu). */
    .portfolio-page__filters {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        margin-inline: calc(-1 * clamp(16px, 4vw, 56px));
        padding-inline: clamp(16px, 4vw, 56px);
        scroll-padding-inline: clamp(16px, 4vw, 56px);
    }

    .portfolio-page__filters::-webkit-scrollbar { display: none; }

    /* PODPOWIEDZ, ZE FILTRY PRZEWIJA SIE PALCEM.
       ::after jest elementem flexa w scrollerze, wiec position:sticky
       przykleja go do prawej krawedzi paska i jedzie z nim. Chevron jako
       data URI - zero dodatkowych requestow. Klasa is-end (portfolio-page.js)
       gasi go, gdy nie ma juz czego przewijac. */
    .portfolio-page__filters::after {
        content: "";
        position: sticky;
        right: calc(-1 * clamp(16px, 4vw, 56px));
        flex: none;
        width: 46px;
        align-self: stretch;
        margin-left: -34px;
        background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") no-repeat right 4px center / 14px 14px,
            linear-gradient(90deg, rgba(1, 3, 10, 0) 0%, rgba(1, 3, 10, .92) 55%);
        pointer-events: none;
        opacity: .75;
        transition: opacity .25s ease;
        animation: portfolio-chip-hint 1.9s ease-in-out infinite;
    }

    /* Drobny ruch chevronu - statyczna strzalka czyta sie jak ozdoba,
       ruszajaca sie jak zaproszenie. */
    @keyframes portfolio-chip-hint {
        0%, 100% { background-position: right 4px center, 0 0; }
        50%      { background-position: right 0px center, 0 0; }
    }

    .portfolio-page__filters.is-end::after {
        opacity: 0;
    }

    .portfolio-chip {
        flex: none;
        padding: .55rem .95rem;
        font-size: .7rem;
    }

    /* Nadpisanie na .portfolio-page, zeby pasek tez widzial nowa wartosc. */
    .portfolio-page {
        --card-w: 68vw;
    }

    /* ── NA TELEFONIE PASEK PRZEWIJA SIE PALCEM ─────────────────
       Na desktopie przesuw kart napedza przewijanie strony przez przypieta
       sekcje. Na dotyku to jest nienaturalne: palcem przesuwa sie W BOK,
       nie w dol. Tutaj sekcja przestaje byc przypieta (wysokosc zdejmuje
       portfolio-page.js), a pasek dostaje wlasny scroll poziomy.
       Karta snapuje do SRODKA ekranu, wiec zawsze stoi wysrodkowana -
       i palcem, i po strzalkach. */
    .portfolio-page__strip {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        /* Zapas po bokach = pol kadru minus pol karty. Bez niego PIERWSZA
           i OSTATNIA karta nie mialyby jak stanac na srodku. */
        padding-inline: calc(50% - var(--card-w) / 2);
        /* safe center z wersji desktopowej jest tu zbedne - o pozycje dba
           snapowanie, a przy jednej karcie wystarcza sam padding. */
        justify-content: flex-start;
    }

    .portfolio-page__strip::-webkit-scrollbar { display: none; }

    /* center, nie start: karta ma stanac na srodku ekranu.
       scroll-snap-stop: always pilnuje, zeby szybki swipe nie przeskoczyl
       kilku kart naraz - jeden gest to jedna realizacja. */
    .portfolio-card {
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    /* Przyciemnienie wezsze - przy 16vw na telefonie zjadaloby polowe karty. */
    .portfolio-page__stage::before,
    .portfolio-page__stage::after {
        width: clamp(40px, 12vw, 90px);
    }

    /* Strzalki nizej i mniejsze - na dotyku glowny sposob to swipe,
       strzalki sa dodatkiem. */
    .portfolio-page__arrow {
        width: 44px;
        height: 44px;
    }
    .portfolio-page__arrow svg { width: 19px; height: 19px; }

    .portfolio-page__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-page__eyebrow-dot { animation: none; }
    .portfolio-card { transition: none; }
}