/* Poprawki dopasowania do telefonów i tabletów.
   Każda reguła jest w media query (max-width ≤ 1120px), więc wygląd na komputerze się nie zmienia.
   Animacje zostają; zmieniamy tylko kadrowanie, odstępy i czytelność na wąskim ekranie. */

@media (max-width:1120px){
  /* Co dla Ciebie robimy: zamiast osobnej mapy z karuzelą ten sam układ co na komputerze — usługi jako pigułki,
     opis wybranej usługi i telefon z animowanym ekranem pod spodem */
  #uslugi .ba-around-m{display:none!important}
  #uslugi .ba-around-trigger{flex-direction:column;min-height:0;padding:calc(var(--r)*3) 0 calc(var(--r)*3.5)}
  #uslugi .ba-around-content{display:block}
  #uslugi .ba-around-col{width:100%}
  #uslugi .ba-around-list{display:flex;gap:calc(var(--r)*.6);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    margin:calc(var(--r)*1.25) calc(var(--r)*-2.25) 0;padding:2px calc(var(--r)*2.25) 4px;border-bottom:0;scroll-padding-inline:calc(var(--r)*2.25)}
  #uslugi .ba-around-list::-webkit-scrollbar{display:none}
  #uslugi .ba-list-ind,#uslugi .ba-around-list .ba-li-b{display:none}
  #uslugi .ba-around-list .ba-li{flex:none;cursor:pointer;border:1px solid var(--golden-40);border-radius:999px;
    transition:background-color .45s var(--ease),border-color .45s var(--ease),transform .2s var(--ease);-webkit-tap-highlight-color:transparent}
  #uslugi .ba-around-list .ba-li:active{transform:scale(.96)}
  #uslugi .ba-around-list .ba-li-a,#uslugi .ba-around-list .ba-li:hover .ba-li-a{transform:none;padding:.7em 1.15em;font-size:15px;line-height:1;white-space:nowrap;color:var(--golden);transition:color .45s var(--ease)}
  /* wybrana pigułka: atrament wlewa się do środka (od strony, z której przyszedł wybór), napis jaśnieje */
  #uslugi .ba-around-list .ba-li{position:relative;isolation:isolate;overflow:hidden}
  #uslugi .ba-around-list .ba-li::before{content:'';position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:var(--ink);
    clip-path:circle(0% at var(--ink-from,0%) 50%);transition:clip-path .75s cubic-bezier(.65,0,.35,1)}
  #uslugi .ba-around-list .ba-li.is-active{border-color:var(--ink);transition:border-color .5s var(--ease) .1s,transform .2s var(--ease)}
  #uslugi .ba-around-list .ba-li.is-active::before{clip-path:circle(150% at var(--ink-from,0%) 50%)}
  #uslugi .ba-around-list.ba-mk-wait .ba-li.is-active::before{clip-path:circle(0% at 0% 50%);transition:none}
  #uslugi .ba-around-list.ba-mk-wait .ba-li.is-active{border-color:var(--golden-40)}
  #uslugi .ba-around-list.ba-mk-wait .ba-li.is-active .ba-li-a{color:var(--golden)}
  #uslugi .ba-around-list .ba-li.is-active .ba-li-a{transform:none;color:var(--vanilla);transition:color .45s var(--ease) .18s}
  #uslugi .ba-around-desc .ba-w{display:inline-block}
  /* wejście pigułek: czysta animacja CSS na transform/opacity (wątek kompozycji), po kolei co 70 ms;
     po zakończeniu wraca zwykły styl (fill-mode: backwards), więc stuknięcie i wybór działają jak wcześniej */
  #uslugi .ba-around-list.ba-chips-wait .ba-li{opacity:0;transform:translate3d(0,20px,0) scale(.96)}
  /* równomierne hamowanie (ease-out cubic), bez „wystrzału” na starcie, który wyglądał jak przeskok */
  #uslugi .ba-around-list.ba-chips-in .ba-li{animation:baChipIn 1s cubic-bezier(.33,1,.68,1) backwards;animation-delay:calc(var(--ci,0) * 90ms)}
  @keyframes baChipIn{0%{opacity:0;transform:translate3d(0,20px,0) scale(.96)}100%{opacity:1;transform:translate3d(0,0,0) scale(1)}}
  #uslugi .ba-around-details{display:grid;min-height:0;margin-top:calc(var(--r)*1.75)}
  #uslugi .ba-around-detail{position:relative;inset:auto;grid-area:1/1;transform:translateY(8px);transition:opacity .35s var(--ease),transform .5s var(--ease)}
  #uslugi .ba-around-detail.is-on{transform:none}
  #uslugi .ba-map.ba-around-photo{display:block;position:relative;top:auto;right:auto;width:auto;height:min(118vw,74svh);
    margin:calc(var(--r)*2) calc(var(--r)*2.25) 0;border-radius:calc(var(--r)*1.5)}
  /* bez zapasu na paralaksę (na telefonie jej nie ma), więc telefon w dłoni mieści się w kadrze w całości */
  #uslugi .ba-around-photo .ba-single-img{height:100%}

  /* Rodzaje stron: zrzuty stron (16:9) pokazujemy w całości zamiast przycinać je do wysokiego prostokąta */

  /* Lista rozwijana (Rodzaje stron, Systemy): długi tytuł nie wchodzi pod okrągły przycisk ze strzałką */
  .ba-mli .ba-li-a,.ba-mli .ba-li-b{padding-right:calc(var(--r)*3.5)}
}

@media (max-width:768px){
  /* Strony WWW: cały ekran laptopa z nagraniem strony mieści się na telefonie (wcześniej był powiększony poza krawędzie) */
  #strony .ba-bg-lap{top:0!important;height:62vh!important;height:62svh!important;transform:none!important;translate:none!important;scale:none!important}
  #strony .ba-bg-lap .ba-bg-img{object-position:79% 50%}
  #strony .ba-bg-lap::after{content:'';position:absolute;left:0;right:0;bottom:0;height:28%;background:linear-gradient(to bottom,rgba(18,13,9,0),#120D09);pointer-events:none;z-index:1}
  #strony .ba-trigger{background:#120D09}
  #strony .ba-shade{background:linear-gradient(0deg,rgba(18,13,9,.6),transparent 40%)}
  /* karta z realizacjami pod ekranem laptopa, a nie na nim */
  #strony .ba-res-cardcol{padding-top:calc(62vh - var(--r)*6);padding-top:calc(62svh - var(--r)*6)}
  #strony .ba-trigger{gap:calc(var(--r)*4)}
  #strony .ba-res-bottom{flex-direction:column;align-items:flex-start;gap:calc(var(--r)*1.5)}
  #strony .ba-res-h{margin-bottom:0}
}


@media (max-width:768px){
  /* Tworzenie stron Gdynia: tytuły rozwijanych kart „co nas wyróżnia” w całości, zamiast ucinania „Tworzenie stron G…” */
  .aesthetic-pill .pill-title{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
  .aesthetic-pill .pill-summary{height:auto;min-height:64px;padding-top:10px;padding-bottom:10px}
}

@media (max-width:640px){
  /* Realizacje: „Zobacz stronę” i „Case study” obok siebie mieszczą się na ekranie (zawijają się zamiast wychodzić poza krawędź) */
  .rz-break:has(.rz-case){flex-wrap:wrap;justify-content:center;gap:10px}
  .rz-break:has(.rz-case) .rz-break-line{display:none}
  .rz-break:has(.rz-case) .rz-pill{padding:12px 18px;font-size:13px}
}

@media (max-width:600px){
  #uslugi .ba-around-list{margin-inline:calc(var(--r)*-1.5);padding-inline:calc(var(--r)*1.5);scroll-padding-inline:calc(var(--r)*1.5)}
  #uslugi .ba-map.ba-around-photo{margin-inline:calc(var(--r)*1.5)}
}


@media (max-width:1120px){
  /* Rodzaje stron / Systemy: na telefonie ten sam układ co na komputerze, tylko pod sobą:
     lista rodzajów → ciemny panel z animowaną makietą i „dla kogo / co dostajesz” → liczba dni / statystyka i przycisk.
     Galeria zdjęć z rozwijaną listą (osobna wersja mobilna) jest ukryta. */
  .ba-opt:has(.ba-tp) .ba-mpanel,.ba-opt:has(.ba-tp) .ba-gal{display:none!important}
  .ba-opt:has(.ba-tp) .ba-opt-trigger{display:flex;flex-direction:column;padding:calc(var(--r)*3) 0 calc(var(--r)*3.5)}
  .ba-busopt:has(.ba-tp) .ba-opt-trigger{background:var(--grad)}
  .ba-opt:has(.ba-tp) .ba-reveal-content.ba-opt-content,.ba-opt:has(.ba-tp) .ba-opt-col{display:contents}
  .ba-opt:has(.ba-tp) .ba-opt-listwrap{order:1;padding-inline:calc(var(--r)*2.25);box-sizing:border-box}
  .ba-opt:has(.ba-tp) .ba-opt-image{order:2;position:relative;inset:auto;width:auto;height:auto;aspect-ratio:auto;margin:calc(var(--r)*2) calc(var(--r)*2.25) 0;border-radius:calc(var(--r)*1.5)}
  .ba-opt:has(.ba-tp) .ba-opt-bottom{order:3;padding-inline:calc(var(--r)*2.25);box-sizing:border-box;margin-top:calc(var(--r)*2)}
  .ba-opt-mkicker{margin-bottom:calc(var(--r)*1.25);color:var(--golden)}
  .ba-busopt .ba-opt-mkicker{color:var(--accent)}
  .ba-opt:has(.ba-tp) .ba-li-a,.ba-opt:has(.ba-tp) .ba-li-b{font-size:clamp(27px,7.6vw,44px);white-space:nowrap}
  .ba-opt:has(.ba-tp) .ba-li-a{padding:.32em 0}
  .ba-opt:has(.ba-tp) .ba-li{-webkit-tap-highlight-color:transparent}
  .ba-opt:has(.ba-tp) .ba-list-ind{display:none}
  .ba-opt:has(.ba-tp) .ba-opt-link{margin-top:calc(var(--r)*1)}
  /* panel: pozycje jedna na drugiej w tej samej komórce siatki, więc wysokość = najwyższa pozycja (bez skakania przy zmianie) */
  .ba-opt:has(.ba-tp) .ba-zoom{position:relative;height:auto}
  .ba-opt .ba-tp{display:grid;position:relative;inset:auto;border-radius:inherit;overflow:hidden}
  .ba-opt .ba-tp .tp-i{position:relative;inset:auto;grid-area:1/1;flex-direction:column;align-items:stretch;gap:calc(var(--r)*2);padding:calc(var(--r)*2.5) calc(var(--r)*1.75) calc(var(--r)*2.5)}
  .ba-opt .ba-tp .tp-mini{align-self:center;width:min(52vw,300px)}
  .ba-opt .ba-tp .tp-glow{width:90vw;height:90vw;margin:-45vw 0 0 -45vw}
  .ba-opt .ba-tp .tp-h{font-size:clamp(28px,8vw,44px)}
  .ba-opt .ba-tp .tp-k{font-size:12px}
  .ba-opt .ba-tp .tp-l{font-size:11px;margin-top:calc(var(--r)*1.6)}
  .ba-opt .ba-tp .tp-who span{font-size:13px}
  .ba-opt .ba-tp .tp-get li{font-size:15px}
  /* dół: opisy jeden na drugim (bez absolutnego pozycjonowania), przycisk pod spodem */
  .ba-opt:has(.ba-tp) .ba-opt-bottom{display:grid;min-height:0}
  .ba-opt:has(.ba-tp) .ba-opt-detail{position:relative;top:auto;grid-area:1/1;padding-top:calc(var(--r)*1.5)}
  .ba-opt:has(.ba-tp) .ba-opt-cta{grid-area:2/1;min-height:0;margin-top:calc(var(--r)*1.75);padding-top:calc(var(--r)*1.5);align-items:flex-start}
  .ba-opt:has(.ba-tp) .ba-opt-bottom-units .ba-opt-cta{justify-content:flex-start}
}
@media (max-width:600px){
  .ba-opt:has(.ba-tp) .ba-opt-listwrap,.ba-opt:has(.ba-tp) .ba-opt-bottom{padding-inline:calc(var(--r)*1.5)}
  .ba-opt:has(.ba-tp) .ba-opt-image{margin-inline:calc(var(--r)*1.5)}
}

@media (max-width:1120px){
  /* Systemy dla firm: ten sam kadr co na komputerze — biurko z laptopem, telefonem i tabletem, a karta z nagraniem panelu
     leży na tablecie. Zdjęcie jest wycięte z oryginału (2000×1125, wycinek x 850–1700, y 300–1100) i skalowane do szerokości ekranu,
     więc karta zawsze trafia w to samo miejsce na zdjęciu. Tytuł i opis nad zdjęciem. */
  #firmy{--m:calc(var(--r)*2.25);--fw:calc(100vw - var(--m)*2);--k:calc(var(--fw) / 850);--pb:calc(var(--r)*3.5)}
  #firmy .ba-trigger{min-height:0;background:#16100C;padding:calc(var(--r)*4) 0 calc(var(--k)*800 + var(--pb) + var(--r)*2)}
  #firmy .ba-shade{display:none}
  #firmy .ba-bg{top:auto!important;left:calc(var(--m) - var(--k)*850);bottom:calc(var(--pb) - var(--k)*25);width:calc(var(--k)*2000);height:calc(var(--k)*1125);
    object-fit:fill;transform:none!important;clip-path:inset(calc(var(--k)*300) calc(var(--k)*300) calc(var(--k)*25) calc(var(--k)*850) round calc(var(--r)*1.5))}
  #firmy .ba-bus-wrap,#firmy .ba-bus-row,#firmy .ba-bus-pcol,#firmy .ba-bus-cardcol{position:static}
  #firmy .ba-bus-wrap{gap:calc(var(--r)*1.5)}
  #firmy .ba-bus-h,#firmy .ba-bus-p{position:relative;z-index:1}
  #firmy .ba-bus-h{width:100%}
  #firmy .ba-bus-pcol,#firmy .ba-bus-p{width:100%}
  #firmy .ba-bus-spacer{display:none}
  #firmy .ba-bus-cardcol{width:auto;padding:0}
  #firmy .ba-videowrap-bus{position:absolute;z-index:2;left:calc(var(--m) + var(--k)*351);bottom:calc(var(--pb) + var(--k)*199);width:calc(var(--k)*403)}
}
@media (max-width:600px){
  #firmy{--m:calc(var(--r)*1.5)}
}

@media (max-width:1100px){
  /* Studio (Gdynia): teksty na zdjęciu czytelne na telefonie — mocniejsze przyciemnienie zdjęcia i każdy akapit na ciemnej,
     rozmytej karcie ze złotym obramowaniem (jak karty w reszcie strony) */
  #studio .loc-shade{background:linear-gradient(180deg,rgba(18,13,9,.72),rgba(18,13,9,.5) 45%,rgba(18,13,9,.78))}
  #studio .loc-trust,#studio .loc-paragraph{position:relative;padding:calc(1rem + 2px) 1.15rem 1.05rem 1.35rem;border-radius:18px;
    background:rgba(18,13,9,.58);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
    box-shadow:inset 0 0 0 1px rgba(217,190,134,.22),0 24px 48px -24px rgba(0,0,0,.7);
    color:#F7EFE1;font-size:.97rem;line-height:1.62;text-shadow:none}
  #studio .loc-trust::before,#studio .loc-paragraph::before{content:'';position:absolute;left:0;top:1.15rem;bottom:1.15rem;width:2px;border-radius:2px;background:linear-gradient(#D9BE86,rgba(217,190,134,.15))}
}