/**
 * Case study realizacji - uklad dwukolumnowy (wzorzec land-book).
 *
 * LEWA kolumna stoi (position:sticky), PRAWA jedzie w dol razem ze strona.
 * Calosc na natywnym scrollu - zero JS w petli przewijania, zero pinowania
 * sterowanego skryptem. Po historii tej strony to jedyna technika, ktora
 * zachowuje sie tak samo na kazdym urzadzeniu.
 */

.case {
    position: relative;
    background: var(--color-bg, #000408);
    padding-top: var(--nav-height, 72px);
}

/* ── "Wróć" w belce (obok loga) - TYLKO mobile ──────────────────
   Element zyje w header-nav.php (wypisywany warunkowo na single-realizacja),
   ale styl trzymamy tu, bo plik i tak laduje sie wylacznie na tej podstronie.
   Na desktopie zostaje pierwotny, plywajacy przycisk przy zrzucie - tu wiec
   domyslnie ukryty, odslaniany dopiero w media query nizej. Jezyk wizualny
   1:1 z .site-header__portfolio (ta sama pigulka), zeby nie byl obcym
   elementem w belce. */
.site-header__back {
    display: none;
    align-items: center;
    gap: 6px;
    margin-left: 16px;
    margin-right: 10px;
    padding: 8px 14px 8px 10px;
    border-radius: var(--radius-full, 999px);
    border: 1px solid transparent;
    background: linear-gradient(100deg, #cc00a6 0%, #a01580 35%, #7338ea 70%, #4c1d9e 100%);
    color: #fff;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 0 18px rgba(204, 0, 166, .3);
    transition: filter .2s ease, box-shadow .2s ease, transform .12s ease;
}

.site-header__back svg { width: 15px; height: 15px; flex: none; }

.site-header__back:hover,
.site-header__back:focus-visible {
    filter: brightness(1.12);
    box-shadow: 0 0 24px rgba(204, 0, 166, .45);
}

/* Feedback pod palcem - user: przycisk "nie reagowal" na tap. Na dotyku
   nie ma hover, wiec do tej pory kliknięcie nie dawalo zadnego natychmiast
   widocznego efektu (dopiero po zaladowaniu nastepnej strony). :active
   dziala wszedzie, w tym na dotyku, i odpala sie od razu na palec-w-dol. */
.site-header__back:active {
    transform: scale(.94);
    filter: brightness(1.2);
    box-shadow: 0 0 14px rgba(204, 0, 166, .55);
}

@media (max-width: 768px) {
    .site-header__back { display: inline-flex; }
}

.case__glow {
    position: absolute;
    inset: 0 0 auto 0;
    height: 120vh;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 55% 40% at 8% 8%, rgba(204, 0, 166, .11), transparent 70%),
        radial-gradient(ellipse 50% 38% at 92% 30%, rgba(115, 56, 234, .12), transparent 70%);
}

.case__grid {
    position: relative;
    z-index: 1;
    display: grid;
    /* DWIE KOLUMNY, ROZCIAGNIETE NA CALE OKNO.
       Opisy z lewej (waska kolumna do czytania, przypieta), zrzut strony
       klienta z prawej - i to on ma dostac maksimum miejsca.
       Bez max-width na calosci: siatka idzie od krawedzi do krawedzi okna,
       a nie do 1680 px, wiec na szerokim monitorze zrzut jest naprawde
       rozciagniety, a nie zamkniety w kontenerze. */
    grid-template-columns: minmax(300px, 34fr) minmax(0, 66fr);
    gap: clamp(20px, 2.4vw, 44px);
    padding: clamp(22px, 3.5vh, 44px) clamp(16px, 2vw, 34px) clamp(40px, 8vh, 96px);
    align-items: start;
}

/* ── LEWA: przypiety panel ──────────────────────────────────── */

.case__panel {
    position: sticky;
    /* Pod belka nawigacji, z oddechem. */
    top: calc(var(--nav-height, 72px) + 16px);
    /* Panel MA SIE ZMIESCIC w jednym ekranie - stad rozwijane sekcje nizej.
       Scroll zostaje jako zabezpieczenie na wypadek rozwiniecia kilku sekcji
       naraz albo bardzo niskiego okna, ale przy domyslnym stanie nie jest
       potrzebny. */
    /* Dolne 86 px zostawiamy przyciskowi powrotu (position:fixed). Sam padding
       w srodku nie wystarczyl: panel sie przewija, wiec tresc i tak przejezdzala
       pod pigulka. Skrocenie obszaru panelu daje twarda gwarancje, ze nic pod
       nia nie wjedzie, niezaleznie od pozycji przewiniecia. */
    max-height: calc(100svh - var(--nav-height, 72px) - 32px - 86px);
    overflow-y: auto;
    scrollbar-width: none;
}

.case__panel::-webkit-scrollbar { display: none; }

/* Wewnatrz panelu wszystko idzie JEDNA kolumna, pod soba. */
.case__panel-inner {
    display: flex;
    flex-direction: column;
    /* Odstepy scisniete po pomiarze: przy clamp(22px,3vh,34px) i paddingu
       12/18 tresc miala 853 px przy 796 px miejsca na ekranie 1440x900 i
       ostatnia sekcja wystawala poza kadr. */
    gap: clamp(15px, 2.1vh, 24px);
    padding-block: 2px 12px;
}

/* Dwie REALNE kolumny w markupie zamiast przypisywania grid-column
   pojedynczym elementom. Tamta wersja tworzyla osobny wiersz siatki na kazde
   dziecko, wiec miedzy tytulem a metryczka rosly puste pasy wysokosci
   najwyzszego elementu w danym wierszu (widoczne na zrzucie). */
.case__col { min-width: 0; }

.case__block { margin-top: 0; }
.case__block + .case__block { margin-top: clamp(22px, 3.4vh, 34px); }

.case__eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 clamp(12px, 2vh, 20px);
    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);
}

.case__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;
}

.case__eyebrow-num {
    margin-left: auto;
    color: rgba(255, 255, 255, .3);
    letter-spacing: .12em;
}

.case__title {
    margin: 0;
    font-family: var(--font-heading, 'Poppins'), sans-serif;
    font-weight: 800;
    letter-spacing: -.022em;
    line-height: 1.08;
    font-size: clamp(1.45rem, 2vw, 2.15rem);
    color: #fff;
}

.case__client {
    margin: 10px 0 0;
    font-size: .95rem;
    font-weight: 600;
    background: linear-gradient(100deg, #cc00a6 0%, #7338ea 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Metryczka projektu - dwie kolumny etykieta/wartosc, cienka kreska miedzy
   wierszami. Czyta sie jak karta techniczna, nie jak akapit. */
.case__meta {
    margin: clamp(10px, 1.6vh, 18px) 0 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

/* SIATKA 2x2 zamiast czterech wierszy pod soba. Wersja wierszowa zajmowala
   176 px wysokosci - po dolozeniu bloku technologii panel przestal miescic
   sie w ekranie (zmierzone: 830 px tresci przy 796 px miejsca). Dwie kolumny
   tna to o polowe i czytaja sie jak karta techniczna. */
.case__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 clamp(12px, 1.4vw, 22px);
}

.case__meta-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

/* Dwa ostatnie pola bez dolnej kreski - zamyka je dopiero blok technologii. */
.case__meta-row:nth-last-child(-n+2) { border-bottom: 0; }

.case__meta-row dt {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .38);
}

.case__meta-row dd {
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.35;
    color: rgba(255, 255, 255, .88);
}

.case__cta {
    margin-top: clamp(12px, 1.8vh, 20px);
    width: 100%;
    padding: .82rem 1.3rem;
    font-size: .78rem;
}

.case__cta svg { width: 16px; height: 16px; }

.case__block {
    margin-top: clamp(26px, 4vh, 40px);
}

.case__block-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

/* Gradientowa kreska przed tytulem bloku - ten sam detal co w naglowkach
   kolumn stopki. */
.case__block-title::before {
    content: "";
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #cc00a6 0%, #7338ea 100%);
}

.case__block-text p {
    margin: 0 0 .9em;
    max-width: 46ch;
    font-size: .96rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .7);
}

.case__block-text p:last-child { margin-bottom: 0; }

/* Struktura strony - numerowana lista w tym samym jezyku co kolo uslug
   i menu pelnoekranowe (mono, wiodace zero). */
.case__structure {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: case-struct;
}

.case__structure-item {
    counter-increment: case-struct;
    display: grid;
    grid-template-columns: 2.2em minmax(0, 1fr);
    gap: 4px 10px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.case__structure-item::before {
    content: counter(case-struct, decimal-leading-zero);
    grid-row: 1 / span 2;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    color: rgba(232, 121, 249, .75);
    padding-top: 3px;
}

.case__structure-name {
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
}

.case__structure-desc {
    font-size: .86rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .55);
}

/* Wyniki - liczby maja byc pierwsza rzecza, ktora widac. */
.case__results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

.case__result {
    padding: 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .03);
}

.case__result-value {
    display: block;
    font-family: var(--font-heading, 'Poppins'), sans-serif;
    font-size: clamp(1.5rem, 2vw, 2rem);
    font-weight: 800;
    line-height: 1.1;
    background: linear-gradient(100deg, #cc00a6 0%, #7338ea 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.case__result-label {
    display: block;
    margin-top: 4px;
    font-size: .78rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .55);
}

/* Blok technologii - widoczny od razu, bez klikania. Etykieta tym samym
   mono co metryczka wyzej, zeby czytalo sie jak jej dalszy ciag. */
.case__tech {
    margin-top: clamp(10px, 1.6vh, 18px);
}

.case__tech-label {
    display: block;
    margin-bottom: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .38);
}

/* Pigulki technologii dostaja delikatny akcent marki - to element, na ktory
   ma paść wzrok, nie neutralna lista. */
.case__tech .case__stack li {
    border-color: rgba(204, 0, 166, .3);
    background: rgba(204, 0, 166, .07);
    color: rgba(255, 255, 255, .82);
    font-size: .74rem;
    padding: .36rem .72rem;
}

/* Technologie i kategorie - pigulki. */
.case__stack,
.case__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.case__stack li,
.case__cats li a {
    display: inline-block;
    padding: .42rem .8rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .13);
    background: rgba(255, 255, 255, .03);
    font-size: .78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}

@media (hover: hover) and (pointer: fine) {
    .case__cats li a:hover {
        color: #fff;
        border-color: rgba(204, 0, 166, .55);
        background: rgba(204, 0, 166, .1);
    }
}

/* ── PRAWA: zrzut ───────────────────────────────────────────── */

.case__stage {
    position: relative;
    min-width: 0;
}

/* Powrot do listy realizacji. Ten sam jezyk co .btn-cyber z main.css: sciete
   rogi, monospace wersalikami i gradient marki - zeby nie byl obcym elementem
   przy dolnej krawedzi. Stoi po lewej, przelacznik widoku po srodku. */
.case__back {
    --back-cut: 9px;
    position: fixed;
    left: clamp(14px, 3vw, 34px);
    bottom: clamp(18px, 4vh, 34px);
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px 11px 14px;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(204, 0, 166, .6);
    background: linear-gradient(135deg, #cc00a6 0%, #a01580 35%, #7338ea 70%, #4c1d9e 100%);
    clip-path: polygon(
        var(--back-cut) 0,
        calc(100% - var(--back-cut)) 0,
        100% var(--back-cut),
        100% calc(100% - var(--back-cut)),
        calc(100% - var(--back-cut)) 100%,
        var(--back-cut) 100%,
        0 calc(100% - var(--back-cut)),
        0 var(--back-cut)
    );
    box-shadow: 0 14px 40px rgba(204, 0, 166, .3);
    transition: box-shadow .25s ease, filter .25s ease;
}

.case__back:hover,
.case__back:focus-visible {
    filter: brightness(1.14);
    box-shadow: 0 16px 52px rgba(204, 0, 166, .5);
}

.case__back-arrow {
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    transition: transform .25s ease;
}

.case__back-arrow svg { width: 13px; height: 13px; }

.case__back:hover .case__back-arrow { transform: translateX(-3px); }

/* Krotki napis mobilny - domyslnie schowany, na waskich ekranach zamienia
   sie miejscami z dlugim tekstem. */
.case__back-text--short { display: none; }

/* Na mobile plywajacy przycisk kolidowal z paskiem DESKTOP/MOBILE na dole
   ekranu (kilka podejsc: obok siebie, jeden nad drugim - user za kazdym
   razem widzial to jako niewygodne/malo czytelne). Ostatecznie "Wróć"
   przenosi sie do belki, obok loga (.site-header__back w header-nav.php) -
   tam ma stale tlo belki i nie wchodzi w droge niczemu na zrzucie. Na
   mobile caly floating przycisk znika, zostaje tylko na desktopie. */
@media (max-width: 720px) {
    .case__back { display: none; }
}

.case__toolbar {
    /* PLYWAJACY. Bylo position:sticky w kolumnie ze zrzutem - dzialalo, ale
       znikalo razem z nia. Teraz fixed przy dolnej krawedzi, na srodku:
       przelaczysz widok w dowolnym momencie, nawet po dziesieciu tysiacach
       pikseli przewijania. Dol, nie gora, bo tam nie walczy z belka. */
    position: fixed;
    left: 50%;
    bottom: clamp(18px, 4vh, 34px);
    transform: translateX(-50%);
    /* 90, nie 60: stopka ma position:relative i lezy pozniej w drzewie, wiec
       przy nizszej wartosci jej formularz przechwytywal klikniecia w
       przelacznik (zlapane przez test Playwrighta). Ponizej belki
       nawigacji (100), zeby menu bylo zawsze na wierzchu. */
    z-index: 90;
    display: flex;
    justify-content: center;
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
}

.case__toolbar > * { pointer-events: auto; }

/* Poza obszarem zrzutu (naglowek, nawigacja, stopka) przelacznik nie ma co
   przelaczac - klase dokłada realization-case.js. */
.case__toolbar.is-hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(16px);
}

.case__bar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(8, 8, 14, .9);
    box-shadow: 0 16px 44px rgba(0, 0, 0, .65);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

/* Strzalki do sasiednich realizacji. Dubluja nawigacje z dolu strony, bo
   przy zrzucie na kilkanascie tysiecy pikseli dojscie do niej wymagaloby
   przewiniecia calej strony klienta. */
.case__bar-arrow {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: rgba(255, 255, 255, .78);
    background: rgba(255, 255, 255, .05);
    transition: background var(--transition), color var(--transition), transform var(--transition);
}

.case__bar-arrow svg { width: 21px; height: 21px; }

/* Pierwsza i ostatnia realizacja: strzalka zostaje, zeby pasek nie skakal
   w szerokosci miedzy podstronami, ale jest wygaszona i nieklikalna. */
.case__bar-arrow.is-off {
    opacity: .22;
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .case__bar-arrow:not(.is-off):hover {
        color: #fff;
        background: linear-gradient(135deg, rgba(204, 0, 166, .5), rgba(115, 56, 234, .5));
    }
}

.case__switch {
    display: inline-flex;
    gap: 4px;
}

/* Wiekszy niz poprzednio (bylo .5rem/.72rem) - user: "zrob wiekszy".
   46 px wysokosci zgadza sie ze strzalkami obok, wiec pasek jest rowny. */
.case__switch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 1.25rem;
    border-radius: 999px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
}

.case__switch-btn svg { width: 18px; height: 18px; }

.case__switch-btn.is-active {
    color: #fff;
    background: linear-gradient(100deg, #cc00a6 0%, #7338ea 100%);
}

/* Ramka przegladarki - pasek z kropkami i adresem nad zrzutem. Drobiazg,
   ale od razu czytelne, ze to strona, a nie grafika. */
.case__frame--desktop {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    background: #0d0d14;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}

/* Pasek przegladarki zostaje na wierzchu przy przewijaniu - caly czas widac,
   ktorej strony dotyczy zrzut. */
.case__chrome {
    position: sticky;
    top: var(--nav-height, 72px);
    z-index: 2;
}

.case__chrome {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    background: rgba(255, 255, 255, .045);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.case__chrome-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    flex: none;
}

.case__chrome-url {
    margin-left: 10px;
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .35);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    color: rgba(255, 255, 255, .45);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.case__shot img {
    display: block;
    width: 100%;
    height: auto;
}

/* UKRYTA RAMKA MUSI ZNIKAC.
   Atrybut hidden daje display:none, ale TYLKO w arkuszu przegladarki -
   nasze wlasne display:flex na .case__frame--mobile je bilo i obie ramki
   renderowaly sie jedna pod druga (widoczne na zrzucie ze stagingu).
   Ta regula stoi PRZED deklaracjami ramek i uzywa !important, bo inaczej
   kazde kolejne display: na ramce znowu by ja pokonalo. */
.case__frame[hidden] { display: none !important; }

/* Telefon - wysrodkowany w kolumnie zrzutu, na delikatnie rozswietlonym
   tle, zeby waski zrzut nie plywal w czerni. */
.case__frame--mobile {
    display: flex;
    justify-content: center;
    padding: clamp(20px, 3vh, 40px) clamp(16px, 3vw, 40px);
    border-radius: 14px;
    background:
        radial-gradient(ellipse 55% 45% at 50% 0%, rgba(115, 56, 234, .1), transparent 70%),
        rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .08);
}

.case__phone {
    position: relative;
    width: min(390px, 100%);
    padding: 10px;
    border-radius: 38px;
    border: 1px solid rgba(255, 255, 255, .13);
    background: #0d0d14;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}

.case__phone-notch {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 110px;
    height: 22px;
    border-radius: 0 0 14px 14px;
    background: #0d0d14;
}

.case__phone .case__shot {
    border-radius: 28px;
    overflow: hidden;
}

/* ── Nawigacja miedzy realizacjami ──────────────────────────── */

.case__nav {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(16px, 3vw, 40px);
    max-width: 1680px;
    margin-inline: auto;
    padding: clamp(24px, 4vh, 40px) clamp(20px, 4vw, 64px) clamp(40px, 7vh, 80px);
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.case__nav-link {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-decoration: none;
    min-width: 0;
}

.case__nav-link--next { text-align: right; }

.case__nav-label {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .35);
}

.case__nav-title {
    font-family: var(--font-heading, 'Poppins'), sans-serif;
    font-size: clamp(.95rem, 1.3vw, 1.2rem);
    font-weight: 700;
    color: rgba(255, 255, 255, .85);
    transition: color var(--transition);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
    .case__nav-link:hover .case__nav-title { color: #e879f9; }
}

.case__nav-all {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    padding: .6rem 1.1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .13);
    white-space: nowrap;
    transition: color var(--transition), border-color var(--transition);
}

@media (hover: hover) and (pointer: fine) {
    .case__nav-all:hover { color: #fff; border-color: rgba(204, 0, 166, .55); }
}

/* ── Rozwijane sekcje ───────────────────────────────────────────
   Natywny <details>: zero JS, obsluga klawiatury i czytnikow gratis.
   Pierwsza sekcja jest otwarta, zeby panel nie wygladal na pusty. */

.case__folds {
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.case__fold {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.case__fold-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Wysokosc wiersza skaluje sie z ekranem: na 1440x900 wychodzi ~48 px,
       na 1920x1080 ~56 px. Dolna granica 44 px to minimalny cel dotykowy
       wg WCAG i wytycznych Apple - wiersz jest jednoczesnie przyciskiem. */
    padding: clamp(11px, 1.5vh, 17px) 0;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
    /* Bylo mono 11 px wersalikami z duzym odstepem liter - czytalo sie jak
       drobny podpis techniczny, a to sa GLOWNE przyciski nawigacji po tresci
       (user: "zrob to wieksze i czytelniejsze"). Krój naglowkowy, wieksza
       skala, mniejszy letter-spacing. */
    font-family: var(--font-heading, 'Poppins'), sans-serif;
    font-size: clamp(.92rem, 1.6vh, 1.08rem);
    font-weight: 700;
    letter-spacing: -.005em;
    text-transform: none;
    color: rgba(255, 255, 255, .82);
    transition: color var(--transition);
}

/* Safari rysuje wlasny trojkat mimo list-style:none. */
.case__fold-summary::-webkit-details-marker { display: none; }

/* Gradientowa kreska przed tytulem - ten sam detal co przy naglowkach
   kolumn w stopce i w poprzedniej wersji tego panelu. */
.case__fold-summary::before {
    content: "";
    flex: none;
    width: 22px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #cc00a6 0%, #7338ea 100%);
    transition: width var(--transition);
}

.case__fold-title { flex: 1 1 auto; min-width: 0; }

.case__fold-count {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, .34);
}

.case__fold-icon {
    flex: none;
    display: flex;
    color: rgba(255, 255, 255, .4);
    transition: transform var(--transition), color var(--transition);
}

.case__fold-icon svg { width: 19px; height: 19px; }

.case__fold[open] > .case__fold-summary { color: #fff; }
.case__fold[open] > .case__fold-summary::before { width: 32px; }
.case__fold[open] > .case__fold-summary .case__fold-icon {
    transform: rotate(180deg);
    color: #e879f9;
}

@media (hover: hover) and (pointer: fine) {
    .case__fold-summary:hover { color: #fff; }
}

.case__fold-body {
    padding-bottom: 16px;
}

/* Wewnatrz rozwinietej sekcji tekst jest wezszy i lzejszy niz w naglowku -
   to material pomocniczy, nie glowna tresc kadru. */
.case__fold-body p {
    margin: 0 0 .85em;
    font-size: .95rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .72);
}

.case__fold-body p:last-child { margin-bottom: 0; }

.case__fold-body .case__structure-item:last-child { border-bottom: 0; }

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

@media (max-width: 1024px) {
    /* Jedna kolumna: najpierw informacje, potem zrzut. Przypiecie panelu
       nie ma tu sensu - na waskim ekranie stalby na calej wysokosci i nie
       zostawal by ekran na zrzut. */
    .case__grid {
        grid-template-columns: 1fr;
        gap: clamp(24px, 3.5vh, 40px);
        padding-inline: clamp(16px, 3vw, 32px);
    }

    /* Na waskim ekranie przypiety panel zajalby caly ekran i nie zostaloby
       miejsca na zrzut - wraca do zwyklego przeplywu, nad zrzutem.
       Tu tez znika powod, dla ktorego panel byl sciesniany: pionu jest tyle,
       ile trzeba, wiec tresc moze oddychac. */
    .case__panel {
        position: static;
        max-height: none;
        overflow: visible;
        padding-inline: 0;
    }

    .case__panel-inner {
        padding-block: 0;
        gap: clamp(18px, 2.6vh, 26px);
    }

    /* Tytul moze urosnac - nie walczy juz o miejsce ze zrzutem. */
    .case__title { font-size: clamp(1.6rem, 4.2vw, 2.4rem); }

    /* Metryczka: na tablecie zostaja dwie kolumny, na telefonie jedna
       (regula nizej) - cztery waskie kolumny bylyby nieczytelne. */
    .case__meta-row { padding: 11px 0; }

    /* Wiersze sekcji wyzsze - palec potrzebuje wiecej miejsca niz kursor. */
    .case__fold-summary {
        padding: 15px 0;
        font-size: 1.05rem;
    }

    .case__fold-body { padding-bottom: 20px; }
    .case__fold-body p { font-size: 1rem; }

    /* Przycisk na pelna szerokosc, ale nie przesadnie dlugi na tablecie. */
    .case__cta {
        max-width: 420px;
        padding: 1rem 1.5rem;
        font-size: .85rem;
    }

    .case__block-text p { max-width: none; }

    .case__nav {
        grid-template-columns: 1fr;
        gap: 18px;
        text-align: center;
    }
    .case__nav-link--next { text-align: center; }
    .case__nav-all { justify-self: center; }
}

@media (max-width: 768px) {
    .case__chrome-url { display: none; }
    .case__chrome { top: var(--nav-height, 64px); }

    .case__grid {
        padding-top: clamp(16px, 2.5vh, 26px);
        padding-inline: 16px;
    }

    /* Jedna kolumna metryczki - dwie waskie lamalyby wartosci typu
       "Strona internetowa, logo, wersja niemiecka" na cztery linijki. */
    .case__meta { grid-template-columns: 1fr; }
    .case__meta-row:nth-last-child(-n+2) {
        border-bottom: 1px solid rgba(255, 255, 255, .07);
    }
    .case__meta-row:last-child { border-bottom: 0; }

    .case__title { font-size: clamp(1.5rem, 6.4vw, 2rem); }

    .case__cta { max-width: none; }

    .case__fold-summary { font-size: 1rem; padding: 16px 0; }

    /* Pigulki technologii latwiejsze do trafienia i czytania. */
    .case__tech .case__stack li { font-size: .8rem; padding: .44rem .85rem; }

    /* Pasek przegladarki nad zrzutem jest na telefonie samym ozdobnikiem -
       kropki zjadaja wysokosc, ktorej tu nie ma. */
    .case__chrome { padding: 8px 12px; }
    .case__chrome-dot { width: 8px; height: 8px; }

    /* Nawigacja miedzy realizacjami: tytuly w dwoch liniach zamiast
       ucinania wielokropkiem. */
    .case__nav-title {
        white-space: normal;
        font-size: 1rem;
    }

    /* Pasek sterowania na waskim ekranie: te same cele dotykowe, mniej
       oddechu w srodku, zeby zmiescil sie w 390 px razem ze strzalkami. */
    .case__bar { gap: 3px; padding: 5px; }
    .case__bar-arrow { width: 44px; height: 44px; }
    .case__switch-btn { padding: 0 .85rem; font-size: .74rem; gap: 7px; }
    .case__switch-btn svg { width: 16px; height: 16px; }

    /* Zrzut mobilny bez ramki telefonu - na telefonie ramka telefonu
       w telefonie wyglada jak pomylka. */
    .case__phone {
        padding: 0;
        border: 0;
        border-radius: 14px;
        width: 100%;
    }
    .case__phone-notch { display: none; }
    .case__phone .case__shot { border-radius: 14px; }
}

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

/* ─────────────────────────────────────────────────────────────
   INNE REALIZACJE - pas na pelna szerokosc pod case study.
   Karty w tym samym jezyku co archiwum: zrzut, podpis, strzalka
   w rogu przy najechaniu. Przesuw robi animacja CSS na
   zduplikowanym torze, wiec petla nie ma szwu i nie kosztuje JS.
   ───────────────────────────────────────────────────────────── */
.case-related {
    position: relative;
    z-index: 2;
    padding-block: clamp(56px, 8vh, 96px) clamp(64px, 9vh, 110px);
    border-top: 1px solid rgba(255, 255, 255, .08);
    overflow: hidden;
}

.case-related__head {
    padding-inline: clamp(20px, 5vw, 80px);
    margin-bottom: clamp(26px, 4vh, 44px);
}

/* Tytul i link do archiwum w jednym wierszu, nadtytul nad nimi. */
.case-related__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px clamp(20px, 4vw, 48px);
    margin-top: 10px;
}

.case-related__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.case-related__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #cc00a6, #7338ea);
}

.case-related__title {
    margin: 0;
    font-size: clamp(1.7rem, 3.6vw, 2.9rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.02em;
    /* Caly naglowek w gradiencie marki, nie tylko drugie slowo.
       padding-bottom + margin-bottom: bez tego przyciecie tla ucina ogonki
       liter (j, y, g) razem z gradientem. */
    background: linear-gradient(120deg, #cc00a6 0%, #a01580 32%, #7338ea 68%, #4c1d9e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: .12em;
    margin-bottom: -.12em;
}

.case-related__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    transition: color .25s ease, border-color .25s ease;
}

.case-related__cta svg { width: 15px; height: 15px; transition: transform .25s ease; }
.case-related__cta:hover { color: #fff; border-color: rgba(232, 121, 249, .7); }
.case-related__cta:hover svg { transform: translateX(4px); }

/* Wygaszenie na krawedziach - karty wychodza z ciemnosci, tak samo jak
   w archiwum realizacji. */
.case-related__viewport {
    /* 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;
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.case-related__track {
    display: flex;
    gap: clamp(14px, 1.6vw, 24px);
    width: max-content;
}

.case-related__card {
    --karta-w: clamp(212px, 19vw, 288px);
    flex: 0 0 var(--karta-w);
    width: var(--karta-w);
    text-decoration: none;
    color: inherit;
}

.case-related__media {
    position: relative;
    display: block;
    aspect-ratio: 285 / 402;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: #0b0b12;
    transition: border-color .3s ease, transform .3s ease;
}

.case-related__media img {
    display: block;
    width: 100%;
    height: auto;
    /* Zrzut jest wysoki - pokazujemy gore strony, reszta poza kadrem. */
    object-fit: cover;
    object-position: top center;
    /* PRZESUW TYLKO NA KARCIE W SRODKU. Animacja stoi domyslnie (paused) -
       realization-related.js dokłada .jest-w-srodku wylacznie tej karcie,
       ktora w danym momencie jest wysrodkowana w kadrze, wiec pas jako calosc
       stoi, a rusza sie tylko jeden zrzut. */
    animation: case-related-scan 7s ease-in-out infinite alternate;
    animation-play-state: paused;
}

.case-related__card.jest-w-srodku .case-related__media img {
    animation-play-state: running;
}

@keyframes case-related-scan {
    from { object-position: top center; }
    to   { object-position: bottom center; }
}

@media (prefers-reduced-motion: reduce) {
    .case-related__media img { animation: none; }
}

.case-related__card:hover .case-related__media {
    border-color: rgba(232, 121, 249, .5);
    transform: translateY(-4px);
}

.case-related__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #cc00a6, #7338ea);
    color: #06060a;
    opacity: 0;
    transform: translateY(-5px) scale(.85);
    transition: opacity .25s ease, transform .25s ease;
}

.case-related__badge svg { width: 14px; height: 14px; }

.case-related__card:hover .case-related__badge {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Kto wylaczyl animacje w systemie, dostaje pas nieruchomy i przewijany palcem. */
@media (prefers-reduced-motion: reduce) {
    .case-related__track { animation: none; }
    .case-related__viewport { overflow-x: auto; }
}

/* ── Pas "Inne realizacje": kadr, strzalki ──────────────────────
   Przesuw robi realization-related.js przez scrollLeft, a nie animacja
   CSS na transformie - tamtej nie da sie zlapac palcem. Kadr jest wiec
   zwyklym kontenerem z przewijaniem w poziomie. */
.case-related__wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-inline: clamp(8px, 2vw, 22px);
}

.case-related__viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Wygaszenie krawedzi - karty wychodza z ciemnosci tak jak w archiwum. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.case-related__viewport::-webkit-scrollbar { display: none; }

.case-related__arrow {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(10, 10, 16, .82);
    color: rgba(255, 255, 255, .85);
    cursor: pointer;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease;
}

.case-related__arrow svg { width: 19px; height: 19px; }

.case-related__arrow:hover,
.case-related__arrow:focus-visible {
    color: #fff;
    border-color: rgba(232, 121, 249, .55);
    background: linear-gradient(135deg, rgba(204, 0, 166, .5), rgba(115, 56, 234, .5));
    transform: scale(1.06);
}

/* Karta bez podpisu - zostaje sam zrzut, wiec dolny margines idzie z niej. */
.case-related__card { margin-bottom: 4px; }

@media (max-width: 768px) {
    .case-related__wrap { gap: 6px; padding-inline: 6px; }
    .case-related__arrow { width: 38px; height: 38px; }
    .case-related__arrow svg { width: 16px; height: 16px; }
}