/* Projekt 2: nowy układ sekcji na bazie style.css + kolory-*.css.
   Hero opowiada historię (bon → strona), reszta to spokojne, zróżnicowane układy. */

/* nagłówki sekcji: tytuł po lewej, opis po prawej */
.naglowek{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 48px;align-items:end;margin-bottom:40px}
.naglowek h2{margin:0}
.naglowek .sub{margin:0;max-width:30em}
.naglowek-srodek{display:block;text-align:center}
.naglowek-srodek .sub{margin:10px auto 0}

/* hero: tekst + scena (dwa bony na szynie) */
.hero-in{grid-template-columns:minmax(0,1fr) 520px;align-items:center}
.hero-kicker{font-weight:600;font-size:16px;margin-bottom:14px;color:var(--k-hero-tekst-2)}
.scena{position:relative;align-self:start;margin-top:30px}
.scena .rail{margin-right:-400px}

/* pasek faktów */
.fakty{background:var(--k-papier-2);border-bottom:1px solid rgba(0,0,0,.08)}
.fakty-in{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.fakty li{padding:22px 20px;border-left:1px solid rgba(0,0,0,.1)}
.fakty li:first-child{border-left:0;padding-left:0}
.fakty b{display:block;font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:24px;line-height:1.2}
.fakty span{font-size:15px;color:var(--soft)}

/* co możesz zgłosić: trzy równe karty o tej samej budowie */
.zgloszenia{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.zgl{background:#fff;border:1px solid rgba(0,0,0,.09);padding:0 26px 26px;display:flex;flex-direction:column}
.zgl-bon{font-family:'Courier Prime','Courier New',monospace;font-size:15px;background:var(--paper);margin:0 -26px 22px;padding:18px 26px;border-bottom:1px dashed rgba(0,0,0,.25);min-height:calc(3em + 36px);display:flex;align-items:center}
.zgl h3{font-size:22px;margin-bottom:8px}
.zgl p{color:var(--soft);font-size:16.5px}
.zgl .zgl-bon{color:var(--ink)}
.zgl-pakiety{margin-top:auto;padding-top:20px;display:flex;flex-wrap:wrap;gap:6px}
.zgl-pakiety span{font-size:13.5px;font-weight:600;color:var(--k-link);border:1px solid currentColor;padding:2px 10px}
.zgl-dopisek{margin-top:26px;color:var(--soft);font-size:16.5px}
.zgl-dopisek a{font-weight:700;color:var(--k-link)}

/* przeniesienie: oś czasu, bony na jednej szynie */
.os{position:relative;padding-top:6px}
.os-szyna{position:absolute;top:0;left:-24px;right:-24px;margin:0;height:24px}
.os-bony{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;position:relative}
.os-bony .ticket{color:var(--ink);padding:26px 18px 32px;margin-top:10px;filter:drop-shadow(0 14px 16px rgba(0,0,0,.22))}
.os-bony .ticket:nth-child(odd){transform:rotate(-1deg)}
.os-bony .ticket:nth-child(even){transform:rotate(1deg);margin-top:16px}
.os-bony h3{font-size:18px;margin:4px 0 6px}
.os-bony p:not(.t-head){color:var(--soft);font-size:15.5px}
.os-bony .t-head{font-size:14px;color:var(--k-link)}

/* porównanie: dwa bony obok siebie */
.dwa-bony{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.porownaj{padding:30px 30px 36px}
.porownaj h3{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:28px;margin-bottom:12px}
.porownaj dl{display:grid;grid-template-columns:150px 1fr;gap:0}
.porownaj dt,.porownaj dd{padding:12px 0;border-top:1px dashed rgba(0,0,0,.18)}
.porownaj dt{font-weight:600}
.porownaj-inni{background:transparent;border:1.5px dashed rgba(0,0,0,.25);color:var(--soft)}
.porownaj-inni dd{text-decoration:line-through;text-decoration-color:rgba(0,0,0,.35)}
.porownaj-my{position:relative;filter:drop-shadow(0 14px 18px rgba(0,0,0,.14))}
.porownaj-my dd{font-weight:600}
.porownaj-my .stamp{position:absolute;right:24px;top:24px;margin:0}

/* cennik */
.common{justify-content:center}
.toggle-srodek{display:flex;justify-content:center}
.plans{align-items:stretch}
.plan .sum{margin-top:auto}
.cennik-stopka{margin-top:30px;text-align:center;font-size:16.5px;display:grid;gap:6px}
.cennik-stopka a{font-weight:700;color:var(--k-link)}

/* FAQ: bok z nagłówkiem, obok pytania */
.faq-uklad{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.faq-bok{position:sticky;top:96px}
.faq-bok .sub{margin:12px 0 22px}

/* umowa: tekst i dokument ze stemplem */
.cta-band{text-align:left}
.umowa-uklad{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.umowa-txt p{margin-left:0}
.dokument{background:#fff;color:var(--ink);padding:34px 34px 44px;position:relative;transform:rotate(1.5deg);box-shadow:0 30px 50px -28px rgba(0,0,0,.5);max-width:400px;justify-self:center;width:100%}
.dok-tytul{font-weight:600;font-size:18px;margin-bottom:16px}
.dok-pkt{font-weight:600;font-size:15px;margin:16px 0 8px}
.dok-linia{display:block;height:8px;background:#E8E5DF;margin:8px 0}
.dok-linia.krotka{width:60%}
.dok-stempel{position:absolute;right:26px;bottom:30px;font-size:20px;transform:rotate(-10deg);background:rgba(255,255,255,.9)}

@media (max-width:1000px){
  .hero-in{grid-template-columns:1fr}
  .scena{max-width:520px;width:100%;margin:10px auto 0}
  .scena .rail{margin-right:0}
  .zgloszenia{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr;max-width:420px;margin-inline:auto;gap:28px}
  .os-bony{grid-template-columns:1fr 1fr}
  .os-szyna{display:none}
  .fakty-in{grid-template-columns:1fr 1fr}
  .fakty li:nth-child(3){border-left:0;padding-left:0}
  .faq-uklad,.umowa-uklad{grid-template-columns:1fr;gap:32px}
  .faq-bok{position:static}
}
@media (max-width:680px){
  .naglowek{grid-template-columns:1fr;margin-bottom:28px}
  .os-bony,.dwa-bony{grid-template-columns:1fr}
  .os-bony .ticket:nth-child(n){transform:none;margin-top:0}
  .fakty-in{grid-template-columns:1fr}
  .fakty li{border-left:0;padding:14px 0;border-top:1px solid rgba(0,0,0,.1)}
  .fakty li:first-child{border-top:0}
  .porownaj{padding:24px 20px 30px}
  .porownaj dl{grid-template-columns:1fr}
  .porownaj dt{border-top:1px dashed rgba(0,0,0,.18);padding-bottom:2px}
  .porownaj dd{border-top:0;padding-top:0}
}

/* nawigacja: pięć linków nie mieści się na tabletach */
@media (max-width:920px){.links{display:none}}

/* nagłówek hero: trzy linie zamiast pięciu */
.hero-txt h1{font-size:clamp(40px,4.4vw,60px);line-height:1.06}

/* hero na pierwszy ekran: hero (z paskiem faktów na dole) = wysokość okna pod nawigacją */
:root{--nav-h:65px}
.hero{min-height:calc(100svh - var(--nav-h));display:flex;flex-direction:column;padding:0}
.hero-in{flex:1;width:100%;padding-top:clamp(28px,5.5vh,56px);padding-bottom:clamp(32px,6.5vh,64px)}
.hero .fakty{color:var(--ink)}
.hero-txt h1{font-size:clamp(40px,min(4vw,6.6vh),62px)}
.scena{align-self:center;margin-top:0}
.scena .rail-tickets{gap:22px}
.scena .rail-tickets .ticket{width:250px;font-size:16px;padding:28px 22px 36px}
.scena .rail-tickets .ticket:first-child{transform:rotate(-1.4deg)}
.scena .rail-tickets .ticket:last-child{margin-top:0;transform:rotate(1.1deg)}
.scena .t-head{font-size:18px}
@media (max-width:1000px){
  .hero{min-height:0}
  .scena .rail-tickets .ticket:last-child{margin-top:0}
}
@media (max-width:680px){
  .hero-in{padding-top:40px;padding-bottom:56px}
  .scena .rail-tickets .ticket:last-child{margin-top:0}
}

/* hero skalowane z ekranem: treść rośnie razem z oknem, zamiast pływać w pustym polu */
@media (min-width:1001px){
  .wrap{max-width:min(1400px,88vw)}
  .hero-in{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(40px,4vw,80px)}
  .hero-kicker{font-size:clamp(15px,min(1.05vw,1.9vh),20px)}
  body .hero .hero-txt h1{font-size:clamp(44px,min(5vw,7.6vh),84px);line-height:1.02}
  .hero .lede{font-size:clamp(18px,min(1.35vw,2.4vh),25px);max-width:36em}
  .hero .btn{font-size:clamp(16px,min(1.15vw,2vh),21px);padding:.85em 1.35em}
  .hero .note{font-size:clamp(15px,min(1vw,1.8vh),19px)}
  .scena{font-size:clamp(13px,min(1.12vw,2vh),22px)}
  .scena .rail{height:1.9em}
  .scena .rail-tickets{gap:1.3em;margin-top:-.6em}
  .scena .rail-tickets .ticket{width:min(15.6em,calc(50% - .65em));font-size:1em;padding:1.75em 1.2em 2.2em}
  .scena .t-head{font-size:1.12em}
  .scena .stamp{font-size:.95em}
  .hero .fakty b{font-size:clamp(22px,min(1.6vw,2.9vh),32px)}
  .hero .fakty span{font-size:clamp(15px,min(1vw,1.8vh),18px)}
}
@media (max-width:680px){
  .scena{font-size:11.5px}
  .scena .rail-tickets{flex-direction:row;align-items:flex-start;gap:10px;margin-top:-8px}
  .scena .rail-tickets .ticket{width:calc(50% - 5px);font-size:1em;padding:1.6em 1em 2em}
  .scena .stamp{font-size:.9em;padding:2px 6px}
}

/* formularz kontaktowy */
[hidden]{display:none!important}
.kontakt-uklad{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:start}
.kontakt-bok{position:sticky;top:96px}
.kontakt-bok .sub{margin:12px 0 28px}
.kontakt-opis{color:var(--soft);font-size:16.5px;margin:0 0 4px}
.kontakt-opis a{color:var(--k-link);font-weight:600}
.kontakt-bok .tel{text-align:left;margin:0 0 20px}
.formularz{background:#fff;padding:clamp(24px,3vw,40px);border:1px solid #E6E1D6;box-shadow:0 18px 40px -30px rgba(30,24,18,.35)}
.cele{border:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:24px}
.cele legend{font-weight:600;font-size:18px;margin-bottom:12px;grid-column:1/-1}
.cel{position:relative;cursor:pointer}
.cel input{position:absolute;opacity:0;inset:0;cursor:pointer}
.cel span{display:block;height:100%;padding:11px 16px;border:1.5px solid #CFC8BA;font-weight:600;font-size:15.5px;background:#fff;transition:background .15s,border-color .15s}
.cel input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.cel input:focus-visible+span{outline:3px solid var(--k-akcent);outline-offset:2px}
.pola{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.pole{display:flex;flex-direction:column;gap:6px}
.pole-szerokie{grid-column:1/-1}
.pole label{font-weight:600;font-size:15.5px}
.opc{font-weight:400;color:var(--soft)}
.pole input,.pole select,.pole textarea{font:inherit;font-size:17px;color:var(--ink);background:#fff;border:1.5px solid #CFC8BA;padding:11px 13px;width:100%;border-radius:0}
.pole textarea{resize:vertical;min-height:110px}
.pole input[type="file"]{padding:9px 10px;font-size:15.5px}
.pole input:focus,.pole select:focus,.pole textarea:focus{outline:3px solid var(--k-akcent);outline-offset:1px;border-color:var(--ink)}
.pole [aria-invalid="true"]{border-color:#B3122B}
.blad-pola{color:#8F0E22;font-size:14.5px;font-weight:600}
.cele .blad-pola{grid-column:1/-1}
.pulapka{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.cf-turnstile{margin:24px 0 18px;min-height:65px}
.formularz .btn{width:100%;font-family:inherit;font-weight:600;font-size:17px;padding:15px 22px;cursor:pointer}
.formularz .btn:disabled{opacity:.7;cursor:wait}
.form-status:empty{display:none}
.form-status{margin-top:16px;padding:14px 16px;font-weight:600}
.form-status.sukces{background:#E3F1E8;color:#16352B}
.form-status.blad{background:#FBE4E6;color:#8F0E22}
.form-info{margin-top:14px;font-size:14.5px;color:var(--soft)}
.form-info a{color:var(--k-link)}
@media (max-width:1000px){
  .kontakt-uklad{grid-template-columns:1fr}
  .kontakt-bok{position:static}
}
@media (max-width:680px){
  .pola{grid-template-columns:1fr}
  .cel span{padding:9px 12px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){.cel span{transition:none}}

/* przycisk „na górę”: cichy, w stylu przycisku „Zadzwoń”; pojawia się po zjechaniu poniżej hero */
.do-gory{position:fixed;right:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,32px);z-index:20;width:52px;height:52px;display:grid;place-items:center;background:var(--ink);color:#FBF8F2;box-shadow:0 10px 24px -12px rgba(0,0,0,.55);transition:opacity .25s,transform .25s,background .2s,visibility .25s}
.do-gory:hover{background:var(--k-akcent);color:var(--k-akcent-tekst)}
.do-gory:focus-visible{outline:3px solid var(--k-akcent);outline-offset:3px}
.do-gory.ukryty{opacity:0;visibility:hidden;transform:translateY(12px)}
@media (max-width:680px){.do-gory{width:46px;height:46px}}
@media (prefers-reduced-motion:reduce){.do-gory{transition:none}}

/* nawigacja: „Kontakt” obok „Zadzwoń”, gdy linki do sekcji są schowane (tablet, telefon) */
.nav-akcje{display:flex;align-items:center;gap:18px}
.nav-kontakt{display:none;font-weight:600;font-size:16px;text-decoration:none}
.nav-kontakt:hover{text-decoration:underline}
@media (max-width:1100px){.links{gap:20px;font-size:15.5px}}
@media (max-width:920px){.nav-kontakt{display:inline}}

/* przycisk „Sprawdźcie moją umowę” na środku sekcji (główna akcja strony) */
.cta-srodek{display:flex;justify-content:center;margin-top:clamp(36px,4vw,56px)}
.cta-srodek .btn{font-size:17px;padding:15px 28px}

/* przewijanie do sekcji: nagłówek ląduje tuż pod paskiem menu, a kolorowa sekcja z umową w całości pod nim */
:root{--sekcja-pad:88px}
html{scroll-padding-top:0}
section[id]{scroll-margin-top:calc(var(--nav-h) + 24px - var(--sekcja-pad))}
#umowa{scroll-margin-top:var(--nav-h)}
#start{scroll-margin-top:100vh} /* hero jest na samej górze: duży margines zawsze daje przewinięcie do 0 */
@media (max-width:680px){.cta-srodek .btn{width:100%;font-size:16.5px;padding:15px 16px}}
@media (min-width:1001px) and (max-height:740px){.hero-in{padding-top:24px;padding-bottom:28px}}