/* TELEFON (13.10.2026) - dopasowanie strony głównej i Jan Agency do smartfonów.
   Jan: ~80% ruchu to telefony. Wersja na komputer bez zmian - wszystko tylko poniżej 640px.
   1) Karty w rzędzie (.swipe) przewija się palcem w bok, jak karuzelę na Instagramie;
      następna karta wystaje, kropki pod spodem mówią, ile ich jest.
   2) FAQ zwija się do samych pytań (telefon.js).
   3) Zdjęcia portretowe niższe, żeby nie zajmowały całego ekranu. */
@media(max-width:640px){
  .swipe{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;grid-template-columns:none!important;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;gap:12px!important;margin-left:-22px!important;margin-right:-22px!important;
    padding:4px 22px 6px!important;scroll-padding:0 22px;scrollbar-width:none;border:none!important;background:none!important;box-shadow:none!important}
  .swipe::-webkit-scrollbar{display:none}
  .swipe > *{flex:0 0 84%;min-width:0;scroll-snap-align:start;border-right:1px solid var(--line)!important}
  .swipe.waska > *{flex-basis:72%}
  .swipe .reveal{opacity:1;transform:none}
  .kropki-sw{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:12px}
  .kropki-sw b{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .2s,width .2s}
  .kropki-sw b.on{background:var(--navy);width:20px;border-radius:4px}
  .kropki-sw.jasne b{background:rgba(255,255,255,.3)}
  .kropki-sw.jasne b.on{background:#fff}
  .przesun{display:block;font-family:var(--mono,ui-monospace,monospace);font-size:.74rem;color:var(--muted);margin:18px 0 -4px;letter-spacing:.04em}
  .przesun.jasny{color:rgba(255,255,255,.6)}

  /* karty w przewijaniu: równa wysokość, bez pustych dziur */
  .swipe.prob-grid .prob,.swipe .filar,.swipe .mk,.swipe .tst,.swipe .feature{height:auto}
  /* agenci w mojej firmie: siatka 2x3, krótko */
  .agenci-grid{grid-template-columns:1fr 1fr!important}
  .agenci-grid > div{padding:14px 14px!important;border-right:1px solid var(--line-soft)!important}
  .agenci-grid > div:nth-child(2n){border-right:none!important}
  .agenci-grid b{font-size:.95rem}
  .agenci-grid p{font-size:.84rem}

  /* kroki kursu: 6 kroków w przewijaniu */
  #sciezki .steps.swipe > div{background:var(--card);border:1px solid var(--line)!important;padding:20px 18px}

  /* FAQ: same pytania, odpowiedź po dotknięciu */
  .faq.zwijane .faq-item{padding:0}
  .faq.zwijane .faq-item h3{margin:0;padding:18px 48px 18px 20px;position:relative;cursor:pointer;font-size:1rem;-webkit-tap-highlight-color:transparent}
  .faq.zwijane .faq-item h3::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:400;color:var(--navy);transition:transform .2s}
  .faq.zwijane .faq-item.open h3::after{transform:translateY(-50%) rotate(45deg)}
  .faq.zwijane .faq-item > :not(h3){display:none}
  .faq.zwijane .faq-item.open > :not(h3){display:block;padding:0 20px;margin-bottom:12px}
  .faq.zwijane .faq-item.open > :last-child{padding-bottom:8px}

  /* zdjęcia: niższe, twarz w kadrze */
  .about .portrait{aspect-ratio:4/4!important}
  .kto-photo{aspect-ratio:4/4}

  /* łatwiejsze trafienie palcem w telefon i mail */
  a[href^="tel:"],a[href^="mailto:"]{display:inline-block;padding:9px 0}
}