/* ==========================================================================
   2-strona.pl · strona v3 A · SEKCJE: jak to działa, pytania
   „Jak to działa” stoi na atramencie zaraz pod pierwszym ekranem, pytania na jasnym odcieniu żółtego.
   Klasę .aktywny (krok drogi) i .otwarte (pytanie) dodaje sekcje.js.
   Bez skryptu wszystko stoi w stanie końcowym.
   ========================================================================== */

/* ================= JAK TO DZIAŁA: jedna droga przez cztery kroki ================= */
.jak { overflow: clip; background: var(--atrament); color: var(--biel); }
.droga { position: relative; }
.droga-linia { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.droga-linia path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.droga-tlo { stroke: var(--biel); stroke-width: 3; stroke-dasharray: 1 12; opacity: .5; }
.droga-slad { stroke: var(--pomarancz); stroke-width: 6; }
.droga-kroki { position: relative; display: grid; gap: 18px; }
.krok { display: grid; grid-template-columns: 124px minmax(0, 1fr); align-items: center; gap: 16px; }
.krok:nth-child(even) { grid-template-columns: minmax(0, 1fr) 124px; }
.krok:nth-child(even) .krok-obraz { order: 2; }
.krok-obraz { position: relative; display: grid; place-items: center; width: 124px; height: 156px; }
.krok-obraz::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 124px; height: 124px; margin: -62px 0 0 -62px;
  border-radius: 50%; background: var(--zolty);
  transition: transform .5s var(--sprezyna);
}
.krok:nth-child(2) .krok-obraz::before { background: var(--roz); }
.krok:nth-child(3) .krok-obraz::before { background: var(--kobalt); }
.krok:nth-child(4) .krok-obraz::before { background: var(--pomarancz); }
.krok-tytul { font: 900 clamp(36px, 3.1vw, 45px)/.9 var(--kroj-plakat); text-transform: uppercase; text-wrap: balance; }
.krok-tekst p { margin-top: 6px; font-size: 17px; line-height: 1.4; }

/* mały telefon: te same wymiary na telefonie i na komputerze */
.mini-tel {
  position: relative; width: 82px; height: 150px; padding: 5px; border-radius: 18px; background: var(--atrament);
  box-shadow: 0 0 0 2px var(--biel);
  transform: rotate(-6deg);
  transition: transform .5s var(--sprezyna), opacity .25s ease-out;
}
.krok:nth-child(even) .mini-tel { transform: rotate(6deg); }
.mt-ekran { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 13px; background: var(--biel); }
.mt-blok { position: absolute; left: 8px; right: 8px; border-radius: 4px; background: var(--atrament); transform-origin: 0 50%; }
.mt-blok-a { top: 14px; height: 44px; background: var(--zolty); border-radius: 7px; transform-origin: 50% 100%; }
.mt-blok-b { top: 68px; height: 8px; }
.mt-blok-c { top: 84px; height: 8px; right: 26px; }
.mt-blok-d { top: 106px; height: 20px; border-radius: 10px; background: var(--pomarancz); }
.mt-klodka { position: absolute; left: 50%; top: 22px; display: grid; place-items: center; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%; background: var(--zolty); color: var(--atrament); }
.mt-klodka svg { width: 24px; height: 24px; }
.mt-linia { position: absolute; left: 10px; right: 10px; top: 86px; height: 8px; border-radius: 4px; background: var(--atrament); }
.mt-linia-b { top: 102px; right: 28px; }
/* krok „Wdrażamy stronę”: pasek adresu u góry i przełącznik, który przeskakuje na „włączone” */
.mt-adres { position: absolute; left: 7px; right: 7px; top: 16px; height: 22px; border-radius: 11px; border: 3px solid var(--atrament); }
.mt-adres::before { content: ""; position: absolute; left: 4px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--pomarancz); }
.mt-adres::after { content: ""; position: absolute; left: 19px; right: 6px; top: 5px; height: 6px; border-radius: 3px; background: var(--atrament); }
.mt-przelacznik { position: absolute; left: 50%; top: 56px; width: 52px; height: 30px; margin-left: -26px; border-radius: 15px; background: var(--zolty); border: 3px solid var(--atrament); }
.mt-przelacznik b { position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--atrament); transform: translateX(22px); transition: transform .45s var(--sprezyna) .3s; }
.mt-linia-c { top: 104px; right: 22px; }
.mini-dziala .mt-ekran { background: var(--zolty); }
.mt-ptak { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; background: var(--atrament); color: var(--zolty); }
.mt-ptak svg { width: 28px; height: 28px; }
.krok-naklejka {
  position: absolute; left: 50%; bottom: 0; padding: 7px 12px 6px; border-radius: 10px;
  background: var(--biel); color: var(--atrament); border: 2px solid var(--atrament);
  font: 900 20px/1 var(--kroj-plakat); text-transform: uppercase; white-space: nowrap;
  transform: translateX(-50%) rotate(-5deg);
  transition: transform .5s var(--sprezyna) .12s;
}
.krok-naklejka-kolo { left: auto; right: -6px; bottom: auto; top: 4px; display: grid; place-items: center; width: 66px; height: 66px; padding: 0; border-radius: 50%; transform: rotate(10deg); }

/* przed startem animacji krok czeka przygaszony; skrypt dodaje .aktywny (cała droga kończy się w około sekundę) */
.js.ruch .krok:not(.aktywny) .krok-obraz::before { transform: scale(.3); }
.js.ruch .krok:not(.aktywny) .mini-tel { transform: rotate(0deg) scale(.82); opacity: .35; }
.js.ruch .krok:not(.aktywny) .krok-naklejka { transform: translateX(-50%) rotate(-30deg) scale(0); transition-delay: 0s; }
.js.ruch .krok:not(.aktywny) .krok-naklejka-kolo { transform: rotate(-40deg) scale(0); }
.js.ruch .krok:not(.aktywny) .mt-przelacznik b { transform: translateX(0); transition-delay: 0s; }
.js.ruch .krok .krok-tekst { transition: opacity .25s ease-out, transform .5s var(--sprezyna); }
.js.ruch .krok:not(.aktywny) .krok-tekst { opacity: .35; transform: translateY(8px); }
.krok.aktywny .mt-blok, .krok.aktywny .mt-klodka, .krok.aktywny .mt-ptak, .krok.aktywny .mt-linia, .krok.aktywny .mt-adres { animation: mt-rosnie .4s var(--sprezyna) both; }
.krok.aktywny .mt-blok-b, .krok.aktywny .mt-linia { animation-delay: .1s; }
.krok.aktywny .mt-blok-c, .krok.aktywny .mt-linia-b, .krok.aktywny .mt-linia-c { animation-delay: .18s; }
.krok.aktywny .mt-blok-d { animation-delay: .26s; }
@keyframes mt-rosnie { from { transform: scale(0); } }

@media (min-width: 900px) {
  .droga-kroki { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; padding-bottom: 8px; }
  .krok, .krok:nth-child(even) { grid-template-columns: minmax(0, 1fr); justify-items: start; align-content: start; gap: 16px; }
  .krok:nth-child(even) { margin-top: 56px; }
  .krok:nth-child(even) .krok-obraz { order: 0; }
  .krok-obraz { width: 150px; height: 168px; }
  .krok-obraz::before { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
  .krok-tekst p { font-size: 18px; max-width: 14em; }
}

/* ================= PYTANIA: jasny, ciepły odcień żółtego, atramentowe pismo ================= */
.pytania { background: var(--zolty-jasny); }
.pytania-uklad { display: grid; gap: 4px; }
.akordeon { border-bottom: 2px solid var(--atrament); }
.pyt { border-top: 2px solid var(--atrament); }
.pyt-glowa { font: inherit; }
.pyt-przycisk {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; min-height: 60px; padding: 8px 0; border: 0; background: none; color: inherit; text-align: left;
  font: 700 clamp(18px, 1.45vw, 20px)/1.25 var(--kroj-tekst); letter-spacing: -.01em;
  -webkit-tap-highlight-color: transparent;
}
.pyt-znak {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--biel); box-shadow: inset 0 0 0 2px var(--atrament);
  transition: transform .5s var(--sprezyna), background-color var(--czas) ease-out;
}
.pyt-znak::before, .pyt-znak::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 3px; margin: -1.5px 0 0 -8px; border-radius: 2px; background: var(--atrament);
}
.pyt-znak::after { transform: rotate(90deg); }
.pyt.otwarte .pyt-znak { transform: rotate(135deg); background: var(--zolty); }
.pyt-odp { display: grid; grid-template-rows: 1fr; }
.pyt-odp-srodek { min-height: 0; overflow: hidden; }
.pyt-odp p { max-width: 36em; padding: 2px 0 20px; font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.js .pyt-odp { transition: grid-template-rows .4s var(--wyjscie), visibility 0s linear 0s; }
.js .pyt:not(.otwarte) .pyt-odp { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .32s var(--wyjscie), visibility 0s linear .32s; }
.js .pyt-odp p { transition: transform .4s var(--wyjscie), opacity .28s ease-out; }
.js .pyt:not(.otwarte) .pyt-odp p { transform: translateY(-10px); opacity: 0; }
@media (hover: hover) {
  .pyt-przycisk:hover .pyt-znak { background: var(--zolty); }
}
@media (min-width: 900px) {
  .pytania-uklad { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 40px; align-items: start; }
  .pytania-uklad .sekcja-glowa { position: sticky; top: 120px; margin: 0; }
  .pytania .plakat { font-size: clamp(60px, 6vw, 87px); }
}