/* =============================================================
   Telefon — ładowany ostatni, nadpisuje tylko to, co na wąskim
   ekranie się rozjeżdżało albo robiło stronę niepotrzebnie długą.
   Listy kart (pakiety, wydarzenia, karnety) przewijane w bok
   zamiast w dół: strona skraca się o kilka ekranów.
   ============================================================= */
@media (max-width: 760px) {
  /* HERO: tekst na środku zdjęcia, bez wystawania za ekran. */
  .hero { padding: .5rem .5rem 2rem; }
  .hb { padding: 3.5rem 0 1.2rem; border-radius: 28px; place-items: center; text-align: center; }
  .hb::after { background: linear-gradient(180deg, rgba(20,30,60,.55) 0%, rgba(20,30,60,.35) 55%, rgba(20,30,60,.6) 100%); }
  .hb__foto { object-position: 72% 40%; }
  .hb__tresc { padding: 0 1.2rem 1.5rem; max-width: 100%; }
  .hero .hb__h1 { font-size: clamp(2.6rem, 12vw, 3.4rem); }
  .hb__lead { margin: 1rem auto 1.5rem; font-size: 1.05rem; }
  .hb__cta { flex-direction: column; justify-content: center; gap: .9rem; }
  .hb__cta .btn { width: 100%; }
  /* Karta zapisu w hero znika — na telefonie robi to popup, a dwa formularze
     jeden pod drugim tylko wydłużały pierwszy ekran. */
  .hb__karta { display: none; }
  .hb__fala { display: none; }
  .hb__fakty { position: static; transform: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; padding: 0 .7rem; margin: 0; width: 100%; }
  .fakt { min-width: 0; padding: .7rem .4rem; text-align: center; border-radius: 16px; }
  .fakt b { font-size: 1.1rem; }
  .fakt span { font-size: .68rem; line-height: 1.2; display: block; }
  /* Skróty 2×2 zamiast czterech pasków na całą szerokość. */
  .skroty { grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .8rem; }
  .skrot { flex-direction: column; align-items: flex-start; gap: .6rem; padding: 1rem; font-size: 1rem; line-height: 1.15; min-height: 118px; }
  .skrot i { position: absolute; right: 1rem; top: 1rem; margin: 0; }
  .skrot { position: relative; }

  /* Nagłówki sekcji */
  .strefy, .urodziny, .wydarzenia, .bilety { padding-left: .5rem; padding-right: .5rem; }
  .strefy { padding-top: 2.5rem; }
  .strefy__glowa, .wydarzenia__glowa { padding: 0 .8rem 1.6rem; }
  .strefy h2, .wydarzenia h2, .bilety h2 { font-size: clamp(2.2rem, 10vw, 2.8rem); }
  .urodziny h2 { font-size: clamp(2rem, 9vw, 2.6rem); }

  /* STREFY: niższe zdjęcia, mniejsze odstępy. */
  .strefa__foto, .strefa--pom .strefa__foto { min-height: 210px; }
  .strefa h3, .strefa--pom h3 { font-size: 1.6rem; }
  .strefa__nr { font-size: 2rem; }

  /* Wspólne: przewijanie w bok ze „zaglądaniem” kolejnej karty. */
  .ur__pakiety, .wydarzenia__siatka, .karnety {
    display: grid; grid-auto-flow: column; grid-auto-columns: 80%; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    gap: .8rem; padding: 1.4rem 1.2rem 1rem; margin: 0 -1.2rem; scroll-padding: 0 1.2rem;
  }
  .ur__pakiety::-webkit-scrollbar, .wydarzenia__siatka::-webkit-scrollbar, .karnety::-webkit-scrollbar { display: none; }
  .ur__pakiety > *, .wydarzenia__siatka > *, .karnety > * { scroll-snap-align: start; }

  /* URODZINY */
  .ur { padding: 0 .8rem; }
  .ur__okazje li { font-size: .9rem; padding: .35rem .85rem; }
  .ur__cta { flex-direction: column; }
  .pakiet--hit, .pakiet--hit:hover { transform: none; }

  /* WYDARZENIA */
  .wydarzenia__glowa { align-items: flex-start; }
  .wydarzenia__siatka { margin: 0 -.5rem; padding-inline: .5rem; scroll-padding: 0 .5rem; padding-top: .4rem; }
  .wyd { padding: 1.5rem; }
  .wyd__ik { width: 60px; height: 60px; margin-bottom: 1.1rem; }
  .wyd__ik svg { width: 32px; }

  /* CENNIK */
  .bil { padding: 2rem 1.2rem; border-radius: 28px; }
  .bilet { padding: 1.6rem 1.4rem; }
  .bilet__osz { padding-top: 2.6rem; }
  .bilet .btn { width: 100%; }
  .karnety { padding-top: 1.6rem; }

  /* STOPKA */
  .stopka { padding: 1rem .5rem 1.2rem; }
  .stopka__karta { padding: 1.6rem .8rem 1rem; gap: 1.4rem; }
  .stopka__kol, .stopka__kol--2 ul { grid-template-columns: 1fr 1fr; gap: 1rem .8rem; }
  .stopka__kol a { font-size: .98rem; }
  .stopka__foto { min-height: 200px; }
  .stopka__dol { align-items: center; text-align: center; }
  .stopka__prawne { justify-content: center; gap: .6rem 1.2rem; }
}

/* MENU — biały panel zjeżdżający z góry, w stylu strony: duże zaokrąglone
   litery, kolor dopiero przy najechaniu, malowane plamy w rogach. */
.szuflada { position: fixed; inset: 0; z-index: 90; }
.szuflada[hidden] { display: none; }
.szuflada__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: max(35%, 400px); overflow: hidden auto; isolation: isolate;
  display: flex; flex-direction: column;
  background: #fff; padding: 1.1rem clamp(1.4rem, 2.5vw, 2.6rem) 1.6rem;
  border-radius: 32px 0 0 32px; box-shadow: -20px 0 60px rgba(30,35,64,.18);
  transform: translateX(100%); transition: transform .5s cubic-bezier(.22,1,.36,1); will-change: transform;
}
.szuflada--on .szuflada__panel { transform: none; }
.szuflada__tlo { position: absolute; inset: 0; background: rgba(30,35,64,.5); opacity: 0; transition: opacity .35s; }
.szuflada--on .szuflada__tlo { opacity: 1; }
@media (max-width: 760px) { .szuflada__panel { width: 88%; border-radius: 28px 0 0 28px; } }
.szuflada__plama { position: absolute; z-index: -1; border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%; }
.szuflada__plama--1 { width: 340px; height: 340px; right: -140px; bottom: 60px; background: var(--zol); opacity: .35; }
.szuflada__plama--2 { width: 220px; height: 220px; left: -110px; top: 38%; background: var(--tur); opacity: .18; }
.szuflada__gora { display: flex; align-items: center; justify-content: space-between; }
.szuflada__gora .logo { font-size: 1.55rem; }
.szuflada__x { width: 48px; height: 48px; border-radius: 50%; background: var(--roz); color: #fff; font-size: 1.9rem; line-height: 1; box-shadow: 0 5px 0 #D8306F; transition: transform .3s var(--ease); }
.szuflada__x:hover { transform: rotate(90deg); }
.szuflada__linki { list-style: none; padding: 0; margin: clamp(2rem, 6vh, 4rem) 0 2rem; display: grid; gap: .3rem; }
.szuflada__linki a {
  position: relative; display: inline-block; font-family: var(--font-naglowek); font-weight: 800;
  font-size: clamp(1.9rem, 2.4vw, 2.8rem); line-height: 1.15; color: var(--tusz);
  opacity: 0; transform: translateY(24px); transition: opacity .4s, transform .5s var(--ease), color .2s;
}
/* Malowany pasek pod słowem w kolorze danej sekcji. */
.szuflada__linki a::after { content: ''; position: absolute; left: -.1em; right: -.1em; bottom: .12em; height: .32em; z-index: -1;
  background: var(--k); opacity: .35; border-radius: 999px; transform: scaleX(0); transform-origin: right; transition: transform .35s cubic-bezier(.22,1,.36,1); }
/* Pasek rysuje się od lewej, a przy zjechaniu odjeżdża dalej w prawo
   (punkt zaczepienia zmienia stronę) — nie cofa się w lewo. */
.szuflada__linki a:hover, .szuflada__linki a:focus-visible { color: var(--k); }
.szuflada__linki a:hover::after, .szuflada__linki a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.szuflada--on .szuflada__linki a { opacity: 1; transform: none; }
.szuflada--on .szuflada__linki li:nth-child(1) a { transition-delay: .2s; }
.szuflada--on .szuflada__linki li:nth-child(2) a { transition-delay: .26s; }
.szuflada--on .szuflada__linki li:nth-child(3) a { transition-delay: .32s; }
.szuflada--on .szuflada__linki li:nth-child(4) a { transition-delay: .38s; }
.szuflada__drugie { display: flex; flex-wrap: wrap; gap: .5rem; }
.szuflada__drugie a { padding: .45rem 1rem; border-radius: 999px; background: #F2F4F9; font-family: var(--font-naglowek); font-weight: 700; transition: background .2s, color .2s; }
.szuflada__drugie a:hover { background: var(--tusz); color: #fff; }
.szuflada__cta { width: 100%; margin-top: auto; }
.szuflada__dol { display: flex; justify-content: center; margin-top: 1.2rem; }

@media (max-width: 760px) { .szuflada__linki a { font-size: clamp(1.8rem, 8vw, 2.4rem); } }

/* Przełącznik języka: pigułka z dwoma polami, aktywny język na białym
   „suwaku” z cieniem — w stylu przycisków strony. */
.jezyk {
  display: inline-flex; align-items: center; gap: 0; padding: 4px;
  border-radius: 999px; background: #EEF1F7;
  font-family: var(--font-naglowek); font-weight: 800; font-size: .92rem; line-height: 1;
}
.jezyk > * { display: grid; place-items: center; min-width: 40px; height: 32px; padding: 0 .7rem; border-radius: 999px; }
.jezyk a { color: var(--tusz-2); transition: color .2s, background .2s; }
.jezyk a:hover { color: var(--tusz); background: rgba(255,255,255,.6); }
.jezyk__akt { background: #fff; color: var(--pom-2); box-shadow: 0 2px 0 rgba(30,35,64,.12), 0 4px 12px rgba(30,35,64,.08); }
.jezyk--szuflada { display: inline-flex !important; font-size: 1rem; }
.jezyk--szuflada > * { min-width: 52px; height: 38px; }

/* Kafelki stref w menu — wypełniają pustą środkową część panelu
   i od razu pokazują, co jest w środku. */
.szuflada__strefy { margin: 1.6rem 0 1.4rem; }
.szuflada__tyt { font-family: var(--font-naglowek); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: var(--pom-2); margin-bottom: .7rem; }
.szuflada__kafle { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.mkaf { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; isolation: isolate;
  opacity: 0; transform: translateY(16px); transition: opacity .4s, transform .5s cubic-bezier(.22,1,.36,1); }
.szuflada--on .mkaf { opacity: 1; transform: none; }
.szuflada--on .mkaf:nth-child(1) { transition-delay: .4s; } .szuflada--on .mkaf:nth-child(2) { transition-delay: .45s; }
.szuflada--on .mkaf:nth-child(3) { transition-delay: .5s; } .szuflada--on .mkaf:nth-child(4) { transition-delay: .55s; }
.mkaf img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.mkaf::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, rgba(20,25,50,.75)); }
.mkaf span { position: absolute; left: .8rem; right: .8rem; bottom: .6rem; color: #fff; font-family: var(--font-naglowek); font-weight: 800; font-size: 1rem; line-height: 1.1; }
.mkaf:hover img { transform: scale(1.08); }
.mkaf:nth-child(4) img { object-position: 50% 30%; }
@media (max-height: 760px) { .szuflada__strefy { display: none; } }

/* Nagłówek na telefonie: logo · PL/EN · Menu — przycisk Menu przy samej
   prawej krawędzi, pod kciukiem. Mniejsze odstępy, żeby wszystko weszło w 360 px. */
@media (max-width: 760px) {
  .szapka__in { gap: .6rem; padding: .75rem 1rem; }
  .szapka .jezyk { display: inline-flex; order: 2; font-size: .82rem; }
  .szapka .jezyk > * { min-width: 34px; height: 30px; padding: 0 .5rem; }
  .szapka__menu { order: 3; padding: .6rem 1.1rem; }
}

/* Strefy na telefonie: przewijane w bok jak pakiety i karnety — sześć kart
   jedna pod drugą to było prawie 3000 px przewijania. Równa wysokość kart. */
@media (max-width: 640px) {
  .strefy__siatka {
    display: grid; grid-template-areas: none; grid-template-columns: none;
    grid-auto-flow: column; grid-auto-columns: 82%; gap: .7rem;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding: .2rem .5rem 1rem; margin: 0 -.5rem; scroll-padding: 0 .5rem;
  }
  .strefy__siatka::-webkit-scrollbar { display: none; }
  .strefy__siatka > * { grid-area: auto; scroll-snap-align: start; }
  .strefa:hover { transform: none; }
  .strefa__foto, .strefa--pom .strefa__foto, .strefa--tur .strefa__foto { flex: none; height: 200px; min-height: 0; }
  .strefa__tresc { flex: 1; }
  .strefa p { font-size: .95rem; }
  .strefa--wiecej { justify-content: center; }
}

/* Pakiety urodzinowe na telefonie: cień przycinał się na dole przewijanego
   paska i wyglądał jak szara smuga. Zamiast cienia — cienka ramka. */
@media (max-width: 760px) {
  .pakiet, .pakiet--hit { box-shadow: none; border: 1.5px solid #E8EBF2; border-top: 10px solid var(--kol); }
}

/* Animacje i wydarzenia na telefonie: nagłówek wyśrodkowany, karty jedna
   pod drugą (bez przewijania w bok) — każda to osobna oferta, warto je widzieć. */
@media (max-width: 760px) {
  .wydarzenia__glowa { flex-direction: column; align-items: center; text-align: center; }
  .wydarzenia__siatka { display: grid; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; overflow: visible; scroll-snap-type: none; margin: 0; padding: 0; gap: .7rem; }
  .wyd { padding: 1.3rem 1.3rem 1.2rem; }
  .wyd p { margin-bottom: 1.1rem; }
}

/* Karuzele na telefonie: pasek przewijania sięga od krawędzi do krawędzi
   ekranu (wcześniej kończył się na marginesie sekcji i sąsiednie karty były
   ucinane białym pasem). Karta = 80vw, boczny padding 10vw — każda karta,
   łącznie ze skrajnymi, staje dokładnie pośrodku, a sąsiednie wystają
   symetrycznie aż do krawędzi ekranu. */
@media (max-width: 760px) {
  .karnety, .ur__pakiety, .strefy__siatka {
    grid-auto-columns: 80vw; gap: 3vw;
    margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    padding-left: 10vw; padding-right: 10vw; scroll-padding: 0;
  }
  .karnety > *, .ur__pakiety > *, .strefy__siatka > * { scroll-snap-align: center; }
  /* Cennik leży w niebieskim zaokrąglonym bloku — tam pasek kończy się na jego krawędzi. */
  .bil { overflow: hidden; }
}

/* „Masz inne pytanie? Napisz do nas” pod FAQ — na telefonie wyśrodkowane. */
@media (max-width: 760px) {
  .faq__kontakt { justify-content: center; text-align: center; }
}

/* Tylko na telefonie: bez dopisku o cenach przykładowych i bez myślnika
   w „Kup online — zapłacisz mniej” (na komputerze zostają). */
@media (max-width: 760px) {
  .bil__przyp, .bilety h2 .myslnik { display: none; }
}

/* Menu na telefonie: zamiast wysuwania z boku — popup na cały ekran,
   który pojawia się w miejscu (przenikanie + lekkie powiększenie) i jest
   statyczny: bez przewijania, wszystko mieści się na jednym ekranie. */
@media (max-width: 760px) {
  .szuflada__panel {
    inset: 0; width: 100%; border-radius: 0; box-shadow: none;
    overflow: hidden; padding: .9rem 1.2rem calc(1rem + env(safe-area-inset-bottom));
    transform: scale(.97); opacity: 0;
    transition: opacity .25s ease, transform .35s cubic-bezier(.22,1,.36,1);
  }
  .szuflada--on .szuflada__panel { transform: none; opacity: 1; }
  .szuflada__tlo { display: none; }
  .szuflada__linki { margin: 1.4rem 0 1.1rem; gap: .1rem; }
  .szuflada__linki a { font-size: clamp(1.7rem, 7.5vw, 2.2rem); }
  .szuflada__drugie { gap: .4rem; }
  .szuflada__drugie a { padding: .4rem .85rem; font-size: .92rem; }
  .szuflada__strefy { margin: 1.1rem 0 1rem; }
  .szuflada__kafle { gap: .45rem; }
  .mkaf { aspect-ratio: 2 / 1; border-radius: 14px; }
  .mkaf span { font-size: .9rem; left: .6rem; bottom: .45rem; }
  .szuflada__dol { margin-top: .8rem; }
}
/* Niski telefon: kafle stref zostają, ale chowamy drugi rząd linków,
   żeby menu dalej mieściło się bez przewijania. */
@media (max-width: 760px) and (max-height: 700px) {
  .szuflada__drugie { display: none; }
  .szuflada__strefy { display: block; }
}
@media (max-width: 760px) and (max-height: 580px) { .szuflada__strefy { display: none; } }
@media (max-width: 760px) and (min-height: 581px) { .szuflada__strefy { display: block; } }

/* Bilet na telefonie: „online 39 zł” i „w kasie 45 zł” w jednym rzędzie,
   bez łamania kwoty; więcej miejsca pod cenami, żeby przerywana linia
   biletu nie przecinała ceny. */
@media (max-width: 760px) {
  .bilet__ceny { flex-wrap: nowrap; align-items: flex-end; gap: 1.2rem; }
  .bilet__online, .bilet__kasa, .bilet__kasa s { white-space: nowrap; }
  .bilet__online b { font-size: 4rem; }
  .bilet__kasa { font-size: 1.4rem; }
  .bilet__osz { padding-top: 4.2rem; }
}

/* Karnety na telefonie: cena i przeliczenie („199 zł · ok. 46 zł / tydzień”)
   w jednym rzędzie, jak na bilecie obok. */
@media (max-width: 760px) {
  .karnet { display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-content: start; }
  .karnet > :not(.karnet__cena):not(.karnet__mies) { grid-column: 1 / -1; }
  .karnet__cena { white-space: nowrap; }
  .karnet__mies { align-self: end; margin: 0 0 .35rem; line-height: 1.2; }
  .karnet ul { margin-top: 1rem; }
  .karnet .btn { align-self: end; }
}

/* Stopka na telefonie — krócej: bez zdjęcia, linki gęściej w dwóch
   kolumnach, mniejsza karta klubu i ciaśniejszy dolny pasek. */
@media (max-width: 760px) {
  .stopka { padding: .6rem .5rem 1rem; }
  .stopka__karta { padding: 1.2rem .8rem .6rem; gap: 1rem; }
  .stopka__foto { display: none; }
  .stopka__kol, .stopka__kol--2 ul { gap: .55rem .8rem; }
  .stopka__kol a { font-size: .92rem; gap: .5rem; }
  .stopka__kol svg { width: 18px; }
  .stopka__kol--2 { gap: 1rem; padding-top: 1rem; }
  .stopka__klub { padding: 1rem 1.1rem; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: .8rem; }
  .stopka__klub-t { font-size: 1.1rem; margin: 0; grid-column: 1; }
  .stopka__klub p:not(.stopka__klub-t) { display: none; }
  .stopka__klub-btn { margin: 0; grid-column: 2; grid-row: 1; padding: .5rem 1rem; font-size: .8rem; }
  .stopka__dol { margin-top: .6rem; padding-top: 1rem; gap: .7rem; }
  .stopka__soc a { width: 36px; height: 36px; }
  .stopka__prawne { gap: .3rem 1rem; }
  .stopka__prawne a, .stopka__copy { font-size: .85rem; }
  .stopka__firma { font-size: .72rem; margin-top: .7rem; }
  .autor { margin-top: .7rem; }
}

/* Telefon: social media i „Made by Jawor” obok siebie, wyśrodkowane. */
@media (max-width: 760px) { .stopka__lewa { justify-content: center; gap: .8rem 1rem; } }

/* Telefon: karuzele sięgają do krawędzi przez 100vw — przy pasku przewijania
   (np. Android z widocznym paskiem) dawało to kilka px poziomego przewijania. */
@media (max-width: 760px) {
  html { overflow-x: clip; }
  /* body też „clip”, nie „hidden”: hidden robiło z body osobny obszar przewijania
     i przyklejony nagłówek (.szapka, sticky) przestawał jechać razem ze stroną. */
  @supports (overflow: clip) { body { overflow-x: clip; } }
  .fakt span { font-size: .74rem; }
}