/* Telefon i tablet: menu ☰, hero, sekcje. Ładowany po projekt.css i plikach wariantów,
   więc nadpisuje ich ustawienia dla wąskich ekranów. Komputer zostaje bez zmian. */
.menu-przycisk,.menu-mobilne,.porownaj-mobile,.kropki,.lede-krotki,.pasek-mobilny{display:none}

/* 1. menu ☰ (do 920 px, gdy linki do sekcji się nie mieszczą) */
@media (max-width:920px){
  .nav-akcje{gap:10px}
  .menu-przycisk{display:grid;place-content:center;gap:5px;width:44px;height:44px;border:1.5px solid var(--ink);background:transparent;cursor:pointer;padding:0}
  .menu-przycisk span{display:block;width:20px;height:2px;background:var(--ink);transition:transform .2s,opacity .2s}
  .menu-przycisk[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-przycisk[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-przycisk[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .menu-przycisk:focus-visible{outline:3px solid var(--k-akcent);outline-offset:2px}
  .menu-mobilne{display:block;background:var(--k-papier);border-top:1px solid rgba(0,0,0,.08);padding:8px 24px 24px;box-shadow:0 24px 40px -24px rgba(0,0,0,.35)}
  .menu-mobilne[hidden]{display:none}
  .menu-mobilne ul{list-style:none;margin-bottom:18px}
  .menu-mobilne li a{display:block;padding:14px 0;font-size:19px;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.08)}
  .menu-mobilne .btn{display:block;width:100%}
  html:not(.menu-js) .menu-przycisk{display:none}
}
@media (prefers-reduced-motion:reduce){.menu-przycisk span{transition:none}}

/* 2. hero: bony na górze, wyśrodkowany tekst, krótszy opis, przyciski na całą szerokość */
@media (max-width:1000px){
  .scena{order:-1;margin:0 auto 28px}
  .hero-txt{text-align:center;max-width:620px;margin:0 auto}
  .hero .lede{margin-left:auto;margin-right:auto}
  .hero .cta{justify-content:center}
}
@media (max-width:680px){
  .hero-in{padding-top:52px;padding-bottom:44px;gap:0}
  .scena{display:none}
  .hero-kicker{display:none}
  body .hero .hero-txt h1{font-size:clamp(34px,10.4vw,46px);line-height:1.02;text-wrap:balance}
  .lede-pelny{display:none}
  .lede-krotki{display:inline}
  .hero .lede{font-size:18px;margin-top:24px}
  .hero .cta{flex-direction:column;gap:10px;margin-top:30px}
  .hero .cta .btn{width:100%;padding:15px 16px}
  .hero .note{font-size:15.5px}
}

/* 3. pozostałe sekcje na telefonie */
@media (max-width:680px){
  :root{--sekcja-pad:56px}
  .naglowek{margin-bottom:24px}

  /* pasek faktów 2×2 */
  .fakty-in{grid-template-columns:1fr 1fr}
  .hero .fakty li,.fakty li,.fakty li:first-child,.fakty li:nth-child(3){padding:14px 12px 14px 0;border-left:0;border-top:1px solid rgba(0,0,0,.08)}
  .hero .fakty li:nth-child(even){padding-left:14px;border-left:1px solid rgba(0,0,0,.08)}
  .hero .fakty li:nth-child(-n+2){border-top:0}
  .hero .fakty b{font-size:19px}
  .hero .fakty span{font-size:14px;line-height:1.35;display:block}

  /* porównanie: jedna lista, obie strony przy każdym temacie */
  .dwa-bony{display:none}
  .porownaj-mobile{display:block;position:relative;padding:22px 20px 34px;filter:drop-shadow(0 10px 16px rgba(30,24,18,.12))}
  .porownaj-mobile .stamp{position:absolute;right:16px;top:16px;margin:0;font-size:13px}
  .pm{padding:14px 0;border-top:1px dashed rgba(0,0,0,.18)}
  .pm:first-of-type{border-top:0;padding-top:4px}
  .pm h3{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:21px;margin-bottom:6px}
  .pm p{font-size:15.5px;line-height:1.45}
  .pm span{display:block;font-size:13px;font-weight:600;color:var(--soft)}
  .pm-inni{color:var(--soft);margin-bottom:8px}
  .pm-inni s{text-decoration-color:rgba(0,0,0,.4)}
  .pm-my{font-weight:600}

  /* przeniesienie: oś czasu zamiast pięciu wysokich bonów */
  .os-bony{counter-reset:krok;gap:0}
  .os-bony .ticket,.os-bony .ticket:nth-child(n){clip-path:none;background:transparent;filter:none;transform:none;margin:0;padding:0 0 22px 52px;position:relative;counter-increment:krok;color:inherit}
  .os-bony .ticket::before{content:counter(krok);position:absolute;left:0;top:0;width:36px;height:36px;display:grid;place-items:center;background:var(--k-akcent);color:var(--k-akcent-tekst);font-family:'Anton',Impact,sans-serif;font-size:18px}
  .os-bony .ticket::after{content:"";position:absolute;left:17px;top:40px;bottom:4px;width:2px;background:currentColor;opacity:.25}
  .os-bony .ticket:last-child{padding-bottom:0}
  .os-bony .ticket:last-child::after{display:none}
  .os-bony .t-head{display:none}
  .os-bony h3{margin-top:5px}
  .os-bony p:not(.t-head){color:inherit;opacity:.82}

  /* cennik: bony przesuwane palcem, start od Standardu (menu.js) */
  .plans{display:flex;position:relative;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;max-width:none;margin:0 -20px;padding:12px 20px 24px;scrollbar-width:none;align-items:stretch}
  .plans::-webkit-scrollbar{display:none}
  .plans .plan{flex:0 0 84%;scroll-snap-align:center}
  .kropki{display:flex;justify-content:center;gap:8px;margin-top:4px}
  .kropki span{width:9px;height:9px;border:1.5px solid var(--ink)}
  .kropki span.aktywna{background:var(--ink)}
  .common{gap:6px}
  .common li{font-size:14px;padding:4px 10px}

  /* mniej odstępów w kartach i pytaniach */
  .zgloszenia{gap:16px}
  .zgl{padding:0 20px 20px}
  .zgl-bon{margin:0 -20px 16px;padding:14px 20px;min-height:0}
  .faq-bok .btn{display:none}
  .faq summary{padding:15px 46px 15px 16px}

  /* umowa: bez dużego rysunku */
  .dokument{display:none}
}

/* telefon i tablet: hero z paskiem faktów wypełnia cały pierwszy ekran, treść wyśrodkowana w pionie */
@media (max-width:1000px){
  .hero{min-height:calc(100svh - var(--nav-h));display:flex;flex-direction:column}
  .hero-in{flex:1;align-content:center}
}